Agent Graph View
Node-and-edge DAG of agent execution. Third view mode on the trace detail page, alongside the timeline waterfall and the conversation thread.
Find it at /dashboard/traces/<id>— click the "Graph" toggle next to "Waterfall" and "Messages".
When to use each view
- Waterfall — perf debugging. See where latency lives, click any span to drill in.
- Messages — conversation-shape replay of LLM + tool spans. Best for debugging chat threading + tool calls.
- Graph — topology debugging. See the parent→child shape of an agent run at a glance. Best for verifying that a multi-agent orchestration actually fanned out the way you expected.
How the layout works
Pure data passed through a layered Reingold–Tilford pass:
- x = depth in the parent → child tree. Roots at column 0; their children at column 1; etc.
- leaves consume sequential rows.
- internal nodes are vertically centered over their span of children.
The layout function is split out into apps/web/src/lib/trace-graph-layout.ts so it can be unit-tested in isolation — 6 cases cover empty trees, single roots, sibling fanout, parent centering, dimension math, and multi-root traces.
Node colors by span kind
Accessibility
The SVG carries an aria-label summary of node count. Each node is keyboard-focusable (role="button" +tabIndex=0) and triggers the detail panel on Enter or Space. A screen-reader-only <ul>below the canvas enumerates every edge as "X flows to Y" so the topology is announced narratively even when the SVG isn't rendered visually.
Vs the competition
- Langfuse ships a node-edge view; ours has parity.
- LangSmith ships one too; ours has parity.
- Arize Phoenix has a tree view but not a horizontal DAG layout — we're cleaner.
- Promptfoo + DeepEval — no trace UI at all; this is a category gap they don't fill.