Patterns / Plan UI

Agent plan UI: show the plan before it runs

An agent that's about to do several things should say what they are first. Then the person can drop a step, ask for changes, or accept.

StepList is the free building block: ordered steps on a rail that fills as they finish. Plan is the full flow. Proposed, the person can drop steps they don't want, then accept or ask for changes. Accepted, it becomes the live run, each step with its status. Sent back, it shows what was proposed, marked as not accepted.

Before the plan, ClarifyingQuestions asks what the agent needs to know. The recommended answer is marked but never pre-selected, so a person answers rather than rubber-stamps. ReviewCanvas puts the plan beside each step's log, diff, blast radius and reasoning.

The components

  • Step listFreeOrdered steps on a rail. Plans, reasoning, run stages.
  • PlanProA plan to trim and accept, then the live run.
  • Clarifying questionsProThe agent's questions before it plans.
  • Review canvasProThe plan beside the evidence for each step, with the approval under it.
  • Blast radiusProWhat a step can reach in the environment.
  • Ship reviewProThe last look before a change ships: checks, and how to undo it.

See it working

More in the examples: Clarify, then plan

Install

With the shadcn CLI

Each component brings in what it depends on. The free ones install as they are; Pro and Premium ones need a licence key.

Good to know

  • The plan-build-review block runs the whole loop with an agent: questions, plan, steps with a live log, asking before any step that changes something, and a ship review.