Agent Step

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

import * as AgentStepStories from './AgentStep.stories';

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

<Title />

## Purpose

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

## Usage

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

- Use it inside 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.
- 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={AgentStepStories.Default} />
<Controls of={AgentStepStories.Default} />