Draft Mode

Usage

"use client";

import { DraftMode } from "@/components/ui/draft-mode";

<DraftMode
  enabled={draftMode}
  onEnabledChange={setDraftMode}
  items={held}
  onSend={send}
  onDiscard={discard}
  onEdit={open}
/>

Why it exists

An approval dialog interrupts once per action, which teaches people to click through it. Draft mode is the opposite: the agent works freely, its output collects in one place, and the person reviews a batch when they choose to. Same protection, far less interruption.

Features

• Nothing sends itself. Items are chosen with checkboxes, and the button names the count: "Send 3".
• Irreversible work is marked on the item, and counted in the sentence under the button as the selection changes.
• "Select all" is a visible step, never a hidden accept-all.
• Off is explained, not silent. With draft mode off, a still, orange-marked strip says what happens instead and offers to turn it back on.
• Stale selections can't fire. An item that leaves the list is dropped from the selection, so a batch action can't send something that has already gone.
• Holds completely still. Everything here is your turn.

Variants

Waiting for review

Nothing waiting

Draft mode off

Props

Accessibility

• A labelled <section>; the mode control is a real role="switch" with its state in words as well as position.
• Each item is a checkbox with a full label, so the whole row is a hit target.
• Sends and discards are announced through a polite live region, with the count.
• "Can't be undone" is text, not only a colour.

When not to use

• One high-risk action awaiting a decision is AI Approval Gate, which states the consequence and takes the decision on its own.
• Many AI-proposed edits to review row by row is AI Triage Table.
• Choosing how much the agent may do without asking is Autonomy Control. Draft mode is about what leaves, not about what the agent may attempt.