Agents

Trace Waterfall

An agent run on a timeline: totals for duration, cost, tokens and calls, a legend of span kinds, and one bar per span nested under its parent, with a detail line for the span under the pointer or focus.

Group: Agents. Exports: TraceWaterfall. Halaska addition with no shadcn/ui equivalent.

Usage

import { TraceWaterfall } from "./halaska-kit";

TraceWaterfall props

• spans { id: string, name: string, kind: "model" | "tool" | "wait" | "handoff" | "failed", startMs: number, endMs: number, parentId?: string, tokens?: number, costUsd?: number, model?: string }[] (default TRACE_SPANS): Spans of the run; children nest under parentId (default: TRACE_SPANS)
• totals { durationMs?: number, costUsd?: number, tokens?: number, llmCalls?: number, toolCalls?: number, errors?: number }: Overrides for the stat row; anything left out is computed from the spans
• title string (default "Refund sweep · run 4f2a"): Header text (default: "Refund sweep · run 4f2a")
• onSelect (span: Span) => void: Fires when a row is clicked or activated with the keyboard

Accessibility

• Every span is a native button named with the span, its kind and its duration, so the bars are never the only way to read the run. The selected span sets aria-pressed.
• Arrow keys, Home and End move between spans. Focusing a span shows its detail in the footer, which is a polite live region.
• The stat row and the detail line are text. Kind colours are backed by the legend and by the name in each button's label.
• The gridlines, bars and axis are hidden from assistive technology.

Halaska UI · Components · Patterns · Screens · Install