feat: connect UI to situation graph start flow

components/scenario-form.jsx

@@ -1,14 +1,59 @@
 "use client";
 
+import React from "react";
 import { useState, useRef } from "react";
-import ReconstructionView from "@/components/reconstruction-view";
 import DiagnosticsView from "@/components/diagnostics-view";
+import SituationGraphView from "@/components/situation-graph-view";
 
 const MAX_LENGTH = 10000;
 
+export async function submitScenarioForStartCase(fetchImpl, scenario) {
+  return fetchImpl("/api/cases/start", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ scenario }),
+  });
+}
+
+export function ScenarioResultPanels({ status, result }) {
+  if (!result) return null;
+
+  const hasGraph = Boolean(result.situationGraph);
+  const hasQuestion = Boolean(result.selectedQuestion?.question);
+  const hasDiagnostics = Boolean(result.diagnostics);
+
+  return (
+    <>
+      {status === "error" && (
+        <div className="space-y-3">
+          {result.error && (
+            <div className="rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 whitespace-pre-wrap">
+              Error: {result.error}
+            </div>
+          )}
+          {!hasGraph && !hasQuestion && (
+            <div className="rounded-lg border border-yellow-300 bg-yellow-50 px-4 py-2 text-sm text-yellow-800">
+              Validation failed — no structured graph output was produced.
+            </div>
+          )}
+        </div>
+      )}
+
+      {(status === "success" || hasGraph || hasQuestion) && (
+        <SituationGraphView
+          situationGraph={result.situationGraph}
+          selectedQuestion={result.selectedQuestion}
+        />
+      )}
+
+      {hasDiagnostics && <DiagnosticsView result={result} />}
+    </>
+  );
+}
+
 export default function ScenarioForm() {
   const [scenario, setScenario] = useState("");
-  const [status, setStatus] = useState("idle"); // idle | loading | error | success | partial
+  const [status, setStatus] = useState("idle"); // idle | loading | error | success
   const [result, setResult] = useState(null);
   const textareaRef = useRef(null);
 
@@ -18,19 +63,11 @@ export default function ScenarioForm() {
     setResult(null);
 
     try {
-      const res = await fetch("/api/analyse", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ scenario }),
-      });
+      const res = await submitScenarioForStartCase(fetch, scenario);
 
       const data = await res.json();
 
-      if (res.ok && data.validationStatus === "valid") {
-        setStatus("success");
-        setResult(data);
-      } else if (data.success) {
-        // Success in analysis but validation may be partial
+      if (res.ok && data.success) {
         setStatus("success");
         setResult(data);
       } else {
@@ -43,14 +80,6 @@ export default function ScenarioForm() {
     }
   };
 
-  // Determine if we have meaningful content to display
-  const hasClassification = result?.inputClassification;
-  const hasReconstruction = result?.reconstruction;
-  const hasNextQuestion = result?.nextQuestion;
-  const hasEvidence = result?.evidence && result.evidence.length > 0;
-  const hasMeaningfulContent =
-    hasClassification || hasReconstruction || hasNextQuestion || hasEvidence;
-
   return (
     <div className="space-y-6">
       <form onSubmit={handleSubmit} className="space-y-4">
@@ -76,38 +105,7 @@ export default function ScenarioForm() {
         </div>
       </form>
 
-      {/* Error state */}
-      {status === "error" && (
-        <div className="space-y-3">
-          {result?.error && (
-            <div className="rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 whitespace-pre-wrap">
-              Error: {result.error}
-            </div>
-          )}
-          {/* Show partial content even on validation failure */}
-          {(hasClassification || hasReconstruction) && (
-            <div className="rounded-lg border border-yellow-300 bg-yellow-50 px-4 py-2 text-sm text-yellow-800">
-              ⚠ Partial result — some fields failed validation. Showing what was
-              accepted.
-            </div>
-          )}
-          {hasReconstruction && (
-            <ReconstructionView reconstruction={result} partial />
-          )}
-        </div>
-      )}
-
-      {/* Success state */}
-      {status === "success" && hasMeaningfulContent && (
-        <div className="space-y-4">
-          <ReconstructionView reconstruction={result} />
-        </div>
-      )}
-
-      {/* Always show diagnostics when we have any result */}
-      {(hasClassification || hasReconstruction || hasNextQuestion) && (
-        <DiagnosticsView result={result} />
-      )}
+      <ScenarioResultPanels status={status} result={result} />
 
       {status === "loading" && (
         <div className="py-12 text-center text-sm text-gray-400">
@@ -123,13 +121,6 @@ export default function ScenarioForm() {
           </p>
         </div>
       )}
-
-      {/* Invalid result with no partial data */}
-      {status === "error" && !result?.error && !hasMeaningfulContent && (
-        <div className="rounded-lg border border-yellow-300 bg-yellow-50 px-4 py-2 text-sm text-yellow-800">
-          Validation failed — no structured output was produced.
-        </div>
-      )}
     </div>
   );
 }