Orbeez kit
Agents & tools

Plan

<Plan />
An agent's to-do list. Each step's bead goes from an empty ring to working to a tick, and the bead in the header fills as the list does.
  1. Read tokens.css and list every colourstyles/tokens.css
  2. Add a dark value for each tokenapp/theme.ts
  3. Raise text on surfaces to AA4 pairs
  4. Add a toggle and save the choicecomponents/toggle.tsx
  5. Run the visual tests48 snapshots

Install

bash
npx shadcn@latest add https://orbeez-kit.vercel.app/r/plan.json

Usage

tsx
<Plan
  title="Ship dark mode"
  items={[
    { id: '1', label: 'Read tokens.css', status: 'done', detail: 'styles/tokens.css' },
    { id: '2', label: 'Add dark values', status: 'active', detail: 'app/theme.ts' },
    { id: '3', label: 'Add a toggle', status: 'pending' },
  ]}
/>

Good to know

  • Moods. The active step uses working; a failed one uses sad; done steps show a tick.
  • Steps only change how they look, never their size: the detail line is shown whatever the status, and the active step is not set in a heavier weight that could wrap differently.
  • streaming shimmers the title while the plan is still being written.
PreviousAgent composerNextArtifact