fix: clarify reasoning progress and loading feedback

components/reasoning-workspace.jsx

@@ -73,22 +73,23 @@ function SituationCard({ centralStatement }) {
 }
 
 // ── Current understanding card ────────────────────────────────
-function CurrentUnderstanding({ currentSummary, graph }) {
-  if (!graph || !currentSummary) return null;
-
-  const nodes = graph.nodes || [];
-  const unknowns = nodes.filter((n) => n.kind === "unknown");
-  const resolvedCount = (graph.resolvedNodeIds || []).length;
-  const remainingUnknowns = unknowns.filter(
-    (u) => u.status !== "resolved"
-  ).length;
+function CurrentUnderstanding({ currentSummary }) {
+  if (currentSummary) {
+    return (
+      <div className="rounded-lg border border-gray-200 bg-white p-5">
+        <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500">
+          Current understanding
+        </h2>
+        <p className="text-sm leading-relaxed text-gray-700">{currentSummary}</p>
+      </div>
+    );
+  }
 
   return (
     <div className="rounded-lg border border-gray-200 bg-white p-5">
-      <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500">
-        Current understanding
-      </h2>
-      <p className="text-sm leading-relaxed text-gray-700">{currentSummary}</p>
+      <p className="text-sm leading-relaxed text-gray-600">
+        We have started to separate what is known from what still needs checking.
+      </p>
     </div>
   );
 }
@@ -139,27 +140,44 @@ function NextQuestionCard({ selectedQuestion }) {
   );
 }
 
-// ── Progress summary ──────────────────────────────────────────
-function ProgressSummary({ graph }) {
+// ── Reasoning progress card ────────────────────────────────────
+function ReasoningProgress({ graph }) {
   if (!graph?.nodes?.length) return null;
 
   const unknowns = graph.nodes.filter((n) => n.kind === "unknown");
-  const resolvedCount = (graph.resolvedNodeIds || []).length;
-  const remainingUnknowns = unknowns.filter(
-    (u) => u.status !== "resolved"
-  ).length;
+  const remainingCount = unknowns.filter((u) => u.status !== "resolved").length;
 
   return (
-    <div className="flex items-center gap-4 rounded-lg border border-gray-200 bg-white px-5 py-3">
-      {resolvedCount > 0 && (
-        <span className="text-sm text-gray-600">
-          <strong className="font-medium text-gray-900">{resolvedCount}</strong> resolved
-        </span>
+    <div className="rounded-lg border border-gray-200 bg-white px-5 py-4">
+      <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-gray-500">
+        Reasoning progress
+      </h2>
+      {remainingCount > 0 ? (
+        <p className="mb-3 text-sm leading-relaxed text-gray-700">
+          We have identified {remainingCount} area{remainingCount === 1 ? "" : "s"} that still need investigation.
+        </p>
+      ) : (
+        <p className="mb-3 text-sm leading-relaxed text-gray-700">
+          All areas under investigation are now complete.
+        </p>
       )}
-      {remainingUnknowns > 0 && (
-        <span className="text-sm text-gray-600">
-          <strong className="font-medium text-gray-900">{remainingUnknowns}</strong> remaining
-        </span>
+      {graph.activeUnknownNodeId && (() => {
+        const activeNode = graph.nodes.find((n) => n.id === graph.activeUnknownNodeId);
+        if (!activeNode) return null;
+        return (
+          <>
+            <h3 className="mb-1 text-xs font-medium uppercase tracking-wide text-gray-400">
+              Current focus
+            </h3>
+            <p className="text-sm font-medium text-gray-900">{activeNode.label}</p>
+            {activeNode.description && activeNode.description !== activeNode.label && (
+              <p className="mt-1 text-xs text-gray-500">Why this matters: {activeNode.description}</p>
+            )}
+          </>
+        );
+      })()}
+      {!graph.activeUnknownNodeId && remainingCount === 0 && (
+        <p className="text-sm text-gray-500">There is no active area of investigation at the moment.</p>
       )}
     </div>
   );
@@ -204,7 +222,7 @@ function LoadingOverlay({ isLoading, elapsed, currentMessage, variant }) {
       <p className="mt-2 text-sm text-blue-700">{statusText}</p>
       <p className="mt-1 text-xs text-blue-500">
         This has been running for {elapsed}s.
-        {variant === "initial" && elapsed > 30 && (
+        {variant === "initial" && elapsed >= 45 && (
           <span className="block mt-1">This can take around a minute with the current local model.</span>
         )}
       </p>
@@ -300,10 +318,10 @@ export default function ReasoningWorkspace({
             <NoQuestionMessage noQuestionReason={noQuestionReason} />
           )}
           {graph && <SituationCard centralStatement={graph.centralStatement} />}
-          {graph && <CurrentUnderstanding currentSummary={graph.currentSummary} graph={graph} />}
+          {graph && <CurrentUnderstanding currentSummary={graph.currentSummary} />}
           {graph && <CurrentFocus graph={graph} />}
           {canAnswer && <NextQuestionCard selectedQuestion={selectedQ} />}
-          {graph && <ProgressSummary graph={graph} />}
+          {graph && <ReasoningProgress graph={graph} />}
 
           {/* ── Answer form ──────────────────────────────── */}
           {canAnswer && (