answered quiz cards show the confidence rail — the slider's record form

The rail paint is extracted to components/confidence-rail.tsx (ramp,
tick stack, geometry laws) and shared by both surfaces so they cannot
drift: the dock's live slider paints the rail under its disc, the
answered card renders it disc-less — the missing handle itself says
'record, not control'. Same look otherwise: thin rail, stop color,
solid ticks, % read-out on the right, dock-mirrored placement (below
the options, above the thinking).

Renders only where a confidence exists: quiz answers with one sent;
never on 'I don't know' (none was sent), never on explain/ask, never
on pre-feature records (optional field, absent).
This commit is contained in:
amosblomqvist
2026-10-02 01:21:12 +03:00
parent 1375295d54
commit 6da192bb22
4 changed files with 101 additions and 30 deletions
+17
View File
@@ -1,5 +1,6 @@
"use client";
import { ConfidenceRail } from "@/components/confidence-rail";
import { GlyphMark } from "@/components/ui/glyph-mark";
import { cn } from "@/lib/utils";
import { MessageResponse } from "@/components/ai-elements/message";
@@ -101,6 +102,22 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
)}
{answer.text && <div className="lh-prose mt-2 whitespace-pre-wrap">“{answer.text}”</div>}
{/* The confidence record (owner round 6): the slider's rail, disc
removed — the missing handle itself says "this is a record, not a
control". Same paint, same ticks, same ramp, same % read-out as the
live dock. Quiz answers only, and only when a confidence exists:
"I don't know" sent none (its slider was grayed out), explain and
ask never had one, and records from before the feature carry no
field — nothing to show, nothing rendered. */}
{isQuiz && answer.confidence != null && (
<div className="mt-3 flex items-center gap-3" data-testid="answered-confidence">
<ConfidenceRail value={answer.confidence} className="min-w-0 flex-1" />
<span className="w-9 shrink-0 text-right font-mono text-sm tabular-nums text-muted-foreground">
{answer.confidence}%
</span>
</div>
)}
{answer.dontKnow && isQuiz && (
<div className="mt-2 text-sm text-muted-foreground">Answered “I don't know”.</div>
)}