Stop allPro

Emergency stop for every running agent, with a confirm and a receipt of what stopped and what was rolled back.

Markdown

On this page

ProThree agents from one header: confirm, stop and read the receipt.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/stop-all

Usage

tsx

import { StopAll } from "@/components/ui/chatcn/pro/stop-all"

<StopAll agents={running} onStop={(ids) => api.stopAll(ids)} shortcut="⇧ Esc" />

The confirm names every agent and what it is doing right now, so nobody stops blind. Stop all swaps each row for a spinner in place, then leaves a receipt: rows ticked and struck through, what was rolled back, and in amber what could not be undone and why. Resolve onStop with { stopped, rolledBack, kept }; ids missing from stopped are reported as still running. Use bar across the top of a multi agent view.

Examples

States

ProThe bar, confirming, a partial stop, a failed stop and nothing running.

Props

Prop	Type	Notes
`agents`	`{ id, name, activity }[]`	Running agents. Empty disables the trigger in place
`onStop`	`(ids) => StopAllResult \| Promise<StopAllResult>`	Reject to show the error and Try again
`variant`	`"button" \| "bar"`	Popover from a button, or a strip that expands
`size`	`"sm" \| "md"`	Default `md`
`shortcut`	`ReactNode`	Hint shown in the confirm; your app binds it
`defaultPhase`	`"idle" \| "confirm"`	Start on the confirm
`barLabel`	`ReactNode`	The bar's summary line
`labels`	`Partial<StopAllLabels>`	Every string, for translation. Counts arrive as numbers so plurals stay right

Keyboard

Key	Action
Enter or Space	Open the confirm; focus lands on Stop all
Enter	Stop all from the confirm
Esc	Keep running and close

Accessibility

The panel title is a polite live region: it announces stopping and the result.
Each row carries hidden text for stopped or still running; rolled back and could not undo lines are prefixed for screen readers.
Color is never alone: could not undo has a warning glyph and its reason.

Motion

The popover grows from the trigger in 180 ms; the bar's panel slides 4 px in 180 ms. Ticks swap in over 180 ms. Reduced motion keeps fades only.