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

experiment: stabilise conversation and reference lanes

Browse Source
This commit is contained in:
robbond
2026-08-05 13:24:04 +01:00
parent 8e96907209
commit 54acf0d565
3 changed files with 133 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/ux-guidelines.md
+13
View File
@@ -409,3 +409,16 @@ Users should always know what happens next.
The investigation should feel continuous rather than page-based.
The conversation should flow naturally.
## Conversation and Reference Lanes
On desktop, the workspace splits into two persistent lanes:
- The left lane (approximately two-thirds) is the active conversation area.
- The right lane (approximately one-third) holds supporting reference artefacts.
The active conversation has a stable spatial home. Question, Response, and History form one continuous interaction lane. History grows downward beneath the active response. Each turn stays part of the same notebook within that lane.
Supporting artefacts should remain spatially stable while the conversation grows. Desktop width should be used to preserve context, not merely enlarge cards. Text should not be truncated when sufficient readable space exists.
Mobile remains a natural stacked flow with no horizontal split.
components/reasoning-workspace.jsx
+71 -76
View File
@@ -345,10 +345,7 @@ function InvestigationHistoryCard({ turn }) {
const isCollapsed = turn._collapsed;
const isAnswered = Boolean(turn.answer?.trim());
const displayedQuestion =
isCollapsed && turn.question.length > 60
? `${turn.question.slice(0, 60)}…`
: turn.question;
const displayedQuestion = turn.question;
return (
<details
@@ -656,83 +653,81 @@ export default function ReasoningWorkspace({
</div>
) : (
<>
{/* ═══════════════ CONVERSATION — vertical flow ═══════════════ */}
{hasSelectedQuestion && (
<div className="space-y-6">
{/* Current Investigation — primary focus, full width */}
<CurrentInvestigationCard selectedQuestion={selectedQ} graph={graph} />
{/* Post-update acknowledgement */}
{updateStatus === "success" && !isUpdating && <UpdateAcknowledgement updateResult={result} />}
{/* Response — directly beneath the question */}
{!isUpdating && canAnswer && (
<form onSubmit={handleUpdateCaptureAndSubmit} 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">
Response
</label>
<textarea
id="rw-answer"
value={answer}
onChange={(e) => setAnswer(e.target.value)}
rows={4}
disabled={updateStatus === "loading"}
className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 disabled:cursor-not-allowed disabled:opacity-60"
placeholder="What do you know about this?"
/>
</div>
<div className="flex items-center justify-between">
<p className="text-xs text-gray-400">
One update turn only in this prototype.
</p>
<button
type="submit"
disabled={!answer.trim()}
className="rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
>
Update
</button>
</div>
</form>
)}
{/* Terminal state — when no active question */}
{status === "success" && !hasSelectedQuestion && (
<>
{genuineCompletion && (
<CompletionCard summary={resolveCurrentSummary(propUnderstanding || graph?.currentSummary || result?.updatedSituationGraph?.currentSummary)} />
)}
{!genuineCompletion && (
<EvidenceLimitCard summary={resolveCurrentSummary(propUnderstanding || graph?.currentSummary || result?.updatedSituationGraph?.currentSummary)} />
)}
</>
)}
{/* History — the conversation that has just happened */}
{investigationHistory.length > 0 && (
<InvestigationHistory turns={investigationHistory} />
)}
</div>
)}
{/* ═══════════════ WORKSPACE — supporting context ═══════════════ */}
{hasSelectedQuestion && hasCurrentSummaryCondition && (
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
{/* ── Left lane: active conversation & notebook ───────── */}
<div className="space-y-6 lg:col-span-2">
<CurrentUnderstandingCard currentSummary={graph?.currentSummary || result?.updatedSituationGraph?.currentSummary} plainLanguage={propUnderstanding || null} />
<div className="opacity-75">
<InvestigationSummaryPanel graph={graph} selectedQuestion={selectedQ} result={result} updateStatus={updateStatus} />
</div>
<CurrentInvestigationCard selectedQuestion={selectedQ} graph={graph} />
{updateStatus === "success" && !isUpdating && (
<UpdateAcknowledgement updateResult={result} />
)}
{!isUpdating && canAnswer && (
<form onSubmit={handleUpdateCaptureAndSubmit} 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">
Response
</label>
<textarea
id="rw-answer"
value={answer}
onChange={(e) => setAnswer(e.target.value)}
rows={4}
disabled={updateStatus === "loading"}
className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 disabled:cursor-not-allowed disabled:opacity-60"
placeholder="What do you know about this?"
/>
</div>
<div className="flex items-center justify-between">
<p className="text-xs text-gray-400">
One update turn only in this prototype.
</p>
<button
type="submit"
disabled={!answer.trim()}
className="rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
>
Update
</button>
</div>
</form>
)}
{/* Terminal state */}
{status === "success" && !hasSelectedQuestion && (
<>
{genuineCompletion && (
<CompletionCard summary={resolveCurrentSummary(propUnderstanding || graph?.currentSummary || result?.updatedSituationGraph?.currentSummary)} />
)}
{!genuineCompletion && (
<EvidenceLimitCard summary={resolveCurrentSummary(propUnderstanding || graph?.currentSummary || result?.updatedSituationGraph?.currentSummary)} />
)}
</>
)}
{investigationHistory.length > 0 && (
<InvestigationHistory turns={investigationHistory} />
)}
{/* Supporting context within conversation lane */}
{hasCurrentSummaryCondition && (
<>
<CurrentUnderstandingCard currentSummary={graph?.currentSummary || result?.updatedSituationGraph?.currentSummary} plainLanguage={propUnderstanding || null} />
<div className="opacity-75">
<InvestigationSummaryPanel graph={graph} selectedQuestion={selectedQ} result={result} updateStatus={updateStatus} />
</div>
</>
)}
</div>
<div className="space-y-6 lg:col-span-1">
<OriginalSituation scenario={scenario} centralStatement={graph?.centralStatement} />
<InvestigationMap turnCount={investigationHistory.length} />
</div>
{/* ── Right lane: stable supporting reference ───────── */}
{hasCurrentSummaryCondition && (
<div className="space-y-6 lg:col-span-1">
<OriginalSituation scenario={scenario} centralStatement={graph?.centralStatement} />
<InvestigationMap turnCount={investigationHistory.length} />
</div>
)}
</div>
)}
docs/design-evolution-log.md
+49
View File
@@ -393,6 +393,31 @@ Proceed to investigate consistency between the landing experience and investigat
---
### Experiment 09 — Investigation Rhythm
#### Result
Partially confirmed.
#### What did we learn?
- Moving History directly beneath Response improves the sense of conversational continuity.
- The sequence Question → Response → History is cognitively coherent.
- History behaves like the growing notebook of the investigation, not general reference material.
- Allowing History to span the full workspace breaks the wider spatial model.
- Situation and Investigation Map should remain stable supporting artefacts rather than moving down as the notebook grows.
- The conversation needs a dedicated vertical lane.
#### Decision
Keep History directly connected to Response.
Refine the desktop workspace into a stable conversation lane and a stable supporting lane.
Do not rewrite previous experiments.
---
### Experiment 08 — Consistent Investigation Responses
#### Hypothesis
@@ -429,6 +454,30 @@ Retain consistent input sizing across both contexts.
---
### Experiment 10 — Stable Conversation Column
#### Hypothesis
A persistent two-thirds conversation column beside a one-third supporting column will allow the investigation notebook to grow without moving the shared reference artefacts.
#### Questions
- Does the left column feel like one continuous investigation?
- Does History grow naturally beneath Response?
- Do Situation and Investigation Map remain easy to reference?
- Does the interface feel spatially stable as turns accumulate?
- Does showing full question text improve readability now that sufficient width exists?
#### Evaluation
Pending visual review.
#### Status
Experimental.
---
## Emerging Direction
The first UX experiments focused on workspace structure.