feat: connect UI to situation graph start flow

components/diagnostics-view.jsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 const ValidationIndicator = ({ status }) => {
   const styles = {
     valid: "text-green-600",
@@ -27,23 +29,53 @@ const validationIcons = {
 export default function DiagnosticsView({ result }) {
   if (!result) return null;
 
+  const diagnostics = result.diagnostics || result;
+
   const metrics = [
-    { label: "Model", value: result.modelName || "?" },
+    { label: "Model", value: diagnostics.modelName || result.modelName || "?" },
     { label: "Provider", value: "Ollama" },
-    { label: "Prompt version", value: result.promptVersion || "?" },
+    {
+      label: "Prompt version",
+      value: diagnostics.promptVersion || result.promptVersion || "?",
+    },
     {
       label: "Duration",
       value:
-        result.responseDurationMs != null
-          ? `${result.responseDurationMs}ms`
+        diagnostics.responseDurationMs != null
+          ? `${diagnostics.responseDurationMs}ms`
           : "?",
     },
     {
       label: "Validation",
       value: (
-        <ValidationIndicator status={result.validationStatus || "invalid"} />
+        <ValidationIndicator
+          status={diagnostics.validationStatus || result.validationStatus || "invalid"}
+        />
       ),
     },
+    {
+      label: "Node count",
+      value: diagnostics.nodeCount != null ? diagnostics.nodeCount : "?",
+    },
+    {
+      label: "Edge count",
+      value: diagnostics.edgeCount != null ? diagnostics.edgeCount : "?",
+    },
+    {
+      label: "Graph references",
+      value:
+        diagnostics.graphReferenceValidation == null
+          ? "?"
+          : diagnostics.graphReferenceValidation.valid
+            ? `${validationIcons.valid} valid`
+            : `${validationIcons.invalid} invalid`,
+    },
+  ];
+
+  const errors = [
+    ...(result.errors || []),
+    ...(result.validationErrors || []),
+    ...(result.analysisErrors || []),
   ];
 
   return (
@@ -72,14 +104,14 @@ export default function DiagnosticsView({ result }) {
       )}
 
       {/* Errors if present */}
-      {result.errors && result.errors.length > 0 && (
+      {errors.length > 0 && (
         <details className="mt-3">
           <summary className="cursor-pointer text-xs text-red-500 underline hover:text-red-700">
-            Validation errors ({result.errors.length})
+            Validation errors ({errors.length})
           </summary>
           <ul className="mt-1 space-y-0.5 text-xs text-red-600">
-            {result.errors.map((err, i) => (
-              <li key={i}>{err}</li>
+            {errors.map((err, i) => (
+              <li key={i}>{typeof err === "string" ? err : err?.message || JSON.stringify(err)}</li>
             ))}
           </ul>
         </details>