KQ-1653 · STATUS/DISPATCH

Status Dispatch

A status-page composer with the public page beside it: pick the phase, set each component's state, write the update (a slash at the start of a line offers templates) and choose who is notified, while the preview shows the page, the email or the text message as customers will get them, the draft riding at the head of the timeline as a dashed ghost. Publishing folds the ghost away on a fast exit tween, lands the real entry on springs.recoil, presses the stamp onto it a beat later on the same spring, and then the component dots change to their new states one after another on a cascade stagger; a failed publish keeps the draft and never celebrates. Ctrl or ⌘ + Enter publishes from anywhere in the composer, the phase, preview and component states are radiogroups driven with the arrow keys, and the template list follows Up, Down, Enter and Escape from the textarea.

KQ-1653 · STATUS/DISPATCH

Elevated API latency in eu-west

Incident update · Waylight Status

Investigating · 14:02

Phase

Affected components2 changes

Waylight APIPartial outage · was degraded
DashboardOperational
WebhooksDegraded · was operational
Edge deliveryOperational
BillingOperational

Update/ templates · Ctrl+Enter publishes

Notify2,793 recipients

identified · 2 components · 2,793 recipients · draft

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/status-dispatch

Props

previewMode: "page" | "email" | "sms"; default "page"; Which view the preview opens on: the public page, the email or the text message. Changing it moves the preview there; at narrow widths email and text also open on the Preview tab.
onPreviewModeChange: (mode: StatusPreviewMode) => void; default —; Fires when the preview switches view.
stampStyle: "seal" | "chip" | "tick"; default "seal"; The mark pressed onto a posted update: a round seal, a label chip, or a tick.
accent: string; default "var(--accent-bright)"; Publish, the pills, the stamp and the template highlight, any CSS colour.
components: StatusComponent[]; default defaultStatusComponents; The page's components with their live state ({ id, name, state }). Seeds the preview, which owns the live states after that.
incident: StatusIncident; default defaultStatusIncident; The incident being updated and its posted updates, newest first.
templates: StatusTemplate[]; default defaultStatusTemplates; Templates offered when a line starts with a slash; inserting one also sets the phase.
audiences: StatusAudience[]; default defaultStatusAudiences; Who can be notified: { id, label, count, channel: "email" | "sms" | "webhook" }.
draft / defaultDraft: StatusDraft; default — / defaultStatusDraft; The update being written, controlled or initial: { phase, text, affected (component id → new state), notify (audience ids) }.
onDraftChange: (draft: StatusDraft) => void; default —; Fires from the edit that changed the draft, with the whole draft.
onPublish: (draft: StatusDraft) => void | Promise<unknown>; default —; Publish was pressed (or Ctrl+Enter). Return a promise to show publishing; a rejection keeps the draft.
onSchedule: (draft: StatusDraft, at: number) => void | Promise<unknown>; default —; A time was chosen from Schedule; the post joins the timeline as scheduled. A rejection keeps the draft.
onSaveDraft: (draft: StatusDraft) => void; default —; Save draft was pressed.
now: number; default defaultStatusNow; The current time in ms; posts are stamped with it and schedule times count from it. Never read from the clock.
pageName: string; default "Waylight Status"; The status page's name in the preview, the email and the text.
status: "ready" | "loading" | "error"; default "ready"; Whether the live page has loaded. Loading shows a skeleton preview and holds Publish; error keeps the composer under a Retry banner.
onRetry: () => void; default —; Retry was pressed after the live page failed to load.
height: number; default 540; Height of the composer in px; each pane scrolls inside it.
disabled: boolean; default false; Nothing can be edited, published or scheduled; the composer dims.
className: string; default —; Classes for the outer surface.

Prop	Type	Default	Description
previewMode	"page" \| "email" \| "sms"	"page"	Which view the preview opens on: the public page, the email or the text message. Changing it moves the preview there; at narrow widths email and text also open on the Preview tab.
onPreviewModeChange	(mode: StatusPreviewMode) => void	—	Fires when the preview switches view.
stampStyle	"seal" \| "chip" \| "tick"	"seal"	The mark pressed onto a posted update: a round seal, a label chip, or a tick.
accent	string	"var(--accent-bright)"	Publish, the pills, the stamp and the template highlight, any CSS colour.
components	StatusComponent[]	defaultStatusComponents	The page's components with their live state ({ id, name, state }). Seeds the preview, which owns the live states after that.
incident	StatusIncident	defaultStatusIncident	The incident being updated and its posted updates, newest first.
templates	StatusTemplate[]	defaultStatusTemplates	Templates offered when a line starts with a slash; inserting one also sets the phase.
audiences	StatusAudience[]	defaultStatusAudiences	Who can be notified: { id, label, count, channel: "email" \| "sms" \| "webhook" }.
draft / defaultDraft	StatusDraft	— / defaultStatusDraft	The update being written, controlled or initial: { phase, text, affected (component id → new state), notify (audience ids) }.
onDraftChange	(draft: StatusDraft) => void	—	Fires from the edit that changed the draft, with the whole draft.
onPublish	(draft: StatusDraft) => void \| Promise<unknown>	—	Publish was pressed (or Ctrl+Enter). Return a promise to show publishing; a rejection keeps the draft.
onSchedule	(draft: StatusDraft, at: number) => void \| Promise<unknown>	—	A time was chosen from Schedule; the post joins the timeline as scheduled. A rejection keeps the draft.
onSaveDraft	(draft: StatusDraft) => void	—	Save draft was pressed.
now	number	defaultStatusNow	The current time in ms; posts are stamped with it and schedule times count from it. Never read from the clock.
pageName	string	"Waylight Status"	The status page's name in the preview, the email and the text.
status	"ready" \| "loading" \| "error"	"ready"	Whether the live page has loaded. Loading shows a skeleton preview and holds Publish; error keeps the composer under a Retry banner.
onRetry	() => void	—	Retry was pressed after the live page failed to load.
height	number	540	Height of the composer in px; each pane scrolls inside it.
disabled	boolean	false	Nothing can be edited, published or scheduled; the composer dims.
className	string	—	Classes for the outer surface.