KQ-800 · ORCHESTRA/VIEW
Orchestra View
A ring of agent avatars around one task, laid out from polar maths rounded to three decimals. An active agent pulses toward the centre — its avatar rides its own radius inward and back on an ambient tween loop under a cobalt halo — while idle agents sit dim and done agents hold a success ring; a new contribution flies from its agent along the radius to a landing slot under the task disc on glide as the disc's count rolls on snap, and the previous chip fades on the exit ease. It is a radiogroup with a roving tabindex — arrows move around the ring, Home and End jump, Space selects — and selecting an avatar reads what that agent is doing in the caption.
Select an agent to read what it is doing
Idle · press play
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/orchestra-view
Props
- task
- string
- default —
- The central task's name, printed on the disc.
- agents
- OrchestraAgent[]
- default —
- Three to eight agents around the ring: id, name, an optional model, a status of idle, active or done, and what the agent is doing now.
- contributions
- OrchestraContribution[]
- default —
- Received so far, oldest first: id, agentId and text. Append one to fly it in.
- value / defaultValue
- string
- default —
- Controlled or initial selected agent id; omitted means none.
- onValueChange
- (id: string) => void
- default —
- Fires from an avatar press or key.
- label
- string
- default —
- Names the stage for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| task | string | — | The central task's name, printed on the disc. |
| agents | OrchestraAgent[] | — | Three to eight agents around the ring: id, name, an optional model, a status of idle, active or done, and what the agent is doing now. |
| contributions | OrchestraContribution[] | — | Received so far, oldest first: id, agentId and text. Append one to fly it in. |
| value / defaultValue | string | — | Controlled or initial selected agent id; omitted means none. |
| onValueChange | (id: string) => void | — | Fires from an avatar press or key. |
| label | string | — | Names the stage for assistive technology. |