fix: trend evidence shows document titles instead of truncated UUIDs

- EvidenceRef component now fetches document details via useDocument()
  hook and displays the title instead of 'doc:43156423…'
- TanStack Query deduplicates and caches lookups for repeated doc IDs
- Pattern IDs still render as before (e.g. 'pattern META other (1d)')
- Override Trade button changed from brand-600 to red-600

frontend/src/pages/Trading.tsx

@@ -82,7 +82,7 @@ export function TradingPage() {
           <Link
             to="/trading/engine"
             search={{ tab: 'override' }}
-            className="rounded-md bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700"
+            className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700"
             data-testid="override-trade-button"
           >
             Override Trade

frontend/src/pages/Trends.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useNavigate, Link } from '@tanstack/react-router';
-import { useTrends } from '../api/hooks';
+import { useTrends, useDocument } from '../api/hooks';
 import { TrendArrow, ConfidenceBar, LoadingSpinner, TickerFilter, Card } from '../components/ui';
 import type { TrendSummary } from '../api/hooks';
 
@@ -120,6 +120,8 @@ const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/
 function EvidenceRef({ id, direction }: { id: string; direction: 'supporting' | 'opposing' }) {
   const sign = direction === 'supporting' ? '+' : '−';
   const color = direction === 'supporting' ? 'text-green-400' : 'text-red-400';
+  const isUuid = UUID_RE.test(id);
+  const { data: doc } = useDocument(isUuid ? id : undefined);
 
   // Pattern IDs like "pattern:META:other:1d" are already readable
   if (id.startsWith('pattern:')) {
@@ -134,18 +136,19 @@ function EvidenceRef({ id, direction }: { id: string; direction: 'supporting' |
     );
   }
 
-  // UUIDs — show as short clickable links to the document
-  if (UUID_RE.test(id)) {
+  // UUIDs — show document title if available, otherwise short ID
+  if (isUuid) {
+    const label = doc?.title ?? `doc:${id.slice(0, 8)}…`;
     return (
       <div className={`truncate ${color}`}>
         {sign}{' '}
         <Link
           to="/documents/$id"
           params={{ id }}
-          className="font-mono hover:underline"
+          className="hover:underline"
           onClick={(e) => e.stopPropagation()}
         >
-          doc:{id.slice(0, 8)}…
+          {label}
         </Link>
       </div>
     );