Skip to content
AI & AgentsPro

Run Timeline

Every step of a run in order, with duration, tokens and expandable input/output.

Usage

  1. 1,230 tok€0.011.8s
  2. 860 tok4.2s

    Input

    { month: "September", status: "open" }

    Output

    128 invoices, €214,900 total.
  3. match_purchase_orders()3,400 tok
  4. Flag mismatches
  5. Draft the follow-up email

Installation

bash
npm install @wunderui/react

Then import what you need:

tsx
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

run #418
Running
  1. 2,100 tok$0.021.8s
  2. Compare totals3,400 tok
  3. Flag mismatches

API Reference

PropTypeDefault
stepsRunStep[]—
activeStepIdstring—
defaultExpandedIdstring—