Agents & tools

Handoff

<Handoff />

Work passed from one agent to another: two beads with an arrow between, who handed it to whom, where it came from, and the work under that.

Orchestrator handed this to Reviewer

Ship dark mode

Review the token diff

Reviewer handed this to Tester

Check contrast in dark modeDone

All 31 pairs pass AA

Install

bash

npx shadcn@latest add https://orbeez-kit.vercel.app/r/handoff.json

Usage

tsx

<Handoff
  from={{ name: 'Orchestrator', hue: 'ink', accessory: 'crown' }}
  to={{ name: 'Reviewer', hue: 338, accessory: 'goggles' }}
  source={<a href={chat.url}>{chat.title}</a>}
>
  <Agent hue={338} accessory="goggles" task="Review the token diff" step="Reading theme.ts" progress={0.4} status="working" />
</Handoff>

Good to know

In an agent's own thread, it is how the orchestrator's asks show up, with a link back to the chat they came from.
On a phone the source drops to a line of its own rather than squeezing the names.

PreviousAgent huddle NextAgent composer