{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "agent-fleet", "type": "registry:ui", "title": "Agent Fleet", "description": "Panel of parallel subagents: status, name and role, live activity, thin progress, elapsed time, tokens and cost, with a fleet summary and selection.", "dependencies": [], "registryDependencies": [ "https://kuro.abstergo.fyi/r/kura-theme.json", "https://kuro.abstergo.fyi/r/kura-format.json", "https://kuro.abstergo.fyi/r/shimmer-text.json", "https://kuro.abstergo.fyi/r/status-glyph.json", "https://kuro.abstergo.fyi/r/use-controllable-state.json", "https://kuro.abstergo.fyi/r/use-elapsed.json", "utils" ], "files": [ { "path": "registry/kura/agent-fleet/agent-fleet.tsx", "type": "registry:ui", "target": "components/kura/agent-fleet/agent-fleet.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { useControllableState } from \"@/hooks/kura/use-controllable-state\";\nimport { useElapsed } from \"@/hooks/kura/use-elapsed\";\nimport { cn } from \"@/lib/utils\";\nimport { formatClock, formatCost, formatTokens } from \"@/lib/kura/format\";\nimport { ShimmerText } from \"@/components/kura/shimmer-text\";\nimport { type AgentStatus, StatusGlyph } from \"@/components/kura/status-glyph\";\n\nexport interface FleetAgent {\n /** Stable id, used for selection and React keys. */\n id: string;\n /** Short name, e.g. \"explorer\". */\n name: string;\n /** What this agent is for, e.g. \"Maps call sites\". */\n role?: string;\n status: AgentStatus;\n /** What it is doing right now (running) or its last result (done / failed). One line. */\n activity?: string;\n /** 0–1. Shown as a thin bar while the agent is live. */\n progress?: number;\n startedAt?: Date | number;\n /** Freezes the elapsed time at endedAt − startedAt. */\n endedAt?: Date | number;\n /** Total tokens used. */\n tokens?: number;\n /** Spend in USD. */\n cost?: number;\n}\n\nexport interface AgentFleetProps\n extends Omit, \"onSelect\" | \"title\" | \"children\"> {\n /** The subagents, in display order. */\n agents: FleetAgent[];\n /** Panel title. Default \"Subagents\". */\n title?: React.ReactNode;\n /** Selected agent id (controlled). */\n selectedId?: string | null;\n /** Initially selected agent id when uncontrolled. */\n defaultSelectedId?: string | null;\n /** Called with the agent id when a row is chosen (click, Enter or Space). Makes rows selectable. */\n onSelect?: (id: string) => void;\n /** `compact` = one 36px row per agent; `comfortable` = two lines with role and activity. Default \"comfortable\". */\n density?: \"compact\" | \"comfortable\";\n /** Shown when `agents` is empty. */\n empty?: React.ReactNode;\n}\n\nconst LIVE: AgentStatus[] = [\"running\", \"waiting\", \"paused\"];\n\nconst SUMMARY_ORDER: { status: AgentStatus; word: string; tone?: string }[] = [\n { status: \"running\", word: \"running\" },\n { status: \"waiting\", word: \"waiting\", tone: \"text-kura-warning-text\" },\n { status: \"paused\", word: \"paused\" },\n { status: \"failed\", word: \"failed\", tone: \"text-kura-danger-text\" },\n { status: \"done\", word: \"done\" },\n { status: \"queued\", word: \"queued\" },\n { status: \"skipped\", word: \"skipped\" },\n];\n\nconst SPOKEN: Record = {\n queued: \"queued\",\n running: \"running\",\n waiting: \"waiting for you\",\n paused: \"paused\",\n done: \"done\",\n failed: \"failed\",\n skipped: \"skipped\",\n};\n\nfunction useAnnouncements(agents: FleetAgent[]) {\n const prev = React.useRef | null>(null);\n const [message, setMessage] = React.useState(\"\");\n React.useEffect(() => {\n const next = new Map(agents.map((a) => [a.id, a.status]));\n const before = prev.current;\n prev.current = next;\n if (!before) return;\n const changes = agents\n .filter((a) => before.has(a.id) && before.get(a.id) !== a.status && a.status !== \"running\")\n .map((a) => `${a.name} ${SPOKEN[a.status]}`);\n if (changes.length) setMessage(changes.join(\", \"));\n }, [agents]);\n return message;\n}\n\n/**\n * Parallel subagents at a glance: one row per agent with its status glyph, name and role, what it\n * is doing now (shimmering while it runs), a thin progress bar, elapsed time, tokens and cost.\n * The header sums the fleet (\"3 running · 1 waiting · 2 done\"). Rows are a selectable listbox\n * when `onSelect` is given.\n */\nexport function AgentFleet({\n agents,\n title = \"Subagents\",\n selectedId: selectedProp,\n defaultSelectedId = null,\n onSelect,\n density = \"comfortable\",\n empty,\n className,\n ...props\n}: AgentFleetProps) {\n const id = React.useId();\n const [selected, setSelected] = useControllableState({\n value: selectedProp,\n defaultValue: defaultSelectedId,\n onChange: (v) => v != null && onSelect?.(v),\n });\n const selectable = onSelect != null || selectedProp !== undefined;\n const [focusId, setFocusId] = React.useState(null);\n const rowRefs = React.useRef(new Map());\n const message = useAnnouncements(agents);\n\n const counts = new Map();\n for (const a of agents) counts.set(a.status, (counts.get(a.status) ?? 0) + 1);\n const summary = SUMMARY_ORDER.filter((s) => counts.get(s.status));\n\n const tabStop =\n agents.find((a) => a.id === focusId)?.id ??\n agents.find((a) => a.id === selected)?.id ??\n agents[0]?.id;\n\n const moveFocus = (to: number) => {\n const a = agents[Math.max(0, Math.min(agents.length - 1, to))];\n if (!a) return;\n setFocusId(a.id);\n rowRefs.current.get(a.id)?.focus();\n };\n\n const onKeyDown = (e: React.KeyboardEvent) => {\n const index = agents.findIndex((a) => a.id === (e.target as HTMLElement).dataset.agentId);\n if (index < 0) return;\n if (e.key === \"ArrowDown\" || e.key === \"j\") moveFocus(index + 1);\n else if (e.key === \"ArrowUp\" || e.key === \"k\") moveFocus(index - 1);\n else if (e.key === \"Home\") moveFocus(0);\n else if (e.key === \"End\") moveFocus(agents.length - 1);\n else if (e.key === \"Enter\" || e.key === \" \") setSelected(agents[index]?.id ?? null);\n else return;\n e.preventDefault();\n };\n\n return (\n \n \n

\n {title}\n \n {agents.length}\n \n

\n {summary.length > 0 && (\n