KQ-2071 · CAUSE/LINES

Cause Lines

An agent activity feed drawn oldest first on a causal gutter, where selecting an event lights its chain: lines start at the selected node and grow along their own paths up to the events that caused it and down to the ones it caused on springs.glide, hop after hop, while unrelated events dim and the selected node's ring lands on springs.snap. Every link is always there as a faint ghost, a link through an event the agent filter hides is drawn dotted, and in a narrow container the gutter gives way to indented rails whose rows step in by generation. The feed is a listbox: Up and Down walk it, Shift with Up or Down jumps to the nearest cause or effect, P pins the chain and Escape unpins it.

KQ-2071 · CAUSE/LINES

Sync incident

Fieldline · eu-west · 13 events

Retry storm on /sync

15 min ago

1,880 retries a minute from 9 workers; each 409 resets the backoff.

Retry storm on /sync · all agents · live · 13 events

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/cause-lines

Props

events: CauseEvent[]; default defaultCauseEvents; The feed, any order: { id, at, agent, severity, title, detail? }. Drawn oldest first so causes sit above effects.
links: CauseLink[]; default defaultCauseLinks; Which event set off which: { from, to }.
agents: CauseAgent[]; default defaultCauseAgents; The agents writing into the feed, in filter order: { id, name, initial? }.
severities: CauseSeverity[]; default defaultCauseSeverities; Severity levels: { id, label, tone } where tone is neutral, accent, warn or danger.
value / defaultValue: string | null; default — / null; The selected event id, controlled or initial.
onSelectEvent: (id, event) => void; default —; Fires from the click or key that selected an event, or with null when a filter hid it.
pinned / defaultPinned: string | null; default — / null; The event whose chain stays lit while the selection moves, controlled or initial.
onPinChain: (id, chain) => void; default —; Fires from P or the Pin button with the pinned id (or null) and its lit chain in feed order.
agentFilter / defaultAgentFilter: string | null; default — / null; The agent whose events show, or null for every agent.
onFilterAgent: (agentId) => void; default —; Fires from the chip that changed the filter.
status: "live" | "paused" | "loading" | "empty" | "error"; default "live"; Whether the feed is streaming, held, or has nothing to show yet.
onLiveChange: (live) => void; default —; The Live / Paused pill was pressed; omit it and the pill is a label.
onRetry: () => void; default —; Try again was pressed after the feed failed to load.
now: number; default defaultCauseNow; The moment relative times count from, in ms.
reach: number; default 3; How many hops of causes and effects light up each way, 1 to 6.
title: string; default "Sync incident"; The feed's heading and the listbox's name.
subtitle: string; default "Fieldline · eu-west"; Under the heading, before the event count.
curveStyle: "arc" | "elbow" | "chevron"; default "arc"; How a causal line bends into the gutter: round bows, square brackets or angled chevrons.
dimLevel: number; default 0.3; Opacity of the events outside the lit chain, 0.1 to 0.6.
accent: "cobalt" | "plum" | "mint" | "ink" | string; default "cobalt"; The chain, the selection and Live: a named pigment or any CSS colour.
disabled: boolean; default false; Read only: nothing can be selected, pinned or filtered.
className: string; default —; Classes for the surface; it caps at 36rem tall and the feed scrolls inside.

Prop	Type	Default	Description
events	CauseEvent[]	defaultCauseEvents	The feed, any order: { id, at, agent, severity, title, detail? }. Drawn oldest first so causes sit above effects.
links	CauseLink[]	defaultCauseLinks	Which event set off which: { from, to }.
agents	CauseAgent[]	defaultCauseAgents	The agents writing into the feed, in filter order: { id, name, initial? }.
severities	CauseSeverity[]	defaultCauseSeverities	Severity levels: { id, label, tone } where tone is neutral, accent, warn or danger.
value / defaultValue	string \| null	— / null	The selected event id, controlled or initial.
onSelectEvent	(id, event) => void	—	Fires from the click or key that selected an event, or with null when a filter hid it.
pinned / defaultPinned	string \| null	— / null	The event whose chain stays lit while the selection moves, controlled or initial.
onPinChain	(id, chain) => void	—	Fires from P or the Pin button with the pinned id (or null) and its lit chain in feed order.
agentFilter / defaultAgentFilter	string \| null	— / null	The agent whose events show, or null for every agent.
onFilterAgent	(agentId) => void	—	Fires from the chip that changed the filter.
status	"live" \| "paused" \| "loading" \| "empty" \| "error"	"live"	Whether the feed is streaming, held, or has nothing to show yet.
onLiveChange	(live) => void	—	The Live / Paused pill was pressed; omit it and the pill is a label.
onRetry	() => void	—	Try again was pressed after the feed failed to load.
now	number	defaultCauseNow	The moment relative times count from, in ms.
reach	number	3	How many hops of causes and effects light up each way, 1 to 6.
title	string	"Sync incident"	The feed's heading and the listbox's name.
subtitle	string	"Fieldline · eu-west"	Under the heading, before the event count.
curveStyle	"arc" \| "elbow" \| "chevron"	"arc"	How a causal line bends into the gutter: round bows, square brackets or angled chevrons.
dimLevel	number	0.3	Opacity of the events outside the lit chain, 0.1 to 0.6.
accent	"cobalt" \| "plum" \| "mint" \| "ink" \| string	"cobalt"	The chain, the selection and Live: a named pigment or any CSS colour.
disabled	boolean	false	Read only: nothing can be selected, pinned or filtered.
className	string	—	Classes for the surface; it caps at 36rem tall and the feed scrolls inside.