Chain of Thought

import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as ChainOfThoughtStories from './ChainOfThought.stories';

<Meta of={ChainOfThoughtStories} name='Usage' />

<Title />

## Purpose

A collapsible list of the steps an agent took or plans to take. Use it to let people see an agent's work without putting it in their way. The summary line is always visible; the steps open on demand. It can open on its own while the agent is working (`expandWhenActive`) and collapse when done.

## TL;DR: Chain of Thought, Timeline or Milestone List?

- **Chain of Thought:** an agent's reasoning under a reply, behind a summary line ("Thought for 17s") that opens on demand. No line, no rail.
- **Timeline:** events that happened or are happening, one line each (status icon, label, time). Always open, and the main content of a screen: a deploy history, an event log, an agent's run. Optional rail between the icons.
- **Milestone List:** steps people read in order, often still ahead of them, with a heading and a paragraph each on a card. One line runs down the whole list: the stages of an application process.

Quick test:

1. Do the steps sit under a reply and need to stay out of the way? **Chain of Thought.**
2. Otherwise, does each entry have a status icon or a time at the end of the row? **Timeline.**
3. Otherwise, does each have a heading and a paragraph? **Milestone List.**

A Chain of Thought is built from a Timeline and uses the same rows, and it can sit inside a Timeline as one entry in a log. Do not mix Timeline Items and Milestones in one list.

## The summary line

The summary is a Thinking State. For a finished run, set the `label` to the part before the number ("Thought for") and pass the duration as `time` (for example `17s`) with `showTimer`, so the number gets the quieter timer style and, once the run is done, is read by screen readers. While the agent works, use a label such as "Working..." and update `time` as it ticks, or leave the timer off.

## Implementation

See the table below for the available props. The other stories show every variant and state.

<hr />

<Canvas of={ChainOfThoughtStories.Steps} />
<Controls of={ChainOfThoughtStories.Steps} />