KQ-793 · HANDOFF/ARROW

Handoff Arrow

A row of agent avatars with the baton, a chip naming what is passed, perched above the holder. A handoff draws an arrow between the two avatar centres: the shaft extends on glide, the head lands on flick, then the chip travels the shaft on glide with a small lift and the receiver's ring lands on recoil while the arrow settles to a trace. Positions come from a ResizeObserver so the arrow fits any width. Left and Right move between agents, Enter or Space hands off.

KQ-793 · HANDOFF/ARROW

Release note0 handoffs

Scout

Drafter

Checker

Scout holds release-note.md

Held by Scout · 0 handoffs

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/handoff-arrow

Props

agents: HandoffAgent[]; default —; The agents in row order, two to five, each with a name and an optional model.
baton: string; default —; What is being passed; printed on the chip.
value / defaultValue: string; default —; Controlled or initial holder id; omitted, the first agent holds.
onValueChange: (id: string) => void; default —; Fires from an avatar press or a key with the new holder.
onHandoff: (from: string, to: string) => void; default —; Fires with both ends of a handoff.
label: string; default —; Names the group.

Prop	Type	Default	Description
agents	HandoffAgent[]	—	The agents in row order, two to five, each with a name and an optional model.
baton	string	—	What is being passed; printed on the chip.
value / defaultValue	string	—	Controlled or initial holder id; omitted, the first agent holds.
onValueChange	(id: string) => void	—	Fires from an avatar press or a key with the new holder.
onHandoff	(from: string, to: string) => void	—	Fires with both ends of a handoff.
label	string	—	Names the group.