KQ-962 · ROLLOUT/WAVE

Rollout Wave

A release reaching a fleet one wave at a time: the track carries the share of machines on the new build and scales from its left origin on glide, with a hairline tick at each wave's boundary so the plan shows before it happens. Under it every machine is a dot, and a landing wave lights its own dots in a cascade on snap while a rollback runs the same dots dark in reverse order, because a rollback is the wave run backwards. Holding stops the track where it stands and draws a rule at the current edge; Hold is a real switch and Roll back a plain button reached with Tab.

KQ-962 · ROLLOUT/WAVE

gate-relay · 2.14.00%

Baseline

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/rollout-wave

Props

ref: React.Ref<HTMLDivElement>; default —; Reaches the root element.
waves: number[]; default [0.1, 0.25, 0.5, 1]; Cumulative shares of the fleet each wave reaches, in order.
hosts: number; default 24; Machines in the fleet; the grid draws one dot each.
wave / defaultWave: number; default -1; Controlled or initial index of the last landed wave; -1 means the fleet is still on the previous build.
onWaveChange: (wave: number) => void; default —; Fires from the setter behind the roll-back press.
paused / defaultPaused: boolean; default false; Controlled or initial held state.
onPausedChange: (paused: boolean) => void; default —; Fires from the press or key that held or resumed the rollout.
onRolloutChange: (reading: RolloutReading) => void; default —; The whole reading — wave, share, machines and phase — reported from the first commit as well, because it is a state.
version: string; default —; The build being rolled out; printed in the header and spoken.
hostName: (index: number) => string; default "Machine 01"; Names each machine for its dot.
label: string; default "Rollout"; Names the rollout and labels the meter.
className: string; default —; Merged onto the root element's classes.

Prop	Type	Default	Description
ref	React.Ref<HTMLDivElement>	—	Reaches the root element.
waves	number[]	[0.1, 0.25, 0.5, 1]	Cumulative shares of the fleet each wave reaches, in order.
hosts	number	24	Machines in the fleet; the grid draws one dot each.
wave / defaultWave	number	-1	Controlled or initial index of the last landed wave; -1 means the fleet is still on the previous build.
onWaveChange	(wave: number) => void	—	Fires from the setter behind the roll-back press.
paused / defaultPaused	boolean	false	Controlled or initial held state.
onPausedChange	(paused: boolean) => void	—	Fires from the press or key that held or resumed the rollout.
onRolloutChange	(reading: RolloutReading) => void	—	The whole reading — wave, share, machines and phase — reported from the first commit as well, because it is a state.
version	string	—	The build being rolled out; printed in the header and spoken.
hostName	(index: number) => string	"Machine 01"	Names each machine for its dot.
label	string	"Rollout"	Names the rollout and labels the meter.
className	string	—	Merged onto the root element's classes.