Subagent tree

The subagents a parent agent started, what each one is doing right now, and what it handed back. Six layouts, from a line in the reply to a run inspector.

Loading preview…

Install

  1. 1

    Run this command in your Tailwind CSS project. It adds components/ai/subagent-tree-default.tsx and installs its dependencies.

    $ npx shadcn@latest add https://gradientdeck.com/ai-components/r/subagent-tree-default.json

Usage & API

Example

subagent-tree-default.tsx
import { SubagentTree } from "@/components/ai/subagent-tree-default"

<SubagentTree
  agents={[]}
/>

Props SubagentTree

PropType & descriptionRequired
agentsSubagent[]Required
labelstringDefaults to "Started 3 agents".Optional
defaultOpenbooleanOptional
logLimitnumberHow many log lines to show in an opened row.Optional

Dependencies

  • React
  • Tailwind CSS
  • motion
  • lucide-react
Implementation notes

Subagent tree takes agents, an optional label, defaultOpen and logLimit. The header button uses label, or Started N agents. Under it, a live summary counts running, waiting, done and failed, or says all done. When nothing is active, the header also shows the longest elapsed time. Each agent row shows a color dot, name, task, and, on a wide container, tool count, token count and elapsed. Collapsed, the row's second line is the result, an error, a waiting sentence that names the call it wants approval for, or the call it is currently making. Opening the row shows role, the task again, and the last logLimit entries of log. Older calls are counted as N earlier. A waiting call inside that log reads Needs approval. defaultOpen defaults to true. logLimit defaults to 6. Tokens format as a raw count under 1000 and as thousands otherwise. Elapsed formats as seconds, or as minutes and seconds.

Choosing a layout

Use the transcript tree when the parent should mention the helpers inside its own reply and then move on. The header summarizes how many are running, waiting, done or failed, and each row shows the task plus the call in flight or the result. Open a row for that agent's own log. Use the dock when those same agents are background work and the composer must stay usable. The collapsed strip rotates through the active agents, and if any are waiting it rotates through only those. Pass onStop only if the person is allowed to halt one.

Use the roster when someone will supervise the run: switch agents, read the brief, and allow or deny a command. Use the feed when the interesting fact is the order things happened across agents, not the tree. Use the lanes when overlap matters, because a shared axis shows who was busy while someone else waited. Use the delegation tree when the nesting itself is the story, including agents started by agents, and a collapsed node should show how many descendants it hides. A todo list or a step timeline is a better fit when there are no separate agents, only steps of one run.

Which layout can stop or approve an agent?

The dock can stop one. Pass onStop and a running or waiting row shows a stop button that calls it with the agent id. Omit the prop and the button is not rendered. The roster can approve or deny the command in approval, through onApprove and onDeny, and only while that agent's status is waiting. The other four layouts do not render those decisions. A waiting state there is a label, or a segment, not a button.

Do tool calls share one shape across the six layouts?

They do not. The transcript tree's call has kind, target, detail and status. The dock's call has kind and target. The roster's call has a tool name such as Read or Task, a target, a result and a tone. The feed uses entries with a kind of tool, approval, note or summary. The lanes use spans on a clock. Pass the shape that layout declares, even when two of them describe the same run.