Agents windowPro

Every coding agent you run, wherever it runs: a sidebar grouped by this machine, cloud sandboxes and SSH hosts, each agent on its own worktree, and the work as tabs or a grid.

Markdown

On this page

ProSix agents across this laptop, cloud sandboxes and two SSH hosts, each on its own worktree. Two keep working while you watch; one needs approval, one is ready to review.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/agents-window

Usage

tsx

import { AgentsWindow } from "@/components/ui/chatcn/pro/agents-window"

<AgentsWindow agents={agents} locations={locations} onApprove={approve} onReview={openReview} />

Each agent carries its location, branch and worktree, a status (queued, running, waiting, done, failed, stopped) and an activity list that streams in. Running agents show a live clock from startedAt. Pass renderPane to put your own surface in the main area, for example the free coding agent block.

Examples

Grid

view="grid" shows every agent at once. A pane's title opens it as a tab.

ProEvery agent at a glance in a grid. The one that needs you carries an amber edge; a title opens its tab.

States

ProA failed run with the fix and an offline host, no agents yet, and loading.

Props

Prop	Type	Notes
`agents`	`WorkspaceAgent[]`	`title`, `status`, `location`, `branch`, `worktree`, `startedAt`, `activity`, `request`, `error`, diff and cost numbers
`locations`	`AgentLocation[]`	`kind` is `local`, `cloud` or `ssh`; `status` `offline` dims its agents and offers Reconnect
`value`, `defaultValue`, `onValueChange`	`string`	The active agent
`view`, `defaultView`, `onViewChange`	`"tabs" \| "grid"`	Default `tabs`
`onApprove`, `onDeny`	`(id) => void`	Shown on an agent that is `waiting` with a `request`
`onStop`, `onRetry`, `onReview`	`(id) => void`	Stop while running, Retry after a failure, Review changes when done
`onNewAgent`, `onReconnect`	`() => void`, `(locationId) => void`
`renderPane`	`(agent, { compact }) => ReactNode`	Replace the default pane
`loading`	`boolean`	Sidebar skeleton
`height`	`number \| string`	Default 640

Keyboard

Key	Action
`ArrowUp` `ArrowDown` `Home` `End`	Move between agents in the sidebar
`ArrowLeft` `ArrowRight`	Move between tabs
`Tab`	Into the pane: Stop, Approve, Review changes

Accessibility

The sidebar is a navigation landmark grouped by location; the selected agent has aria-current. Every status is a distinct glyph with its name read out, never color alone.
On narrow screens the sidebar becomes a menu in the toolbar, so every agent stays reachable.
Failures are alerts and say how to fix them. Agents waiting on you are labeled in words as well as amber.

Motion

New activity lines fade up 4 px over 180 ms; the feed follows the newest line only while you are at the bottom.
Running lines use the text shimmer. Reduced motion keeps the fade and drops the travel.