SubagentTree

Markdown

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.

SubagentTree preview

Loading example…

Installation

npm install @stackunseen/ui
import { SubagentTree } from '@stackunseen/ui/conversation-flow';
Styles: @stackunseen/ui/styles.css and @stackunseen/ui/conversation-flow.css

Usage and props

Import this component from @stackunseen/ui/conversation-flow. Load @stackunseen/ui/styles.css first, then @stackunseen/ui/conversation-flow.css.

Your app sends the tree and loads more children when asked. Very deep trees show a count and load the rest on request. A branch total is only shown when every run in it reports a cost in one currency.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

root: RunNode (cost?) · selectedId? · onSelect? · onLoadMore? · maxDepth? · expandedIds? · onExpandedChange? · now? · locale?
How state and callbacks work
All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract
root: RunNode (cost?) · selectedId? · onSelect? · onLoadMore? · maxDepth? · expandedIds? · onExpandedChange? · now? · locale?
Keeps honest
Your app sends the tree and loads more children when asked. Very deep trees show a count and load the rest on request. A branch total is only shown when every run in it reports a cost in one currency.
MCP
read_component "SubagentTree" on the docs endpoint
Open the Markdown file

Keyboard and customization

Keyboard

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

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio