fix: make active reasoning state visible

components/reasoning-workspace.jsx

@@ -214,13 +214,13 @@ function LoadingOverlay({ isLoading, elapsed, currentMessage, variant }) {
   }
 
   return (
-    <div className="rounded-lg border border-gray-200 bg-blue-50 px-5 py-6">
+    <div className="rounded-lg border border-gray-200 bg-blue-50 px-5 py-6" role="status" aria-busy="true">
       <div className="flex items-center gap-3">
         <ActivitySpinner />
         <span className="text-base font-medium text-blue-900">Working through your situation</span>
       </div>
       <p className="mt-2 text-sm text-blue-700">{statusText}</p>
-      <p className="mt-1 text-xs text-blue-500">
+      <p className="mt-1 text-xs text-blue-500" aria-live="polite">
         This has been running for {elapsed}s.
         {variant === "initial" && elapsed >= 45 && (
           <span className="block mt-1">This can take around a minute with the current local model.</span>

components/scenario-form.jsx

@@ -1,11 +1,11 @@
 "use client";
 
 import React from "react";
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect, useMemo } from "react";
 import DiagnosticsView from "@/components/diagnostics-view";
 import GraphUpdateView from "@/components/graph-update-view";
 import SituationGraphView from "@/components/situation-graph-view";
-import ReasoningWorkspace from "@/components/reasoning-workspace";
+import ReasoningWorkspace, { LoadingOverlay } from "@/components/reasoning-workspace";
 
 const MAX_LENGTH = 10000;
 
@@ -100,6 +100,50 @@ export function ScenarioResultPanels({ status, result }) {
   );
 }
 
+// ── Message pools ───────────────────────────────────────────
+const INITIAL_MESSAGES = [
+  { min: 0, text: "Reading your situation" },
+  { min: 10, text: "Building a structured understanding" },
+  { min: 25, text: "Identifying what is known and still unclear" },
+  { min: 45, text: "Selecting the next useful question" },
+];
+
+const UPDATE_MESSAGES = [
+  { min: 0, text: "Considering your answer" },
+  { min: 10, text: "Updating the situation" },
+  { min: 25, text: "Checking what changed" },
+  { min: 45, text: "Choosing the next question" },
+];
+
+function useLoadingStatus(messages, isLoading) {
+  const [elapsed, setElapsed] = useState(0);
+  const startRef = useRef(null);
+
+  useEffect(() => {
+    if (isLoading) {
+      startRef.current = Date.now();
+      const iv = setInterval(() => {
+        setElapsed(Math.floor((Date.now() - startRef.current) / 1000));
+      }, 1000);
+      return () => clearInterval(iv);
+    } else {
+      setElapsed(0);
+      startRef.current = null;
+    }
+  }, [isLoading]);
+
+  const currentMessage = useMemo(() => {
+    if (!messages || messages.length === 0) return "";
+    let msg = messages[0].text;
+    for (const m of messages) {
+      if (elapsed >= m.min) msg = m.text;
+    }
+    return msg;
+  }, [messages, elapsed]);
+
+  return { elapsed, currentMessage };
+}
+
 export function UpdateErrorPanel({ updateError }) {
   if (!updateError) return null;
 
@@ -134,6 +178,8 @@ export function UpdateErrorPanel({ updateError }) {
   );
 }
 
+export { INITIAL_MESSAGES, UPDATE_MESSAGES, useLoadingStatus };
+
 export default function ScenarioForm() {
   const [scenario, setScenario] = useState("");
   const [status, setStatus] = useState("idle"); // idle | loading | error | success
@@ -144,6 +190,16 @@ export default function ScenarioForm() {
   const [updateResult, setUpdateResult] = useState(null);
   const textareaRef = useRef(null);
 
+  const { elapsed: startElapsed, currentMessage: startMsg } = useLoadingStatus(
+    INITIAL_MESSAGES,
+    status === "loading"
+  );
+
+  const { elapsed: updateElapsed, currentMessage: updateMsg } = useLoadingStatus(
+    UPDATE_MESSAGES,
+    updateStatus === "loading"
+  );
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     setStatus("loading");
@@ -236,16 +292,28 @@ export default function ScenarioForm() {
           <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>
+          {status === "idle" && (
+            <button
+              type="submit"
+              disabled={!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"
+            >
+              Analyse
+            </button>
+          )}
         </div>
       </form>
 
+      {/* ── Initial analysis loading card ─────────────── */}
+      {status === "loading" && (
+        <LoadingOverlay
+          isLoading={true}
+          elapsed={startElapsed}
+          currentMessage={startMsg}
+          variant="initial"
+        />
+      )}
+
       {/* ── Main result workspace ─────────────────────── */}
       {(status === "success" || status === "error" || updateStatus === "success") && (
         <ReasoningWorkspace