KQ-1646 · INCIDENT/BRIDGE

Incident Bridge

A live incident workspace: a severity band over a toolbar, a timeline with a slim time axis and a pin per update, and the roles, affected Gaugeworks services and response checklist beside it. Changing severity floods the band with the new colour outward from the segment that was pressed — a circle clip on an enter tween, quicker to escalate than to calm — while the segment pill moves on springs.snap; every update drops in with its pin landing on the axis on springs.recoil and its entry sliding in on springs.glide as the rest glide down. U posts an update, R hands out a role from a menu, S goes to severity where arrows change it, Resolve sweeps the band quiet and lights the postmortem, stale data is flagged with its age and a null incident reads all clear.

KQ-1646 · INCIDENT/BRIDGE

INC-2417IdentifiedOpen 42 min

Checkout latency on Gaugeworks Pay

Timeline

6 entries

14:39Tomas Reyes
Rolled the ledger back to 2026.10.08-2; the pool is draining.
14:28Mara Lind
Status page posted. Support has the reply macro.
14:17Ines Varga
Identified: the ledger primary's connection pool is exhausted.
14:09Tomas Reyes
Ledger write latency has climbed since the 13:52 deploy.
14:04Ines Varga
Severity set to SEV 2.
14:00Ines Varga
Paged on-call: checkout p95 above 4 s in two regions.

sev 2 · identified · 6 updates · commander Ines

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/incident-bridge

Props

incident / defaultIncident: BridgeIncident | null; default — / defaultBridgeIncident; The incident: { id, title, severity, state, openedAt, updatedAt, roles, services, updates, checklist }; null reads all clear.
onIncidentChange: (incident: BridgeIncident) => void; default —; Fires with the whole incident after every change made on the bridge.
onSeverityChange: (severity, previous) => void; default —; Severity was raised or lowered, from a press or an arrow key.
onPostUpdate: (update: BridgeUpdate) => void; default —; An update was posted from the composer; it is already on the timeline.
onResolve: (incident: BridgeIncident) => void; default —; Resolve was pressed, with the resolved incident.
onAssignRole: (role, personId) => void; default —; A role (commander, scribe, comms) was handed to a person.
onRefresh: () => void; default —; Refresh (stale data) or Retry (error) was pressed.
people: BridgePerson[]; default defaultBridgePeople; Everyone who can hold a role or post: { id, name }.
lastIncident: { id: string; resolvedAt: number }; default —; Shown in the all-clear state.
status: "ready" | "loading" | "error"; default "ready"; Loading shows a skeleton band and timeline; error keeps the last state under a banner with its age and Retry.
now: number; default defaultBridgeNow; The moment ages and the axis count from, in ms; never read from the clock during render.
staleAfter: number; default 300000; How old updatedAt may get, in ms, before the data is flagged stale with its age.
author: string; default the first person; The person posting from this bridge, by id.
severityPalette: "heat" | "cool" | "ink"; default "heat"; Severity colours: red to blue, violet to teal, or one ink whose weight carries severity.
density: "compact" | "cozy" | "roomy"; default "cozy"; Entry padding, type size and row heights.
timelineSide: "left" | "right"; default "left"; Which column the timeline takes at tablet width, and which side of the entries its rail runs on.
height: number; default 540; Height of the bridge in px; its columns scroll inside it.
disabled: boolean; default false; Read only: nothing can be posted, assigned or changed.
className: string; default —; Classes for the outer surface.

Prop	Type	Default	Description
incident / defaultIncident	BridgeIncident \| null	— / defaultBridgeIncident	The incident: { id, title, severity, state, openedAt, updatedAt, roles, services, updates, checklist }; null reads all clear.
onIncidentChange	(incident: BridgeIncident) => void	—	Fires with the whole incident after every change made on the bridge.
onSeverityChange	(severity, previous) => void	—	Severity was raised or lowered, from a press or an arrow key.
onPostUpdate	(update: BridgeUpdate) => void	—	An update was posted from the composer; it is already on the timeline.
onResolve	(incident: BridgeIncident) => void	—	Resolve was pressed, with the resolved incident.
onAssignRole	(role, personId) => void	—	A role (commander, scribe, comms) was handed to a person.
onRefresh	() => void	—	Refresh (stale data) or Retry (error) was pressed.
people	BridgePerson[]	defaultBridgePeople	Everyone who can hold a role or post: { id, name }.
lastIncident	{ id: string; resolvedAt: number }	—	Shown in the all-clear state.
status	"ready" \| "loading" \| "error"	"ready"	Loading shows a skeleton band and timeline; error keeps the last state under a banner with its age and Retry.
now	number	defaultBridgeNow	The moment ages and the axis count from, in ms; never read from the clock during render.
staleAfter	number	300000	How old updatedAt may get, in ms, before the data is flagged stale with its age.
author	string	the first person	The person posting from this bridge, by id.
severityPalette	"heat" \| "cool" \| "ink"	"heat"	Severity colours: red to blue, violet to teal, or one ink whose weight carries severity.
density	"compact" \| "cozy" \| "roomy"	"cozy"	Entry padding, type size and row heights.
timelineSide	"left" \| "right"	"left"	Which column the timeline takes at tablet width, and which side of the entries its rail runs on.
height	number	540	Height of the bridge in px; its columns scroll inside it.
disabled	boolean	false	Read only: nothing can be posted, assigned or changed.
className	string	—	Classes for the outer surface.