Agent legion

A live roster of AI agents at work. As one assistant becomes a fleet, the operator's question becomes “what is every agent doing, and which one needs me?”. Each agent is a compact card carrying its identity, a labelled status, the step in flight, a progress bar and its run metrics, over a summary strip that tallies the fleet by status. Status is always a StatusBadge — colour never carries state alone — and the only motion is the running agents' live dot and an indeterminate progress bar, both of which stand still under prefers-reduced-motion. Wire up selection and the cards drive a detail panel beside them; the live version is on the Agent Legion showcase.

6agents

Running2
Waiting1
Failed1
Done1
Queued1

SolOpus 5
Refactor Flow edge routing
Running
Editing packages/react/src/ui/flow.tsx
62%
5/8 steps4m 12s184,200 tokflow/edge-routing
LunaGPT-5.6
Migrate auth to session tokens
Waiting
Needs approval: drop legacy cookie path
48%
3/7 steps11m 05s262,800 tokauth/session-tokens
AtlasOpus 5
Investigate flaky payment tests
Failed
Test suite failed: 2 of 148
74%
6/9 steps7m 48s141,500 tokfix/flaky-payments
NovaFable 5.1
Draft release notes for 0.4.0
Running
Summarising 38 merged PRs
2/4 steps1m 22s51,200 tokdocs/release-0.4.0
VegaGPT-5.6
Add pagination to /users endpoint
Done
Opened PR #612
100%
6/6 steps9m 03s208,900 tokusers/pagination
EchoOpus 5
Upgrade Tailwind v3 → v4
Queued
Waiting on Sol (shared config)
0/5 stepschore/tailwind-v4

const agents = [  { id: 'sol', name: 'Sol', model: 'Opus 5', task: 'Refactor Flow edge routing',    status: 'running', activity: 'Editing flow.tsx', progress: 62,    steps: { done: 5, total: 8 }, elapsed: '4m 12s', tokens: 184200, branch: 'flow/edge-routing' },  { id: 'luna', name: 'Luna', model: 'GPT-5.6', task: 'Migrate auth to session tokens',    status: 'waiting', activity: 'Needs approval: drop legacy cookie path', progress: 48 },  { id: 'atlas', name: 'Atlas', model: 'Opus 5', task: 'Investigate flaky payment tests',    status: 'failed', activity: 'Test suite failed: 2 of 148', progress: 74 },  { id: 'vega', name: 'Vega', model: 'GPT-5.6', task: 'Add pagination to /users',    status: 'done', activity: 'Opened PR #612', progress: 100 },];
// Pass selectedId + onSelectChange to make the cards selectable and drive a panel.<AgentLegion agents={agents} ariaLabel="Working agents" />

Data flow

Pass a flow — the same nodes and edges the Flow canvas takes — and the roster grows a tab switcher. “Cards” keeps the grid; “Data flow” swaps in a live pipeline of how work moves between agents. Selection is shared, so a node picked on the graph lights up the matching card.

6agents

Running2
Waiting1
Failed1
Done1
Queued1

SolOpus 5
Refactor Flow edge routing
Running
Editing packages/react/src/ui/flow.tsx
62%
5/8 steps4m 12s184,200 tokflow/edge-routing
LunaGPT-5.6
Migrate auth to session tokens
Waiting
Needs approval: drop legacy cookie path
48%
3/7 steps11m 05s262,800 tokauth/session-tokens
AtlasOpus 5
Investigate flaky payment tests
Failed
Test suite failed: 2 of 148
74%
6/9 steps7m 48s141,500 tokfix/flaky-payments
NovaFable 5.1
Draft release notes for 0.4.0
Running
Summarising 38 merged PRs
2/4 steps1m 22s51,200 tokdocs/release-0.4.0
VegaGPT-5.6
Add pagination to /users endpoint
Done
Opened PR #612
100%
6/6 steps9m 03s208,900 tokusers/pagination
EchoOpus 5
Upgrade Tailwind v3 → v4
Queued
Waiting on Sol (shared config)
0/5 stepschore/tailwind-v4

const flow = {  nodes: [    { id: 'dispatch', title: 'Dispatch queue', subtitle: 'orchestrator', status: 'Routing', column: 0, row: 1 },    { id: 'sol', title: 'Sol', subtitle: 'Refactor Flow edges', tone: 'info', status: 'Running', column: 1, row: 0 },    { id: 'luna', title: 'Luna', subtitle: 'Auth migration', tone: 'warning', status: 'Waiting', column: 1, row: 1 },    { id: 'atlas', title: 'Atlas', subtitle: 'Flaky payments', tone: 'danger', status: 'Failed', column: 1, row: 2 },    { id: 'vega', title: 'Vega', subtitle: 'Opened PR #612', tone: 'success', status: 'Done', column: 2, row: 0 },    { id: 'review', title: 'Human review', subtitle: 'operator', status: 'Idle', column: 2, row: 2 },  ],  edges: [    { from: 'dispatch', to: 'sol', label: 'task' },    { from: 'dispatch', to: 'luna' },    { from: 'dispatch', to: 'atlas' },    { from: 'sol', to: 'vega', label: 'handoff' },    { from: 'luna', to: 'review', variant: 'dashed', tone: 'warning', label: 'approval' },    { from: 'atlas', to: 'review', tone: 'danger', label: 'triage' },  ],};
// Node ids match agent ids, so selection is shared across both views.<AgentLegion agents={agents} flow={flow} ariaLabel="Working agents" />

Props

Prop	Type	Default	Notes
`agents`	`AgentLegionAgent[]`	—	The agents to display.
`summary`	`boolean`	`true`	Show the fleet summary strip above the grid.
`columns`	`number`	—	Fixed column count; defaults to a responsive 1 → 2 → 3 grid.
`ariaLabel`	`string`	`'Agent legion'`	Accessible name for the roster region.
`selectedId`	`string \| null`	—	Controlled selection. Omit for uncontrolled.
`defaultSelectedId`	`string \| null`	—	Uncontrolled initial selection.
`onSelectChange`	`(id: string \| null) => void`	—	Fires when selection toggles; its presence makes the cards selectable.
`flow`	`AgentLegionFlow`	—	A data-flow graph ({ nodes, edges }). Its presence adds the Cards / Data flow tabs.
`cardsTabLabel`	`string`	`'Cards'`	Label for the roster tab.
`flowTabLabel`	`string`	`'Data flow'`	Label for the flow tab.
`view`	`'cards' \| 'flow'`	—	Controlled view. Omit for uncontrolled.
`defaultView`	`'cards' \| 'flow'`	`'cards'`	Uncontrolled initial view.
`onViewChange`	`(view: 'cards' \| 'flow') => void`	—	Fires when the view tab changes.

AgentLegionAgent

Prop	Type	Default	Notes
`id`	`string`	—	Stable id, used for selection and as the key.
`name`	`string`	—	Agent or session name, e.g. “Sol”.
`model`	`string`	—	Model behind the agent, e.g. “Opus 5”.
`icon`	`ReactNode`	—	Leading glyph; defaults to an initials avatar.
`task`	`string`	—	What the agent is working on.
`status`	`'running' \| 'waiting' \| 'done' \| 'failed' \| 'queued' \| 'paused'`	—	Lifecycle state; drives the badge tone and the live affordance.
`activity`	`string`	—	The step in flight, e.g. “Running tests”.
`progress`	`number`	—	Completion 0–100. Omit on a runner for an indeterminate bar.
`steps`	`{ done: number; total: number }`	—	Checklist progress, shown as “4/7 steps”.
`elapsed`	`string`	—	Elapsed run time, e.g. “1m 5s”.
`tokens`	`number`	—	Token usage so far.
`branch`	`string`	—	Working context, e.g. a git branch.