Sandbox metersPro

CPU, memory, disk and network for the agent's sandbox as live sparklines against their limits. Near a limit a meter turns amber, then red, and a warning says what will break and offers to raise it.

Markdown

On this page

ProThe payouts suite runs with 8 workers. Memory climbs toward 8 GB until the warning offers to raise it; with room, the meter settles.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/sandbox-meters

Usage

tsx

import { SandboxMeters } from "@/components/ui/chatcn/pro/sandbox-meters"

<SandboxMeters name="sbx-payouts-7f3a" spec="4 vCPU, 8 GB" meters={meters} onRaiseLimit={raise} />

Each meter takes recent samples, oldest first, and its max: cores for cpu, bytes for memory and disk, and bytes per second for network (with sent for the upload line). Push a sample a second and drop the oldest; the line grows in from the end edge until it holds capacity samples. variant="compact" is one row for a status bar.

Examples

States

ProMemory near the limit, disk almost full, compact in a status bar, starting, stopped and metrics unavailable.

Props

Prop	Type	Notes
`meters`	`SandboxMeterData[]`	`kind`, `samples`, `max`, `sent`
`name`, `spec`	`ReactNode`	Header
`state`	`"starting" \| "running" \| "stopped"`	Default `running`
`startedAt`	`number`	Uptime while running
`capacity`	`number`	Samples per line. Default 40
`variant`	`"cards" \| "compact"`	Default `cards`
`onRaiseLimit`	`(kind) => void`	One click fix on the warning
`onRestart`	`() => void`	Shown when stopped
`error`	`ReactNode`	Why metrics are missing, with how to fix it

Keyboard

Meters are read only. Tab reaches Raise and Restart sandbox.

Accessibility

Each meter reads as one sentence, for example Memory: 7.2 GB of 8 GB, 90%, near the limit. Sparklines are decorative.
Levels have a glyph and words as well as amber and red. The warning is an alert that says what breaks at the limit and how to avoid it.

Motion

Lines redraw once per sample with no tweening, the way a live chart should. Only the newest point carries a dot. Nothing else moves, so reduced motion needs no change.