Skip to content
Buy
AI & AgentsPro

Agent Plan

The agent's plan as a checklist: follow it live, edit it before the run, or group it into phases.

Usage

Migrate icons to Lucide 1.4

5 of 13 done

    1. Export the icon inventoryDone1m 12s
    2. Match names to LucideDone1m 12s
    3. Flag icons without a matchDone1m 12s
    1. Replace imports in packages/reactDone1m 12s
    2. Update the Figma icon setsDone1m 12s
    3. Check the stroke widthsFailed0:08
    4. Remove the legacy spriteBlocked—

Installation

bash
npm install @wunderui/react

Then import what you need:

tsx
import {
  AgentPlan,
  AgentPlanDraftStep,
  AgentPlanGroup,
  AgentPlanMode,
  AgentPlanStep,
} from "@wunderui/react"

Examples

Live plan

Follow a run step by step: two done, one running with its detail, the rest queued or skipped. Stop pauses it.

Ship the Tabs v2 release

2 of 7 done

  1. Read the migration notesDone1m 12s
  2. Bump the package versionsDone1m 12s
  3. Sync tokens from FigmaRunning0:16

    Rewriting the variant map so legacy props keep resolving after the rename.

    Targetpackages/react/tabs.tsxEstimate4 min

  4. Regenerate the changelogQueued—
  5. Publish to npmQueued—
  6. Notify the release channelSkipped—
  7. Announce in #releasesQueued—

Plan tree

Steps grouped into phases; each phase shows its progress and folds away.

Migrate icons to Lucide 1.4

5 of 13 done

    1. Export the icon inventoryDone1m 12s
    2. Match names to LucideDone1m 12s
    3. Flag icons without a matchDone1m 12s
    1. Replace imports in packages/reactDone1m 12s
    2. Update the Figma icon setsDone1m 12s
    3. Check the stroke widthsFailed0:08
    4. Remove the legacy spriteBlocked—

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Review before you run

A plan summary next to an editable agent plan: check the estimate, then change the order, skip or add steps and start.

Ship the Tabs v2 release

Drafted 3 min ago from the release notes

Steps
7
Est. time
18 min
Est. cost
$0.42

Tools

  • Figma API
  • GitHub
  • npm

Phases

  1. Map the old icons3 steps
  2. Swap the components4 steps
  3. Publish and announce3 steps

Before the run

4 to run · 1 skipped

  1. 1Read the release notes
  2. 2Bump the package versions
  3. 3Regenerate the changelog (skipped)
  4. 4Publish to npm
  5. 5Announce in #releases

Drag to change the order. Skipped steps stay in the plan.

Watch it run live

The live plan above the run log — Stop pauses the run, the log filters to errors.

Ship the Tabs v2 release

2 of 7 done

  1. Read the migration notesDone1m 12s
  2. Bump the package versionsDone1m 12s
  3. Sync tokens from FigmaRunning0:16

    Rewriting the variant map so legacy props keep resolving after the rename.

    Targetpackages/react/tabs.tsxEstimate4 min

  4. Regenerate the changelogQueued—
  5. Publish to npmQueued—
  6. Notify the release channelSkipped—
  7. Announce in #releasesQueued—

Run log

0:02.9InfoQueued 48 components for the contrast audit
0:05.2WarnFigma API busy, retrying in 2s
0:08.0InfoRead 214 variables from Figma
0:12.0ErrorPush to docs-preview timed out
0:12.4InfoRetrying the push with fewer files
0:17.1InfoScreenshots complete
0:19.9Error3 tokens differ between Figma and code

API Reference

PropTypeDefault
titleReactNode—
mode"live" | "editable" | "tree""live"
stepsAgentPlanStep[]—
groupsAgentPlanGroup[]—
subtitleReactNode"2 of 7 done"
onStop() => void—
stopLabelstring"Stop"
onStart(steps: AgentPlanDraftStep[]) => void—
onStepsChange(steps: AgentPlanDraftStep[]) => void—
hintReactNode—
PreviousAgent LaneNextAgent Status