AI Agent Plan
What an agent intends to do — including when it changes its mind mid-run.
- AI
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add ai-agent-planNo npm packages are needed beyond what Dowel already requires.
import { AgentPlan } from "@/components/ui/ai-agent-plan";Default
Proposed
Plan Changes Mid Run
Failure
With Sub Steps
Complete
With Notes
Quiet Completed
Sweep
<AgentPlan>
| Prop | Type | Default |
|---|---|---|
label (required)Names the plan, so the list is not an unlabelled sequence. | string | — |
steps (required) | PlanStep[] | — |
quietCompletedCompleted steps recede, so the running one is what stands out. | boolean | false |
runningIndicatorHow the running step is marked: | PlanRunningIndicator | "pulse" |
children | ReactNode | — |
Plus every attribute of <div> except children.
<AgentPlanSummary>
Plus every attribute of <p>.
<AgentPlanSteps>
Plus every attribute of <ol>.
<AgentPlanStep>
| Prop | Type | Default |
|---|---|---|
step (required) | PlanStep | — |
nestedSet on sub-steps. Not part of the public API surface. | boolean | false |
Plus every attribute of <li> except children.
An ordered list, because a plan is a sequence and the order carries meaning an unordered list would discard. The running step carries aria-current="step", which marks the reader's place without moving focus and fighting anyone reading ahead. Every status is stated in text as well as drawn, and the markers are aria-hidden so the status is not heard twice per step. The live region reports structural revisions only — announcing every status transition would talk over the reader continuously on a plan of any length. Drawn checks and crosses live inside the hidden markers; quietCompleted dims finished steps with a contrast-audited token, and the optional sweep is decoration that stops under reduced motion.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes