Reasoning Trace Collapse
A reasoning trace that streams while the model works and folds into one line the moment the answer lands.
Reading the invoice table
$128,400 across 47 rows
Build a reasoning trace that streams and then collapses. Structure: a disclosure row, a collapsible trace on a vertical rail, and the answer card below. The behavior in order: 1. While working, the trace is OPEN and steps stream in, about 750ms apart, each entering from x -6. Put them on a single vertical rule with a small dot per step - one rule ties them into one thought instead of four separate messages. Accent only the dot of the CURRENT step; finished ones are hairline, so progress is legible without reading any text. 2. The answer appears. 3. About 500ms LATER, the trace folds itself shut. The delay matters: the eye should land on the answer first and then see where the reasoning went. Collapsing at the same instant steals the moment. It must COLLAPSE, not disappear. Leaving it open buries the answer under the reasoning; removing it means nobody can ever check the work. The collapsed summary has to be worth reading: "thought for 3.6s - 4 steps". Duration and step count are the two facts worth keeping visible when the detail is hidden. Rotate the chevron 90 degrees when open and set aria-expanded on the toggle. Animate the trace's height between 0 and auto on a spring (stiffness ~380, damping ~34). Accessibility: put aria-live="polite" on the ANSWER, not on the trace - a trace that announces every step talks over the answer it is building toward. Under prefers-reduced-motion, render the collapsed, answered state. Colors as tokens: paper answer card, muted ink for the trace, one accent for the live step, semantic green for the answer check. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.