caliper uidocs
DemoSign inGet Pro

Agent run screen

Pro

An agent run you can supervise: steps with evidence and time, approval gates that state the consequence, a live log, pause and stop.

Installs components/ui/agent-run-screen.tsxDepends on @radix-ui/react-slot, lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/agent-run-screen
Agents

Draft and send the October release notes

Started by Maya Chen 4 min ago · 3 of 5 steps done

Steps

  1. Read 38 merged pull requestsDone. github · forma/app · 1–9 Oct
    12s
  2. Grouped into 6 user-facing changesDone. Dropped 32 internal changes
    20s
  3. Wrote the draft in DocsDone. “October release notes” · 412 words
    48s
  4. Send to 1,204 subscribersWaiting for you. Waiting for your approval
    Send “What's new in October” to 1,204 people on the Product updates list?From updates@forma.example · cannot be unsent · a preview goes to you firstOpen draft
  5. Post a summary in #announcementsNot started.

Live log

09:38:02 github.list_prs 38 results
09:38:14 classify 6 user-facing
09:38:34 docs.create “October release notes”
09:39:22 email.prepare list=product-updates
09:39:23 gate send needs approval
Cost so far
$0.18
Tokens
41,200
Can use
Docs, Email, Slack

When to use #

Use it for

  • Agents that act in other apps on someone's behalf.
  • Some steps cannot be undone.

Skip it when

  • Chat answers with no actions; use the assistant transcript.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/agent-run-screen

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { AgentRunScreen } from "@/components/ui/agent-run-screen"

The worked example comes with Pro

The 79-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

AgentRunScreen

component
PropTypeDefaultDescription
title *string—
descriptionstring—
steps *readonly AgentRunStep[]—
log *readonly { time: string; tool: string; text: string; }[]—
metersreadonly { label: string; value: string; }[]—e.g. [{ label: "Cost so far", value: "$0.18" }].
pausedbooleanfalse
onPause((paused: boolean) => void)—
onStop(() => void)—
classNamestring—

Accessibility #

It exposes group, alert and log semantics, with aria-hidden, aria-label, aria-pressed and aria-live kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.