Agent Run
Prov1.0.0Watch a coding agent work through a task, steer it, then approve the result.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import * as React from "react";
import { AgentPlan, AgentRun, type AgentRunStatus, type AgentStep } from "@/components/ui/notchset/blocks/agent-run";
// Fill these from your agent's step.started / step.output / step.finished events.
const steps: AgentStep[] = [
{ id: "plan", kind: "plan", label: "Planning the fix", pastLabel: "Planned the fix", startedAt: 0, finishedAt: 2200, body: <AgentPlan lines={["Find the retry", "Add an idempotency key"]} /> },
{ id: "edit", kind: "edit", label: "Editing 2 files", startedAt: 2200, estimate: 2000 },
{ id: "review", kind: "review", label: "Ready for review" },
];
export function RunView() {
const [status, setStatus] = React.useState<AgentRunStatus>("working");
return (
<AgentRun
author={{ name: "Maya Kerr", initials: "MK" }}
repo="ACME/RELAY · MAIN"
request="Make send_email idempotent and keep the tests green."
steps={steps}
status={status}
elapsed={3100}
tokens={4200}
cost={0.03}
onPause={() => setStatus("paused")}
onResume={() => setStatus("working")}
onSteer={(text) => console.log("send to the agent:", text)}
/>
);
}Props
author / repo / request–{ name, initials } / string / ReactNodeWho asked, where, and what.
steps–{ id, kind, label, pastLabel?, rulerLabel?, startedAt?, finishedAt?, estimate?, body? }[]Every planned step. A step without startedAt sits on the ruler only; times are ms since the run began.
status–"working" | "paused" | "review" | "opening" | "pr" | "discarded"The run's state; review, opening, pr and discarded mean it has finished.
elapsed / tokens / cost–numberMs since the run began, tokens used, dollars spent. Update them as often as you like; the clock rolls once a second.
follow / defaultFollow / onFollowChangetruebooleanFollowing opens the running step and closes the rest; off hands the steps to the user.
onPause / onResume / onRestart–() => voidThe status bar's controls.
Show all 10 propsShow fewer
steers / onSteer–{ id, afterStep, text, at }[] / (text) => voidMessages sent while it runs, shown after the step that was running. Marked applied once the next step starts.
review–{ summary, stats, hint?, prMessage?, discardMessage? }The review step's summary and gate.
onOpenPullRequest / onDiscard–() => voidSet status to opening, then pr (or discarded) as your API answers.
formatCost$0.00(usd: number) => stringHow cost reads.
Anatomy
- One block fed by your agent's events: steps, status, time, tokens and cost.
- Step bodies are yours; five body parts cover plan, search, read, edit and test.
- Steering and the review gate call back to you; nothing merges on its own.
AgentRundata-slot="agent-run"The block: header, status bar, ruler, steps, steer box.
AgentPlandata-slot="—"Numbered plan lines.
AgentSearchdata-slot="—"A search command and its matches per file.
AgentReaddata-slot="—"A file excerpt with a flagged line.
AgentDiffdata-slot="—"A diff card per changed file.
AgentTestsdata-slot="—"Named tests passing one by one, with a rolling count.
Source
components/ui/notchset/blocks/agent-run.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/agent-runNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Showing an agent's run on one task while it works, and the hand-off to a human at the end
- Any step-by-step automated job the user may want to pause, steer or approve
Use something else when
- A list of many runs: use Data Table and link each row here
- A chat with an assistant: use Chat App
Mistakes to avoid
- Keep every planned step in steps, started or not, so the ruler doesn't jump as steps arrive
- Pass finishedAt as soon as a step ends: a step without it reads as running
- Set status to opening while the pull request is created, then pr: the gate shows the scanner until you do
Agents find it by
- agent run, coding agent, agent timeline, tool calls, run steps, steer agent, review gate, pull request, AI agent UI, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/agent-run.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- Tab
- Status controls, then each step, then the steer box
- Enter / Space
- Toggle FOLLOW, pause or resume, open or close a step
- Enter (steer box)
- Send the steer (ignored while composing with an IME)
Accessibility
- The status is a live status region; each step row is a button with aria-expanded controlling its body, and closed bodies are inert
- FOLLOW is a switch (role=switch, aria-checked); PAUSE is disabled once the run has finished
- The ruler is a pointer shortcut and hidden from assistive tech: the step rows carry the same action by keyboard
- Rolling numbers keep their plain value for screen readers; the gate's outcome is announced (aria-live)
Motion
- New row
- Rises 4px and fades in (260ms)
- Step body
- Opens on grid rows (380ms), closes faster (260ms)
- FOLLOW
- The thumb stretches: leading edge first, trailing edge 85ms later (300ms)
- Numbers
- Clock, tokens, cost and the test count roll, ones digit first
- Tests
- Each node pops from hollow to filled as it passes (280ms)
Responsive
- Fills its container; the status bar wraps its controls onto a second line under about 560px, and the review stats go two by two under 480px.
Performance
- Plain DOM and CSS transitions; nothing animates per frame. Match dots per file are capped at 12.
Changelog
v1.0.0 · 2026-10-03
First release
Part of
Included with Pro
Pro is in early access.
