chore: preserve initial reconstruction prototype

2026-07-31 18:51:38 +01:00
commit a2f9e472ea
26 changed files with 8874 additions and 0 deletions
@@ -0,0 +1,107 @@
+"use client";
+
+import { useState, useRef } from "react";
+import ReconstructionView from "@/components/reconstruction-view";
+import DiagnosticsView from "@/components/diagnostics-view";
+
+const MAX_LENGTH = 10000;
+
+export default function ScenarioForm() {
+  const [scenario, setScenario] = useState("");
+  const [status, setStatus] = useState("idle"); // idle | loading | error | success
+  const [result, setResult] = useState(null);
+  const textareaRef = useRef(null);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setStatus("loading");
+    setResult(null);
+
+    try {
+      const res = await fetch("/api/analyse", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ scenario }),
+      });
+
+      const data = await res.json();
+
+      if (res.ok && data.validationStatus === "valid") {
+        setStatus("success");
+        setResult(data);
+      } else {
+        setStatus("error");
+        setResult(data);
+      }
+    } catch (err) {
+      setStatus("error");
+      setResult({ error: err.message || "Network request failed" });
+    }
+  };
+
+  // Always show diagnostics when there's a result (even if validation failed)
+  const hasDiagnostics = result && (result.reconstruction || result.modelName || result.responseDurationMs !== undefined);
+
+  return (
+    <div className="space-y-6">
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <textarea
+          ref={textareaRef}
+          value={scenario}
+          onChange={(e) => setScenario(e.target.value)}
+          placeholder="Describe the scenario you want analysed..."
+          rows={10}
+          className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400"
+        />
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-gray-400">{scenario.length}/{MAX_LENGTH}</span>
+          <button
+            type="submit"
+            disabled={status === "loading" || !scenario.trim()}
+            className="rounded-lg bg-gray-900 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            {status === "loading" ? "Analysing..." : "Analyse"}
+          </button>
+        </div>
+      </form>
+
+      {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>
+          )}
+          {hasDiagnostics && result?.modelName && (
+            <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm">
+              <dt className="text-gray-500">Model</dt>
+              <dd>{result.modelName}</dd>
+              <dt className="text-gray-500">Duration</dt>
+              <dd>{result.responseDurationMs != null ? `${result.responseDurationMs}ms` : "?"}</dd>
+            </dl>
+          )}
+        </div>
+      )}
+
+      {status === "success" && result?.reconstruction && (
+        <div className="space-y-4">
+          <ReconstructionView reconstruction={result.reconstruction} />
+          <DiagnosticsView result={result} />
+        </div>
+      )}
+
+      {status === "error" && result?.reconstruction && (
+        <div className="space-y-3">
+          <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>
+          <ReconstructionView reconstruction={result.reconstruction} partial />
+        </div>
+      )}
+
+      {status === "loading" && (
+        <div className="py-12 text-center text-sm text-gray-400">Waiting for model response...</div>
+      )}
+    </div>
+  );
+}