robbond/confidence-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: evolve investigation into guided conversation

Browse Source
This commit is contained in:
robbond
2026-08-03 17:01:04 +01:00
parent 0dd15345e4
commit 7bc1c93486
4 changed files with 169 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/working-rules.md
+38
View File
@@ -66,6 +66,44 @@ Use a focused commit message.
Do not merge or tag unless explicitly requested. 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 ## Response discipline
At the end of a task, normally report only: At the end of a task, normally report only:
app/globals.css
+21
View File
@@ -7,8 +7,29 @@
to { transform: rotate(360deg); } 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) { @media (prefers-reduced-motion: reduce) {
[style*="animation:spin"] { [style*="animation:spin"] {
animation: none !important; animation: none !important;
} }
.investigation-card {
animation: none;
}
} }
components/reasoning-workspace.jsx
+55 -79
View File
@@ -63,7 +63,7 @@ function ActivitySpinner() {
function SituationCard({ centralStatement }) { function SituationCard({ centralStatement }) {
if (!centralStatement) return null; if (!centralStatement) return null;
return ( 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"> <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-gray-500">
Your situation Your situation
</h2> </h2>
@@ -76,9 +76,9 @@ function SituationCard({ centralStatement }) {
function CurrentUnderstanding({ currentSummary }) { function CurrentUnderstanding({ currentSummary }) {
if (currentSummary) { if (currentSummary) {
return ( 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"> <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500">
Current understanding What we&#x27;ve established
</h2> </h2>
<p className="text-sm leading-relaxed text-gray-700">{currentSummary}</p> <p className="text-sm leading-relaxed text-gray-700">{currentSummary}</p>
</div> </div>
@@ -86,7 +86,7 @@ function CurrentUnderstanding({ currentSummary }) {
} }
return ( 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"> <p className="text-sm leading-relaxed text-gray-600">
We have started to separate what is known from what still needs checking. We have started to separate what is known from what still needs checking.
</p> </p>
@@ -94,110 +94,87 @@ function CurrentUnderstanding({ currentSummary }) {
); );
} }
// ── Current focus card ──────────────────────────────────────── // ── Current investigation card (prominent) ─────────────────────
function CurrentFocus({ graph }) { function CurrentInvestigationCard({ selectedQuestion }) {
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 }) {
if (!selectedQuestion) return null; if (!selectedQuestion) return null;
const q = typeof selectedQuestion === "string" ? selectedQuestion : selectedQuestion.question; const q = typeof selectedQuestion === "string" ? selectedQuestion : selectedQuestion.question;
if (!q) return null; if (!q) return null;
return ( 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"> <h2 className="mb-2 text-sm font-bold uppercase tracking-wide text-green-700">
Next question Current investigation
</h2> </h2>
<p className="text-xl font-semibold leading-snug text-gray-900">{q}</p> <p className="text-xl font-semibold leading-snug text-gray-900">{q}</p>
</div> </div>
); );
} }
// ── Reasoning progress card ──────────────────────────────────── // ── Investigation progress card ──────────────────────────────
function ReasoningProgress({ graph }) { function InvestigationProgress({ graph, noQuestionReason: rwNoQuestionReason }) {
if (!graph?.nodes?.length) return null; if (!graph?.nodes?.length) return null;
const resolvedIds = new Set(graph.resolvedNodeIds || []);
const unknowns = graph.nodes.filter((n) => n.kind === "unknown"); 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 ( return (
<div className="rounded-lg border border-gray-200 bg-white px-5 py-4"> <div className="investigation-card 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"> {remainingCount > 0 && !rwNoQuestionReason ? (
Reasoning progress <p className="text-sm leading-relaxed text-gray-700">
</h2> We are still building confidence about your situation.{" "}
{remainingCount > 0 ? ( {remainingCount === 1
<p className="mb-3 text-sm leading-relaxed text-gray-700"> ? "One area remains."
We have identified {remainingCount} area{remainingCount === 1 ? "" : "s"} that still need investigation. : `${remainingCount} areas remain.`}
</p> </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. All areas under investigation are now complete.
</p> </p>
)} )}
{graph.activeUnknownNodeId && (() => { {activeNode && (
const activeNode = graph.nodes.find((n) => n.id === graph.activeUnknownNodeId); <>
if (!activeNode) return null; <h3 className="mt-3 mb-1 text-xs font-medium uppercase tracking-wide text-gray-400">
return ( Current focus
<> </h3>
<h3 className="mb-1 text-xs font-medium uppercase tracking-wide text-gray-400"> <p className="text-sm font-medium text-gray-900">{activeNode.label}</p>
Current focus {activeNode.description && activeNode.description !== activeNode.label && (
</h3> <p className="mt-1 text-xs text-gray-500">Why it matters: {activeNode.description}</p>
<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> )}
)} {!activeNode && remainingCount === 0 && (
</> <p className="mt-3 text-sm text-gray-500">There is nothing further to investigate at this time.</p>
);
})()}
{!graph.activeUnknownNodeId && remainingCount === 0 && (
<p className="text-sm text-gray-500">There is no active area of investigation at the moment.</p>
)} )}
</div> </div>
); );
} }
// ── No question state ───────────────────────────────────────── // ── Investigation complete state ───────────────────────────────
function NoQuestionMessage({ noQuestionReason }) { function InvestigationCompleteMessage({ noQuestionReason }) {
let message = "There is no next question at the moment."; let message = "We have established enough for now.";
if (noQuestionReason) { if (noQuestionReason) {
const reason = String(noQuestionReason); const reason = String(noQuestionReason);
if (reason.toLowerCase().includes("satisfied") || reason.toLowerCase().includes("complete")) { if (
message += " The situation has been fully investigated."; 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")) { } 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 { } else {
message += " " + reason; message = reason;
} }
} }
return ( 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> <p className="text-sm text-gray-600">{message}</p>
</div> </div>
); );
@@ -313,22 +290,21 @@ export default function ReasoningWorkspace({
</div> </div>
) : ( ) : (
<> <>
{/* When analysis succeeded but there's no question to answer */} {/* When investigation has nothing further to ask */}
{status === "success" && !canAnswer && graph && ( {status === "success" && !canAnswer && graph && (
<NoQuestionMessage noQuestionReason={noQuestionReason} /> <InvestigationCompleteMessage noQuestionReason={noQuestionReason} />
)} )}
{graph && <SituationCard centralStatement={graph.centralStatement} />} {graph && <SituationCard centralStatement={graph.centralStatement} />}
{graph && <CurrentUnderstanding currentSummary={graph.currentSummary} />} {graph && <CurrentUnderstanding currentSummary={graph.currentSummary} />}
{graph && <CurrentFocus graph={graph} />} {canAnswer && <CurrentInvestigationCard selectedQuestion={selectedQ} />}
{canAnswer && <NextQuestionCard selectedQuestion={selectedQ} />} {graph && <InvestigationProgress graph={graph} noQuestionReason={noQuestionReason} />}
{graph && <ReasoningProgress graph={graph} />}
{/* ── Answer form ──────────────────────────────── */} {/* ── Answer form ──────────────────────────────── */}
{canAnswer && ( {canAnswer && (
<form onSubmit={onAnswerSubmit} className="space-y-4 rounded-lg border border-gray-200 bg-white p-5"> <form onSubmit={onAnswerSubmit} className="space-y-4 rounded-lg border border-gray-200 bg-white p-5">
<div> <div>
<label htmlFor="rw-answer" className="mb-2 block text-sm font-medium text-gray-700"> <label htmlFor="rw-answer" className="mb-2 block text-sm font-medium text-gray-700">
Your answer Your response
</label> </label>
<textarea <textarea
id="rw-answer" id="rw-answer"
tests/ui/scenario-form.test.jsx
+55 -44
View File
@@ -885,7 +885,7 @@ describe("ReasoningWorkspace UI", () => {
expect(html).toContain("Complaints increased while production increased."); expect(html).toContain("Complaints increased while production increased.");
}); });
it("shows current understanding section", () => { it("shows what we've established section", () => {
const html = renderToStaticMarkup( const html = renderToStaticMarkup(
<ReasoningWorkspace <ReasoningWorkspace
{...makeWorkspaceProps({ {...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"); 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( const html = renderToStaticMarkup(
<ReasoningWorkspace {...makeWorkspaceProps()} />, <ReasoningWorkspace {...makeWorkspaceProps()} />,
); );
expect(html).toContain("What we are working out"); expect(html).toContain("Current investigation");
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("What denominator is being used for the complaint rate?"); 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( const html = renderToStaticMarkup(
<ReasoningWorkspace <ReasoningWorkspace
{...makeWorkspaceProps({ {...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"); 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( const html = renderToStaticMarkup(
<ReasoningWorkspace {...makeWorkspaceProps()} />, <ReasoningWorkspace {...makeWorkspaceProps()} />,
); );
@@ -980,7 +971,7 @@ describe("ReasoningWorkspace UI", () => {
<ReasoningWorkspace {...makeWorkspaceProps()} />, <ReasoningWorkspace {...makeWorkspaceProps()} />,
); );
expect(html).toContain("Your answer"); expect(html).toContain("Your response");
expect(html).toContain("Update situation"); expect(html).toContain("Update situation");
}); });
@@ -1018,9 +1009,8 @@ describe("ReasoningWorkspace UI", () => {
// Labels and human-readable text should be present // Labels and human-readable text should be present
expect(html).toContain("Your situation"); expect(html).toContain("Your situation");
expect(html).toContain("Current understanding"); expect(html).toContain("What we&#x27;ve established");
expect(html).toContain("What we are working out"); expect(html).toContain("Current investigation");
expect(html).toContain("Next question");
expect(html).toContain("Complaint rate denominator"); expect(html).toContain("Complaint rate denominator");
// Raw node IDs only appear in developer details (collapsed), not in user-facing sections // Raw node IDs only appear in developer details (collapsed), not in user-facing sections
@@ -1044,8 +1034,8 @@ describe("ReasoningWorkspace UI", () => {
<ReasoningWorkspace {...makeWorkspaceProps()} />, <ReasoningWorkspace {...makeWorkspaceProps()} />,
); );
expect(html).toContain("Reasoning progress");
expect(html).toContain("Current focus"); expect(html).toContain("Current focus");
expect(html).not.toContain("Reasoning progress");
}); });
it("active unknown is shown in plain language, not raw IDs", () => { it("active unknown is shown in plain language, not raw IDs", () => {
@@ -1061,7 +1051,7 @@ describe("ReasoningWorkspace UI", () => {
expect(html).toContain("Developer details"); expect(html).toContain("Developer details");
}); });
it("reasoning progress handles zero remaining gracefully", () => { it("progress card handles zero remaining gracefully", () => {
const html = renderToStaticMarkup( const html = renderToStaticMarkup(
<ReasoningWorkspace <ReasoningWorkspace
{...makeWorkspaceProps({ {...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", () => { it("loading card appears immediately with spinner and heading", () => {
@@ -1099,7 +1089,7 @@ describe("ReasoningWorkspace UI", () => {
<ReasoningWorkspace {...makeWorkspaceProps()} />, <ReasoningWorkspace {...makeWorkspaceProps()} />,
); );
expect(html).toContain("Your answer"); expect(html).toContain("Your response");
expect(html).toContain("Update situation"); expect(html).toContain("Update situation");
}); });
@@ -1159,23 +1149,7 @@ describe("ReasoningWorkspace UI", () => {
/>, />,
); );
expect(html).toContain("There is no next question at the moment."); expect(html).toContain("fully investigated");
});
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");
}); });
it("update loading state appears with spinner heading", () => { it("update loading state appears with spinner heading", () => {
@@ -1222,7 +1196,7 @@ describe("ReasoningWorkspace UI", () => {
// Should not show any result panels or workspace // Should not show any result panels or workspace
expect(html).not.toContain("Your situation"); expect(html).not.toContain("Your situation");
expect(html).not.toContain("Next question"); expect(html).not.toContain("Current investigation");
}); });
it("update error is visible", () => { 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"); expect(html).not.toContain("Update situation");
}); });
@@ -1487,7 +1461,7 @@ describe("ReasoningWorkspace UI", () => {
); );
expect(html).not.toContain("Working through your situation"); expect(html).not.toContain("Working through your situation");
expect(html).toContain("Next question"); expect(html).toContain("Current investigation");
expect(html).toContain("Update situation"); expect(html).toContain("Update situation");
}); });
@@ -1542,4 +1516,41 @@ describe("ReasoningWorkspace UI", () => {
// No form controls remain during loading // No form controls remain during loading
expect(html).not.toContain("Update situation"); 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");
});
}); });