Chain of Thought

Press Replay to watch a run. A step you append fades in and its rail draws itself; its results land (the count ticks up and the sources fan out); the next step starts; and finishing sweeps the rail down to a check. It only displays: you stream the steps in as your agent works.

Basic

A ChainOfThought holds ChainOfThoughtSteps. With status="done" and the final elapsed it ends with "Worked for 11.2s".

Step states

Done steps read muted and the active one reads in full, so the eye lands on what is happening now. A pending step's icon is grey until it starts. Screen readers get each step's status.

Logos, emoji and icons

Make each step recognisable. Use the real logo of a site the agent searched, in its brand colour (sourceLogo('reddit')); an emoji for steps with no site (💡 planning, 📄 reading); or any icon. A logo whose brand colour is black (X, GitHub, Notion, Medium, Wikipedia) is drawn in the text colour, so it stays visible in dark mode.

Sources

A SourceStack of overlapping site chips shows where a step's results came from. Add onSourcesClick to make the row a button with a chevron.

Working indicator

The line under the steps: a sparkle and a shimmering "Working" with the elapsed time, or a check and "Worked for". It is also exported on its own. Pass startedAt and the time counts up by itself.

Controlled

Closed by default here. Pass open and onOpenChange to own the state.

Streaming from an agent

Append a step when a tool call starts, give it its count when the results land, mark only the last step active, and give the container status="working" with startedAt. When the run ends, switch to status="done" and the final elapsed.

// the agent's own tool calls map straight onto steps
for await (const event of agent.stream(prompt)) {
  if (event.type === 'tool_start')
    setSteps((s) => [...s, { id: event.id, icon: iconFor(event.tool), label: labelFor(event), query: event.input }]);
  if (event.type === 'tool_result')
    setSteps((s) => s.map((x) => (x.id === event.id ? { ...x, count: `${event.results.length} results` } : x)));
}
setDone(true);

Source logos

17 sites. Logos are trademarks of their owners and appear only to name where a result came from.

Motion

Only what arrives after the first render animates, so a finished run you reload does not replay.

Accessibility

• The header is a button with aria-expanded and aria-controls; steps are a list, and each one announces its status ("Done:", "In progress:", "Pending:").
• The active step has aria-current="step". The Working line is a live region; its ticking time is kept out of it.
• Text uses the muted foreground, which meets 4.5:1 on the surface in light and dark; only decorative icons are lighter.
• Logos and emoji are decorative next to a text label; give a SourceStack source a label so it is read out.
• Reduced motion makes every animation instant.

ChainOfThought props

ChainOfThoughtStep props

SourceStack props

WorkingIndicator props

SourceLogo props