KQ-961 · PIPELINE/RAIL

Pipeline Rail

A build's stages on one rail, filling in the order they ran: a landed stage's fill scales from its own left origin on glide while the segments arrive in a cascade, and the stage in flight washes its whole segment and pulses between two opacities on a mirrored tween. A failed stage stops the rail, dims every stage after it, and unfolds a ResizeObserver-measured strip on glide whose failure sentence and rerun control rise in on snap. The segments are a roving-tabindex list where Arrow keys step, Home and End jump, and selection moves with focus.

KQ-961 · PIPELINE/RAIL

ledger-api · run 4471running · 1 s

—

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/pipeline-rail

Props

ref: React.Ref<HTMLDivElement>; default —; Reaches the root group element.
stages: PipelineStage[]; default —; The rail, in run order: id, name, status, seconds, an optional progress share and an optional failure note.
selected / defaultSelected: string; default —; Controlled or initial selected stage id; without one the rail follows the stage in flight until a stage is chosen.
onSelectedChange: (id: string) => void; default —; Fires from the press or key that moved the selection.
onRerun: (id: string) => void; default —; Fires from the press on the rerun control, with the stage it restarts; without it the failure strip shows no control.
onRailChange: (reading: RailReading) => void; default —; The whole reading — phase, stage, index, passed count and total seconds — reported from the first commit as well, because it is a state.
formatSeconds: (seconds: number) => string; default seconds, then m:ss; Renders every duration on the rail.
rerunLabel: string; default "Rerun"; Verb on the rerun control, before the stage name.
label: string; default "Pipeline"; Names the rail 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.
stages	PipelineStage[]	—	The rail, in run order: id, name, status, seconds, an optional progress share and an optional failure note.
selected / defaultSelected	string	—	Controlled or initial selected stage id; without one the rail follows the stage in flight until a stage is chosen.
onSelectedChange	(id: string) => void	—	Fires from the press or key that moved the selection.
onRerun	(id: string) => void	—	Fires from the press on the rerun control, with the stage it restarts; without it the failure strip shows no control.
onRailChange	(reading: RailReading) => void	—	The whole reading — phase, stage, index, passed count and total seconds — reported from the first commit as well, because it is a state.
formatSeconds	(seconds: number) => string	seconds, then m:ss	Renders every duration on the rail.
rerunLabel	string	"Rerun"	Verb on the rerun control, before the stage name.
label	string	"Pipeline"	Names the rail for assistive technology and prints above it.
className	string	—	Merged onto the root element's classes.