KQ-964 · CANARY/SPLIT

Canary Split

How much traffic the new build is taking, and what it is doing with it: the canary holds the left of a split bar whose boundary is a real slider, dragged with the pointer after 4px of travel or driven with the arrow keys, and both shares settle on glide. Under the bar the baseline's error rate and the canary's share one fixed viewBox, and the canary's line draws itself as a clip rect sweeps across the box on a tween, so the stroke keeps an even width to its last sample. When the host's verdict settles, Promote and Abort slide in from 8px away on snap into a ResizeObserver-measured region, and nothing is announced until the host answers.

KQ-964 · CANARY/SPLIT

ledger-api trafficWatching

2.9.0 canary0.15%20%2.8.4 baseline0.11%80%

—

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/canary-split

Props

ref: React.Ref<HTMLDivElement>; default —; Reaches the root group element.
value / defaultValue: number; default 10; Controlled or initial share of traffic on the canary, in whole percent.
onValueChange: (percent: number) => void; default —; Fires from the setter behind the drag or key.
max: number; default 50; The most traffic the canary may take.
baseline: CanarySeries; default —; The current build's line, drawn quiet: a label, error-rate samples oldest first, and the rate now.
canary: CanarySeries; default —; The new build's line, drawn live in the verdict's colour.
verdict: "watching" | "ready" | "failing" | "promoted" | "aborted"; default "watching"; Comes from the host; decides which controls are in.
note: string; default —; One sentence explaining the verdict; printed and spoken.
onPromote: () => void; default —; Fires from the press on Promote.
onAbort: () => void; default —; Fires from the press on Abort.
onSplitChange: (reading: SplitReading) => void; default —; The whole reading — canary share, baseline share and verdict — reported from the first commit as well, because it is a state.
formatRate: (rate: number) => string; default two decimals and a percent sign; Renders both error rates.
label: string; default "Traffic split"; Names the control for assistive technology and prints above it.
className: string; default —; Merged onto the root element's classes.

Prop	Type	Default	Description
ref	React.Ref<HTMLDivElement>	—	Reaches the root group element.
value / defaultValue	number	10	Controlled or initial share of traffic on the canary, in whole percent.
onValueChange	(percent: number) => void	—	Fires from the setter behind the drag or key.
max	number	50	The most traffic the canary may take.
baseline	CanarySeries	—	The current build's line, drawn quiet: a label, error-rate samples oldest first, and the rate now.
canary	CanarySeries	—	The new build's line, drawn live in the verdict's colour.
verdict	"watching" \| "ready" \| "failing" \| "promoted" \| "aborted"	"watching"	Comes from the host; decides which controls are in.
note	string	—	One sentence explaining the verdict; printed and spoken.
onPromote	() => void	—	Fires from the press on Promote.
onAbort	() => void	—	Fires from the press on Abort.
onSplitChange	(reading: SplitReading) => void	—	The whole reading — canary share, baseline share and verdict — reported from the first commit as well, because it is a state.
formatRate	(rate: number) => string	two decimals and a percent sign	Renders both error rates.
label	string	"Traffic split"	Names the control for assistive technology and prints above it.
className	string	—	Merged onto the root element's classes.