feat(confidence-engine): separate investigation report routes

app/investigations/[id]/page.jsx

@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+import { loadInvestigation } from "@/lib/storage/investigation-storage";
+import ScenarioForm from "@/components/scenario-form";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+const INVESTIGATION_ID = "case-1";
+
+export default function InvestigationPage() {
+  const router = useRouter();
+  const [existing, setExisting] = useState(null);
+
+  useEffect(() => {
+    setExisting(loadInvestigation());
+  }, []);
+
+  return (
+    <main className="mx-auto max-w-[1600px] px-6 py-12">
+      {/* Page-level navigation — owned by route, not ReasoningWorkspace */}
+      <nav className="mb-4 flex gap-3">
+        <Link
+          href="/"
+          className="rounded-lg border border-teal-600 bg-white px-4 py-2 text-sm font-medium text-teal-700 hover:bg-teal-50 transition"
+        >
+          Back to portfolio
+        </Link>
+      </nav>
+
+      <h1 className="mb-2 text-3xl font-bold tracking-tight">Confidence Engine</h1>
+      <p className="mb-8 text-sm text-gray-500">
+        Experimental prototype: enter a scenario and send it to a local LLM for
+        evidence-based structured reconstruction. This is a technical vertical
+        slice — not a production system.
+      </p>
+      {existing ? (
+        <ScenarioForm
+          existingSnapshot={existing}
+          onNavigateToReport={() => router.push(`/investigations/${INVESTIGATION_ID}/report`)}
+        />
+      ) : (
+        <ScenarioForm
+          onNavigateToReport={() => router.push(`/investigations/${INVESTIGATION_ID}/report`)}
+        />
+      )}
+    </main>
+  );
+}

app/investigations/[id]/report/page.jsx

@@ -0,0 +1,109 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { loadInvestigation } from "@/lib/storage/investigation-storage";
+import Link from "next/link";
+
+export default function ReportPage() {
+  const [existing, setExisting] = useState(null);
+  const [hydrated, setHydrated] = useState(false);
+
+  useEffect(() => {
+    setExisting(loadInvestigation());
+    setHydrated(true);
+  }, []);
+
+  const report = existing?.investigationReport || null;
+  const scenario = hydrated ? (existing?.scenario || "") : null;
+
+  const paragraphs = (report?.understanding || "")
+    .split("\n")
+    .filter(Boolean);
+
+  return (
+    <main className="mx-auto max-w-[800px] px-6 py-16">
+      <h1 className="mb-2 text-[15px] font-bold tracking-[.2em] uppercase text-teal-700/90">
+        Investigation Report
+      </h1>
+
+      {/* Situation */}
+      {scenario && (
+        <div className="mt-8 rounded-xl border-[2.5px] border-teal-300/70 bg-gradient-to-b from-teal-50/60 to-white px-8 pt-6 pb-7 shadow-sm">
+          <h2 className="mb-3 text-[11px] font-bold tracking-[.18em] uppercase text-teal-700/70">
+            Situation
+          </h2>
+          <p className="text-base leading-relaxed text-gray-800 whitespace-pre-wrap">
+            {scenario}
+          </p>
+        </div>
+      )}
+
+      {/* What we understand */}
+      {report ? (
+        <>
+          {paragraphs.length > 0 ? (
+            paragraphs.map((p, i) => (
+              <div key={i} className="mt-6 rounded-xl border-[2.5px] border-teal-300/70 bg-gradient-to-b from-teal-50/60 to-white px-8 pt-6 pb-7 shadow-sm">
+                <h2 className="mb-3 text-[11px] font-bold tracking-[.18em] uppercase text-teal-700/70">
+                  What we understand
+                </h2>
+                <p className="text-base leading-relaxed text-gray-800">{p}</p>
+              </div>
+            ))
+          ) : (
+            <div className="mt-6 rounded-xl border-[2.5px] border-teal-300/70 bg-gradient-to-b from-teal-50/60 to-white px-8 pt-6 pb-7 shadow-sm">
+              <h2 className="mb-3 text-[11px] font-bold tracking-[.18em] uppercase text-teal-700/70">
+                What we understand
+              </h2>
+              <p className="text-base leading-relaxed text-gray-800">{report.understanding || ""}</p>
+            </div>
+          )}
+
+          {/* What remains plausible — conditional */}
+          {report.hasPlausibleInterpretations && report.plausibleInterpretations ? (
+            <div className="mt-6 rounded-xl border-[2.5px] border-blue-300/70 bg-gradient-to-b from-blue-50/60 to-white px-8 pt-6 pb-7 shadow-sm">
+              <h2 className="mb-3 text-[11px] font-bold tracking-[.18em] uppercase text-blue-700/70">
+                What remains plausible
+              </h2>
+              <p className="text-base leading-relaxed text-gray-800 italic">
+                {report.plausibleInterpretations}
+              </p>
+            </div>
+          ) : null}
+        </>
+      ) : (
+        /* Skeleton / loading state when no persisted report exists */
+        <>
+          <div className="mt-8 rounded-xl border-[2.5px] border-gray-200 bg-gray-50/50 px-8 pt-6 pb-7">
+            <h2 className="mb-3 text-[11px] font-bold tracking-[.18em] uppercase text-gray-400">
+              What we understand
+            </h2>
+            <p className="text-base leading-relaxed text-gray-300 animate-pulse">
+              Report generation pending. A summary will appear here once the investigation reaches milestone.
+            </p>
+          </div>
+        </>
+      )}
+
+      {/* Back to investigation */}
+      <div className="mt-10">
+        <Link
+          href="/investigations/case-1"
+          className="rounded-lg border border-teal-600 bg-white px-4 py-2 text-sm font-medium text-teal-700 hover:bg-teal-50 transition"
+        >
+          Back to investigation
+        </Link>
+      </div>
+
+      {/* Back to portfolio */}
+      <div className="mt-3">
+        <Link
+          href="/"
+          className="rounded-lg border border-teal-600 bg-white px-4 py-2 text-sm font-medium text-teal-700 hover:bg-teal-50 transition"
+        >
+          Back to portfolio
+        </Link>
+      </div>
+    </main>
+  );
+}

app/page.jsx

@@ -1,15 +1,87 @@
-import ScenarioForm from "@/components/scenario-form";
+"use client";
+
+import React from "react";
+import { loadInvestigation } from "@/lib/storage/investigation-storage";
+import Link from "next/link";
+
+const INVESTIGATION_ID = "case-1";
+
+function Portfolio() {
+  const [existing, setExisting] = React.useState(null);
+
+  React.useEffect(() => {
+    setExisting(loadInvestigation());
+  }, []);
+
+  const hasReport = Boolean(
+    existing?.investigationReport && existing.investigationReport.understanding
+  );
 
-export default function Home() {
   return (
-    <main className="mx-auto max-w-[1600px] px-6 py-12">
+    <main className="mx-auto max-w-[640px] px-6 py-16">
       <h1 className="mb-2 text-3xl font-bold tracking-tight">Confidence Engine</h1>
       <p className="mb-8 text-sm text-gray-500">
-        Experimental prototype: enter a scenario and send it to a local LLM for
-        evidence-based structured reconstruction. This is a technical vertical
-        slice — not a production system.
+        Investigator&apos;s notebook — index of persisted investigations.
       </p>
-      <ScenarioForm />
+
+      {/* Existing investigation */}
+      {existing && (
+        <section className="mb-10">
+          <h2 className="mb-4 text-[13px] font-bold tracking-[.18em] uppercase text-teal-700/80">
+            Investigations
+          </h2>
+
+          <div className="rounded-xl border-[2.5px] border-teal-300/70 bg-gradient-to-b from-teal-50/60 to-white px-8 py-6 shadow-sm">
+            <p className="text-sm text-gray-700">
+              {existing.scenario || "Untitled investigation"}
+            </p>
+
+            <div className="mt-4 flex gap-3 text-sm">
+              {hasReport ? (
+                <Link
+                  href={`/investigations/${INVESTIGATION_ID}/report`}
+                  className="rounded-lg border border-teal-600 bg-white px-4 py-2 font-medium text-teal-700 hover:bg-teal-50 transition"
+                >
+                  View report
+                </Link>
+              ) : null}
+
+              <Link
+                href={`/investigations/${INVESTIGATION_ID}`}
+                className="rounded-lg border border-teal-600 bg-white px-4 py-2 font-medium text-teal-700 hover:bg-teal-50 transition"
+              >
+                Open investigation
+              </Link>
+
+              <Link
+                href={`/investigations/${INVESTIGATION_ID}`}
+                className="rounded-lg border border-teal-600 bg-white px-4 py-2 font-medium text-teal-700 hover:bg-teal-50 transition"
+              >
+                Create new investigation
+              </Link>
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* No existing investigation */}
+      {!existing && (
+        <section className="mb-10">
+          <h2 className="mb-4 text-[13px] font-bold tracking-[.18em] uppercase text-teal-700/80">
+            Investigations
+          </h2>
+          <p className="text-sm text-gray-500 italic">No investigations yet.</p>
+        </section>
+      )}
+
+      <Link
+        href={`/investigations/${INVESTIGATION_ID}`}
+        className="rounded-lg border-[2.5px] border-dashed border-teal-400 px-6 py-3 text-sm font-medium text-teal-700 hover:bg-teal-50 transition"
+      >
+        + Create new investigation
+      </Link>
     </main>
   );
 }
+
+export default Portfolio;