# Agent Island

A live status pill for AI coding agents that springs open into a card: each agent's dot flies into its own row, with the branch, usage, and permission requests you can approve in place.

- Page and source: https://uibrik.com/components/agent-island
- Install (Pro, needs a license key, see https://uibrik.com/docs/pro): `npx shadcn@latest add @uibrik-pro/agent-island`
- Packages: none beyond React
- Import: `import { AgentIsland } from "@/components/uibrik/agent-island/agent-island"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| autoExpand | `boolean` | `true` | Opens when an agent asks for permission, and folds back once it's answered. |
| pulse | `boolean` | `true` | A soft ping on working agents and a shimmer while they think. |
| showBranch | `boolean` | `true` | The git branch, commits ahead/behind and changed files in the card. |
| showUsage | `boolean` | `true` | Tokens, cost and a bar split by agent. |
| width | `number` | `380` | Width of the open card. It shrinks to fit narrow containers. |
| colors | `string[]` | `["#5b7bd6","#9a6fd8","#2f9e83","#c2579a","#3e9bc4","#7d8b3a"]` | Identity colours, given to agents in order. Shown only on dots and usage slices. |
| defaultView | `"agents" \| "graph" \| "usage"` | `"agents"` | Agents lists each agent; Graph draws them as branches over time; Usage shows token burn and each agent's share. |
| defaultOpen | `boolean` | `false` | Opens as the card on first render. |
| agents | `{ id: string; name: string; status: 'thinking' \| 'running' \| 'waiting' \| 'done' \| 'error'; action: string; startedAt?: number; finishedAt?: number; tokens?: number; additions?: number; deletions?: number; steps?: { id; label; tool?; done?; at? }[]; request?: string; color?: string; parentId?: string }[]` |  | Agents in order. Add one to spawn its row and dot; change `action` and it rolls to the new text. A `waiting` agent shows its `request` with Approve and Deny. `parentId` forks its branch from that agent on the graph. |
| views | `('agents' \| 'graph' \| 'usage')[]` | `["agents", "graph", "usage"]` | Views in the card's switcher, in order. Pass one to hide the switcher. |
| view / onViewChange | `AgentView / (view) => void` |  | Controlled view. |
| branch | `{ name: string; ahead?: number; behind?: number; changes?: number }` |  | Shown as a chip in the card's top row. |
| usage | `{ tokens: number; limit: number; cost?: number; currency?: string }` |  | Fills the ring in the pill and the bar in the card. |
| onApprove / onDeny | `(agentId: string) => void` |  | Answers a waiting agent's request. |
| open / onOpenChange | `boolean / (open: boolean) => void` |  | Controlled open state. |
| warnAt | `number` | `0.8` | Share of the usage limit where usage turns amber. |
| label | `string` | `"Agent session"` | Names the island for screen readers. |
| className | `string` |  | Classes for the outer box, which sets the space the island centres in. |