An agent's plan as a checklist it works through: a ring that fills as steps finish, what each step is doing, and a clear red mark when one fails.
Read the settings page, in progress
Reading app/settings/page.tsx
Add a theme toggle, to do
Wire it to next-themes, to do
Run type check and tests, to do
Update the settings docs, to do
pnpm dlx shadcn@latest add @latheui/task-planPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Task Plan is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native section attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps* (required) | { id?, title, detail?, status, duration? }[] | — | status is "pending", "running", "done", "failed" or "skipped". detail is a second line; duration is in milliseconds and shows once a step ends. |
| title | string | "Plan" | The heading, beside the count. |
| open | boolean | — | Whether the steps show, when controlled. |
| defaultOpen | boolean | true | Starting state. |
| onOpenChange | (open: boolean) => void | — | Called by the button on the right. |
<TaskPlan steps={steps} open className="[&_header_button]:hidden" />