Agent Tree / Lanes

Multi-agent run: who's coordinating, which sub-agents are working on what, and their status.

Import

import { AgentOrchestration } from '@marbleui/ui'

Props

<AgentOrchestration>

Prop	Type	Default	Description
root *required	`SubAgent`	`—`	The coordinating agent.
className	`string`	`—`
variant	`'tree' \| 'lanes'`	`'tree'`	"tree": nested delegation. "lanes": one lane per sub-agent.

Usage notes

A multi-agent run: the coordinating agent and the sub-agents it delegated to, with role, activity and status. Display-only; rebuild root from your run’s events. For one agent’s steps use AgentPlan.

<AgentOrchestration
  root={{
    id: 'lead', name: 'Lead', role: 'Orchestrator', status: 'running', activity: 'Coordinating the Q3 board update',
    children: [
      { id: 'res', name: 'Researcher', role: 'Data', status: 'done', activity: 'Pulled Q3 revenue and ARR' },
      { id: 'ana', name: 'Analyst', role: 'Finance', status: 'running', activity: 'Modeling churn scenarios', progress: 40 },
    ],
  }}
/>

variant="tree" (default) nests to any depth. variant="lanes" makes each child of root a column and lists its children as tasks (name and status only); lanes wrap onto new rows below 12 rem wide.
progress (0–100) shows a labelled bar only while a node is running.
Nodes aren’t interactive, and status changes aren’t announced; status glyphs have text labels, but announce important changes (a sub-agent waiting for approval) yourself.

Example source · show

import { useEffect, useState } from 'react'
import { AgentOrchestration, type SubAgent } from './agent-orchestration'

function useTick() {
  const [t, setT] = useState(0)
  useEffect(() => {
    const id = setInterval(() => setT((v) => (v + 7) % 100), 600)
    return () => clearInterval(id)
  }, [])
  return t
}

function Tree() {
  const t = useTick()
  const root: SubAgent = {
    id: 'lead', name: 'Lead', role: 'Orchestrator', status: 'running', activity: 'Coordinating the Q3 board update',
    children: [
      { id: 'res', name: 'Researcher', role: 'Data', status: 'done', activity: 'Pulled Q3 revenue and ARR' },
      { id: 'ana', name: 'Analyst', role: 'Finance', status: 'running', activity: 'Modeling churn scenarios', progress: t },
      { id: 'wri', name: 'Writer', role: 'Docs', status: 'waiting', activity: 'Needs approval to email the board', children: [{ id: 'chk', name: 'Fact-checker', role: 'QA', status: 'pending', activity: 'Queued' }] },
    ],
  }
  return <AgentOrchestration root={root} className="w-[32rem]" />
}

const lanes: SubAgent = {
  id: 'lead', name: 'Lead', role: 'Orchestrator', status: 'running', activity: 'Shipping v2.4',
  children: [
    { id: 'fe', name: 'Frontend', role: 'UI changes', status: 'running', children: [{ id: '1', name: 'Update pricing table', role: '', status: 'done' }, { id: '2', name: 'Fix drawer on iOS', role: '', status: 'running' }] },
    { id: 'be', name: 'Backend', role: 'API + migrations', status: 'done', children: [{ id: '3', name: 'Add usage endpoint', role: '', status: 'done' }, { id: '4', name: 'Migration 0042', role: '', status: 'done' }] },
    { id: 'qa', name: 'QA', role: 'Tests', status: 'pending', children: [{ id: '5', name: 'E2E checkout', role: '', status: 'pending' }] },
  ],
}

export const styles = { Tree, Lanes: () => <AgentOrchestration root={lanes} variant="lanes" className="w-[44rem]" /> }

Source: packages/ui/src/agent-orchestration/agent-orchestration.tsx

Catalog