Reasoning block

Tab

Moves to the header, then to Stop or Retry when shown, then to Copy reasoning inside the open block.

EnterorSpace

Opens or closes the full reasoning from the header.

• The header is a real button with aria-expanded and aria-controls; its name is the visible label, such as "Thought for 7s".
• A polite live region announces status changes only (thinking, thought for 7 seconds, stopped, interrupted), never each streamed chunk or each second.
• The two line live preview is aria-hidden because the same text is in the full reasoning region, which carries aria-busy while streaming.
• Status is never color alone: errors pair an alert icon with "Thinking interrupted", and the footer pairs a check, square or alert with Done, Stopped or the reason.
• The no props preview says "Simulated, nothing was sent to a model" to assistive technology.

• Streaming is chunked: each appended chunk fades in once over 140ms. No blur, slide or per word springs.
• Stop and Retry overflow a fixed 20px row, so the header is 44px in every state and never shifts when an action appears.
• The live preview stays anchored to its newest line; when a line wraps, the text glides up with a bounce free spring (0.24s) instead of jumping.
• Label swaps (Thinking to Thought for 7s) are a single crossfade: out in 100ms, in over 160ms with a 2px rise. The seconds counter rolls in tabular numerals inside a reserved width.
• Opening, closing and the preview collapsing all animate measured height with one critically damped spring (0.26s) and one opacity fade. Only what streams in while open (a new step, paragraph or chunk) fades on its own, so nothing animates twice.
• The shimmer and the self-playing loop pause off screen and in background tabs. Reduced motion keeps every end state, drops the shimmer, the glide and the chunk fades, and cuts heights instantly.

• Fills its container from 320px up; the header never wraps and long labels truncate.
• The live preview stays two lines at every width, so streaming never changes the block's height.
• Paragraphs wrap with text-wrap: pretty and break long identifiers instead of scrolling sideways.
• On touch, the whole header and live preview are one press target of at least 44px.

• Streamed text is appended as spans that never re-render once on screen; finished messages render plain text.
• Only the open block mounts its full reasoning, so long transcripts of collapsed blocks stay light.
• The preview glide is one transform on one element driven by a ResizeObserver, with no layout animation on text.

• Use it above the answer in an assistant message whenever the model streams reasoning (extended thinking, reasoning summaries). Feed it the raw thinking text and switch status to done as soon as answer tokens start.
• Do not pass seconds while streaming unless your server measures it; the block counts by itself and freezes the value when status leaves thinking. Store that number with the message so history shows the same "Thought for 7s".
• Keep reasoning out of the answer text. For tool calls made during reasoning, render ToolCall rows after the block instead of inside it.
• Use variant="plain" inside a message bubble that already has its own surface, so you never nest cards.
• Swap the mark for another provider by passing model={{ name, mark }} with an 18px SVG.

The full library index for assistants is at /llms.txt.