feat: add navigable report view from feed

app.py

@@ -316,6 +316,33 @@ async def handle_list(request: Request):
     items = [_summarize(doc) for doc in docs]
     return {"data": [json.dumps({"items": items, "total": len(items)})]}
 
+@app.get("/api/inspections/{inspection_id}")
+async def get_inspection(inspection_id: str):
+    inspection = None
+    if _inspections_col is not None:
+        inspection = await _inspections_col.find_one({"id": inspection_id}, {"_id": 0})
+    else:
+        inspection = next((i for i in _mem_inspections if i["id"] == inspection_id), None)
+    
+    if not inspection:
+        return JSONResponse({"detail": "Inspection not found"}, status_code=404)
+    return inspection
+
+@app.post("/api/get_inspection")
+async def handle_get_inspection(request: Request):
+    data = await request.json()
+    inspection_id = data.get("data", [""])[0]
+    
+    inspection = None
+    if _inspections_col is not None:
+        inspection = await _inspections_col.find_one({"id": inspection_id}, {"_id": 0})
+    else:
+        inspection = next((i for i in _mem_inspections if i["id"] == inspection_id), None)
+    
+    if not inspection:
+        return JSONResponse({"detail": "Inspection not found"}, status_code=404)
+    return {"data": [json.dumps(inspection)]}
+
 @app.post("/api/metrics")
 async def handle_metrics(request: Request):
     docs = await _db_list_inspections(500)

frontend/src/App.js

@@ -7,6 +7,7 @@ import Console from "@/pages/Console";
 import Feed from "@/pages/Feed";
 import Blueprint from "@/pages/Blueprint";
 import Journal from "@/pages/Journal";
+import ReportView from "@/pages/ReportView";
 
 function App() {
   return (
@@ -19,6 +20,7 @@ function App() {
           <Route path="/feed" element={<Feed />} />
           <Route path="/blueprint" element={<Blueprint />} />
           <Route path="/journal" element={<Journal />} />
+          <Route path="/report/:id" element={<ReportView />} />
         </Routes>
         <Toaster theme="dark" position="bottom-right" />
       </BrowserRouter>

frontend/src/lib/api.js

@@ -68,6 +68,13 @@ export const forgesight = {
     return data;
   },
 
+  // GET /api/inspections/:id
+  async getInspection(id) {
+    if (useGradio) return gradioCall("get_inspection", id);
+    const { data } = await api.get(`/inspections/${id}`);
+    return data;
+  },
+
   // GET /api/metrics
   async getMetrics() {
     if (useGradio) return gradioCall("metrics");

frontend/src/pages/Console.jsx

@@ -1,5 +1,6 @@
 import { useCallback, useRef, useState } from "react";
-import { Upload, Image as ImageIcon, PlayCircle, RotateCcw } from "lucide-react";
+import { Link } from "react-router-dom";
+import { Upload, Image as ImageIcon, PlayCircle, RotateCcw, LayoutList } from "lucide-react";
 import { toast } from "sonner";
 import { forgesight, fileToBase64 } from "@/lib/api";
 import TelemetryWidget from "@/components/TelemetryWidget";
@@ -186,11 +187,20 @@ export default function Console() {
                   <SummaryStat label="Defects" value={summary.defect_count} />
                   <SummaryStat label="Priority" value={summary.priority} />
                 </div>
-                <ReportDownloader
-                  targetRef={reportRef}
-                  inspectionId={result?.id}
-                  disabled={!result}
-                />
+                <div className="flex items-center gap-4">
+                  <Link
+                    to="/feed"
+                    className="fs-chip inline-flex items-center gap-1.5 hover:border-white/40 hover:text-white transition-colors"
+                  >
+                    <LayoutList className="w-3 h-3" />
+                    Feed
+                  </Link>
+                  <ReportDownloader
+                    targetRef={reportRef}
+                    inspectionId={result?.id}
+                    disabled={!result}
+                  />
+                </div>
               </div>
             </div>
           )}

frontend/src/pages/Feed.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { forgesight } from "@/lib/api";
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from "recharts";
 import { AlertTriangle, CheckCircle2, XCircle, TrendingUp } from "lucide-react";
@@ -7,6 +7,7 @@ import { AlertTriangle, CheckCircle2, XCircle, TrendingUp } from "lucide-react";
 export default function Feed() {
   const [metrics, setMetrics] = useState(null);
   const [items, setItems] = useState([]);
+  const navigate = useNavigate();
 
   const load = async () => {
     try {
@@ -136,7 +137,11 @@ export default function Feed() {
               </thead>
               <tbody>
                 {items.map((it) => (
-                  <tr key={it.id} className="border-b border-white/5 hover:bg-white/[0.02]">
+                  <tr 
+                    key={it.id} 
+                    onClick={() => navigate(`/report/${it.id}`)}
+                    className="border-b border-white/5 hover:bg-white/[0.04] cursor-pointer transition-colors"
+                  >
                     <Td mono>{new Date(it.created_at).toLocaleString()}</Td>
                     <Td>
                       <span className={`fs-chip fs-chip-${it.verdict}`}>{it.verdict}</span>

frontend/src/pages/ReportView.jsx

@@ -0,0 +1,111 @@
+import { useEffect, useState, useRef } from "react";
+import { useParams, Link } from "react-router-dom";
+import { forgesight } from "@/lib/api";
+import AgentTranscript from "@/components/AgentTranscript";
+import ReportDownloader from "@/components/ReportDownloader";
+import { ArrowLeft, Loader2 } from "lucide-react";
+
+export default function ReportView() {
+  const { id } = useParams();
+  const [result, setResult] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const reportRef = useRef(null);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const data = await forgesight.getInspection(id);
+        setResult(data);
+      } catch (e) {
+        console.error("Failed to load inspection", e);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, [id]);
+
+  if (loading) {
+    return (
+      <div className="mx-auto max-w-[1400px] px-6 py-20 flex items-center justify-center">
+        <Loader2 className="w-8 h-8 animate-spin text-zinc-500" />
+      </div>
+    );
+  }
+
+  if (!result) {
+    return (
+      <div className="mx-auto max-w-[1400px] px-6 py-20 text-center text-zinc-500 font-mono">
+        Inspection not found.
+      </div>
+    );
+  }
+
+  // Same logic to extract summary as in backend, since frontend might not have `result.summary` populated if we just fetched raw doc
+  // Wait, backend does not attach `.summary` to raw doc, it's generated by `_summarize(doc)` for Feed.
+  // We can write a quick helper here.
+  const agents = result?.transcript?.agents || [];
+  const inspector = agents.find((a) => a.role === "inspector")?.output?.parsed || {};
+  const reporter = agents.find((a) => a.role === "reporter")?.output?.parsed || {};
+  const action = agents.find((a) => a.role === "action")?.output?.parsed || {};
+  
+  const defects = inspector.defects || [];
+  const summary = {
+    verdict: inspector.verdict || "warn",
+    confidence: inspector.confidence || 0,
+    defect_count: defects.length,
+    priority: action.priority || "P2",
+  };
+
+  return (
+    <div className="mx-auto max-w-[1400px] px-6 py-10" data-testid="report-view-page">
+      <header className="mb-8 flex items-center justify-between">
+        <div>
+          <Link to="/feed" className="inline-flex items-center gap-2 text-zinc-400 hover:text-white transition-colors mb-4 fs-label">
+            <ArrowLeft className="w-4 h-4" /> Back to Feed
+          </Link>
+          <h1 className="font-display font-black tracking-tighter text-4xl md:text-5xl">
+            Inspection Report
+          </h1>
+          <p className="text-zinc-400 mt-3 font-mono text-sm">ID: {result.id}</p>
+        </div>
+      </header>
+
+      <div className="grid lg:grid-cols-12 gap-6">
+        {/* RIGHT — transcript (Using 12 columns since we don't have the image input UI here) */}
+        <div className="lg:col-span-10 lg:col-start-2 space-y-6" ref={reportRef}>
+          <div className="border border-white/10 bg-[#141416] p-5 fs-rise" data-testid="summary-panel">
+            <div className="flex items-start justify-between gap-4 flex-wrap mb-4">
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 flex-1">
+                <SummaryStat label="Verdict" value={summary.verdict.toUpperCase()} kind={summary.verdict} />
+                <SummaryStat label="Confidence" value={`${Math.round(summary.confidence * 100)}%`} />
+                <SummaryStat label="Defects" value={summary.defect_count} />
+                <SummaryStat label="Priority" value={summary.priority} />
+              </div>
+              <ReportDownloader
+                targetRef={reportRef}
+                inspectionId={result?.id}
+                disabled={!result}
+              />
+            </div>
+          </div>
+
+          <AgentTranscript transcript={result.transcript} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SummaryStat({ label, value, kind }) {
+  const color =
+    kind === "pass" ? "text-[#10B981]" :
+    kind === "warn" ? "text-[#F59E0B]" :
+    kind === "fail" ? "text-[#ED1C24]" : "text-white";
+  return (
+    <div>
+      <div className="fs-label mb-1">{label}</div>
+      <div className={`font-display font-black text-2xl tabular-nums ${color}`}>{value}</div>
+    </div>
+  );
+}