Agent Steps
An agent's plan with each step's state. The whole plan is shown from the start, including steps not yet reached — revealing them one at a time hides how much is left, which is what someone watching most wants to know.
src/components/ui/agent-steps.tsxAbout
From the component's own source, where it was written.
An agent's plan, with each step's state as it runs.
The plan is shown whole from the start, including steps not yet reached. Revealing them one at a time hides how much is left, which is the single thing someone watching an agent most wants to know.
Related to ToolCall, which shows one invocation with its arguments and result. This is the level above: the sequence those calls belong to.
Install
npx astralyx-ui add agent-steps
Usage
import { AgentSteps } from '@/components/ui/agent-steps'
<AgentSteps steps={steps} title="Fixing the failing test" />Composer
Change the props and the source below follows.
- Read the failing test2s
- Locate controlSize in styles.ts4s
- RunningApply the radius fix
- Re-run the suite
- Update the changelog
<AgentSteps steps={steps} title="Fixing the failing test" />Examples
Plan
<AgentSteps steps={steps} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
AgentSteps
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | — |
| steps | AgentStep[] | required | { id, label, status, duration?, detail? }. |
| defaultExpanded | string[] | [] | — |
| to | one level up | — | ToolCall shows a single invocation with its arguments and result; this shows the sequence those calls belong to. |
Types
AgentStep
| Field | Type | Description |
|---|---|---|
| id | string | — |
| label | ReactNode | — |
| status | AgentStepStatus | Running shows a spinner; skipped strikes the label through. |
| duration? | number | Seconds. |
| detail? | ReactNode | Expandable body — tool calls, output, an error. |
| Type | Definition | Description |
|---|---|---|
AgentStepStatus | 'pending' | 'running' | 'done' | 'failed' | 'skipped' | An agent's plan, with each step's state as it runs. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| progress | aria-live | The done-of-total counter is a polite live region, so completion is announced without stealing focus. |