From bb3060c3b795d696a52d02db9ea1d2c33af5a7a1 Mon Sep 17 00:00:00 2001
From: Celes Renata <celes@frameshift.net>
Date: Fri, 17 Apr 2026 05:29:00 +0000
Subject: [PATCH] fix: render trend evidence as readable labels instead of raw
 UUIDs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Pattern IDs (pattern:META:other:1d) shown as 'pattern META other (1d)'
- Document UUIDs shown as clickable 'doc:43156423…' links to document detail
- Unknown formats shown truncated as fallback
---
 frontend/src/pages/Trends.tsx | 46 ++++++++++++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/Trends.tsx b/frontend/src/pages/Trends.tsx
index 178ae76..b6a46f7 100644
--- a/frontend/src/pages/Trends.tsx
+++ b/frontend/src/pages/Trends.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useNavigate } from '@tanstack/react-router';
+import { useNavigate, Link } from '@tanstack/react-router';
 import { useTrends } from '../api/hooks';
 import { TrendArrow, ConfidenceBar, LoadingSpinner, TickerFilter, Card } from '../components/ui';
 import type { TrendSummary } from '../api/hooks';
@@ -104,13 +104,53 @@ function TrendCard({ trend, onClick }: { trend: TrendSummary; onClick: () => voi
       {expanded && (
         <div className="mt-2 space-y-1 text-xs">
           {trend.top_supporting_evidence?.map((e, i) => (
-            <div key={i} className="truncate text-green-400">+ {e}</div>
+            <EvidenceRef key={i} id={e} direction="supporting" />
           ))}
           {trend.top_opposing_evidence?.map((e, i) => (
-            <div key={i} className="truncate text-red-400">− {e}</div>
+            <EvidenceRef key={i} id={e} direction="opposing" />
           ))}
         </div>
       )}
     </Card>
   );
 }
+
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+function EvidenceRef({ id, direction }: { id: string; direction: 'supporting' | 'opposing' }) {
+  const sign = direction === 'supporting' ? '+' : '−';
+  const color = direction === 'supporting' ? 'text-green-400' : 'text-red-400';
+
+  // Pattern IDs like "pattern:META:other:1d" are already readable
+  if (id.startsWith('pattern:')) {
+    const parts = id.split(':');
+    const label = parts.length >= 4
+      ? `${parts[1]} ${parts[2]} (${parts[3]})`
+      : id.replace('pattern:', '');
+    return (
+      <div className={`truncate ${color}`}>
+        {sign} <span className="rounded bg-surface-800 px-1 py-0.5 text-[10px]">pattern</span> {label}
+      </div>
+    );
+  }
+
+  // UUIDs — show as short clickable links to the document
+  if (UUID_RE.test(id)) {
+    return (
+      <div className={`truncate ${color}`}>
+        {sign}{' '}
+        <Link
+          to="/documents/$id"
+          params={{ id }}
+          className="font-mono hover:underline"
+          onClick={(e) => e.stopPropagation()}
+        >
+          doc:{id.slice(0, 8)}…
+        </Link>
+      </div>
+    );
+  }
+
+  // Fallback — show as-is but truncated
+  return <div className={`truncate ${color}`}>{sign} {id}</div>;
+}