Plan review
A plan the agent proposes before it starts — edit a step, skip it, add one, then approve.
The plan an agent posts before it starts work: each step is a line you can rewrite, skip (it stays,
struck through) or add to. The footer's Approve plan hands it off; from there the numbers turn
into a spinner, a check, or a retry clock, and a step can open a quiet line under it reporting what it
found or what it waits on. In review the steps are editable; in running the agent works through
them; in done the footer offers See changes.
- 1Read the pricing frames and the brand tokens
- 2Compare against the three competitor pages
- 3Simplify the plan cards to one CTA each
- 4Move the FAQ below the comparison table
- 5Write a summary of every change
Usage
<!-- include core.css + plan-review.css -->
<div class="dm-plx">
<div class="dm-plx-h">
<span class="dm-think dm-plx-mk"><i></i><i></i><i></i><i></i></span>
<div class="dm-plx-ht">
<b>Plan: redesign the pricing page</b>
<span class="dm-muted dm-plx-st">5 steps, about 4 min</span>
</div>
</div>
<ol class="dm-plx-list">
<li class="dm-plx-s">
<span class="dm-n">1</span>
<span class="dm-b">
<span class="dm-t" contenteditable="true" role="textbox">Read the pricing frames</span>
<span class="dm-d"><span></span></span>
</span>
<button class="dm-ib dm-plx-x" aria-label="Skip step"><!-- x --></button>
</li>
</ol>
<button class="dm-plx-add"><!-- plus -->Add a step</button>
<div class="dm-plx-f">
<span class="dm-muted dm-plx-n">Click a step to edit it</span>
<button class="dm-pill dm-ghost dm-sm dm-plx-chg">Ask for changes</button>
<button class="dm-pill dm-primary dm-sm dm-plx-go">Approve plan</button>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
title | string | Like "Plan: redesign the pricing page". |
steps | PlanReviewStep[] | The steps. Leave it out (with defaultSteps) to let the person edit, skip and add steps on their own. |
defaultSteps | PlanReviewStep[] | The initial steps when uncontrolled. |
onStepsChange | (steps) => void | Emitted whenever the list changes (edit, skip, add). |
phase | review | running | done | review (steps editable), running (agent works through them) or done. |
status | string | The line under the title. Defaults to how many steps are left in and roughly how long they take. |
note | string | The quiet line in the footer. Defaults to a hint for each phase. |
meta | ReactNode | Quiet text at the end of the header, like an elapsed time "0:04". |
onApprove | () => void | The Approve plan button, in review. |
onRequestChanges | () => void | The Ask for changes button, in review. |
onStop | () => void | The Stop button, in running. |
onSeeChanges | () => void | The See changes button, in done. |
bare | boolean | Sits flat in a chat thread (the default). Set false to give it a card of its own. |
step.skipped | boolean | Left out of the plan; it stays in the list, struck through. |
step.edited | boolean | Marks a step the person rewrote. |
step.state | run | retry | done | run while the agent works on it, retry while it waits out a problem, done once it has. |
step.detail | string | The line the step reports under it. Opens and crossfades when it changes. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). It sits
flat in a chat thread by default; set bare={false} for a card of its own. The step numbers, the
running tint, the amber retry and the green done mark all come from the theme tokens, so each state
reads at a glance, and in Soft the rows and buttons are rounder.