{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "agent-roster", "title": "Agent Roster", "description": "A multi-agent fleet panel — per-agent state dot, model chip, current-task line and capacity bar, attention-first sorting, a real listbox keyboard path, and four data states.", "dependencies": [ "lucide-react", "zod" ], "registryDependencies": [ "utils" ], "files": [ { "path": "src/registry/ui/agent-roster.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertCircle, Bot, Cpu, RefreshCcw, Wrench } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { AgentRosterAgent, AgentRosterData, AgentRosterState } from \"./agent-roster.contract\"\n\n/**\n * State → colour, as a theme VARIABLE. The winner is published on the card as\n * `--agent-tone` and every child (dot, halo, ring) paints with that one variable,\n * so re-theming the whole roster is six lines here and nothing anywhere else.\n */\nconst TONE: Record = {\n thinking: \"var(--chart-1)\",\n \"using-tool\": \"var(--chart-4)\",\n waiting: \"var(--chart-3)\",\n error: \"var(--destructive)\",\n idle: \"var(--muted-foreground)\",\n offline: \"var(--muted-foreground)\",\n}\n\nexport interface AgentRosterLabels {\n thinking: string\n /** Prefix in front of the tool name — the name itself stays its own slot. */\n usingTool: string\n /** Stands in for the tool name when `state: \"using-tool\"` arrives without one. */\n unnamedTool: string\n waiting: string\n error: string\n idle: string\n offline: string\n /** Header noun, pluralised naively (\"6 agents\"). */\n agents: string\n load: string\n queued: string\n noTask: string\n}\n\nconst DEFAULT_LABELS: AgentRosterLabels = {\n thinking: \"Thinking\",\n usingTool: \"Using\",\n unnamedTool: \"a tool\",\n waiting: \"Waiting for you\",\n error: \"Run failed\",\n idle: \"Idle\",\n offline: \"Offline\",\n agents: \"agents\",\n load: \"Load\",\n queued: \"queued\",\n noTask: \"No task assigned\",\n}\n\n/** \"Burning tokens right now\" — the only states that animate and the only ones counted as working. */\nconst ACTIVE = new Set([\"thinking\", \"using-tool\"])\n\n/** States a human has to do something about. They sort first and they are the only ones announced. */\nconst ATTENTION = new Set([\"waiting\", \"error\"])\n\n/**\n * Attention-first ordering. A roster is a triage surface: the two agents that\n * need you must not be below the fold behind eleven happy ones.\n */\nconst RANK: Record = {\n error: 0,\n waiting: 1,\n \"using-tool\": 2,\n thinking: 3,\n idle: 4,\n offline: 5,\n}\n\n/** Order the header summarises in — stable regardless of what the data contains. */\nconst SUMMARY_ORDER: AgentRosterState[] = [\"error\", \"waiting\", \"using-tool\", \"thinking\", \"idle\", \"offline\"]\n\nconst GRID_CLASS = \"grid gap-3 [grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr))]\"\nconst LIST_CLASS = \"flex flex-col gap-2\"\n\nconst pulseClass = \"animate-pulse rounded bg-muted motion-reduce:animate-none\"\n\n/** How long a type-ahead buffer survives between keystrokes, in ms. */\nconst TYPEAHEAD_RESET_MS = 700\n\nfunction stateLabel(state: AgentRosterState, text: AgentRosterLabels): string {\n switch (state) {\n case \"thinking\":\n return text.thinking\n case \"using-tool\":\n return text.usingTool\n case \"waiting\":\n return text.waiting\n case \"error\":\n return text.error\n case \"offline\":\n return text.offline\n default:\n return text.idle\n }\n}\n\nconst firstChar = (word: string) => Array.from(word)[0] ?? \"\"\n\n/**\n * Initials fallback. Latin names take the first letter of the first two words;\n * a CJK name is unreadable at one character, so it takes two. `initials` on the\n * record overrides both.\n */\nfunction initialsOf(agent: Pick): string {\n if (agent.initials) return agent.initials\n const words = agent.name.trim().split(/\\s+/).filter(Boolean)\n if (words.length === 0) return \"?\"\n if (words.length > 1) return words.slice(0, 2).map(firstChar).join(\"\").toUpperCase()\n const chars = Array.from(words[0])\n return (/[A-Za-z]/.test(words[0]) ? chars.slice(0, 1) : chars.slice(0, 2)).join(\"\").toUpperCase()\n}\n\n/** Never negative, never NaN — a bad number renders as an empty bar, not as `NaN%`. */\nfunction safeLoad(load: number): number {\n return Number.isFinite(load) ? Math.max(0, load) : 0\n}\n\nfunction defaultFormatLoad(load: number): string {\n return `${Math.round(safeLoad(load) * 100)}%`\n}\n\n/* -------------------------------------------------------------------- pieces */\n\n/**\n * State as a SHAPE, not only a colour: pulsing disc (thinking), spinning arc\n * (tool), ringed disc (needs you / failed), hollow disc (idle / offline). Colour\n * alone disappears in a monochrome theme and for a colour-blind reader, and the\n * shapes still differ when `prefers-reduced-motion` stops every animation.\n */\nfunction StateDot({ pulse, state }: { pulse: boolean; state: AgentRosterState }) {\n const animated = pulse && ACTIVE.has(state)\n const pinging = animated && state === \"thinking\"\n const spinning = animated && state === \"using-tool\"\n const ringed = ATTENTION.has(state)\n const hollow = state === \"idle\" || state === \"offline\"\n\n return (\n \n {pinging && (\n \n )}\n {spinning && (\n // Stops under reduced motion but stays visible: a lopsided ring still\n // reads as \"a tool is running\".\n \n )}\n {ringed && (\n \n )}\n \n \n )\n}\n\nfunction AgentAvatar({ agent, size }: { agent: AgentRosterAgent; size: \"sm\" | \"md\" }) {\n const [failed, setFailed] = React.useState(false)\n\n /**\n * On a pre-rendered page a cached image can fail BEFORE hydration attaches\n * `onError`; the event never arrives and the broken glyph stays forever. The\n * ref callback probes for that case synchronously.\n */\n const probe = React.useCallback((node: HTMLImageElement | null) => {\n if (node?.complete && node.naturalWidth === 0) setFailed(true)\n }, [])\n\n const showImage = Boolean(agent.avatarUrl) && !failed\n\n return (\n \n {showImage ? (\n // eslint-disable-next-line @next/next/no-img-element -- portable registry source, not bound to next/image\n setFailed(true)}\n ref={probe}\n src={agent.avatarUrl}\n />\n ) : (\n // The name is right next to it — reading the initials aloud only repeats it.\n {initialsOf(agent)}\n )}\n \n )\n}\n\nfunction Chip({\n children,\n icon: Icon,\n srLabel,\n title,\n}: {\n children: React.ReactNode\n icon: typeof Cpu\n srLabel: string\n title?: string\n}) {\n return (\n \n \n {srLabel} \n {children}\n \n )\n}\n\n/**\n * Capacity, not progress: the bar says how full this agent is, and a value over\n * 1 keeps its true figure instead of clamping to a healthy-looking 100 %.\n */\nfunction LoadBar({\n agent,\n className,\n formatLoad,\n text,\n}: {\n agent: AgentRosterAgent\n className?: string\n formatLoad: (load: number) => string\n text: AgentRosterLabels\n}) {\n const load = safeLoad(agent.load)\n const percent = Math.round(load * 100)\n const width = Math.min(100, percent)\n const over = load > 1\n const offline = agent.state === \"offline\"\n const tone = offline\n ? \"var(--muted-foreground)\"\n : over\n ? \"var(--destructive)\"\n : load >= 0.75\n ? \"var(--chart-4)\"\n : \"var(--chart-2)\"\n\n return (\n
\n
\n \n {text.load}\n {agent.queued !== undefined && agent.queued > 0 ? ` · ${agent.queued} ${text.queued}` : \"\"}\n \n \n {formatLoad(agent.load)}\n {/* Said in TEXT, not only in the bar's aria-valuetext: `option` is\n children-presentational, so inside the selectable roster the bar's\n value can be pruned and the red figure — the only visual marker of\n over-capacity — would carry no wording at all. */}\n {over && over capacity}\n \n
\n \n \n
\n \n )\n}\n\n/** The body of one card, shared by both variants and by both wrapper elements. */\nfunction AgentBody({\n agent,\n formatLoad,\n pulse,\n showLoad,\n text,\n variant,\n}: {\n agent: AgentRosterAgent\n formatLoad: (load: number) => string\n pulse: boolean\n showLoad: boolean\n text: AgentRosterLabels\n variant: \"grid\" | \"list\"\n}) {\n const label = stateLabel(agent.state, text)\n const toolName = agent.state === \"using-tool\" ? (agent.tool ?? text.unnamedTool) : undefined\n\n const statusLine = (\n \n \n {label}\n {toolName && (\n // The one part of the line that can be arbitrarily long: it truncates\n // instead of widening the card it sits in.\n \n \n {toolName}\n \n )}\n \n )\n\n const task = agent.currentTask?.trim()\n const taskLine = task ? (\n // wrap-anywhere, not break-words: only overflow-wrap:anywhere lowers the\n // min-content width, which is what stops a 90-character ticket title from\n // making the card wider than its grid track.\n \n {task}\n

\n ) : (\n

{text.noTask}

\n )\n\n if (variant === \"list\") {\n return (\n // flex-wrap, not a fixed column template: a row squeezed into a sidebar\n // stacks its groups instead of truncating the task down to two words.\n
\n \n
\n {agent.name}\n {agent.role}\n
\n
\n {statusLine}\n {taskLine}\n
\n \n {agent.model}\n \n {showLoad && }\n
\n )\n }\n\n return (\n <>\n
\n \n
\n {agent.name}\n {agent.role}\n
\n
\n\n
\n {statusLine}\n \n {agent.model}\n \n
\n\n {taskLine}\n\n {/* mt-auto: every card in a row is stretched to the tallest one, and the\n bars still line up along the bottom edge instead of floating. */}\n {showLoad && }\n \n )\n}\n\n/* ---------------------------------------------------------------- component */\n\nexport interface AgentRosterProps\n extends Omit, \"onSelect\">,\n AgentRosterData {\n /** `grid` = one card per agent; `list` = compact one-line rows. @default \"grid\" */\n variant?: \"grid\" | \"list\"\n /**\n * `given` keeps your order. `attention` floats the agents that need a human\n * (failed, then waiting), then the working ones, then idle, then offline —\n * a stable sort, so agents in the same bucket keep their original order.\n * @default \"given\"\n */\n sort?: \"given\" | \"attention\"\n /**\n * Turns the roster into a real listbox: cards become options with a roving\n * tabindex, arrow-key navigation, type-ahead and Enter/Space. Omit it and the\n * cards render as an ordinary list with no cursor and no hover — an element\n * that looks clickable but isn't is worse than a plain one.\n */\n onSelect?: (agentId: string) => void\n /** The currently selected agent, owned by you. Drives `aria-selected` and the highlight. */\n selectedId?: string | null\n /** Shown in the `status=\"error\"` branch; omit it to hide the affordance. */\n onRetry?: () => void\n /** Accessible name of the roster, and the heading in the summary row. @default \"Agents\" */\n label?: string\n /** Render the counts-by-state header. @default true */\n showSummary?: boolean\n /** Render the per-agent capacity bar. @default true */\n showLoad?: boolean\n /** Allow the active-state motion (pulse halo / spinning arc). @default true */\n pulse?: boolean\n /**\n * Announce agents that ENTER an attention state (waiting / failed) through one\n * polite live region. The first paint is never announced. @default true\n */\n announce?: boolean\n /** Placeholder cards drawn while loading. Clamped to 1–12. @default 6 */\n skeletonCount?: number\n /** Replaces the default `status=\"empty\"` body. */\n emptyState?: React.ReactNode\n /** Message shown in the `status=\"error\"` branch. */\n errorMessage?: string\n /** Copy overrides; `usingTool` is a prefix, the tool name stays its own slot. */\n labels?: Partial\n /** Override the capacity wording (a raw count, \"3/4 runs\", a token budget…). */\n formatLoad?: (load: number) => string\n}\n\n/**\n * A multi-agent fleet panel: who is deployed, what each one is doing right now,\n * on which model, and how full it is — with the two agents that need a human\n * floated to the top and a keyboard path that actually works.\n */\nexport const AgentRoster = React.forwardRef(\n (\n {\n status,\n agents,\n variant = \"grid\",\n sort = \"given\",\n onSelect,\n selectedId,\n onRetry,\n label = \"Agents\",\n showSummary = true,\n showLoad = true,\n pulse = true,\n announce = true,\n skeletonCount = 6,\n emptyState,\n errorMessage = \"The control plane didn't respond.\",\n labels,\n formatLoad = defaultFormatLoad,\n className,\n ...props\n },\n ref,\n ) => {\n const text = React.useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels])\n const interactive = typeof onSelect === \"function\"\n\n const ordered = React.useMemo(() => {\n if (sort !== \"attention\") return agents\n // Array.prototype.sort is stable, so agents inside one bucket keep the\n // order your data layer gave them — the list never shuffles on a re-render.\n return [...agents].sort((a, b) => RANK[a.state] - RANK[b.state])\n }, [agents, sort])\n\n const summary = React.useMemo(() => {\n const counts = new Map()\n let loadTotal = 0\n let loadCount = 0\n for (const agent of agents) {\n counts.set(agent.state, (counts.get(agent.state) ?? 0) + 1)\n // Offline agents are excluded: averaging in their empty capacity would\n // report a fleet as half-idle when every running agent is saturated.\n if (agent.state !== \"offline\") {\n loadTotal += safeLoad(agent.load)\n loadCount += 1\n }\n }\n return { counts, teamLoad: loadCount === 0 ? null : loadTotal / loadCount }\n }, [agents])\n\n /* ------------------------------------------------------- announcements */\n\n /**\n * Identity of the whole fleet's state, as one string. Empty means \"nothing to\n * watch\" — announcements off, or no roster on screen.\n */\n const trackKey = React.useMemo(\n () => (announce && status === \"ready\" ? agents.map(agent => `${agent.id}~${agent.state}`).join(\"|\") : \"\"),\n [agents, announce, status],\n )\n\n // The previous fleet snapshot lives in STATE and is compared during render —\n // no effect, so the announcement is part of the first painted frame instead\n // of arriving one commit late (screen readers do miss that gap).\n const [seen, setSeen] = React.useState<{\n key: string\n message: string\n states: ReadonlyMap\n }>(() => ({ key: \"\", message: \"\", states: new Map() }))\n\n let announcement = seen.message\n if (seen.key !== trackKey) {\n const next = new Map()\n const entered: string[] = []\n // An empty snapshot means \"first paint after mount, or after a non-ready\n // status\": a roster that shouts about every failure the moment it appears\n // is a roster people mute.\n const first = seen.states.size === 0\n if (trackKey !== \"\") {\n for (const agent of agents) {\n next.set(agent.id, agent.state)\n if (!first && seen.states.get(agent.id) !== agent.state && ATTENTION.has(agent.state)) {\n entered.push(`${agent.name}: ${stateLabel(agent.state, text)}`)\n }\n }\n }\n announcement = entered.join(\". \")\n setSeen({ key: trackKey, message: announcement, states: next })\n }\n\n /* ---------------------------------------------- keyboard / roving focus */\n\n const [activeIndex, setActiveIndex] = React.useState(0)\n const optionRefs = React.useRef<(HTMLDivElement | null)[]>([])\n const searchRef = React.useRef(\"\")\n const searchTimer = React.useRef(null)\n\n React.useEffect(\n () => () => {\n if (searchTimer.current !== null) window.clearTimeout(searchTimer.current)\n },\n [],\n )\n\n // Clamped on read instead of reset in an effect: when the fleet shrinks\n // between two polls, the roving index must never point past the end even for\n // the one frame an effect would take to fix it.\n const active = ordered.length === 0 ? 0 : Math.min(activeIndex, ordered.length - 1)\n\n const focusOption = React.useCallback((index: number, count: number) => {\n const clamped = Math.min(count - 1, Math.max(0, index))\n setActiveIndex(clamped)\n // The option already exists in the DOM, so focus can move synchronously\n // inside the handler — no effect, and therefore no chance of stealing\n // focus on an unrelated re-render.\n optionRefs.current[clamped]?.focus()\n }, [])\n\n /**\n * Columns are decided by the container (`auto-fill`), not by a breakpoint, so\n * the only honest way to know how many there are is to measure: everything\n * sharing the first card's `offsetTop` is the first row. Read at keypress\n * time, when layout is already settled — no observer, nothing to clean up.\n */\n const columnStep = React.useCallback(() => {\n if (variant === \"list\") return 1\n const nodes = optionRefs.current.slice(0, ordered.length).filter((n): n is HTMLDivElement => n !== null)\n const head = nodes[0]\n if (!head) return 1\n let columns = 1\n for (let i = 1; i < nodes.length; i += 1) {\n if (nodes[i].offsetTop !== head.offsetTop) break\n columns += 1\n }\n return columns\n }, [ordered.length, variant])\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (!onSelect) return\n if (event.altKey || event.ctrlKey || event.metaKey) return\n const count = ordered.length\n if (count === 0) return\n\n const move = (index: number) => {\n event.preventDefault()\n focusOption(index, count)\n }\n\n switch (event.key) {\n case \"ArrowDown\":\n return move(active + columnStep())\n case \"ArrowUp\":\n return move(active - columnStep())\n case \"ArrowRight\":\n return move(active + 1)\n case \"ArrowLeft\":\n return move(active - 1)\n case \"Home\":\n return move(0)\n case \"End\":\n return move(count - 1)\n case \"Enter\":\n case \" \": {\n event.preventDefault()\n const agent = ordered[active]\n if (agent) onSelect(agent.id)\n return\n }\n default:\n break\n }\n\n // Type-ahead: a fleet of forty agents is unusable if the only way to reach\n // \"Refund Resolver\" is forty arrow presses.\n if (event.key.length !== 1 || event.key === \" \") return\n const buffer = searchRef.current + event.key.toLowerCase()\n searchRef.current = buffer\n if (searchTimer.current !== null) window.clearTimeout(searchTimer.current)\n searchTimer.current = window.setTimeout(() => {\n searchRef.current = \"\"\n searchTimer.current = null\n }, TYPEAHEAD_RESET_MS)\n\n // A repeated single character walks through the matches; a longer buffer\n // re-matches from the current position so \"re\" doesn't skip \"Refund\".\n const from = buffer.length === 1 ? active + 1 : active\n for (let i = 0; i < count; i += 1) {\n const index = (from + i) % count\n const agent = ordered[index]\n if (agent && agent.name.toLowerCase().startsWith(buffer)) {\n move(index)\n return\n }\n }\n }\n\n /* ------------------------------------------------------------ envelopes */\n\n const rootClass = cn(\"flex w-full min-w-0 flex-col gap-3 text-sm\", className)\n const containerClass = variant === \"list\" ? LIST_CLASS : GRID_CLASS\n\n // One region for the whole roster, permanently mounted: several screen\n // readers skip a live region that is inserted in the same frame as its text,\n // and one region per card would talk over itself.\n const liveRegion = (\n

\n {status === \"loading\" ? `Loading ${label}` : announcement}\n

\n )\n\n if (status === \"loading\") {\n const cards = Math.min(12, Math.max(1, Math.floor(Number.isFinite(skeletonCount) ? skeletonCount : 6)))\n return (\n
\n {liveRegion}\n
\n {Array.from({ length: cards }, (_, i) => (\n \n
\n
\n
\n
\n
\n
\n
\n ))}\n
\n
\n )\n }\n\n if (status === \"error\") {\n return (\n
\n {liveRegion}\n
\n

\n \n Couldn't load {label.toLowerCase()}\n

\n

{errorMessage}

\n {onRetry && (\n \n \n Try again\n \n )}\n
\n
\n )\n }\n\n if (status === \"empty\" || ordered.length === 0) {\n return (\n
\n {liveRegion}\n {emptyState ?? (\n
\n \n

No agents deployed

\n

Agents appear here as soon as one is running in this workspace.

\n
\n )}\n
\n )\n }\n\n /* ---------------------------------------------------------------- ready */\n\n const cardClass = cn(\n \"min-w-0 rounded-xl border bg-card text-card-foreground\",\n variant === \"list\" ? \"px-3 py-2.5\" : \"flex h-full flex-col gap-2.5 p-3\",\n )\n const interactiveClass = interactive\n ? \"cursor-pointer transition-colors hover:border-primary/40 hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none\"\n : \"\"\n\n const body = (agent: AgentRosterAgent) => (\n \n )\n\n return (\n
\n {liveRegion}\n\n {showSummary && (\n
\n

{label}

\n

\n {agents.length} {text.agents}\n

\n \n {SUMMARY_ORDER.map(state => {\n const count = summary.counts.get(state) ?? 0\n if (count === 0) return null\n return (\n \n \n {count}\n {stateLabel(state, text).toLowerCase()}\n \n )\n })}\n {summary.teamLoad !== null && (\n

\n Team {text.load.toLowerCase()} {formatLoad(summary.teamLoad)}\n

\n )}\n
\n )}\n\n {interactive ? (\n \n {ordered.map((agent, index) => (\n {\n // Click also moves the roving index, so Tabbing back into the\n // roster returns to the card the pointer last used.\n setActiveIndex(index)\n onSelect?.(agent.id)\n }}\n ref={node => {\n optionRefs.current[index] = node\n }}\n role=\"option\"\n style={{ \"--agent-tone\": TONE[agent.state] } as React.CSSProperties}\n // Roving tabindex: the roster is ONE tab stop, and the arrow keys\n // move inside it. Twelve agents must not cost twelve Tabs.\n tabIndex={index === active ? 0 : -1}\n >\n {body(agent)}\n
\n ))}\n
\n ) : (\n
    \n {ordered.map(agent => (\n \n {body(agent)}\n \n ))}\n
\n )}\n
\n )\n },\n)\n\nAgentRoster.displayName = \"AgentRoster\"\n\nexport default AgentRoster\n", "type": "registry:ui" }, { "path": "src/registry/ui/agent-roster.contract.ts", "content": "import { z } from \"zod\"\n\n/**\n * What ONE agent in a fleet is doing right now, from the operator's point of\n * view. Six values, and every one of them changes what the roster does:\n *\n * - `thinking` / `using-tool` are the two \"burning tokens\" states — the only ones\n * that animate, and the only ones counted as *working* in the header.\n * - `waiting` and `error` are the two ATTENTION states: they sort to the top, they\n * get a ringed dot instead of a pulse, and entering them is the only thing the\n * roster ever announces out loud.\n * - `idle` is deployed-but-free, `offline` is paused / undeployed — the difference\n * matters because an offline agent is excluded from the team load average, and\n * counting its empty capacity would flatter the fleet's real headroom.\n *\n * Named `state`, not `status`, so it never collides with the ENVELOPE status\n * below: \"the roster failed to load\" and \"this agent's last run failed\" are two\n * different failures and both have to be expressible at the same time.\n */\nexport const AGENT_ROSTER_STATES = [\"thinking\", \"using-tool\", \"waiting\", \"error\", \"idle\", \"offline\"] as const\nexport const agentRosterStateSchema = z.enum(AGENT_ROSTER_STATES)\nexport type AgentRosterState = z.infer\n\nexport const agentRosterAgentSchema = z.object({\n /** Stable identity. The React key, the selection value, and what `onSelect` hands back. */\n id: z.string(),\n /** Display name — \"Refund Resolver\", \"研究助手\". Also what type-ahead matches on. */\n name: z.string(),\n /** What this agent is FOR, one short line: \"Billing · tier-1 refunds\". */\n role: z.string(),\n /** Model identifier as your control plane spells it. Rendered as a monospace chip. */\n model: z.string(),\n state: agentRosterStateSchema,\n /** Tool being called; only meaningful while `state: \"using-tool\"`, shown beside the label. */\n tool: z.string().optional(),\n /**\n * The one line that says what it is doing *this second* — a ticket title, a\n * query, the failure message when `state: \"error\"`. Pre-formatted by you; the\n * roster clamps it to two lines and keeps the full text in `title`.\n */\n currentTask: z.string().optional(),\n /**\n * Share of this agent's own concurrency budget in use, as a fraction: `0.62`\n * = 62 % full. Deliberately NOT a 0–100 integer, so a ratio you already compute\n * as `running / limit` drops straight in.\n *\n * Values above 1 are legal and meaningful: an over-subscribed worker renders a\n * full destructive-tone bar that still states the true figure (\"118 %\"), rather\n * than silently clamping to a healthy-looking 100 %.\n */\n load: z.number(),\n /** Tasks parked behind this agent. Rendered next to the load figure when above 0. */\n queued: z.number().int().nonnegative().optional(),\n /** Any URL. A broken one falls back to initials — the card never shows a broken image. */\n avatarUrl: z.string().optional(),\n /** Overrides the derived initials, for names where auto-derivation reads badly. */\n initials: z.string().optional(),\n})\nexport type AgentRosterAgent = z.infer\n\n/**\n * The ROSTER's own render state — \"is there a fleet listing to show at all\".\n * Independent of any agent's `state`: `status: \"error\"` means the roster query\n * failed, while an agent whose last run failed is `state: \"error\"` inside a\n * perfectly healthy `status: \"ready\"` roster.\n */\nexport const agentRosterStatusSchema = z.enum([\"loading\", \"empty\", \"error\", \"ready\"])\nexport type AgentRosterStatus = z.infer\n\n/** The envelope a data layer / mock factory hands over; the demo spreads it into the props. */\nexport const agentRosterSchema = z.object({\n status: agentRosterStatusSchema,\n agents: z.array(agentRosterAgentSchema),\n})\nexport type AgentRosterData = z.infer\n", "type": "registry:ui" } ], "type": "registry:ui" }