KQ-2085 · REWIRE/PLAN

Rewire Plan

A plan an agent proposes before it starts, laid out as numbered step cards in execution order with dependency arrows in a gutter beside them, packed into lanes so arrows with overlapping spans never share one. A dragged card follows the pointer 1:1, lifted on springs.flick, while the others glide out of its way on springs.glide; every arrow touching it is rebuilt each frame from the cards' motion values and the lanes re-pack on glide, and an arrow that would now point backwards turns red and dashed while the card that needs it says why. The card lands on glide with the release velocity, Approve holds until the order is legal (Fix order finds the legal order that moves least), and the approved plan takes a stamp on springs.recoil; Up and Down move between steps, Alt with Up or Down moves one, Enter edits its title and estimate, and below 28rem the arrows become indented needs lines.

KQ-2085 · REWIRE/PLAN

Move orders to the new cluster

Waylight migration agent · proposed 3 min ago · 8 steps · 3 h 15 min

Out of order

1 step runs before what it needs.

Switch read traffic runs before verify row counts and checksums. Reads move only once the data checks out.

Snapshot the orders database15 minAgent
Provision the new cluster20 minInes Moreau
Create the schema on the new cluster10 minAgent
Copy data with logical replication1 h 30 minAgent
Switch read trafficNeeds verify row counts and checksums first
Verify row counts and checksums25 minAgent
Switch write traffic15 minTomas Reyes
Retire the old cluster after 7 days10 minAgent

8 steps · 3 h 15 min · 1 arrow backwards

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/rewire-plan

Props

steps: PlanStep[]; default defaultPlanSteps (8); The proposed steps: { id, title, minutes, owner } where owner is a person's name or "agent".
dependencies: PlanDependency[]; default defaultPlanDependencies; Which steps need which: { from, to, note? }; the note explains a broken order.
order / defaultOrder: string[]; default — / the steps' own order; Execution order of step ids, controlled or initial.
onReorder: (order, movedId) => void; default —; Fires from the drag, key or Fix order that changed the order, with the step moved (null for Fix order).
onEditStep: (step) => void; default —; A step's title or estimate was edited.
onAddStep: (step) => void; default —; Add step created a step at the end; it opens for editing.
onApprove: (order) => void | Promise; default —; Approve plan was pressed; a returned promise holds the stamp until it resolves.
status: "ready" | "drafting" | "empty" | "error"; default "ready"; Whether the plan exists yet; drafting shows a skeleton of cards and arrows.
onRetry: () => void; default —; Try again was pressed after the plan failed to load.
title: string; default "Move orders to the new cluster"; The plan's name.
agent: string; default "Waylight migration agent"; Who proposes it.
proposedAt: number; default Oct 17 2026, 13:57 UTC; When the agent proposed the plan, in ms.
now: number; default Oct 17 2026, 14:00 UTC; The moment the plan's age is counted from, in ms.
arrowStyle: "curve" | "elbow" | "metro"; default "curve"; How arrows are routed: one curve out to the lane and back, orthogonal elbows with rounded corners, or metro lines with 45° turns and stop dots.
cardStyle: "card" | "row" | "ticket"; default "card"; How steps are drawn: bordered cards, flat rows, or tickets with a numbered stub behind a perforation.
accent: "cobalt" | "plum" | "mint" | "ink" | string; default "cobalt"; Arrows of the focused or dragged step, the agent's steps and Approve: a named pigment or any CSS colour.
height: number; default 560; Tallest the surface grows, in px, before the plan scrolls.
disabled: boolean; default false; Read only.
className: string; default —; Classes for the surface.

Prop	Type	Default	Description
steps	PlanStep[]	defaultPlanSteps (8)	The proposed steps: { id, title, minutes, owner } where owner is a person's name or "agent".
dependencies	PlanDependency[]	defaultPlanDependencies	Which steps need which: { from, to, note? }; the note explains a broken order.
order / defaultOrder	string[]	— / the steps' own order	Execution order of step ids, controlled or initial.
onReorder	(order, movedId) => void	—	Fires from the drag, key or Fix order that changed the order, with the step moved (null for Fix order).
onEditStep	(step) => void	—	A step's title or estimate was edited.
onAddStep	(step) => void	—	Add step created a step at the end; it opens for editing.
onApprove	(order) => void \| Promise	—	Approve plan was pressed; a returned promise holds the stamp until it resolves.
status	"ready" \| "drafting" \| "empty" \| "error"	"ready"	Whether the plan exists yet; drafting shows a skeleton of cards and arrows.
onRetry	() => void	—	Try again was pressed after the plan failed to load.
title	string	"Move orders to the new cluster"	The plan's name.
agent	string	"Waylight migration agent"	Who proposes it.
proposedAt	number	Oct 17 2026, 13:57 UTC	When the agent proposed the plan, in ms.
now	number	Oct 17 2026, 14:00 UTC	The moment the plan's age is counted from, in ms.
arrowStyle	"curve" \| "elbow" \| "metro"	"curve"	How arrows are routed: one curve out to the lane and back, orthogonal elbows with rounded corners, or metro lines with 45° turns and stop dots.
cardStyle	"card" \| "row" \| "ticket"	"card"	How steps are drawn: bordered cards, flat rows, or tickets with a numbered stub behind a perforation.
accent	"cobalt" \| "plum" \| "mint" \| "ink" \| string	"cobalt"	Arrows of the focused or dragged step, the agent's steps and Approve: a named pigment or any CSS colour.
height	number	560	Tallest the surface grows, in px, before the plan scrolls.
disabled	boolean	false	Read only.
className	string	—	Classes for the surface.