Background run

A card for a detached agent task: what it is, where it runs, the latest step, elapsed time, a 2 px progress line and Open or Cancel.

Markdown

On this page

Queued, running with a 2 px progress line, needs input, then done. A second card runs with an indeterminate bar.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/background-run.json

Usage

tsx

import { BackgroundRun } from "@/components/ui/chatcn/background-run"

<BackgroundRun
  title="Fix flaky checkout test"
  context="tallyline/web · fix/checkout-flake"
  status="running"
  step="Running pnpm test:e2e --grep checkout"
  steps={{ done: 2, total: 7 }}
  startedAt={run.startedAt}
  onOpen={() => openRun(run.id)}
  onCancel={() => cancelRun(run.id)}
/>

Leave out progress and steps for an indeterminate bar. BackgroundRunRow is the same run as a list row, used by Run inbox.

Examples

Every state

Queued, running, needs input, done, failed and cancelled, with long content.

Props

Prop	Type	Notes
`status`	`queued \| running \| needs-input \| done \| failed \| cancelled`
`title`, `context`	`ReactNode`	Context is set small in mono
`step`	`ReactNode`	Latest step, crossfades on change
`request`, `summary`, `error`	`ReactNode`	The line for needs input, done or cancelled, and failed
`progress`, `steps`	`number`, `{ done, total }`	Determinate bar and 3 of 7
`queuePosition`	`number`	Starts after 2 runs
`startedAt`, `durationMs`	`number`	Elapsed time, ticking once per second
`unread`	`boolean`	Static dot, never pulsing
`onOpen`, `onCancel`, `onRetry`, `onRespond`, `actions`		Actions per state, or your own

Accessibility

The card is an article named by its title. The status word is a polite live region; the step line is not, so it never chatters.
The progress line is a progressbar with a value when determinate and none when indeterminate.

Motion

The step line crossfades with a 4 px rise over 200 ms. The status glyph swaps with a 150 ms blur crossfade.
The determinate fill moves by scaleX over 280 ms. The indeterminate segment slides with the Web Animations API and sits still under reduced motion.