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.

## Usage

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} />