Agent tree
An orchestrator and its sub-agents, with cost rolled up per branch.
An agent tree shows an orchestrator and its sub-agents as a tree. Each row has its name, its
task, a status glyph and a cost; a branch's cost is its own plus everything under it, and the
header rolls up the whole run. A chevron folds a branch, and the arrow keys move through it as in
any tree view. A failed step can carry a fix — a button under its task that offers the way out.
Usage
<!-- include core.css + agent-tree.css -->
<div class="dm-atr dm-panel">
<div class="dm-atr-h">
<div class="dm-atr-ht"><b>Redesign the pricing page</b><span class="dm-muted dm-atr-st">Running · 0:14</span></div>
<span class="dm-atr-tot dm-num">$0.24</span>
</div>
<div class="dm-atr-tree" role="tree" aria-label="Agents">
<div class="dm-atr-n dm-run" role="treeitem" aria-level="1" aria-expanded="true" style="--dm-lv:0">
<span class="dm-atr-tg"><!-- chev-d --></span>
<span class="dm-atr-g"><span class="dm-spin"></span></span>
<span class="dm-atr-t"><b>Orchestrator</b><span>Plans the work and hands it out</span></span>
<span class="dm-atr-c dm-num">$0.24</span>
</div>
<!-- child rows, folded under a .dm-atr-kids group -->
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
root | AgentNode | The orchestrator, with its agents and their steps as children. |
title | string | The run's goal, like "Redesign the pricing page". |
status | string | The line under the title. Defaults to "Running", "N steps failed" or "Done". |
seconds | number | Seconds to show as m:ss. Leave it out to count up until the root is done. |
summary | string | false | Shown under the tree once the root is done. false hides it; default rolls one up. |
collapsed | string[] | Ids of the folded branches (controlled). |
defaultCollapsed | string[] | Ids folded to begin with when uncontrolled. |
onCollapsedChange | (ids) => void | Emitted when a branch folds or unfolds, with the ids now folded. |
formatCost | (dollars) => string | Writes a cost. Defaults to dollars and cents, like $0.12. |
AgentNode.id | string | Identifies the node; used as the fold key. |
AgentNode.name | string | Like "Design agent", or a step's name. |
AgentNode.task | string | Its task, or what it is doing now. Crossfades when it changes. |
AgentNode.status | queued | running | done | failed | Picks the status glyph and row tint. |
AgentNode.cost | number | What this node spent on its own. A branch shows this plus everything under it. |
AgentNode.fix | { label; onClick } | On a failed step, a button under its task that offers the way out. |
AgentNode.children | AgentNode[] | The agents or steps under this node. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The tree
sits on a surface; the running glyph spins in the accent colour, a done branch turns green and a
failed step tints its row with the bad-tone background, so it reads in either theme. In Soft the
card, rows and the fix button are rounder.