AI Agent Status
A pill showing what an agent is doing, in words as well as colour.
- AI
- 1 file
- 1 npm package
- Accessibility notes
Working
pnpm dlx @dowel-ui/cli add ai-agent-statusnpm packages installed: class-variance-authority.
import { AgentStatus } from "@/components/ui/ai-agent-status";Default
States
Custom Wording
Agent Fleet
<AgentStatus>
| Prop | Type | Default |
|---|---|---|
labelOverrides the wording. The state must still be readable as text. | string | — |
liveAnnounce changes politely. Off by default: several agents each announcing their own transitions turns a dashboard into noise. Turn it on for the one agent the user is watching. | boolean | false |
state | AgentState | "idle" |
Plus every attribute of <span>.
The state is always text. Agent states matter most when something has failed, which is exactly when a colour-only signal fails the people who most need to see it. Live announcements are off by default — several agents each announcing their transitions turns a dashboard into noise; enable it for the one agent being watched.
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