AI & Agents
Duration Bar
A step's share of the run as a bar, with a tick at the estimate and red when it runs over.
Usage
Build the docs
8.3s
Check the stroke widths
12.4s
Installation
npm install @wunderui/reactThen import what you need:
import { DurationBar, DurationBarTone } from "@wunderui/react"In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Scale across parallel workers
Agent lanes with their queues, the latest activity and how long each step took against its estimate.
Docs audit
Active3 queued · 42/min
- Checking page 38 of 122Running
- Screenshot dark modeQueued
Figma sync
Saturated18 queued · 96/min
- Binding 214 variablesRunning
- Rebuild the icon setsQueued
- +16 more waiting
Releases
Idle0 queued · —
Waiting for a free slot
Running: Comparing Figma and code tokens6.3s
Done: Read 214 variables from Figma3.6s
Build the docs
8.3s
Check the stroke widths
12.4s
API Reference
| Prop | Type | Default |
|---|---|---|
| label | ReactNode | — |
| value | number | — |
| max | number | — |
| planned | number | — |
| tone | "default" | "over" | from planned |
| formatValue | (value: number) => string | "8.3s" |