Environment pickerPro
Where the agent runs: this machine, a new worktree, a cloud sandbox or an SSH host, each with its machine and what an hour costs. Cloud grows a size control in place and the session estimate rolls as you choose.
On this page
ProWhere to run the payouts task. Cloud grows a size control in place, the estimate rolls with the size, and Start provisions the sandbox.
Installation
Usage
import { EnvironmentPicker } from "@/components/ui/chatcn/pro/environment-picker"
<EnvironmentPicker options={environments} defaultValue="cloud" onStart={start} />Each option has a kind (local, worktree, cloud, ssh), a detail such as the host or worktree path, specs and costPerHour. Give cloud options sizes; the chosen option shows them as a segmented control and its specs and cost follow the size. An option with status: "offline" cannot be chosen and offers Reconnect; starting shows its progress in words.
Examples
States
ProThis machine at no cost, an offline SSH host, starting, read only and loading.
Props
| Prop | Type | Notes |
|---|---|---|
options | EnvironmentOption[] | kind, name, detail, specs, costPerHour, sizes, status, statusText |
value, defaultValue, onValueChange | string | Chosen option |
size, defaultSize, onSizeChange | string | Size of the chosen option |
estimateHours | number | Default 2 |
onStart, starting | (id, size?) => void, boolean | Shows the footer with the estimate |
onReconnect | (id) => void | On offline hosts |
disabled, loading | boolean | |
label | string | Group name. Default Environment |
Keyboard
| Key | Action |
|---|---|
ArrowUp ArrowDown | Choose the previous or next environment, skipping offline ones |
ArrowLeft ArrowRight | The same, mirrored in right to left |
Home End | First or last environment |
Tab | Into the size control, then Start |
Accessibility
- A radio group with one tab stop. Each option reads its name, kind, machine and cost; offline ones are disabled and say why in words.
- Reconnect sits outside the radio, so no control is nested in another. The estimate rolls without announcing; Start names the environment it starts.
Motion
The chosen ring and fill move in 150 ms. The estimate's digits roll in 300 ms when the size changes. Nothing moves on arrow keys beyond the selection itself.