KQ-970 · QUEUE/DEPTH

Queue Depth

What is waiting to go out, in the order it will go: the head carries a rule that drains on glide to its share of the seconds left, and a Hold switch stops it, because a queue you cannot stop is not a queue. Pressing a row promotes it one place and the two neighbours exchange under layout on glide, a FLIP rather than a re-render; two adjacent rows for the same service can be merged, the lower leaving on a fast exit while the upper takes its changes and its count cross-fades in one grid cell. Depth reads as a count and a total wait in the head, and every row is a real button under a roving tabindex whose name says where it sits and where pressing would put it.

KQ-970 · QUEUE/DEPTH

5 deployswaiting · 12 min in all

5 waiting · head ledger-api 4f2c · 20 s

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/queue-depth

Props

ref: React.Ref<HTMLDivElement>; default —; Reaches the root group element.
deploys: PendingDeploy[]; default —; The queue as the host knows it: id, service, change, author and seconds waited so far.
headSeconds: number; default —; Seconds left on the head; the rule drains to its share of the total.
headTotalSeconds: number; default 60; What the head's countdown started from.
held / defaultHeld: boolean; default false; Controlled or initial hold on the head of the queue.
onHeldChange: (held: boolean) => void; default —; Fires from the press or key that flipped the Hold switch.
onQueueChange: (ids: string[]) => void; default —; The settled order — a state, so it also fires on the first commit.
onPromote: (id: string) => void; default —; Fires from the press that moved a row up one place.
onMerge: (intoId: string, fromId: string) => void; default —; Fires when a row is folded into the one above it.
label: string; default "Deploy queue"; Names the queue for assistive technology.
className: string; default —; Merged onto the root element's classes.

Prop	Type	Default	Description
ref	React.Ref<HTMLDivElement>	—	Reaches the root group element.
deploys	PendingDeploy[]	—	The queue as the host knows it: id, service, change, author and seconds waited so far.
headSeconds	number	—	Seconds left on the head; the rule drains to its share of the total.
headTotalSeconds	number	60	What the head's countdown started from.
held / defaultHeld	boolean	false	Controlled or initial hold on the head of the queue.
onHeldChange	(held: boolean) => void	—	Fires from the press or key that flipped the Hold switch.
onQueueChange	(ids: string[]) => void	—	The settled order — a state, so it also fires on the first commit.
onPromote	(id: string) => void	—	Fires from the press that moved a row up one place.
onMerge	(intoId: string, fromId: string) => void	—	Fires when a row is folded into the one above it.
label	string	"Deploy queue"	Names the queue for assistive technology.
className	string	—	Merged onto the root element's classes.