Package: @hexos/react-ui

Visual indicator for agent handoff transitions in multi-agent conversations.

Displays a transition when one agent transfers control to another, showing the source agent, target agent, and optional handoff reason. Supports two display variants:

  • Inline: Compact pill-shaped indicator with agent dots and arrow, suitable for inline placement
  • Card: Expanded card layout with agent avatars, animated arrow, reason quote, and timestamp

Both variants use getAgentColors for consistent color-coded agent identification. The animated arrow and pulse effects provide visual feedback that draws attention to the transition.

Related types: HandoffEvent from @hexos/react-core

Example

Inline variant

<HandoffIndicator
fromAgent="main"
toAgent="code"
variant="inline"
animated
/>

Example

Card variant with reason

<HandoffIndicator
fromAgent="main"
fromAgentName="Main Assistant"
toAgent="code"
toAgentName="Code Helper"
reason="User needs help with a coding task"
timestamp={new Date()}
variant="card"
/>
function HandoffIndicator(props: HandoffIndicatorProps): React.ReactElement

Parameters

props