KQ-946 · SPAN/DETAIL

Span Detail

One span's own record, opened. A track draws the trace window with the span's extent laid on it at its offset, scaling from its left origin on glide, and the event ticks draw afterwards on flick in a cascade; pressing the head unfolds a ResizeObserver-measured body whose attribute rows and event list arrive from 4px away. Attributes marked secret stay masked until their own Reveal control is pressed, an errored span stamps on snap rather than recoil, and the event list is a roving-tabindex ol where Arrow keys step and Home and End jump.

KQ-946 · SPAN/DETAIL

trace.id: 4f2c9a17
hold.id: 4471
net.peer: coldbrook-3
auth.key: ••••••••

3 events

Span 1 of 3 · 214 ms · ok · open

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/span-detail

Props

span: SpanRecord; default —; The one span: service, operation, startMs, durationMs, status, attributes and events.
windowMs: number; default —; The trace window the track represents; the extent is drawn as a share of it.
open / defaultOpen: boolean; default false; Controlled or initial unfolded state of the record.
onOpenChange: (open: boolean) => void; default —; Fires from the press that folded or unfolded the record.
onReveal: (key: string) => void; default —; Fires when a masked attribute is revealed by its own control.
onEventSelect: (id: string) => void; default —; Fires when an event row is activated by pointer or keyboard.
formatMs: (ms: number) => string; default ms under a second, seconds above; Renders every duration in the card, so a host changes units in one place.
label: string; default "Span"; Names the card for assistive technology.

Prop	Type	Default	Description
span	SpanRecord	—	The one span: service, operation, startMs, durationMs, status, attributes and events.
windowMs	number	—	The trace window the track represents; the extent is drawn as a share of it.
open / defaultOpen	boolean	false	Controlled or initial unfolded state of the record.
onOpenChange	(open: boolean) => void	—	Fires from the press that folded or unfolded the record.
onReveal	(key: string) => void	—	Fires when a masked attribute is revealed by its own control.
onEventSelect	(id: string) => void	—	Fires when an event row is activated by pointer or keyboard.
formatMs	(ms: number) => string	ms under a second, seconds above	Renders every duration in the card, so a host changes units in one place.
label	string	"Span"	Names the card for assistive technology.