KQ-2066 · NIGHT/SHIFT

Night Shift

A morning digest of an overnight agent run, read by replaying the night: every event is a dot on an arc from dusk to dawn and a moon rides it. Drag the moon and it follows 1:1 along the arc while the event cards below slide in lockstep, because the strip's offset is the moon's place expressed as a fractional event index; let go and the throw is projected and the moon settles on springs.glide with the release velocity at the nearest event, whose dot lights with a ring that opens on springs.snap. The strip can be dragged too, and then the moon races or crawls along the arc to keep up. The moon is a real slider: Left and Right step event by event, Home and End jump to dusk and dawn, Page Up and Page Down move about an hour and Enter opens the event; failed runs are pinned above the sky, and under 30rem the arc straightens into a vertical rail.

KQ-2066 · NIGHT/SHIFT

Overnight run

Basinworks inventory · 19:00–07:00 · Tally, Restock and Ledger

13 done2 flagged2 failed

02:14 · Restock · failed

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/night-shift

Props

events: NightShiftEvent[]; default defaultNightShiftEvents (17); The night's events { id, agent, at, title, detail?, outcome, metric? }, in any order; outcome is done, flagged or failed.
agents: NightShiftAgent[]; default defaultNightShiftAgents (3); The agents the events name: { id, name, role }.
night: { start: number; end: number }; default defaultNightShiftWindow (19:00 to 07:00); Dusk and dawn in ms; events outside the window are left off the arc.
utcOffset: number; default 0; Minutes added to UTC before a time is printed, so the clock reads in the team's zone.
value / defaultValue: number; default — / the first failed event, else the first event; The scrub time in ms. A controlled value glides the moon whenever it changes.
onScrub: (at: number, event: NightShiftEvent | null) => void; default —; Fires every time the moon lands — a release, a key, a tap — with the time and the event there (null at dusk or dawn).
onOpenEvent: (event: NightShiftEvent) => void; default —; Open was pressed on the card under the moon, or Enter on the moon.
acknowledged / defaultAcknowledged: boolean; default — / false; Whether the digest has been acknowledged.
onAcknowledge: () => void; default —; Acknowledge was pressed; the button turns into a stamped, drawn check.
now: number; default 42 minutes after dawn; The moment the digest is read, in ms; stamped on the acknowledgement.
title: string; default "Overnight run"; The digest's name and the region's accessible name.
source: string; default "Basinworks inventory"; What the agents worked on, under the title.
pinFailures: boolean; default true; Pin failed runs above the sky as buttons that scrub to them; with none, a quiet 'No failed runs' line.
arcHeight: number; default 140; How tall the night's arc is drawn, px; the narrow rail grows with it.
cardStyle: "raised" | "outline" | "tinted"; default "raised"; The event cards: filled and raised, outlined, or washed in their outcome colour with a side bar.
accent: string; default "var(--accent-bright)"; The moon's halo, the travelled arc, done events and the current card's ring — any CSS colour.
status: "ready" | "loading" | "error"; default "ready"; Whether the night's data has arrived; loading draws placeholders, error offers Try again.
onReload: () => void; default —; Try again was pressed after the night failed to load.
disabled: boolean; default false; Read only: the moon cannot be moved and nothing can be acknowledged.
className: string; default —; Classes for the outer region.

Prop	Type	Default	Description
events	NightShiftEvent[]	defaultNightShiftEvents (17)	The night's events { id, agent, at, title, detail?, outcome, metric? }, in any order; outcome is done, flagged or failed.
agents	NightShiftAgent[]	defaultNightShiftAgents (3)	The agents the events name: { id, name, role }.
night	{ start: number; end: number }	defaultNightShiftWindow (19:00 to 07:00)	Dusk and dawn in ms; events outside the window are left off the arc.
utcOffset	number	0	Minutes added to UTC before a time is printed, so the clock reads in the team's zone.
value / defaultValue	number	— / the first failed event, else the first event	The scrub time in ms. A controlled value glides the moon whenever it changes.
onScrub	(at: number, event: NightShiftEvent \| null) => void	—	Fires every time the moon lands — a release, a key, a tap — with the time and the event there (null at dusk or dawn).
onOpenEvent	(event: NightShiftEvent) => void	—	Open was pressed on the card under the moon, or Enter on the moon.
acknowledged / defaultAcknowledged	boolean	— / false	Whether the digest has been acknowledged.
onAcknowledge	() => void	—	Acknowledge was pressed; the button turns into a stamped, drawn check.
now	number	42 minutes after dawn	The moment the digest is read, in ms; stamped on the acknowledgement.
title	string	"Overnight run"	The digest's name and the region's accessible name.
source	string	"Basinworks inventory"	What the agents worked on, under the title.
pinFailures	boolean	true	Pin failed runs above the sky as buttons that scrub to them; with none, a quiet 'No failed runs' line.
arcHeight	number	140	How tall the night's arc is drawn, px; the narrow rail grows with it.
cardStyle	"raised" \| "outline" \| "tinted"	"raised"	The event cards: filled and raised, outlined, or washed in their outcome colour with a side bar.
accent	string	"var(--accent-bright)"	The moon's halo, the travelled arc, done events and the current card's ring — any CSS colour.
status	"ready" \| "loading" \| "error"	"ready"	Whether the night's data has arrived; loading draws placeholders, error offers Try again.
onReload	() => void	—	Try again was pressed after the night failed to load.
disabled	boolean	false	Read only: the moon cannot be moved and nothing can be acknowledged.
className	string	—	Classes for the outer region.