Reasoning Trace
The thinking panel above a reply: quiet text that streams in word by word, then folds to "Thought for 6s".
While streaming the reasoning arrives in a short, five-line window that glides up as text comes in, the oldest line fading out at the top. Each new word fades up out of a soft blur, a touch brighter, then settles into the muted ink. When it is done the panel folds away to one row, and opens again to the full text.
Streaming, then done
Append text as it arrives (whole paragraphs, or a paragraph growing word by word: only the new words animate), then set status="done" with the final elapsed. This loops.
Done: closed and open
Closed, it shows summary on the same row. Click to open the full reasoning.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| status | 'streaming' | 'done' | 'done' | Streaming is always open: the ray spinner turns and the label shimmers. Done reads "Thought for Ns". |
| elapsed | number | Seconds. Streaming: the running time (whole seconds). Done: the final time. | |
| summary | string | One line about what it concluded, shown on the closed row. | |
| children | ReactNode | The reasoning, one paragraph per child. | |
| open | boolean | Controlled open state (once done). | |
| defaultOpen | boolean | false | Initial open state (once done). |
| onOpenChange | (open: boolean) => void | Called when the header is clicked. | |
| className | string | Extra class on the root. |