Tool
Reports one agent step with its status and duration, and opens to show what it produced.
Configurations
Supported configurations for this component.
States
Interaction states covered by the API and the style contract.
Configurations
5 examplesFound 412 open deals, 37 flagged as at risk.
Found 412 open deals, 37 flagged as at risk.
The CRM returned 429 Too Many Requests. Nothing was read.
The CRM returned 429 Too Many Requests. Nothing was read.
States
2 examplesAdd to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| titlereq | React.ReactNode | - | What the step did, in sentence case ("Searched the web"). |
| status | 'running'|'done'|'stopped'|'error' | 'done' | Running shows the Spinner and cannot open; stopped cannot open; done and error open when there is a body. |
| duration | number | - | How long the step took, in milliseconds. Read on a done row as one-decimal seconds ("1.2 s"); a done row without it shows no meta. |
| open | boolean | - | Controlled open state. Pair with onOpenChange. Ignored (shut) while the row cannot open. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | - | Called with the next open state when the row is pressed, and with true when openOnDone opens it. |
| openOnDone | boolean | false | Opens the row the moment status is seen to turn 'done' from another status: the reader lands on what just ran. A row that mounts already done starts open, with no callback. Give it to the last step only. |
| labels | { running?: string, stopped?: string, error?: string } | - | Overrides the status words ("Running", "Stopped", "Failed") for localisation. |
| size | 'sm'|'md' | 'sm' | Row rung, forwarded to the trigger: 12 / 14px title, 16 / 18px glyph. |
| children | React.ReactNode | - | What the step produced: a card, a paragraph, the error detail. Hangs off the branch rule when open. |
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Inline styles applied to the root element. |
AI Canvas