Agent hierarchyPro
An orchestrator and its subagents as a live tree, with the reason for each handoff on its edge.
On this page
ProAn orchestrator, its subagents and the reason for each handoff, as a keyboard tree.
Installation
Usage
import { AgentHierarchy } from "@/components/ui/chatcn/pro/agent-hierarchy"
<AgentHierarchy root={orchestrator} onSelect={openAgent} />Each node shows the agent's state, current step and time. Guide lines show depth; the handoff reason sits on the edge into the child, so you can read why each subagent exists.
Examples
States
ProCollapsed, a single agent and a failed branch.
Props
| Prop | Type | Notes |
|---|---|---|
root | HierarchyNode | { id, name, role?, state, activity?, elapsedMs?, handoff?, children? } |
defaultExpanded | string[] | Open nodes at first. Default all |
selectedId, onSelect | string, (id) => void | Selection |
Accessibility
- A real ARIA tree with roving focus: Up and Down move, Right opens or steps in, Left closes or steps out (mirrored in RTL), Home and End jump, Enter selects.