@redrob-labs/ui v1.0.2 · Redrob Group Design System 2026

TaskStatus

Agent harness · src/components/TaskStatus/TaskStatus.tsx

What a run is doing, in a word and a dot.

blocked is called "Waiting on you", not "Blocked". The agent is not stuck - it is holding for an answer, and the label's job is to tell the person that the next move is theirs.

role="status" so a change is announced, and the word is always present unless a caller explicitly passes an empty label because the surrounding row already says it.

Import

import { TaskStatus } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

PropTypeNotes
state 'queued' | 'running' | 'blocked' | 'done' | 'failed' | 'stopped'
label string Overrides the state's word. Pass '' to show the dot alone, inside a row that names it already.
elapsed React.ReactNode
className string