Trace graphPro
An agent run as a graph: aggregated mode merges same named steps with a count, expanded mode shows every step, and the current step is marked.
On this page
ProA research agent mid run: same named steps merge into one node with a count.
Installation
Usage
import { TraceGraph } from "@/components/ui/chatcn/pro/trace-graph"
<TraceGraph spans={trace.spans} currentId={run.currentSpanId} onSelect={([id]) => openSpan(id)} />Siblings with the same name under one parent merge, recursively, so twelve searches read as one node marked 12 with their total time. Expanded mode lays out every span. Switching modes moves each node from where it was, so a merge reads as a merge.
The current step gets a blue ring and the word Now, and the edges that lead to it turn blue. Failed nodes have a red ring and say Failed.
Examples
States
ProExpanded with a failed step, loading and no steps yet.
Props
| Prop | Type | Notes |
|---|---|---|
spans | TraceSpan[] | Same shape as the waterfall |
mode, defaultMode, onModeChange | "aggregated" | "expanded" | Default aggregated |
currentId | string | The span the agent is on |
selectedId, onSelect | string, (spanIds) => void | Merged nodes pass every span id |
maxHeight | number | string | Canvas height. Default 420 |
loading, labels |
Keyboard
| Key | Action |
|---|---|
Right, Left | Child and parent, mirrored in right to left |
Up, Down | The node above or below in the same column |
Home, End | First and last node |
Enter, Space | Select the node |
Accessibility
- Nodes are buttons with one in the tab order; a merged node reads its count as a number of calls.
- Nodes hidden by a merge are inert, so they are never focused or read.
Motion
A mode change from the pointer moves nodes for 280 ms and crossfades the edges; from the keyboard it cuts. Reduced motion always cuts.