Candor UI

Agent roster

Pro

Every agent on the team: role, model, whether it's on, and two weeks of runs. Agents with recent failures are lifted to the top with the latest failure in a line, so problems aren't buried in alphabetical order.

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/agent-roster

Brings in: agent-avatar, know, locale, status-dot, utils

Usage

TSX · The example above
"use client"

import * as React from "react"
import { AgentRoster } from "@/components/agent-roster"
import type { AgentConfig, ModelOption } from "@/lib/know"

const models: ModelOption[] = [
  { id: "opus", vendor: "Anthropic", name: "Claude Opus 5.5", cost: 4, zdr: "attested" },
  { id: "sonnet", vendor: "Anthropic", name: "Claude Sonnet 5.5", cost: 2, zdr: "attested" },
  { id: "haiku", vendor: "Anthropic", name: "Claude Haiku 5.5", cost: 1, zdr: "attested" },
]

const runs = (ok: number[], failed: number[] = []) => ok.map((n, i) => ({ ok: n, failed: failed[i] ?? 0 }))

const agents: AgentConfig[] = [
  { agent: { id: "dev", name: "Dev agent", role: "coder" }, enabled: true, status: "running", model: "sonnet", runs: runs([4, 6, 5, 7, 3, 0, 0, 5, 6, 8, 4, 5, 3, 2], [0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 1]), lastFailure: "Add region to customers: row lock on batch 12 during the backfill." },
  { agent: { id: "arch", name: "Architect agent", role: "planner" }, enabled: true, status: "idle", model: "opus", runs: runs([1, 2, 1, 0, 2, 0, 0, 1, 3, 2, 1, 2, 1, 1]) },
  { agent: { id: "qa", name: "QA agent", role: "tester" }, enabled: true, status: "succeeded", model: "haiku", runs: runs([8, 9, 7, 8, 9, 2, 2, 8, 9, 9, 8, 7, 9, 8]) },
  { agent: { id: "rev", name: "Review agent", role: "reviewer" }, enabled: false, status: "idle", model: "sonnet", runs: runs([2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]) },
]

export default function Example() {
  const [active, setActive] = React.useState("dev")
  return <AgentRoster className="max-w-2xl" agents={agents} models={models} activeId={active} onSelect={setActive} />
}

<AgentRoster>

PropTypeDefaultDescription
agentsrequiredAgentConfig[]—Every agent on the team, with its role, model, state and recent runs.
modelsrequiredModelOption[]—The models agents can use, for naming each agent's model.
activeIdstring | undefined—The agent shown as selected.
onSelect((id: string) => void) | undefined—Called with the agent id when a card is clicked.
classNamestring | undefined—Extra classes for the outer element.

Strings

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

KeyEnglish
agentsAgents
runs{ one: "{count} run", other: "{count} runs" }
failed· {count} failed
idleIdle
offOff