Plan
A React component in Beamline's AI & agents category.
An agent's plan: numbered steps with live status, progress, and Approve / Edit / Reject when it needs sign-off; approving shows progress, and a refusal says why and keeps waiting.
Use it for
- Before and while an agent executes multi-step work.
Not for
- Background jobs (task-rows).
- The reasoning trace (reasoning).
- A single action that needs choices before approval (approval-card).
Anatomy
- header button (status spinner or ring, title, current step or state, n/N, chevron)
- steps (marker, title, detail, status word for running, failed and skipped; a skipped step is ink-3 with a dash, never struck through: it did not run)
- approval bar (note, refusal, Reject, Edit plan, Approve); when the plan is narrow the note takes its own row above the buttons
States
- awaiting approval
- deciding (Approve or Reject shows progress)
- refused (reason, Try again)
- running
- done
- failed
- folded
Keyboard
- Header toggles (aria-expanded); approval actions are buttons.
Motion
Collapse on the smooth spring (fade only under reduced motion); step markers swap without movement; the header spinner turns while a step runs. A step's running, done and failed states are one ring (Spinner) that closes into its check or cross where it stands.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title / steps (required) | string / { id, title, detail?, status }[] | — | |
awaitingApproval | boolean | — | |
onApprove / onReject | () => void | Promise | — | |
onEdit | () => void | — | |
open / defaultOpen / onOpenChange | boolean | — | |
style / ref | CSSProperties / native Ref | — | |
classNames | PlanClassNames | — |
Built from
- spinner
- button
Dependencies
motion, lucide-react
Import
import { Plan } from "@/components/plan/plan";Get it
Plan is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in AI & agents
- Approval card: The agent stops and asks before it acts: what it wants to do, exactly what that changes, any choices it needs, and Approve or Reject; both run your…
- Attachment: A file tile: preview or typed glyph with the type named, name, size, upload progress, error with retry, and a keyboard-reachable remove.
- Chat thread: People talking to people: messages grouped by person and day, reactions, delivery and read receipts that glide to the newest message read, who is typing…
- Citations: Inline numbered citations that preview their source on hover or focus, plus a numbered source list; streamed answers flow in at an even pace with the…
- Context cards: The knowledge an agent retrieved before it answered: one card per chunk with what it is about, the text it read with the search words marked, how…
- Conversation: The scrolling column of a conversation: follows new content while you are at the bottom, stops when you scroll up to read, and offers a way back; shared…
- Flowchart: A workflow as steps on a dotted canvas: a trigger, conditions that branch into paths side by side, actions and waits, read top to bottom; during a run…
- Image generation: The frame an AI image is generated into: a field of brand-hued pixels breathes with the progress while the model works, then the image arrives —…
- Message: One turn in a conversation with an agent: the person's words in a quiet bubble, the agent's answer on the page with its orb mark, trace, tool calls and…
- Prompt bar: The agent composer: a field that grows, @ to add a source, / for a command, a model picker, files and dictation, and one button that sends with progress…
- Reasoning: The agent's trace, fed by your stream: a shimmering label and the seconds so far while it works, then "Thought for N seconds"; steps that check off…
- Recommendation card: One suggestion from the agent that the person may take or leave: what it suggests, why, the expected effect and how sure it is (a meter and a word…
- Response: An assistant's answer as streamed markdown in the system's reading type: bursty tokens flow in at an even pace, each new word fades in through a short…
- Selection actions: Select a passage and hand it to the agent: a bar over the selection with quick actions, your own instruction and More; while the agent works it says so…
- Task rows: Background work an agent is doing, one row per task: status as a glyph and a word, what it produced, how long it has run or took, a progress bar while…
- Tool call: One tool call in an agent's run: status, what it did and a short result on one quiet row that opens to the exact input and output; stops for permission…