AI & Agents
Agent Status
A pill showing what a run is doing right now, with a live elapsed counter.
Usage
IdleRunningWaiting for youDoneFailedCancelled
Installation
npm install @wunderui/reactThen import what you need:
import { AgentStatus } from "@wunderui/react"Examples
Idle
Nothing is happening yet.
Idle
Running
The agent is working.
Running
Waiting for you
It needs an answer from you.
Waiting for you
Done
The run finished.
Done
Failed
The run stopped with an error.
Failed
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Agent overview
A grid of agents with their status and an action in the header.
Agents
5 agents · 1 running
Billing reconciler
Compares invoices with Stripe.
Running
Support triage
Labels and routes new tickets.
Waiting for you
Weekly digest
Summarizes product usage.
Done
CRM import
Syncs contacts nightly.
Failed
Research assistant
On demand.
Idle
Run detail
The run’s status at the top and its steps below.
Billing reconciler
- 2,100 tok$0.021.8s
- Compare totals3,400 tok
- Flag mismatches
API Reference
| Prop | Type | Default |
|---|---|---|
| status | "idle" | "running" | "waiting" | "done" | "failed" | "cancelled" | — |
| since | Date | string | number | — |
| label | string | status label |
| showElapsed | boolean | true |
| size | "sm" | "default" | "default" |