Thinking Trace
Navigation
Tabs
Conversation
MarkerMessage
ComponentsThinking Trace
Agent

Thinking Trace

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?

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

Do
  • 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
PreviousStreaming TextNext Prompt Bar