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">