An agent's reasoning as a live disclosure. The spine column summarizes; steps unfold beside it along the reading direction, the running step always at the left edge.

Design question

A reasoning trace is an accordion that writes itself. Horizontal traces expand downward and shove the coming reply off-screen. On the vertical axis, where do live steps unfold · and where does the newest one land?

Decision

Treat it as a column accordion with a pulse: the header spine keeps its length, steps unfold leftward as thin columns in reading order, and the running step is always the leftmost · the trace's write head stands exactly where the finished reply will begin.

Default

질문 분석

생각하는 중… 질문 분석

The trace writes itself along the reading direction · the spine keeps its length, each step unfolds leftward, and the running step is always the leftmost, exactly where the finished reply will begin. The spine collapses the trace to a summary.

tsx
1// The spine keeps its length; steps unfold LEFTWARD as thin
2// columns · the running step is always the leftmost.
3<div role="group" aria-label="추론 과정"
4  style={{ display: "flex", flexDirection: "row-reverse", gap: 12 }}>
5  <button aria-expanded={open} aria-controls="trace"
6    style={{ writingMode: "vertical-rl", textOrientation: "mixed" }}>
7    {/* digits stay upright · wrap them in text-combine-upright */}
8    {finished ? "4초 동안 생각함" : "생각하는 중…"}

Guidance

Unfold each step leftward beside the spine · the newest at the left edge
Mark the running step with aria-current='step' and a distinct glyph
Keep digits in the labels upright with text-combine-upright (tate-chu-yoko)
Collapse to the summary spine once the reply starts · the trace is a receipt, not the content

Don't

Expand the trace downward · that lengthens the spine column and breaks its line
Reorder or re-time steps after completion · the trace is a record
Announce every token of a step · announce the label once, when the step completes

Accessibility

The spine is a button with aria-expanded and aria-controls; the running step carries aria-current='step'. Step transitions are announced once each through a polite status region. Under prefers-reduced-motion the trace renders finished · no step-by-step animation.

Open question

Should a finished trace collapse on its own when the reply starts streaming, or stay open until dismissed? Auto-collapse returns its width to the reply, but yanking columns away mid-read violates the reader's ground.

PreviousStreaming Text Next Prompt Bar

1	// The spine keeps its length; steps unfold LEFTWARD as thin
2	// columns · the running step is always the leftmost.
3	<div role="group" aria-label="추론 과정"
4	style={{ display: "flex", flexDirection: "row-reverse", gap: 12 }}>
5	<button aria-expanded={open} aria-controls="trace"
6	style={{ writingMode: "vertical-rl", textOrientation: "mixed" }}>
7	{/* digits stay upright · wrap them in text-combine-upright */}
8	{finished ? "4초 동안 생각함" : "생각하는 중…"}