KQ-1647 · BLAST/RADIUS

Blast Radius

A service dependency map that answers who feels it when one service falls over: services sit in tidy layers computed from their calls (longest-path layering with barycentre sweeps), and every call is a curve whose weight is its traffic. Selecting a service runs the blast backwards up the calls one hop every ringSpeed ms — a pulse travels each edge, and as it lands the caller takes the impact tint and throws one ring that widens on springs.drift and fades, the impacted count rolls on springs.snap and the hop's rows rise into the list on springs.glide — while everything it never reaches dims; then it all settles. Every service is a button in the tab order where arrows move along the layout, Enter or Space selects and Escape clears, and below a 30rem container the map becomes an indented tree of hops.

KQ-1647 · BLAST/RADIUS

Service map

11 services · 13 calls

Impacted 0

Basinworks queue1.2k
Coldbrook billinghop 1
Waylight notifyhop 1
Waylight APIhop 2
Waylight webhop 3
Waylight apphop 3
Not affected
Gaugeworks auth3.9k
Fieldline search1.3k
Basinworks cache5.2k
Fieldline index900
Fernworks ledger540

basinworks queue down · 5 impacted · 3 hops

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/blast-radius

Props

services: BlastService[]; default defaultBlastServices; The services on the map: { id, name, team, health, rps }.
edges: BlastEdge[]; default defaultBlastEdges; Who calls whom: { from, to, traffic }. If `to` falls over, `from` feels it; traffic is drawn as line weight.
value / defaultValue: string | null; default — / null; The selected service, controlled or initial. An initial selection plays its blast once the map is in view.
onValueChange: (id: string | null) => void; default —; Fires from the click or key that changed the selection.
onSelect: (service | null, impacted: BlastService[]) => void; default —; Fires with the selected service and every service its fall would reach.
onAcknowledge: (service, impacted) => void; default —; Acknowledge was pressed for the selected service.
onOpenRunbook: (service) => void; default —; Runbook was pressed for the selected service.
status: "ready" | "loading" | "error"; default "ready"; Loading draws faint dashed outlines where the services sit; error keeps the last map, desaturated, under a banner with its age and Retry.
updatedAt: number; default six minutes before now; When the map's data was fetched, in ms; an error shows its age.
now: number; default defaultBlastNow; The moment ages count from, in ms; never read from the clock during render.
onRetry: () => void; default —; Retry was pressed after a failed refresh.
layoutDirection: "right" | "down"; default "right"; Layers run left to right, or top to bottom; the arrow keys follow.
ringSpeed: number; default 400; How long the blast takes to cross one hop, in ms.
nodeShape: "pill" | "dot" | "card"; default "pill"; How a service is drawn: a named pill, a health dot with its name, or a small card with team and traffic.
title: string; default "Service map"; The heading and the map's accessible name.
height: number; default 540; Height of the surface in px.
disabled: boolean; default false; Nothing can be selected or acknowledged.
className: string; default —; Classes for the outer surface.

Prop	Type	Default	Description
services	BlastService[]	defaultBlastServices	The services on the map: { id, name, team, health, rps }.
edges	BlastEdge[]	defaultBlastEdges	Who calls whom: { from, to, traffic }. If `to` falls over, `from` feels it; traffic is drawn as line weight.
value / defaultValue	string \| null	— / null	The selected service, controlled or initial. An initial selection plays its blast once the map is in view.
onValueChange	(id: string \| null) => void	—	Fires from the click or key that changed the selection.
onSelect	(service \| null, impacted: BlastService[]) => void	—	Fires with the selected service and every service its fall would reach.
onAcknowledge	(service, impacted) => void	—	Acknowledge was pressed for the selected service.
onOpenRunbook	(service) => void	—	Runbook was pressed for the selected service.
status	"ready" \| "loading" \| "error"	"ready"	Loading draws faint dashed outlines where the services sit; error keeps the last map, desaturated, under a banner with its age and Retry.
updatedAt	number	six minutes before now	When the map's data was fetched, in ms; an error shows its age.
now	number	defaultBlastNow	The moment ages count from, in ms; never read from the clock during render.
onRetry	() => void	—	Retry was pressed after a failed refresh.
layoutDirection	"right" \| "down"	"right"	Layers run left to right, or top to bottom; the arrow keys follow.
ringSpeed	number	400	How long the blast takes to cross one hop, in ms.
nodeShape	"pill" \| "dot" \| "card"	"pill"	How a service is drawn: a named pill, a health dot with its name, or a small card with team and traffic.
title	string	"Service map"	The heading and the map's accessible name.
height	number	540	Height of the surface in px.
disabled	boolean	false	Nothing can be selected or acknowledged.
className	string	—	Classes for the outer surface.