KQ-1314 · STATUS/BOARD

Status Board

A service status board built from records: each service's strip of days grows up out of the baseline in one wave on glide, sweeping across and down the board a cascade apart, every bar coloured by the worst incident that touched it. Point at a strip, scrub it, or step it with the arrow keys and a lens rides to the day on snap with a card of what happened; select an incident and every strip it touched stamps a ring over its days on snap while its updates open on glide. Beside it a seeded p95 latency line advances live from now, gliding left a step per sample and pausing while it is read, over a dot-matrix map whose troubled regions pulse only while the board is on screen.

KQ-1314 · STATUS/BOARD

Fieldline status

Updated 14:32 UTC · last 90 days

Degraded performanceWebhooks

Services

Uptime · last 90 days

API, Operational
99.92%
Dashboard, Operational
99.96%
Webhooks, Degraded
99.94%
Sync engine, Operational
99.97%
File storage, Operational
99.93%
Notifications, Operational
99.95%

90 days agoToday

Incidents

8 incidents in 90 days

p95 latency · All regions

Paused

174mstarget 300

14:30:42now

Regions

1 needs attention

Webhooks degraded · 1 ongoing · latency for all regions

Open it on the Studio stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/status-board

Props

days: number; default 90; Days of history each service shows, 7 to 90. Changing it regrows the strips and recomputes every uptime figure.
live: boolean; default true; The latency sparkline takes a new seeded sample every interval while the board is on screen. Off: a snapshot at now.
regions: boolean | StatusRegion[]; default true; The regions panel: true for defaultStatusRegions, your own list, or false to leave it out.
services: StatusService[]; default defaultStatusServices; One row each: id, name, current status, and minutes of downtime per day ending today.
incidents: StatusIncident[]; default defaultStatusIncidents; What went wrong or was planned: title, impact (minor, major, maintenance), services, start, end (omit while open) and updates.
now: number | Date; default defaultStatusNow; The board's moment: today's bar, the update time, open incidents and the latency feed all run from it.
latency: StatusSample[]; default —; Your own p95 series, oldest first. Omit it for a seeded series that advances from now; pass it and you advance it.
latencyWindow: number; default 40; Samples across the sparkline.
latencyTarget: number; default 300; The p95 target in ms: a dashed line, and the reading turns warn above it.
interval: number; default 2000; Milliseconds between seeded samples while live.
incident / defaultIncident: string | null; default null; The selected incident: its days are ringed on every strip it touched and its updates are open. Controlled or uncontrolled.
onIncidentChange: (id: string | null) => void; default —; Fires from the click, key or bar that selected or cleared an incident.
region / defaultRegion: string | null; default null; The region whose latency the sparkline shows, or null for all regions. Controlled or uncontrolled.
onRegionChange: (id: string | null) => void; default —; Fires from the chip, arrow key or map marker that chose a region.
onDaySelect: (serviceId: string, date: string) => void; default —; Enter on a day, or a click on its bar, with the service id and the day as YYYY-MM-DD.
incidentLimit: number; default 3; Incidents listed before Show more; a desktop-wide board, with the room, lists three more.
formatDate: (ms: number) => string; default —; Day labels. Defaults to "Sep 24" in UTC, so the server and the browser print the same.
formatTime: (ms: number) => string; default —; Clock labels. Defaults to "14:32" in UTC; latency samples add seconds.
status: "ready" | "loading" | "error"; default "ready"; Whether the status has arrived: a skeleton while loading, a message with Try again on error.
onRetry: () => void; default —; Try again was pressed while status is "error".
title: string; default "System status"; The board's heading; also its accessible name unless label is given.
label: string; default —; The board's accessible name. Defaults to the title.
sound: boolean; default false; A tick for each day stepped by key or scrub and for a region choice, a low buzz when you select a major outage. The live feed is always silent.
disabled: boolean; default false; Read only: days and samples still read out, nothing can be selected and the feed holds still.
className: string; default —; Classes for the root. It is at most 560px tall and scrolls inside itself; pass a max-height class to change that.

Prop	Type	Default	Description
days	number	90	Days of history each service shows, 7 to 90. Changing it regrows the strips and recomputes every uptime figure.
live	boolean	true	The latency sparkline takes a new seeded sample every interval while the board is on screen. Off: a snapshot at now.
regions	boolean \| StatusRegion[]	true	The regions panel: true for defaultStatusRegions, your own list, or false to leave it out.
services	StatusService[]	defaultStatusServices	One row each: id, name, current status, and minutes of downtime per day ending today.
incidents	StatusIncident[]	defaultStatusIncidents	What went wrong or was planned: title, impact (minor, major, maintenance), services, start, end (omit while open) and updates.
now	number \| Date	defaultStatusNow	The board's moment: today's bar, the update time, open incidents and the latency feed all run from it.
latency	StatusSample[]	—	Your own p95 series, oldest first. Omit it for a seeded series that advances from now; pass it and you advance it.
latencyWindow	number	40	Samples across the sparkline.
latencyTarget	number	300	The p95 target in ms: a dashed line, and the reading turns warn above it.
interval	number	2000	Milliseconds between seeded samples while live.
incident / defaultIncident	string \| null	null	The selected incident: its days are ringed on every strip it touched and its updates are open. Controlled or uncontrolled.
onIncidentChange	(id: string \| null) => void	—	Fires from the click, key or bar that selected or cleared an incident.
region / defaultRegion	string \| null	null	The region whose latency the sparkline shows, or null for all regions. Controlled or uncontrolled.
onRegionChange	(id: string \| null) => void	—	Fires from the chip, arrow key or map marker that chose a region.
onDaySelect	(serviceId: string, date: string) => void	—	Enter on a day, or a click on its bar, with the service id and the day as YYYY-MM-DD.
incidentLimit	number	3	Incidents listed before Show more; a desktop-wide board, with the room, lists three more.
formatDate	(ms: number) => string	—	Day labels. Defaults to "Sep 24" in UTC, so the server and the browser print the same.
formatTime	(ms: number) => string	—	Clock labels. Defaults to "14:32" in UTC; latency samples add seconds.
status	"ready" \| "loading" \| "error"	"ready"	Whether the status has arrived: a skeleton while loading, a message with Try again on error.
onRetry	() => void	—	Try again was pressed while status is "error".
title	string	"System status"	The board's heading; also its accessible name unless label is given.
label	string	—	The board's accessible name. Defaults to the title.
sound	boolean	false	A tick for each day stepped by key or scrub and for a region choice, a low buzz when you select a major outage. The live feed is always silent.
disabled	boolean	false	Read only: days and samples still read out, nothing can be selected and the feed holds still.
className	string	—	Classes for the root. It is at most 560px tall and scrolls inside itself; pass a max-height class to change that.