Plan
A plan an agent asks to run, with approve, reject and auto-run countdown.
Plan presents the steps an agent intends to take and waits for your go-ahead. Crop marks lock onto it as it arrives, long plans fold after a few steps, ⌘Enter runs and Esc rejects, and an optional countdown ring auto-runs unless you cancel it.
Preview
- Create a shared tax helper
- Use it in the invoice API
- Use it in the PDF renderer
- Add tests for both paths
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/plan.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer and the components it builds on. With the @cuelark namespace configured, use @cuelark/plan.
Builds on: button, motion
Usage
import { Plan } from "@/components/ui/plan";
<Plan steps={steps} onApprove={run} onReject={cancel} autoRun={10} />Motion
Arrives with crop marks closing in; the countdown ring drains in the signal color.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Plan
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { label; done? }[] | — | The plan. |
| onApprove · onReject | () => void | — | Decision callbacks. |
| autoRun | number | — | Seconds before auto-approve. |
| visible | number | 4 | Steps before folding. |
| shortcuts | boolean | true | ⌘Enter / Esc while pending. |
Accessibility
- The countdown can be cancelled by keyboard and announces the remaining time.
- Shortcuts only bind while the plan is pending.
FAQ
Also searched as: ai agent approval ui · agent plan component · human in the loop ui · approve agent action · plan card react