Components · Legibility

Agent Roster

Multi-agent products love to say 'a team of agents is working for you' and then show a spinner. The roster is the team sheet: one line per agent with its role, state, and live activity. A blocked agent stays on the sheet with its blocker named, because a team that hides its stuck members isn't a team you can manage.

When to use

Orchestrator-and-workers runs where more than one agent acts at once. For a single agent, use the Agent Task List instead; a roster of one is an org chart for a solo founder.

Behavior

Four states: working (pulsing), waiting, blocked, idle. Every state is written in words next to its dot. Blocked rows name the blocker in the activity line and read as the human's cue to intervene; pair with the Interrupt Bar for targeted steering.

Usage

tsx

import { AgentRoster } from "@/components/agent-roster";

<AgentRoster
  label="Report crew"
  agents={[
    { id: "r", name: "Researcher", state: "working", activity: "reading 4 filings" },
    { id: "w", name: "Writer", state: "waiting", activity: "waiting on research" },
  ]}
/>

Install

shell

npx shadcn@latest add https://agent-pitstop.vercel.app/r/agent-roster.json

Or copy the source from registry/agent-roster. MIT licensed.

Report crew2/4 working

Orchestratorplans and delegatesassigning research tasksWorking
Researcherfinds and verifies sourcesreading 4 filingsWorking
Writerdrafts the reportwaiting on researchWaiting
Checkerverifies claimsIdle