# Run Trace

> Waterfall of one agent run: every model call, tool call, search and approval, with timing bars and expandable details.

Component · AI · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/RunTrace/)

Waterfall of one agent run: every model call, tool call, search and approval, with timing bars and expandable details.

Props: `steps` ({kind: "model" | "tool" | "search" | "memory" | "approval" | "message" | "error", label, meta, start (ms), ms, detail (string or node), status ("done" | "running" | "error")}), `defaultOpen` (index), `footer`.

- The bar shows when a step ran inside the whole run, so slow tools are obvious at a glance.
- Errors are blush; a running step pulses. Put model, tokens and cost in the footer.
- Use it in run history and when an approval asks "why does the agent want this?".

## Example

```tsx
import { RunTrace } from "@twentyfirstmedia/pro";
import type { TraceStep } from "@twentyfirstmedia/pro";

const steps: TraceStep[] = [
  {
    kind: "message",
    label: "Task received",
    meta: "Triage 12 new support emails",
    start: 0,
    ms: 30,
    detail: "Trigger: schedule · every hour",
  },
  {
    kind: "model",
    label: "Planned the work",
    meta: "Claude Sonnet 5.5 · 2,140 tokens",
    start: 70,
    ms: 1300,
    detail: "1. Read new mail\n2. Tag each thread\n3. Draft replies for billing questions",
  },
  {
    kind: "tool",
    label: "Mailbox",
    meta: "Fetched 12 messages",
    start: 1410,
    ms: 620,
  },
  {
    kind: "search",
    label: "Knowledge base",
    meta: "Looked up 4 articles",
    start: 2070,
    ms: 480,
  },
  {
    kind: "model",
    label: "Wrote 4 drafts",
    meta: "9,820 tokens",
    start: 2590,
    ms: 3100,
  },
  {
    kind: "approval",
    label: "Waiting for approval",
    meta: "Autonomy: Drafts only",
    start: 5730,
    ms: 0,
    status: "running",
  },
];
export default function Preview() {
  return (
    <div
      className="tf-panel tf-panel-flush"
      style={{
        padding: 16,
      }}
    >
      <RunTrace
        steps={steps}
        defaultOpen={1}
        footer={
          <>
            <span>
              {"Model "}
              <b>Claude Sonnet 5.5</b>
            </span>
            <span>
              {"Tokens "}
              <b>11,960</b>
            </span>
            <span>
              {"Cost "}
              <b>€0.036</b>
            </span>
          </>
        }
      />
    </div>
  );
}
```

## Props

### RunTrace

| Prop | Type | Notes |
| --- | --- | --- |
| `steps` | `TraceStep[]` | Required |
| `defaultOpen?` | `number \| null` |  |
| `footer?` | `ReactNode` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |