KQ-796 · STEP/CARD
One agent step as a card whose header opens a body of inputs, tool calls and output to a height measured by a ResizeObserver on glide, the chevron turning on snap and the three sections arriving in a cascade. A rail on the card's left edge fills from the top on glide as the host reports progress and reads cobalt, success or danger by status; a failure holds the fill where it stopped, opens an error line and brings a Retry control in on snap. The header is a disclosure button, so Enter and Space open and close it, and Tab reaches Retry.
Idle · press play
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/step-card
| Prop | Type | Default | Description |
|---|---|---|---|
| step | StepCardStep | — | The step: id, title, agent, an optional model, inputs as name and value pairs, tool calls with their status, an output once it lands, and an error when it fails. |
| index | number | — | The step's number in its run, printed before the title. |
| status | "queued" | "running" | "done" | "failed" | — | Drives the rail's tone, the status word and the live region. |
| progress | number | — | 0..1, the rail's fill; clamped and rounded before it reaches the transform. |
| expanded / defaultExpanded | boolean | false | Controlled or initial open state. |
| onExpandedChange | (expanded: boolean) => void | — | Fires from the header press or key. |
| onRetry | (id: string) => void | — | Offers a Retry control on a failed step and fires from it. |