AI & AgentsPro

Plan Step

One step of an agent plan: number or status icon, title, status in words and how long it took.

Usage

Audit contrast on the docs siteDone1m 12s

Sync tokens from FigmaRunning0:16

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

Targetpackages/react/tabs.tsxEstimate4 min

Update the token mapQueued—

Publish the changelogFailed0:08

Regenerate icon spritesSkipped—

Ship the Tabs v2 releaseBlocked—

Update the token mapQueued—

bash

npm install @wunderui/react

Then import what you need:

tsx

import {
  PlanStep,
  PlanStepDensity,
  PlanStepMeta,
  PlanStepStatus,
} from "@wunderui/react"

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

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

Read the migration notesDone1m 12s
Bump the package versionsDone1m 12s
Sync tokens from FigmaRunning0:16
Rewriting the variant map so legacy props keep resolving after the rename.
Targetpackages/react/tabs.tsxEstimate4 min
Regenerate the changelogQueued—
Publish to npmQueued—
Notify the release channelSkipped—
Announce in #releasesQueued—

Run log

0:02.9Queued 48 components for the contrast audit

0:05.2WarnFigma API busy, retrying in 2s

0:08.0Read 214 variables from Figma

0:12.0ErrorPush to docs-preview timed out

0:12.4Retrying the push with fewer files

0:17.1Screenshots complete

0:19.9Error3 tokens differ between Figma and code

Prop	Type	Default
status	"queued" \| "running" \| "done" \| "failed" \| "skipped" \| "blocked"	"queued"
title	ReactNode	—
index	number	—
detail	ReactNode	—
meta	{ label: string; value: ReactNode }[]	—
duration	ReactNode	"—"
since	Date \| string \| number	—
action	ReactNode	—
density	"default" \| "compact"	"default"