affectUI › Components › Agents

Plan vs Actual

An agent's plan against what really happens – every step's bar grows over its dashed planned ghost, overruns turn amber, the steps after it slide right, and the expected finish moves away from the planned one.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/plan-vs-actual.json · Import from @/components/ui/plan-vs-actual

When to use

  • Showing whether an agent's run keeps to its plan – and if not, which step made it late
  • Plans with steps that wait for each other, where one overrun pushes everything after it
  • Giving people an honest expected finish time while the run is still going

When not to use

  • Where the time and money of each call go – use Trace Waterfall
  • Reviewing or editing the plan before it runs – use Agent Plan
  • Several agents working side by side – use Agent Lanes

Usage

import { PlanVsActual, type PlanStep } from "@/components/ui/plan-vs-actual-clean";

const steps: PlanStep[] = [
  { id: "brief", title: "Read the brief", plan: 20000, start: 0, end: 16000 },
  { id: "layout", title: "Build the layout", plan: 60000, deps: ["brief"], start: 17000 },
  { id: "stripe", title: "Wire up Stripe", plan: 45000, deps: ["layout"] },
];

export function Progress({ now }: { now: number }) {
  return <PlanVsActual steps={steps} now={now} task="Ship the pricing page" />;
}

Props

NameTypeDefaultDescription
stepsPlanStep[]{ id, title, plan, deps?, start?, end?, icon? } – list a step after the steps it waits for
plannumberPer step – how long it was planned to take, in ms; the planned start follows from deps
depsstring[]Per step – ids of the steps that have to finish first
start / endnumberPer step – when it really started and finished, in ms from the start of the run; leave end out while it runs, both while it waits
nownumberWhere the run is, in ms from its start – running bars grow to it, waiting steps can't start before it
taskstringWhat the run is for – next to the heading
formatTime(ms: number) => string0:42Formats the axis, the bars' numbers and the finish lines
titlestring"Plan vs actual"Heading of the bar on top
classNamestringExtra class on the root

Keyboard

  • Tab: Moves through the steps – the focused one shows what it waits for and what waits for it

Accessibility

  • The steps are a list; each one is focusable and reads how long it took against the plan, or when it's expected to start
  • Late and early are said in words as well as color – “+25s” and “25s behind”
  • The chart itself is hidden from screen readers – the rows carry everything it shows

Responsive

  • Rows keep their height, so nothing jumps while steps start and finish
  • Under 560px the name column narrows, the task, icons and key drop out and every other axis label hides
  • Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

  • React 19

Related

  • Trace Waterfall – Where the time and money of an agent run go – every LLM call, tool call and sub-agent as a bar on a live timeline, with tokens and cost per step, the slowest call marked and branches that fold into their parent
  • Agent Plan – An agent's step-by-step plan to review before it runs – rename, drag to reorder, remove or add steps, then watch each one run with live timers and retry from a failed step
  • Agent Lanes – Where every agent is right now – a live timeline with a lane per agent, tasks growing into “now”, hand-offs drawn between agents and approvals right on the block
  • Agent Tree – Who started whom – an orchestrator and its sub-agents as a live tree, with status, cost and time on every card, costs rolling up each branch, and branches that fold to one line

Guides