Pattern · Agents
NewAgent Plan SwiftUI Block
An agent's task plan as a checklist: review and edit the steps, approve, then watch them tick through with live notes.
Where a person sees what an agent intends to do and follows it as it runs. In review the steps are numbered and can be renamed, removed, reordered or added to before Approve plan; once running, each step reads pending, running with its notes, done, failed with Retry step, or skipped, and the card folds to a one-line summary.
- SwiftUI
- iOS 17.0+
- agent-plan
$199 once, every piece included. See how installing works · Sign in
01
What's included
SwiftUI source you own, built on Apple frameworks only.
- Review mode with numbered steps, then Approve plan with working, done and failed in place
- Edit steps inline: rename, remove, drag to reorder or add, with VoiceOver move actions
- Pending, running, done, failed and skipped steps, the running one showing its notes
- Retry step on a failed step, with its reason
- Folds to one line naming the step in progress
02
Implementation notes
How it behaves, what it handles, and the decisions behind it.
One surface card holds the plan's title, a progress line and a row per step. Before the run the plan waits for review: steps are numbered, the line reads "7 steps · Review before it starts", and Edit turns each row into a field you can rename, remove with the minus button, drag by its handle to reorder or add to with Add step. Done saves the edits through your closure, and Approve plan hands the reviewed steps to yours, showing progress in the button, a checkmark when it returns and the thrown error under it when it fails. Once the run starts, the numbers give way to state glyphs: an empty circle for pending, a spinner for the running step, which opens to show the agent's notes as they arrive, a filled check for done, the danger colour with the reason and Retry step for a failed step, and a quiet arrow for a skipped one. The line counts "3 of 7 done" and settles on "All 7 steps done". Tapping the header folds the card to one line that names the step in progress. A plan with no steps reads "The agent is still planning", and nil shows grey shapes in the block's own layout.
Notes
AgentPlanBlock(plan:collapsed:onApprove:onEdit:onRetryStep:)takes onePlanand the approve closure. It is a section: no navigation stack, background, padding or scroll view of its own, so place it in your own column: aScrollViewwith.padding(.horizontal, 20), or a sheet.AgentPlanBlock.Planhas atitle, aStage(.review,.running,.finished,.stopped) and itssteps.doneCountandcurrentStepare there for your own logic.Plan.sampleis the report plan from the preview.AgentPlanBlock.Stephas a stableid, atitle, thenotesthe agent reports while it runs (newest last) and aState:.pending,.running,.done,.failed(reason)or.skipped(reason).- Stream progress by passing a new
Planwhenever the agent reports. The block animates the difference; your edits in review are kept until you pass new steps or approve. onApprovereceives the steps as reviewed, titles trimmed and empty ones dropped. Start the run there and pass a plan whose stage is.running. Throwing shows the error'serrorDescription(or "The plan couldn't start. Try again.") under the buttons; throwCancellationError()to go back to rest quietly.onEditsaves edits when Done is tapped and shows Edit only when you pass it.onRetryStepreceives the failed step and shows Retry step only when you pass it; a second failure shows its message under the step.- Haptics mark success when approving or saving finishes and an error when either fails.
- VoiceOver reads the header as the title with its progress line, and each step as its title with its state ("In progress. Grouped them into 5 regions", "Failed. The sales sheet is locked"). Edit mode adds Move up and Move down actions to each row, so reordering never needs a drag. Rows grow with Dynamic Type, and Edit stacks under Approve plan at accessibility sizes.
- Reduce Motion turns every change into a short fade.
AgentPlanBlockExampleat the end ofAgentPlanBlock.swiftis the screen in the preview: the plan in review, then an approval that runs the seven steps, with the third reporting three notes. PasswrapsInNavigationStack: falseto push it in your own stack.
Theming
- Reads
SPThemefrom@Environment(\.spTheme)and requires thedesign-systemitem. - The card is
color.surfacewithradius.lg, 16 point padding andSPHairlinedividers inseparator, inset to the text. The buttons sit 24 points under it (space.xl). - The title is
type.headline, stepstype.body(medium while running), the progress line, notes and reasonstype.footnote. - Text is
textPrimary, done steps and notestextSecondary, pending circles, skipped steps and chevronstextTertiary. A failed step's glyph and reason aredanger, as is the remove button in edit mode. - Approve plan is the
accentwithaccentOntext intype.headlineandradius.md, the only accent on the block; Edit is the secondary button onfill. - Changes animate with
motion.smoothand buttons withmotion.snappy; every animation becomes a short fade under Reduce Motion.
03
Keep building
Pieces that work well next to this one.