From f159b20c87e599ae67b47d6cb43049e3fd1fe54a Mon Sep 17 00:00:00 2001
From: Celes Renata <celes@frameshift.net>
Date: Wed, 29 Apr 2026 17:29:26 +0000
Subject: [PATCH] feat: show document title and link in competitive signals
 panel

Replace raw UUID with a linked document title in both the collapsed
row (using the empty space on the right) and the expanded detail view.
Uses useDocument hook to fetch the title, falls back to truncated UUID
while loading. Clicking the link navigates to the document detail page.
---
 frontend/src/pages/CompanyDetail.tsx | 142 ++++++++++++++++-----------
 1 file changed, 85 insertions(+), 57 deletions(-)

diff --git a/frontend/src/pages/CompanyDetail.tsx b/frontend/src/pages/CompanyDetail.tsx
index d00059d..70ce5c6 100644
--- a/frontend/src/pages/CompanyDetail.tsx
+++ b/frontend/src/pages/CompanyDetail.tsx
@@ -1,4 +1,4 @@
-import { useParams, useNavigate } from '@tanstack/react-router';
+import { useParams, useNavigate, Link } from '@tanstack/react-router';
 import { useState } from 'react';
 import {
   useCompany,
@@ -14,6 +14,7 @@ import {
   useTrends,
   useTrendHistory,
   useMarketPrices,
+  useDocument,
 } from '../api/hooks';
 import { StatusBadge, ConfidenceBar, LoadingSpinner, Card } from '../components/ui';
 import { DataTable, type Column } from '../components/DataTable';
@@ -444,62 +445,7 @@ function CompetitiveSignalsPanel({ signals }: { signals: CompetitiveSignal[] })
       ) : (
         <div className="space-y-2">
           {signals.map((s) => (
-            <div key={s.id}>
-              <div
-                className="flex items-center justify-between rounded-lg border border-cyan-700/30 bg-cyan-900/10 p-3 cursor-pointer hover:border-cyan-500/50"
-                onClick={() => setExpandedId(expandedId === s.id ? null : s.id)}
-              >
-                <div className="flex items-center gap-3">
-                  <span className="rounded bg-cyan-900/40 border border-cyan-700/50 px-1.5 py-0.5 text-[10px] font-medium text-cyan-400">COMPETITIVE</span>
-                  <span className="font-mono text-sm text-brand-300">{s.source_ticker}</span>
-                  <span className="text-xs text-gray-400">→</span>
-                  <StatusBadge status={s.catalyst_type} />
-                  <StatusBadge status={s.signal_direction} />
-                </div>
-                <div className="flex items-center gap-3">
-                  <ConfidenceBar value={s.signal_strength} />
-                  <span className="text-xs text-gray-500">{new Date(s.computed_at).toLocaleDateString()}</span>
-                </div>
-              </div>
-              {expandedId === s.id && (
-                <Card className="mt-1 ml-4">
-                  <dl className="grid grid-cols-2 gap-x-6 gap-y-2 text-xs sm:grid-cols-3">
-                    <div>
-                      <dt className="text-gray-500">Source Ticker</dt>
-                      <dd className="font-mono text-gray-200">{s.source_ticker}</dd>
-                    </div>
-                    <div>
-                      <dt className="text-gray-500">Target Ticker</dt>
-                      <dd className="font-mono text-gray-200">{s.target_ticker}</dd>
-                    </div>
-                    <div>
-                      <dt className="text-gray-500">Catalyst Type</dt>
-                      <dd className="text-gray-200">{s.catalyst_type}</dd>
-                    </div>
-                    <div>
-                      <dt className="text-gray-500">Pattern Confidence</dt>
-                      <dd><ConfidenceBar value={s.pattern_confidence} /></dd>
-                    </div>
-                    <div>
-                      <dt className="text-gray-500">Signal Strength</dt>
-                      <dd><ConfidenceBar value={s.signal_strength} /></dd>
-                    </div>
-                    <div>
-                      <dt className="text-gray-500">Relationship Strength</dt>
-                      <dd><ConfidenceBar value={s.relationship_strength} /></dd>
-                    </div>
-                    <div>
-                      <dt className="text-gray-500">Source Document</dt>
-                      <dd className="font-mono text-gray-400 text-[10px]">{s.source_document_id}</dd>
-                    </div>
-                    <div>
-                      <dt className="text-gray-500">Computed At</dt>
-                      <dd className="text-gray-200">{new Date(s.computed_at).toLocaleString()}</dd>
-                    </div>
-                  </dl>
-                </Card>
-              )}
-            </div>
+            <SignalRow key={s.id} signal={s} expanded={expandedId === s.id} onToggle={() => setExpandedId(expandedId === s.id ? null : s.id)} />
           ))}
         </div>
       )}
@@ -507,6 +453,88 @@ function CompetitiveSignalsPanel({ signals }: { signals: CompetitiveSignal[] })
   );
 }
 
+function SignalRow({ signal: s, expanded, onToggle }: { signal: CompetitiveSignal; expanded: boolean; onToggle: () => void }) {
+  const { data: doc } = useDocument(s.source_document_id);
+  const docLabel = doc?.title ?? `doc:${s.source_document_id.slice(0, 8)}…`;
+
+  return (
+    <div>
+      <div
+        className="flex items-center justify-between rounded-lg border border-cyan-700/30 bg-cyan-900/10 p-3 cursor-pointer hover:border-cyan-500/50"
+        onClick={onToggle}
+      >
+        <div className="flex items-center gap-3">
+          <span className="rounded bg-cyan-900/40 border border-cyan-700/50 px-1.5 py-0.5 text-[10px] font-medium text-cyan-400">COMPETITIVE</span>
+          <span className="font-mono text-sm text-brand-300">{s.source_ticker}</span>
+          <span className="text-xs text-gray-400">→</span>
+          <StatusBadge status={s.catalyst_type} />
+          <StatusBadge status={s.signal_direction} />
+        </div>
+        <div className="flex items-center gap-3">
+          <Link
+            to="/documents/$id"
+            params={{ id: s.source_document_id }}
+            className="max-w-[180px] truncate text-xs text-brand-400 hover:underline"
+            onClick={(e) => e.stopPropagation()}
+            title={doc?.title ?? s.source_document_id}
+          >
+            {docLabel}
+          </Link>
+          <ConfidenceBar value={s.signal_strength} />
+          <span className="text-xs text-gray-500">{new Date(s.computed_at).toLocaleDateString()}</span>
+        </div>
+      </div>
+      {expanded && (
+        <Card className="mt-1 ml-4">
+          <dl className="grid grid-cols-2 gap-x-6 gap-y-2 text-xs sm:grid-cols-3">
+            <div>
+              <dt className="text-gray-500">Source Ticker</dt>
+              <dd className="font-mono text-gray-200">{s.source_ticker}</dd>
+            </div>
+            <div>
+              <dt className="text-gray-500">Target Ticker</dt>
+              <dd className="font-mono text-gray-200">{s.target_ticker}</dd>
+            </div>
+            <div>
+              <dt className="text-gray-500">Catalyst Type</dt>
+              <dd className="text-gray-200">{s.catalyst_type}</dd>
+            </div>
+            <div>
+              <dt className="text-gray-500">Pattern Confidence</dt>
+              <dd><ConfidenceBar value={s.pattern_confidence} /></dd>
+            </div>
+            <div>
+              <dt className="text-gray-500">Signal Strength</dt>
+              <dd><ConfidenceBar value={s.signal_strength} /></dd>
+            </div>
+            <div>
+              <dt className="text-gray-500">Relationship Strength</dt>
+              <dd><ConfidenceBar value={s.relationship_strength} /></dd>
+            </div>
+            <div>
+              <dt className="text-gray-500">Source Document</dt>
+              <dd>
+                <Link
+                  to="/documents/$id"
+                  params={{ id: s.source_document_id }}
+                  className="text-brand-400 hover:underline"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {docLabel}
+                </Link>
+              </dd>
+            </div>
+            <div>
+              <dt className="text-gray-500">Computed At</dt>
+              <dd className="text-gray-200">{new Date(s.computed_at).toLocaleString()}</dd>
+            </div>
+          </dl>
+        </Card>
+      )}
+    </div>
+  );
+}
+
 function DecisionsPanel({ decisions }: { decisions: CorporateDecision[] }) {
   return (
     <div className="space-y-4">