# Agent Trace

One run of an AI agent, step by step: a model picker, Auto / Ask / Plan modes with inline approval, thoughts and tool calls streaming down a filling rail, live time, tokens and cost, and a strip of where the time went.

- Page and source: https://uibrik.com/components/agent-trace
- Install (Pro, needs a license key, see https://uibrik.com/docs/pro): `npx shadcn@latest add @uibrik-pro/agent-trace`
- Packages: none beyond React
- Import: `import { AgentTrace } from "@/components/uibrik/agent-trace/agent-trace"`

Where to use the Agent Trace React component:

- **Agent products**: Users watch what the agent is doing as it works, then open any step to see its reasoning, arguments and result. Pairs with [Tool Call](https://uibrik.com/components/tool-call) and [Streaming Chat](https://uibrik.com/components/streaming-chat).
- **Observability and debugging**: The waterfall strip and per-step time and tokens show at a glance which step made a run slow or expensive. Pairs with [Context Meter](https://uibrik.com/components/context-meter).
- **AI landing pages**: A run that plays itself shows how an agent reasons in a few seconds, without a video. Pairs with [Terminal Demo](https://uibrik.com/components/terminal-demo).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| collapseCompleted | `boolean` | `true` | Fold a step's detail away once it finishes. |
| task | `string` | `"Find a nonstop flight to Tokyo under $900 in mid-December and add it to my calendar"` | The task the agent was given. |
| defaultMode | `"auto" \| "ask" \| "plan"` | `"auto"` | Auto runs every step, Ask waits for approval before tool calls, Plan lists them without running. |
| showModes | `boolean` | `true` | Show the Auto / Ask / Plan switch. |
| color | `string` | `"#5b7bd6"` | Colour of the strip and the filled rail. |
| steps | `AgentStep[]` |  | The run, in order. |
| AgentStep | `{ id; kind: "think" \| "tool" \| "search" \| "answer" \| "error"; title; detail?; args?; output?; duration: ms; tokens? }` |  | One step. detail types itself out while running; args are listed as rows; output is a one-line result. |
| models / model / defaultModel / onModelChange | `{ id; name; logo?: ReactNode; pricePerMillion; note? }[] / string` |  | Models in the picker. Picking one reprices the run in place. |
| mode / onModeChange | `"auto" \| "ask" \| "plan" / (mode) => void` |  | Controlled mode. Changing it restarts the run in play mode. |
| onDecision | `(step, "approve" \| "skip") => void` |  | Called when a tool call is approved or skipped in Ask mode. |
| pricePerMillion | `number` | `15` | USD per million tokens when no models are given. 0 hides cost. |
| active | `number` |  | Index of the running step, to drive the card from a real agent. Steps after it are hidden; steps.length means finished. |
| className | `string` |  | Classes for the card. |