RunTasks

Proposed

The tasks of a run, one per row: a ring that counts steps while running, a badge once it has resolved, a status pill, and a detail list on expand. Capsules on the page, or a flat list inside a card.

@varick/ui/components/run-tasksAdded 2 Sept 2026

Matched licence and contact IDs12/12

Flagged stale records0

Reading the policy schedule3 files

Scoring lapse risk68%

Meridian rate-change notedraft

Northstar loss-run requestdraft

Usage

import { RunTasks } from "@varick/ui/components/run-tasks";

export function Example() {
  return <RunTasks rows={run.tasks} onToggleRow={track} />;
}

Variants

List, inside a card

Matched licence and contact IDs12/12

Flagged stale records0

Reading the policy schedule3 files

Scoring lapse risk68%

Meridian rate-change notedraft

Northstar loss-run requestdraft

<RunTasks variant="list" rows={run.tasks} />

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
variant	'capsules' \| 'list'	'capsules'	Rounded capsules with a gap, or divided rows in one bordered card.
rows	RunTask[]	demo run	key, label, amount, status ('done' \| 'running' \| 'sequence'), step, details.
completedLabel	string	'Completed'	Pill text for a finished task.
failedLabel	string	'Failed'	Pill text while a task retries.
onToggleRow	(key, open) => void	undefined	Fires when a row expands or collapses.

Accessibility

Each row is a button with aria-expanded. Status is carried by the pill text, not only by the badge colour.

Styles

Proposed CSS in Varick tokens. Nothing in the app renders this yet.

.run-task { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px; border: 1px solid var(--hairline); border-radius: 4px; background: #FFFFFF; }
.run-task:hover { background: var(--fill-soft); }
.run-task[aria-expanded="true"] { border-radius: 4px; }
.run-ring { width: 24px; height: 24px; }
.run-ring circle { stroke: var(--hairline-soft); stroke-width: 2; }
.run-ring .arc { stroke: var(--fg-mid); animation: spin 1.1s linear infinite; }
.run-badge { width: 22px; height: 22px; border-radius: 4px; color: #FFFFFF; }
.run-badge.done { background: var(--success); }
.run-badge.failed { background: var(--danger); }