AI & Agents
Run Timeline
Every step of a run in order, with duration, tokens and expandable input/output.
Usage
- 1,230 tok€0.011.8s
- 860 tok4.2s
Input
{ month: "September", status: "open" }Output
128 invoices, €214,900 total. - match_purchase_orders()3,400 tok
- Flag mismatches
- Draft the follow-up email
Installation
npm install @wunderui/reactThen import what you need:
import { RunTimeline } from "@wunderui/react"In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
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 |
|---|---|---|
| steps | RunStep[] | — |
| activeStepId | string | — |
| defaultExpandedId | string | — |