Skip to content
AI & AgentsPro

Plan Summary

A plan on one card before it runs: goal, steps, time, cost, tools and phases.

Usage

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

Installation

Plan Summary comes with WunderUI Core and Pro, in the package from your plan. See the plans.

Then import what you need:

tsx
import { PlanSummary, PlanSummaryPhase, PlanSummaryStat } from "@wunderui/react"

Examples

Plan summary

Goal, estimates, the tools the run will use and its phases — Run plan starts it.

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

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.

API Reference

PropTypeDefault
goalReactNode—
descriptionReactNode—
stats{ label: string; value: ReactNode }[]—
toolsstring[]—
phases{ title: ReactNode; steps: number | ReactNode }[]—
onEdit / onRun() => void—
editLabel / runLabelstring"Edit plan" / "Run plan"