Pattern · Agents

New

Agent 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
Get SwiftPieces Pro

$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 one Plan and 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: a ScrollView with .padding(.horizontal, 20), or a sheet.
  • AgentPlanBlock.Plan has a title, a Stage (.review, .running, .finished, .stopped) and its steps. doneCount and currentStep are there for your own logic. Plan.sample is the report plan from the preview.
  • AgentPlanBlock.Step has a stable id, a title, the notes the agent reports while it runs (newest last) and a State: .pending, .running, .done, .failed(reason) or .skipped(reason).
  • Stream progress by passing a new Plan whenever the agent reports. The block animates the difference; your edits in review are kept until you pass new steps or approve.
  • onApprove receives 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's errorDescription (or "The plan couldn't start. Try again.") under the buttons; throw CancellationError() to go back to rest quietly.
  • onEdit saves edits when Done is tapped and shows Edit only when you pass it. onRetryStep receives 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.
  • AgentPlanBlockExample at the end of AgentPlanBlock.swift is the screen in the preview: the plan in review, then an approval that runs the seven steps, with the third reporting three notes. Pass wrapsInNavigationStack: false to push it in your own stack.

Theming

  • Reads SPTheme from @Environment(\.spTheme) and requires the design-system item.
  • The card is color.surface with radius.lg, 16 point padding and SPHairline dividers in separator, inset to the text. The buttons sit 24 points under it (space.xl).
  • The title is type.headline, steps type.body (medium while running), the progress line, notes and reasons type.footnote.
  • Text is textPrimary, done steps and notes textSecondary, pending circles, skipped steps and chevrons textTertiary. A failed step's glyph and reason are danger, as is the remove button in edit mode.
  • Approve plan is the accent with accentOn text in type.headline and radius.md, the only accent on the block; Edit is the secondary button on fill.
  • Changes animate with motion.smooth and buttons with motion.snappy; every animation becomes a short fade under Reduce Motion.