Task rows

A React component in Beamline's AI & agents category.

Background work an agent is doing, one row per task: status as a glyph and a word, what it produced, how long it has run or took, a progress bar while running and its sub-steps when opened; a failure opens with its reason and Retry, live tasks can be cancelled, and changes are announced politely.

Use it for

Several agent jobs running in the background, with their status, results and failures.
A queue the person can retry or cancel item by item.

Not for

Steps the person approves before a run (plan).
One tool call inside an answer (tool-call).
Uptime or job history over days (tracker).

Anatomy

header: label and counts (running, waiting, failed, done)
row: status glyph, title, result or what it waits for, status word, elapsed or duration, chevron (under 448px of container: the word moves into the result line, the time hides, actions become icons)
Retry (failed) and Cancel (queued, running, waiting)
progress bar while running (sweeps when the length is unknown)
refusal line when Retry or Cancel fails
open panel: what it waits for, the error, sub-steps with their own glyphs
polite announcer (sr-only)
empty state

Variants

status: queued, running, waiting, done, failed, cancelled

States

live (clock ticks once a second)
settled (still)
open / closed
failed (opens on its own when uncontrolled)
retrying or cancelling (button progress)
empty

Keyboard

Rows with detail are buttons with aria-expanded (Enter/Space)
Retry and Cancel are buttons named with the task
Rows without detail are not focusable

Motion

Open panels follow their height on --motion-in / --motion-out (disclosure-panel); the chevron turns; the progress fill eases to each value; nothing moves when nothing runs. Running, done and failed are one ring (Spinner) that closes into its check or cross where it stands, on a disc that takes the result's tint.

Props

Prop	Type	Default	Description
`tasks` (required)	`AgentTask[]`	—	{ id, title, status, meta?, progress?: number \| null, startedAt?, finishedAt?, waitingFor?, error?, steps?: { id, title, status, meta? }[] }
`open / defaultOpen / onOpenChange`	`string[]`	—
`onRetry / onCancel`	`(id) => void \| Promise`	—	A promise shows progress on the button; a rejection shows its message under the row.
`label / emptyLabel / now`	`string / ReactNode / number`	—
`style / ref`	`CSSProperties / native Ref`	—
`classNames`	`TaskRowsClassNames`	—

Built from

progress
spinner
button
empty-state

Dependencies

lucide-react, radix-ui

Import

import { TaskRows } from "@/components/task-rows/task-rows";

Get it

Task rows is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent