feat: evolve investigation into guided conversation

.claude/working-rules.md

@@ -66,6 +66,44 @@ Use a focused commit message.
 
 Do not merge or tag unless explicitly requested.
 
+## Non-narration rule
+
+Claude Code must act as an implementation agent, not narrate its internal
+debugging process.
+
+When tests fail:
+
+1. inspect the focused failure;
+2. make the smallest justified edit;
+3. rerun the focused test;
+4. repeat until passing or genuinely blocked.
+
+Do not print or explain intermediate reasoning.
+
+Never print:
+
+- rendered HTML;
+- full JSON;
+- full graph objects;
+- large diffs;
+- long stack traces;
+- repeated interpretations of the same failure.
+
+Prefer:
+
+tool → edit → focused test → concise report
+
+The final chat response must be under 1,000 words and normally contain only:
+
+- branch;
+- commit hash;
+- files changed;
+- behaviour changed;
+- tests;
+- lint/build;
+- remaining limitation;
+- git status.
+
 ## Response discipline
 
 At the end of a task, normally report only:

app/globals.css

@@ -7,8 +7,29 @@
   to { transform: rotate(360deg); }
 }
 
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.investigation-card {
+  animation: fadeIn 0.4s ease-out both;
+}
+
+.investigation-card:nth-child(2) {
+  animation-delay: 0.08s;
+}
+
+.investigation-card:nth-child(3) {
+  animation-delay: 0.16s;
+}
+
 @media (prefers-reduced-motion: reduce) {
   [style*="animation:spin"] {
     animation: none !important;
   }
+
+  .investigation-card {
+    animation: none;
+  }
 }

components/reasoning-workspace.jsx

@@ -63,7 +63,7 @@ function ActivitySpinner() {
 function SituationCard({ centralStatement }) {
   if (!centralStatement) return null;
   return (
-    <div className="rounded-lg border border-gray-200 bg-white p-5">
+    <div className="investigation-card rounded-lg border border-gray-200 bg-white p-5">
       <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-gray-500">
         Your situation
       </h2>
@@ -76,9 +76,9 @@ function SituationCard({ centralStatement }) {
 function CurrentUnderstanding({ currentSummary }) {
   if (currentSummary) {
     return (
-      <div className="rounded-lg border border-gray-200 bg-white p-5">
+      <div className="investigation-card 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
+          What we&#x27;ve established
         </h2>
         <p className="text-sm leading-relaxed text-gray-700">{currentSummary}</p>
       </div>
@@ -86,7 +86,7 @@ function CurrentUnderstanding({ currentSummary }) {
   }
 
   return (
-    <div className="rounded-lg border border-gray-200 bg-white p-5">
+    <div className="investigation-card rounded-lg border border-gray-200 bg-white p-5">
       <p className="text-sm leading-relaxed text-gray-600">
         We have started to separate what is known from what still needs checking.
       </p>
@@ -94,110 +94,87 @@ function CurrentUnderstanding({ currentSummary }) {
   );
 }
 
-// ── Current focus card ────────────────────────────────────────
-function CurrentFocus({ graph }) {
-  if (!graph?.activeUnknownNodeId || !graph.nodes?.length) return null;
-
-  const activeNode = graph.nodes.find(
-    (n) => n.id === graph.activeUnknownNodeId
-  );
-  if (!activeNode) return null;
-
-  // Find the unknown label that maps to activeUnknownNodeId from selectedQuestion or nodes
-  const statusText =
-    activeNode.status === "resolved" ? "Answered" : "Under investigation";
-
-  return (
-    <div className="rounded-lg border border-gray-200 bg-white p-5">
-      <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-gray-500">
-        What we are working out
-      </h2>
-      <p className="text-base font-medium text-gray-900">{activeNode.label}</p>
-      {activeNode.description && activeNode.description !== activeNode.label && (
-        <p className="mt-1 text-sm text-gray-600">Why it matters: {activeNode.description}</p>
-      )}
-      <span className="mt-2 inline-block rounded-full border border-gray-200 bg-gray-50 px-2.5 py-0.5 text-xs font-medium text-gray-600">
-        {statusText}
-      </span>
-    </div>
-  );
-}
-
-// ── Next question card (prominent) ────────────────────────────
-function NextQuestionCard({ selectedQuestion }) {
+// ── Current investigation card (prominent) ─────────────────────
+function CurrentInvestigationCard({ selectedQuestion }) {
   if (!selectedQuestion) return null;
 
   const q = typeof selectedQuestion === "string" ? selectedQuestion : selectedQuestion.question;
   if (!q) return null;
 
   return (
-    <div className="rounded-lg border-2 border-green-300 bg-green-50 p-6">
+    <div className="investigation-card rounded-lg border-2 border-green-300 bg-green-50 p-6 transition-opacity duration-300">
       <h2 className="mb-2 text-sm font-bold uppercase tracking-wide text-green-700">
-        Next question
+        Current investigation
       </h2>
       <p className="text-xl font-semibold leading-snug text-gray-900">{q}</p>
     </div>
   );
 }
 
-// ── Reasoning progress card ────────────────────────────────────
-function ReasoningProgress({ graph }) {
+// ── Investigation progress card ──────────────────────────────
+function InvestigationProgress({ graph, noQuestionReason: rwNoQuestionReason }) {
   if (!graph?.nodes?.length) return null;
 
+  const resolvedIds = new Set(graph.resolvedNodeIds || []);
   const unknowns = graph.nodes.filter((n) => n.kind === "unknown");
-  const remainingCount = unknowns.filter((u) => u.status !== "resolved").length;
+  const remainingCount = unknowns.filter(
+    (u) => u.status !== "resolved" && !resolvedIds.has(u.id),
+  ).length;
+  const activeNode = graph.activeUnknownNodeId
+    ? graph.nodes.find((n) => n.id === graph.activeUnknownNodeId)
+    : null;
 
   return (
-    <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.
+    <div className="investigation-card rounded-lg border border-gray-200 bg-white px-5 py-4">
+      {remainingCount > 0 && !rwNoQuestionReason ? (
+        <p className="text-sm leading-relaxed text-gray-700">
+          We are still building confidence about your situation.{" "}
+          {remainingCount === 1
+            ? "One area remains."
+            : `${remainingCount} areas remain.`}
         </p>
       ) : (
-        <p className="mb-3 text-sm leading-relaxed text-gray-700">
+        <p className="text-sm leading-relaxed text-gray-700">
           All areas under investigation are now complete.
         </p>
       )}
-      {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>
+      {activeNode && (
+        <>
+          <h3 className="mt-3 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 it matters: {activeNode.description}</p>
+          )}
+        </>
+      )}
+      {!activeNode && remainingCount === 0 && (
+        <p className="mt-3 text-sm text-gray-500">There is nothing further to investigate at this time.</p>
       )}
     </div>
   );
 }
 
-// ── No question state ─────────────────────────────────────────
-function NoQuestionMessage({ noQuestionReason }) {
-  let message = "There is no next question at the moment.";
+// ── Investigation complete state ───────────────────────────────
+function InvestigationCompleteMessage({ noQuestionReason }) {
+  let message = "We have established enough for now.";
   if (noQuestionReason) {
     const reason = String(noQuestionReason);
-    if (reason.toLowerCase().includes("satisfied") || reason.toLowerCase().includes("complete")) {
-      message += " The situation has been fully investigated.";
+    if (
+      reason.toLowerCase().includes("resolved") ||
+      reason.toLowerCase().includes("satisfied") ||
+      reason.toLowerCase().includes("complete")
+    ) {
+      message = "You have provided enough information. The situation has been fully investigated.";
     } else if (reason.toLowerCase().includes("insufficient")) {
-      message += " We need more information to determine the next step.";
+      message = "There is not yet enough evidence to guide the next step. Your original situation will remain our focus when new information becomes available.";
     } else {
-      message += " " + reason;
+      message = reason;
     }
   }
   return (
-    <div className="rounded-lg border border-gray-200 bg-gray-50 px-5 py-4 text-center">
+    <div className="rounded-lg border border-gray-200 bg-gray-50 px-5 py-4 text-center transition-opacity duration-300">
       <p className="text-sm text-gray-600">{message}</p>
     </div>
   );
@@ -313,22 +290,21 @@ export default function ReasoningWorkspace({
         </div>
       ) : (
         <>
-          {/* When analysis succeeded but there's no question to answer */}
+          {/* When investigation has nothing further to ask */}
           {status === "success" && !canAnswer && graph && (
-            <NoQuestionMessage noQuestionReason={noQuestionReason} />
+            <InvestigationCompleteMessage noQuestionReason={noQuestionReason} />
           )}
           {graph && <SituationCard centralStatement={graph.centralStatement} />}
           {graph && <CurrentUnderstanding currentSummary={graph.currentSummary} />}
-          {graph && <CurrentFocus graph={graph} />}
-          {canAnswer && <NextQuestionCard selectedQuestion={selectedQ} />}
-          {graph && <ReasoningProgress graph={graph} />}
+          {canAnswer && <CurrentInvestigationCard selectedQuestion={selectedQ} />}
+          {graph && <InvestigationProgress graph={graph} noQuestionReason={noQuestionReason} />}
 
           {/* ── Answer form ──────────────────────────────── */}
           {canAnswer && (
             <form onSubmit={onAnswerSubmit} className="space-y-4 rounded-lg border border-gray-200 bg-white p-5">
               <div>
                 <label htmlFor="rw-answer" className="mb-2 block text-sm font-medium text-gray-700">
-                  Your answer
+                  Your response
                 </label>
                 <textarea
                   id="rw-answer"

tests/ui/scenario-form.test.jsx

@@ -885,7 +885,7 @@ describe("ReasoningWorkspace UI", () => {
     expect(html).toContain("Complaints increased while production increased.");
   });
 
-  it("shows current understanding section", () => {
+  it("shows what we've established section", () => {
     const html = renderToStaticMarkup(
       <ReasoningWorkspace
         {...makeWorkspaceProps({
@@ -899,29 +899,20 @@ describe("ReasoningWorkspace UI", () => {
       />,
     );
 
-    expect(html).toContain("Current understanding");
+    expect(html).toContain("What we&#x27;ve established");
     expect(html).toContain("Nodes: 2 observation, 1 unknown");
   });
 
-  it("shows current focus section with the active unknown", () => {
+  it("prominently displays the current investigation", () => {
     const html = renderToStaticMarkup(
       <ReasoningWorkspace {...makeWorkspaceProps()} />,
     );
 
-    expect(html).toContain("What we are working out");
-    expect(html).toContain("Complaint rate denominator");
-  });
-
-  it("prominently displays the next question", () => {
-    const html = renderToStaticMarkup(
-      <ReasoningWorkspace {...makeWorkspaceProps()} />,
-    );
-
-    expect(html).toContain("Next question");
+    expect(html).toContain("Current investigation");
     expect(html).toContain("What denominator is being used for the complaint rate?");
   });
 
-  it("shows reasoning progress with plain language instead of unexplained count", () => {
+  it("shows confidence-building progress text", () => {
     const html = renderToStaticMarkup(
       <ReasoningWorkspace
         {...makeWorkspaceProps({
@@ -935,11 +926,11 @@ describe("ReasoningWorkspace UI", () => {
       />,
     );
 
-    expect(html).toContain("Reasoning progress");
+    expect(html).toContain("We are still building confidence about your situation");
     expect(html).not.toContain("3 remaining");
   });
 
-  it("explains areas that still need investigation in the progress card", () => {
+  it("explains areas that still need investigation in plain language", () => {
     const html = renderToStaticMarkup(
       <ReasoningWorkspace {...makeWorkspaceProps()} />,
     );
@@ -980,7 +971,7 @@ describe("ReasoningWorkspace UI", () => {
       <ReasoningWorkspace {...makeWorkspaceProps()} />,
     );
 
-    expect(html).toContain("Your answer");
+    expect(html).toContain("Your response");
     expect(html).toContain("Update situation");
   });
 
@@ -1018,9 +1009,8 @@ describe("ReasoningWorkspace UI", () => {
 
     // Labels and human-readable text should be present
     expect(html).toContain("Your situation");
-    expect(html).toContain("Current understanding");
-    expect(html).toContain("What we are working out");
-    expect(html).toContain("Next question");
+    expect(html).toContain("What we&#x27;ve established");
+    expect(html).toContain("Current investigation");
     expect(html).toContain("Complaint rate denominator");
 
     // Raw node IDs only appear in developer details (collapsed), not in user-facing sections
@@ -1044,8 +1034,8 @@ describe("ReasoningWorkspace UI", () => {
       <ReasoningWorkspace {...makeWorkspaceProps()} />,
     );
 
-    expect(html).toContain("Reasoning progress");
     expect(html).toContain("Current focus");
+    expect(html).not.toContain("Reasoning progress");
   });
 
   it("active unknown is shown in plain language, not raw IDs", () => {
@@ -1061,7 +1051,7 @@ describe("ReasoningWorkspace UI", () => {
     expect(html).toContain("Developer details");
   });
 
-  it("reasoning progress handles zero remaining gracefully", () => {
+  it("progress card handles zero remaining gracefully", () => {
     const html = renderToStaticMarkup(
       <ReasoningWorkspace
         {...makeWorkspaceProps({
@@ -1075,7 +1065,7 @@ describe("ReasoningWorkspace UI", () => {
       />,
     );
 
-    expect(html).toContain("Reasoning progress");
+    expect(html).toContain("All areas under investigation are now complete");
   });
 
   it("loading card appears immediately with spinner and heading", () => {
@@ -1099,7 +1089,7 @@ describe("ReasoningWorkspace UI", () => {
       <ReasoningWorkspace {...makeWorkspaceProps()} />,
     );
 
-    expect(html).toContain("Your answer");
+    expect(html).toContain("Your response");
     expect(html).toContain("Update situation");
   });
 
@@ -1159,23 +1149,7 @@ describe("ReasoningWorkspace UI", () => {
       />,
     );
 
-    expect(html).toContain("There is no next question at the moment.");
-  });
-
-  it("initial loading state appears with spinner heading", () => {
-    const html = renderToStaticMarkup(
-      <ReasoningWorkspace
-        status="loading"
-        updateStatus="idle"
-        result={null}
-        answer=""
-        setAnswer={vi.fn()}
-        onAnswerSubmit={vi.fn()}
-      />,
-    );
-
-    expect(html).toContain("Working through your situation");
-    expect(html).toContain("Reading your situation");
+    expect(html).toContain("fully investigated");
   });
 
   it("update loading state appears with spinner heading", () => {
@@ -1222,7 +1196,7 @@ describe("ReasoningWorkspace UI", () => {
 
     // Should not show any result panels or workspace
     expect(html).not.toContain("Your situation");
-    expect(html).not.toContain("Next question");
+    expect(html).not.toContain("Current investigation");
   });
 
   it("update error is visible", () => {
@@ -1263,7 +1237,7 @@ describe("ReasoningWorkspace UI", () => {
       />,
     );
 
-    expect(html).not.toContain("Your answer");
+    expect(html).not.toContain("Your response");
     expect(html).not.toContain("Update situation");
   });
 
@@ -1487,7 +1461,7 @@ describe("ReasoningWorkspace UI", () => {
     );
 
     expect(html).not.toContain("Working through your situation");
-    expect(html).toContain("Next question");
+    expect(html).toContain("Current investigation");
     expect(html).toContain("Update situation");
   });
 
@@ -1542,4 +1516,41 @@ describe("ReasoningWorkspace UI", () => {
     // No form controls remain during loading
     expect(html).not.toContain("Update situation");
   });
+
+  it("investigation complete message shows confident language when satisfied", () => {
+    const html = renderToStaticMarkup(
+      <ReasoningWorkspace
+        status="success"
+        updateStatus="idle"
+        result={makeWorkspaceResult({
+          selectedQuestion: null,
+          diagnostics: { ...makeWorkspaceResult().diagnostics, noQuestionReason: "All unknowns satisfied" },
+        })}
+        answer=""
+        setAnswer={vi.fn()}
+        onAnswerSubmit={vi.fn()}
+      />,
+    );
+
+    expect(html).toContain("fully investigated");
+    expect(html).not.toContain("There is no next question at the moment");
+  });
+
+  it("investigation complete shows confidence-building fallback", () => {
+    const html = renderToStaticMarkup(
+      <ReasoningWorkspace
+        status="success"
+        updateStatus="idle"
+        result={makeWorkspaceResult({
+          selectedQuestion: null,
+          diagnostics: { ...makeWorkspaceResult().diagnostics, noQuestionReason: null },
+        })}
+        answer=""
+        setAnswer={vi.fn()}
+        onAnswerSubmit={vi.fn()}
+      />,
+    );
+
+    expect(html).toContain("We have established enough for now");
+  });
 });