Span detailPro
One span in full: input, output, metadata, events and scores in tabs, readable and JSON views, and copy as cURL.
On this page
ProPick a span in the waterfall and read its input, output, metadata, events and scores beside it.
Installation
Usage
import { SpanDetail } from "@/components/ui/chatcn/pro/span-detail"
<SpanDetail span={selected} onClose={() => setSelected(null)} />The readable view turns chat messages into blocks by role, objects into key and value lists and long text into a few lines with Show all; the JSON view is the free json-viewer. A failed span opens on its error with the stack from the free stack-trace.
Spans with a request get Copy as cURL: the command is ready to paste, and authorization headers become $API_KEY so a key never lands on a clipboard.
Examples
States
ProA failed tool call, scores, the raw JSON, a running span, loading and nothing selected.
Props
| Prop | Type | Notes |
|---|---|---|
span | TraceSpan | null | Null shows the empty state |
tab, defaultTab, onTabChange | "input" | "output" | "metadata" | "events" | "scores" | Default input |
view, defaultView, onViewChange | "pretty" | "json" | For input, output and metadata |
onClose | () => void | Adds a close button |
maxHeight | number | string | Tab content height. Default 360 |
variant | "card" | "plain" | plain inside a panel you already have |
loading, labels, locale |
Keyboard
| Key | Action |
|---|---|
Left, Right | Move between tabs |
Tab | Into the tab content, then the view switch and copy buttons |
Accessibility
- Tabs are Base UI tabs with a named list. A failed output and failed scores carry a glyph with a label on the tab itself.
- Scores are named meters with value text; pass and fail are words, not only color.
Motion
Copy buttons swap to a check with the kit's 150 ms crossfade. Nothing else moves.