feat: evolve investigation into guided conversation

This commit is contained in:
2026-08-03 17:01:04 +01:00
parent 0dd15345e4
commit 7bc1c93486
4 changed files with 169 additions and 123 deletions
+55 -79
View File
@@ -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"