Trace Waterfall
An agent run on one timeline: agents, model calls and tools.
Trace Waterfall lays an agent run out on a timeline: nested agents, model calls and tool calls as bars, running spans growing live, failures in red. Hover a bar for duration, tokens and cost; collapse branches to focus. Built for observability panels and debugging views.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/trace-waterfall.jsonThe CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/trace-waterfall.
Builds on: tooltip
Usage
import { TraceWaterfall } from "@/components/ui/trace-waterfall";
<TraceWaterfall spans={trace} />Motion
Running spans grow in real time with a shimmering edge.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
TraceWaterfall
| Prop | Type | Default | Description |
|---|---|---|---|
| spans | TraceSpan[] | — | { id, name, kind, start, end?, tokens?, cost?, error?, children? } |
| now | number | — | Current time for running spans. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: agent trace visualization · llm observability ui · waterfall chart react · trace timeline component · agent run timeline