Stop all
ProA workspace-wide stop: "Pause every agent". It says how many runs are in flight (from the app, or that the app hasn't said), asks what happens to them (finish the current step, stop now, or hand back to a person) with nothing chosen for the person, and says for the choice what can and can't be undone. The stop itself is confirmed the way the kit's other serious steps are: held down (HoldToConfirm) or, with confirm={{ by: "type", phrase }}, typed (TypeToConfirm). It stays locked, and says why, until a choice is made.
The app does the stopping in onStop and reports back through status: "stopping" while runs finish their step, "paused" once nothing runs, with Resume when onResume is given. A failure comes back as error and is said as an alert. Nothing here says a run stopped unless the app says so.
Version 5.2.0· other versions
This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).
Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1 and 2.6.2: the page came later, or had another name then.
Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.
Preview
Loading the preview
Install
First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/stop-all
Brings in: button, heading-level, heading-scope, hold-to-confirm, locale, locked, motion, radio-group, tokens, type-to-confirm, utils · npm: lucide-react@^1.67.0
Usage
"use client"
import * as React from "react"
import { StopAll, type StopAllStatus, type StopMode } from "@/components/candor/stop-all"
import { Button } from "@/components/candor/ui/button"
export default function Example() {
// The app owns the stop: it pauses the agents and says where that is.
const [status, setStatus] = React.useState<StopAllStatus>("running")
const [mode, setMode] = React.useState<StopMode | null>(null)
return (
<div className="flex max-w-xl flex-col gap-3">
<StopAll
inFlight={7}
status={status}
stillFinishing={status === "stopping" ? 3 : undefined}
consequences={{ "stop-now": { cannotUndo: ["Emails already sent stay sent.", "A step stopped part-way isn't rolled back; its run shows what it changed."] } }}
onStop={(m) => {
setMode(m)
setStatus(m === "finish-step" ? "stopping" : "paused")
}}
onResume={() => setStatus("running")}
/>
{status === "stopping" && (
<div data-demo="" className="flex items-center gap-2 text-xs text-muted-foreground">
The demo's runs are finishing ({mode}).
<Button size="xs" variant="outline" onClick={() => setStatus("paused")}>
Finish them
</Button>
</div>
)}
</div>
)
}<StopAll>
| Prop | Type | Default | Description |
|---|---|---|---|
| inFlight | number | undefined | — | How many runs are going now, as the app counts them. Left out, the control says the app hasn't said. |
| onStoprequired | (mode: StopMode) => void | — | Called with the person's choice once the stop is confirmed. Pause the agents here and report through `status`. |
| status | StopAllStatus | undefined | "running" | Where the stop is: "running" (the default; nothing paused), "stopping" or "paused", as the app reports it. |
| stillFinishing | number | undefined | — | While "stopping": how many runs are still finishing their step, when the app knows. |
| onResume | (() => void) | undefined | — | Shows Resume once every agent is paused; called when it's pressed. |
| modes | StopMode[] | undefined | allModes | The choices the app supports, in order. All three by default; leave out one the app can't do. |
| consequences | Partial<Record<StopMode, StopConsequences>> | undefined | — | What can and can't be undone for each choice, in the app's words, in place of the kit's general lines. |
| confirm | { by: "hold"; holdMs?: number | undefined } | { by: "type"; phrase?: string | undefined } | undefined | { by: "hold" } | How the stop is confirmed: held for a moment (the default), or by typing a phrase such as the workspace's name. |
| locked | string | null | undefined | — | Why the viewer can't pause every agent (not an admin, say). The control stays visible and says so. `null` or left out: unlocked. |
| error | string | undefined | — | Why the last stop or resume failed, from the app. Shown as an alert. |
| headingLevel | HeadingLevel | undefined | — | The level of the heading. Defaults to one below the nearest `HeadingScope`, else 2 (it was 2 before 5.0); the item's own headings sit one below it. |
| className | string | undefined | — | Classes for the control, merged with Candor's. |
Strings
The fixed words, in English by default. Change any of them under stopAll in <LocaleProvider strings={{ … }}>; the table is exported as stopAllStrings.
| Key | English |
|---|---|
| title | Pause every agent |
| intro | Stops new runs from starting anywhere in the workspace. Choose what happens to the runs already going. |
| inFlight | { one: "{count} run is in flight now.", other: "{count} runs are in flight now." } |
| noneInFlight | No runs are in flight now. |
| inFlightUnknown | The app hasn't said how many runs are in flight. |
| choose | What happens to runs in flight |
| finish-step | Finish the current step, then pause |
| finish-stepHint | Each run completes the step it's on and stops before the next one. Nothing is cut off part-way. |
| stop-now | Stop now |
| stop-nowHint | Each run stops where it is. A step that was part-way through may have made some of its changes and not others. |
| hand-back | Hand back to a person |
| hand-backHint | Each run stops and goes to its owner with its progress, for them to finish or cancel. |
| canUndo | Can be undone |
| cannotUndo | Can't be undone |
| undoResume | Resuming lets agents start new runs again. |
| keepDone | What runs have already done stays done. Pausing doesn't reverse it. |
| keepPartial | A step stopped part-way isn't rolled back. |
| keepHanded | Handed-back runs stay with their owners after you resume. |
| chooseFirst | Choose what happens to runs in flight first. |
| holdReason | {choice}. {inFlight} |
| phrase | pause every agent |
| stopping | Pausing. Runs are finishing their current step. |
| stoppingCount | { one: "Pausing. {count} run is still finishing its step.", other: "Pausing. {count} runs are still finishing their step." } |
| paused | Every agent is paused. No new runs start until you resume. |
| resume | Resume agents |
Motion
| Moment | Family | What it does |
|---|---|---|
| status | arrive, fade | The line that says where the stop is (pausing, paused, or that it failed) fades and rises in when the app's answer changes while the control is on screen. A state already showing when it first draws is still. |
Set with --cd-motion-stop-all-<moment>-* in your brand file; the families are in the design reference.
Types
- StopMode
- What happens to a run that's going when every agent is paused.
"finish-step" | "stop-now" | "hand-back"- StopAllStatus
- Where the workspace-wide stop is, from the app.
"running" | "stopping" | "paused"- StopConsequences
- What can and can't be undone after a stop, in the app's words; replaces the kit's lines for that choice.
{ /** What the person can take back, e.g. "Resuming restarts the 4 runs that finished their step." */ canUndo?: string[] | undefined; /** What stays, e.g. "Emails already sent stay sent." */ cannotUndo?: string[] | undefined; }
Types from other items
The props above take these. Each is defined by another item; import it from the path shown.
- HeadingLevel from @/lib/candor/heading-level
- A heading's level in the page's outline: `1` is `<h1>`, `6` is `<h6>`. Every Candor item that draws a heading takes its `headingLevel` as this type; the level is where the heading sits in the outline, never how large it looks.
1 | 2 | 3 | 4 | 5 | 6