KQ-906 · CALL/QUALITY

Call Quality

How good the line is, as a staircase of bars that rise and fall with the grade on flick — a level meter follows the signal rather than settling into it — leaving the steps it lost behind as hairline ghosts. A reconnecting line flattens the bars and spins a ring around them at a constant linear rate, because a wait turns at a constant rate; a lost line holds a broken arc in danger. The pill is a real disclosure whose detail panel opens in flow on glide at a ResizeObserver-measured height, and Enter or Space opens it.

KQ-906 · CALL/QUALITY

Excellent

38 ms · 0.1% loss · the line is good

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/call-quality

Props

level: number; default —; Grade 0–4, clamped and rounded; 4 is a clean line.
state: "live" | "reconnecting" | "lost"; default "live"; The transport's own state; anything but live flattens the bars and shows the ring.
rttMs: number; default —; Round-trip in milliseconds, printed in the pill and the panel.
lossPercent: number; default —; Packet loss, printed with one decimal in the panel.
jitterMs: number; default —; Jitter in milliseconds, printed in the panel.
dropNote: string; default —; One sentence about the last drop, at the foot of the panel.
bars: number; default 5; Steps in the staircase.
open / defaultOpen: boolean; default false; The detail panel, controlled or initial.
onOpenChange: (open: boolean) => void; default —; Fires as the panel opens and closes.
onGradeChange: (sentence: string) => void; default —; Fires once per frozen change sentence, such as "The line dropped to poor".
label: string; default —; Names the meter for assistive technology.

Prop	Type	Default	Description
level	number	—	Grade 0–4, clamped and rounded; 4 is a clean line.
state	"live" \| "reconnecting" \| "lost"	"live"	The transport's own state; anything but live flattens the bars and shows the ring.
rttMs	number	—	Round-trip in milliseconds, printed in the pill and the panel.
lossPercent	number	—	Packet loss, printed with one decimal in the panel.
jitterMs	number	—	Jitter in milliseconds, printed in the panel.
dropNote	string	—	One sentence about the last drop, at the foot of the panel.
bars	number	5	Steps in the staircase.
open / defaultOpen	boolean	false	The detail panel, controlled or initial.
onOpenChange	(open: boolean) => void	—	Fires as the panel opens and closes.
onGradeChange	(sentence: string) => void	—	Fires once per frozen change sentence, such as "The line dropped to poor".
label	string	—	Names the meter for assistive technology.