feat(confidence-engine): separate investigation report routes

2026-09-03 06:39:35 +01:00
parent 745026f0a0
commit 32e1b01767
8 changed files with 567 additions and 176 deletions
@@ -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>
+  );
+}