Agents & tools

Agent list

<AgentList />

A team of agents: each a bead with a progress ring, beside a bubble with its task and current step.

Audit the colours

Update the tokens

Fix the contrast

Install

bash

npx shadcn@latest add https://orbeez-kit.vercel.app/r/agents.json

Usage

tsx

<AgentList
  agents={[
    { id: 'a', hue: 338, task: 'Audit the colours', step: 'Listing 42 colours', progress: 0.4, status: 'working' },
    { id: 'b', hue: 22, task: 'Update the tokens', result: 'Updated 18 tokens', progress: 1, status: 'done' },
  ]}
/>

Good to know

Moods. Working agents use working; stuck ones use sad; the heap turns happy briefly when the last one finishes.
The line on top is there from the start, so the rows are never pushed down by it.
Rows grow in one after another, easing whatever holds the list along rather than shoving it.
Once every agent is done the rows fold up under that line after FOLD_AFTER seconds. Tap it to open them again.

PreviousSteps NextAgent huddle