Run tree

Pro

Who is doing what: the orchestrator and the specialists it handed work to, as a tree. Parallel work shows as siblings. Each node carries its status, time, and the agent's own check of its result when it ran one. A collapsed branch still says how many are running or failed inside it.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/run-tree

Brings in: agent-avatar, locale, status, step-list, streaming-text, work, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import type { AgentIdentity } from "@/lib/chat"
import type { RunNode } from "@/lib/work"
import { RunTree } from "@/components/run-tree"

const keel: AgentIdentity = { id: "a-orch", name: "Keel", role: "orchestrator" }
const architect: AgentIdentity = { id: "a-arch", name: "Architect agent", role: "architect" }
const dev: AgentIdentity = { id: "a-dev", name: "Dev agent", role: "dev" }
const qa: AgentIdentity = { id: "a-qa", name: "QA agent", role: "qa" }

const root: RunNode = {
  id: "r0",
  agent: keel,
  task: "Add region to customers",
  status: "running",
  duration: "3m 12s",
  children: [
    { id: "r1", agent: architect, task: "Design the column and access", status: "succeeded", duration: "41s", verdict: { outcome: "unsure", note: "Mobile app screens not in scope; confirm with the team" } },
    {
      id: "r2",
      agent: dev,
      task: "Build on Staging",
      status: "running",
      duration: "1m 50s",
      children: [
        { id: "r2a", agent: dev, task: "Migration and pages", status: "succeeded", duration: "23s", verdict: { outcome: "pass", note: "Applied; the schema shows 4 values" } },
        { id: "r2b", agent: dev, task: "Backfill customers", status: "running" },
      ],
    },
    { id: "r3", agent: qa, task: "Run tests and check the pages", status: "blocked" },
  ],
}

export default function Example() {
  return <RunTree className="max-w-2xl" root={root} />
}

<RunTree>

Prop	Type	Default	Description
rootrequired	`RunNode`	—	The orchestrator, with the agents it handed work to as children.
onSelect	`((id: string) => void) \| undefined`	—	Makes nodes selectable; called with the node's id.
activeId	`string \| undefined`	—	The id of the selected node.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under runTree in <LocaleProvider strings={{ … }}>; the table is exported as runTreeStrings.

Key	English
label	Agents on this run
pass	Checked
fail	Check failed
unsure	Unsure
collapse	Collapse
expand	Expand
underIt	{count} under it
running	{count} running
failed	{count} failed