Skip to content
Kura

Agent Fleet

experimental

Panel of parallel subagents: status, name and role, live activity, thin progress, elapsed time, tokens and cost, with a fleet summary and selection.

@kura-ui/react/agent-fleetCopy for agentsMarkdownRegistry JSON

Three subagents

minimal

Subagents3

  • explorerFound 23 calls to fetchUser() in 9 files84.2k1:34
  • , 40%test-writerRewriting session mocks in login.test.ts31.9k–
  • reviewerStarts when the patches land–

Live fleet

Six subagents advance: an approval clears, patches land, tests fail, the reviewer starts. Controlled selection.

full

Subagents6

  • explorerFound 23 calls to fetchUser() in 9 files84.2k1:34
  • docs-readerSummarised the session and refresh APIs26.7k0:44
  • , 55%client-patcherReplacing fetchUser() with auth.getSession()53.1k–
  • , 30%middleware-patcherNeeds approval to edit src/middleware.ts31.4k–
  • , 22%test-writerRewriting session mocks in login.test.ts17.6k–
  • reviewerStarts when the patches land–

Compact

One 36px row per agent.

variant

Subagents6

  • explorerFound 23 calls to fetchUser() in 9 files1:34
  • docs-readerSummarised the session and refresh APIs0:44
  • , 55%client-patcherReplacing fetchUser() with auth.getSession()–
  • , 30%middleware-patcherNeeds approval to edit src/middleware.ts–
  • , 22%test-writerRewriting session mocks in login.test.ts–
  • reviewerStarts when the patches land–

Empty

Before any delegation.

state

Subagents0

No subagents yet

Delegated work shows up here as it starts.

Master / detail with tool-call

Selecting a subagent shows its recent tool calls.

composition

Subagents3

  • explorerFound 23 calls to fetchUser() in 9 files1:34
  • , 78%test-writerRunning pnpm test --filter web–
  • reviewerStarts when tests pass–

test-writer

Updates tests
edit_file Completed
Arguments
{ "path": "src/auth/__tests__/login.test.ts"}
bash Running
Arguments
{ "command": "pnpm test --filter web"}

Installation

npx shadcn@latest add https://kuro.abstergo.fyi/r/agent-fleet.json

Copies the source into components/kura/agent-fleet with its dependencies (kura-theme, kura-format, shimmer-text, status-glyph, use-controllable-state, use-elapsed, utils). Tokens come from the kura-theme item.

When to use it

Use it for

  • An orchestrator delegates work to several subagents at once (explorer, test-writer, reviewer) and the human needs to see who is doing what.
  • A master/detail layout where choosing a subagent shows its transcript or tool calls next to the list.
  • Spotting at a glance which subagent is waiting for approval or has failed ('3 running · 1 waiting · 2 done').

Reach for something else when

  • Sequential steps of one agent — use task-list or agent-timeline.
  • Timing and nesting of spans inside a run — use trace-waterfall.
  • The run as a whole (title, cost, stop) — use run-header, and put AgentFleet under it.

Props

PropTypeDefaultDescription
agents*FleetAgent[]—{ id, name, role?, status, activity?, progress? (0–1), startedAt?, endedAt?, tokens?, cost? }, in display order. activity is the current action while running, or the result once done/failed.
titleReact.ReactNode"Subagents"Header title; the count follows it.
selectedIdstring | null—Selected agent id (controlled).
defaultSelectedIdstring | nullnullInitially selected agent id when uncontrolled.
onSelect(id: string) => void—Called when a row is chosen by click, Enter or Space. When set (or selectedId is given) the list becomes a single-select listbox.
density"compact" | "comfortable""comfortable"comfortable = two lines (name + role, then activity; tokens, cost and clock on the right, progress under them). compact = one 36px row (name, activity, progress, tokens, clock).
emptyReact.ReactNode—Replaces the default empty state ('No subagents yet').

All native attributes of the root element, className and ref pass through.

Anatomy

  1. AgentFleetRoot panel with `data-density`. A size container: cost, tokens and summary drop out when narrow.data-slot="agent-fleet"
  2. HeaderTitle, count and agent-fleet-summary ('3 running · 1 waiting · 2 done'; waiting in amber, failed in red).data-slot="agent-fleet-header"
  3. AgentOne row (<li>, role=option when selectable) with `data-status`, `data-selected`. Selected = active fill + 2px blue bar on the left.data-slot="agent-fleet-agent"
  4. NameAgent name.data-slot="agent-fleet-name"
  5. RoleRole (comfortable only).data-slot="agent-fleet-role"
  6. ActivityOne truncated line; shimmers while running, amber when waiting, red when failed.data-slot="agent-fleet-activity"
  7. Progress3px bar while live: blue running, amber waiting, grey paused.data-slot="agent-fleet-progress"
  8. TokensMono token total, e.g. 84.2k.data-slot="agent-fleet-tokens"
  9. CostMono cost (comfortable, wide containers).data-slot="agent-fleet-cost"
  10. ElapsedMono clock; ticks while live, frozen at endedAt − startedAt.data-slot="agent-fleet-elapsed"
  11. EmptyEmpty state.data-slot="agent-fleet-empty"

Accessibility

  • Role: listbox (selectable) or list
  • The list is labelled by the title. Selectable rows are options with aria-selected and a roving tabindex (one Tab stop).
  • Each row's status glyph is a labelled image ('Running', 'Waiting for you'), so status is not colour-only; progress is read as a percentage.
  • A polite status region announces only transitions out of running ('client-patcher done', 'test-writer failed'), not ticking clocks or progress.
  • Reduced motion: New rows fade in without rising; running glyphs, activity shimmer and progress width transitions stop.
KeysAction
ArrowDown / ArrowUp (j / k)Move focus between agents
Home / EndFirst / last agent
Enter / SpaceSelect the focused agent

Notes for agents

  • Give every agent a stable id; rows key on it and the announcer diffs statuses by id.
  • Write activity in present tense while running ('Rewriting mocks in login.test.ts') and as a result when done ('Found 23 calls in 9 files'), or the failure when failed.
  • Pass startedAt from the harness (not Date.now() at render) and endedAt when the agent stops so clocks stay correct across reloads.
  • progress is optional; omit it for open-ended work rather than inventing a number.