Agent Plan
The plan an agent writes before it acts — edit, reorder or add steps while it is a draft, then watch the same card work through them as a live checklist.
The card is a composition, so it follows your theme preset. Copy the source from the Code tab and replace the sample plan with your agent's; the run here is simulated and nothing is changed.
What it's made of
| Part | Component |
|---|---|
| Card shell | Card, filled on a grouped page |
| Step title while it is a draft | Textarea, plain, growing with its text |
| Grip and remove | Icon Button, ghost |
| Add step, Keep planning, Approve plan, Pause, Retry, Skip, Start over | Button |
| The current step | Spinner |
| Plan progress | Progress under the header |
A plan has four states
Draft. Every step can be renamed in place, moved, removed or added to. Keep planning streams one more suggested step in before the last one, marked Suggested. Approve plan is disabled while a suggestion is still arriving or when every step is empty, and it drops empty steps.
Running. The grips become status marks and the header counts the current step over a thin progress line. The current step works beside a spinner with its activity underneath; a finished step settles to muted text with its time on the right and folds its activity away. The agent can insert a step of its own, marked Added by agent.
Paused. The spinner becomes a pause mark, and the footer says which step the plan stopped on. Resume carries on from there.
Done. The footer gives the total time and a one-line summary. Start over returns the plan to its draft.
A failed step stops the run. It says Failed with its reason and offers Retry and Skip; a skipped step is struck through and says Skipped.
Reading a step
Each state has its own shape, so none rests on colour: a ring for pending, a spinner for the current step, two bars when paused, a ring with a check when done, a ring with a cross when failed and a ring with a dash when skipped. Activity lines start with a verb, and the verb picks the icon: Read, Edited, Created, Searched, Found, Ran or Measured.
Motion
Every movement explains a change, and none plays when the card first appears.
- A moved, removed or reset step slides to its new place.
- A step, a note or an activity line that arrives opens its own height on the panel curve, and activity folds away the same way when its step is done.
- A suggested step and the final summary stream in a few words at a time, each chunk only fading in.
- A step the agent inserts arrives on a faint wash that fades out.
- Status marks, counts and footer labels change by a short crossfade.
With reduced motion every state, label, focus move and announcement stays, and the travel, the spinner and the fades go.
Keyboard and screen readers
- In a draft, Tab moves through each step's grip, title and remove button, then Add step, Keep planning and Approve plan.
- On a grip, Up and Down arrows move the step. In a title, Alt with Up or Down moves it and keeps the caret, Enter saves the rename, Escape undoes it and Backspace in an empty title removes the step.
- The steps are an ordered list. Each one says its state in words before its title, and grips and remove buttons are named after their step.
- Focus follows the action: a moved step keeps focus, a removed step hands it to its neighbour, and Approve plan, Retry and Skip hand it to Pause.
- Edits, approval, each finished step, an inserted step, a failure, pause and the summary are announced once in a polite status region.
In a narrow card
Below 26rem of card width the draft buttons share the footer equally, and the done summary sits above Start over. With a mouse the remove button appears on hover or focus; on touch it is always visible.