Timeline

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

import * as TimelineItemStories from './TimelineItem.stories';

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

<Title />

## Purpose

One line in a log or an agent's work: an optional status icon, a label, quiet secondary text, a time and optional detail that opens.

## 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.

## Usage

For steps people read in order, with a heading and a paragraph each, use Milestone instead; the Timeline page compares them.

Use it to show an event or what an agent did or is doing, for example "Deployed to Dev", "Updated the homepage hero", "Checking site performance" or a tool call whose input and output can be opened.

- Use it inside a Timeline or a Chain of Thought list, or alone inline in a message.
- Keep the label short and in the user's language; put the quiet detail (a path, a count, a duration) in the secondary text.
- Content under the step is a slot (`children`), always visible; what goes in it is up to the screen (a log block, file tags, a table). Use `detail` for content that starts collapsed.
- Set `isAgentic` for the agent's own items; they take the agent color instead of the neutral grey.
- Pass `time` already formatted (and translated); it sits at the end of the row.
- It renders a `div`, so it can sit in a list or stand alone.

## Implementation

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

<hr />

<Canvas of={TimelineItemStories.Default} />
<Controls of={TimelineItemStories.Default} />

<hr />

<Canvas of={TimelineItemStories.Slot} />