Agents

AgentHandoff

Card visualising a handoff between two agents with reason and pending/accepted/rejected state.

Preview

PlannerResearcheraccepted

Reason: Needs to gather facts about peer-dep architecture.

23:14:25

ResearcherWriterpending

Reason: Found 6 sources, ready to synthesise.

23:13:25

Installation

pnpm add nyxis-ui

Usage

import { AgentHandoff, type HandoffEvent } from 'nyxis-ui';

const event: HandoffEvent = {
  fromAgentId: 'planner',
  toAgentId: 'researcher',
  fromAgentName: 'Planner',
  toAgentName: 'Researcher',
  reason: 'Needs to gather facts about peer-dep architecture.',
  state: 'pending',
  timestamp: new Date(),
};

<AgentHandoff handoff={event} />;

Anatomy

from → to agent names on the title row.
Lifecycle pill: pending (amber clock), accepted (success check), rejected (destructive X).
Reason rendered inline.
Timestamp at the bottom.
compact variant: title row only, useful when stacking many handoffs in a feed.