Agent Progress
Shows how long an agent has been working.
Installation
pnpm dlx shadcn@latest add @paneui/agent-progressUsage
Examples
Motion
Under reduced motion the 3×3 glyph stops scaling and only fades its opacity while running.
Accessibility
The readout is role="status" with an aria-label of the label plus ", in progress" while running; the ticking timer is hidden from screen readers.
AgentProgress
Working readout with an activity glyph, an action verb and a live timer. Also accepts every prop of span.
- label= "Working"
- string
- Verb for what the agent is doing.
- elapsed
- number
- Controlled elapsed time in seconds. When set, the internal clock is ignored.
- initialElapsed= 0
- number
- Where the internal clock starts, in seconds.
- running= true
- boolean
- Whether the internal clock runs. When
falsethe glyph rests and the timer freezes. - meta
- ReactNode
- Optional trailing detail, e.g. a token count.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Working" | Verb for what the agent is doing. |
| elapsed | number | — | Controlled elapsed time in seconds. When set, the internal clock is ignored. |
| initialElapsed | number | 0 | Where the internal clock starts, in seconds. |
| running | boolean | true | Whether the internal clock runs. When false the glyph rests and the timer freezes. |
| meta | ReactNode | — | Optional trailing detail, e.g. a token count. |
- data-running
- Present while
runningistrue.
| Data attribute | Description |
|---|---|
| data-running | Present while running is true. |
formatElapsed
The formatter behind the timer, (seconds: number) => string. It shows tenths under a minute, minutes and seconds under an hour, then hours and minutes, e.g. 8.4s, 1m 23s, 1h 05m.
- total*
- number
- Elapsed seconds; negatives clamp to 0.
| Prop | Type | Default | Description |
|---|---|---|---|
| total* | number | — | Elapsed seconds; negatives clamp to 0. |