Trace Waterfall

CSS

Nested spans on a shared timeline, so parallel work and slow steps show up at a glance.

2.84 s, starting at 0 ms
plan
220 ms, starting at 40 ms
960 ms, starting at 280 ms
search.kb
640 ms, starting at 300 ms
search.tickets
870 ms, starting at 310 ms
rerank
180 ms, starting at 1.05 s
tool.refund_lookup
130 ms, starting at 1.26 s
answer
1.44 s, starting at 1.40 s

Install

$ npx shadcn@latest add https://spotcheckui.com/r/trace-waterfall.json

No motion engine needed.

Usage

import { TraceWaterfall } from "@/components/spotcheck/trace-waterfall"

<TraceWaterfall
  label="Support answer, 2.9 seconds in total"
  spans={[
    { id: "run", name: "agent.run", start: 0, end: 2900 },
    { id: "search", parent: "run", name: "search", start: 120, end: 760 },
  ]}
/>

Spans link through parent, and overlapping bars are work that ran in parallel.

Props

label * RequiredstringDefault —Names the chart for screen readers.
spans * RequiredSpan[]Default —
classNamestringDefault —

Keyboard

Tab	Reach the chart, then each parent span
Enter	Collapse or expand a parent span
← →	Scroll the chart on small screens

Reduced motion

Bars appear at full width, without growing.