The anatomy of a run.
Headless, Radix-style primitives for agent traces, sub-agent trees, and run timelines: collapsible waterfalls on the assistant-ui store. Unstyled and fully reactive.
Status at a glance
running, completed, failed, and skipped each styled from data-span-status.
Collapsible subtrees
CollapseToggle removes a span's descendants from the visible list, not just hides them.
Streams in live
Push spans over time and the tree grows; running spans animate until they settle.
The primitives
10SpanResourceSpanPrimitive.RootSpanPrimitive.ChildrenSpanPrimitive.IndentSpanPrimitive.NameSpanPrimitive.StatusIndicatorSpanPrimitive.TypeBadgeSpanPrimitive.CollapseToggleSpanPrimitive.TimelineSpanPrimitive.TimelineBar
One resource owns the data; nine parts lay it out. The same primitives drive a Gantt-style waterfall or a plain tree.
Why headless
Fully headless
Zero styling opinions. Every part is a plain element exposing data attributes; bring your own CSS or Tailwind.
Radix-style composable
Compound primitives you fully control. Root, Indent, CollapseToggle, StatusIndicator, TypeBadge, Name, Children.
Tree-aware
Depth, child counts, collapse state, and the global time range are computed for you from a flat span array.
Reactive
Built on the assistant-ui store. Push new spans and the UI updates live; running spans animate as they stream.
Style by status and type
data-span-status and data-span-type drive your colors and badges with pure CSS, no conditional render logic.
Any data source
Map spans from OpenTelemetry, Langfuse, LangSmith, or your own backend into SpanData and render in minutes.