# SubagentTree

Parent and child runs as a tree with the message that spawned each child, and the cost of each branch.

- **Use it for**: Parent and child runs and what spawned each.
- **Not for**: Flat lists of runs. Try [RunBoard](https://unseenui.com/components/run-board/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { SubagentTree } from '@stackunseen/ui/conversation-flow';
import '@stackunseen/ui/styles.css';
import '@stackunseen/ui/conversation-flow.css';

<SubagentTree variant="tree" root={tree} onSelect={open} onLoadMore={load} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `expandedIds` | `readonly string[]` |  |
| `label` | `string` |  |
| `locale` | `string` |  |
| `maxDepth` | `number` | Levels drawn before the tree asks the host for more. |
| `now` | `string` |  |
| `onExpandedChange` | `((ids: string[]) => void)` |  |
| `onLoadMore` | `((runId: string) => void)` | Ask the host for children it has not sent, for a node with `hasMore` or beyond `maxDepth`. |
| `onSelect` | `((runId: string) => void)` |  |
| `root` (required) | `RunNode` |  |
| `selectedId` | `string \| null` |  |
| `staleAfterMs` | `number` |  |
| `variant` | `"compact" \| "tree"` |  |

## Keyboard

Arrow keys move and expand or collapse; Home and End jump; typing a letter jumps to the next matching run; Enter selects.

## Works with

[RunBoard](https://unseenui.com/components/run-board/), [AgentLanes](https://unseenui.com/components/agent-lanes/), [ExecutionTimeline](https://unseenui.com/components/execution-timeline/), [WorkflowGraph](https://unseenui.com/components/workflow-graph/), [AttentionQueue](https://unseenui.com/components/attention-queue/), [RunCompare](https://unseenui.com/components/run-compare/), [ContextBar](https://unseenui.com/components/context-bar/), [Plan](https://unseenui.com/components/plan/), [AgentSteering](https://unseenui.com/components/agent-steering/), [CostLedger](https://unseenui.com/components/cost-ledger/), [ContextWindowMeter](https://unseenui.com/components/context-window-meter/), [MemoryPanel](https://unseenui.com/components/memory-panel/)

Page: https://unseenui.com/components/subagent-tree/