From 11ea36f18ebcaadf6ecf8ea6870ad8267e4e2f3b Mon Sep 17 00:00:00 2001
From: Jesus Armando Anaya <armando@robomous.ai>
Date: Tue, 18 Aug 2026 16:21:52 -0700
Subject: [PATCH] fix(schema): preview narrowing before publishing

---
 frontend/ui-core/src/patterns/ClassFields.tsx |  16 +
 frontend/ui-core/src/screens/SchemaEditor.tsx | 298 ++++++-----
 frontend/ui-core/src/screens/queries.ts       |  16 +
 .../ui-core/src/screens/schemaDraft.test.tsx  |  10 +
 frontend/ui-core/src/screens/screens.test.tsx | 503 ++++++++++++++++--
 5 files changed, 680 insertions(+), 163 deletions(-)

diff --git a/frontend/ui-core/src/patterns/ClassFields.tsx b/frontend/ui-core/src/patterns/ClassFields.tsx
index 793bcdfd..26bab9dc 100644
--- a/frontend/ui-core/src/patterns/ClassFields.tsx
+++ b/frontend/ui-core/src/patterns/ClassFields.tsx
@@ -80,6 +80,8 @@ export interface ClassFieldsProps {
   readonly swatch: string;
   /** The digit the annotator would bind, or `null` past the ninth class. */
   readonly hotkey: number | null;
+  /** Lock every field while the caller is persisting this exact value. */
+  readonly disabled?: boolean;
   readonly onChange: (next: LabelClassBody) => void;
 }
 
@@ -88,6 +90,7 @@ export function ClassFields({
   slot,
   swatch,
   hotkey,
+  disabled = false,
   onChange,
 }: ClassFieldsProps): JSX.Element {
   return (
@@ -98,6 +101,7 @@ export function ClassFields({
           <Input
             id={`class-name-${slot}`}
             data-testid={`class-name-${slot}`}
+            disabled={disabled}
             value={declared.name}
             onChange={(event) => onChange({ ...declared, name: event.target.value })}
           />
@@ -145,6 +149,7 @@ export function ClassFields({
                           type="checkbox"
                           className="accent-primary"
                           data-testid={`class-geometry-${slot}-${geometry}`}
+                          disabled={disabled}
                           checked={checked}
                           onChange={(event) => {
                             const next = event.target.checked
@@ -193,6 +198,7 @@ export function ClassFields({
             data-testid={`class-color-${slot}`}
             type="color"
             className="h-9 w-12 rounded-md border border-input bg-card p-1"
+            disabled={disabled}
             value={hexOf(swatch)}
             onChange={(event) => onChange({ ...declared, color: event.target.value })}
           />
@@ -203,6 +209,7 @@ export function ClassFields({
             variant="ghost"
             size="sm"
             data-testid={`clear-color-${slot}`}
+            disabled={disabled}
             onClick={() => onChange({ ...declared, color: null })}
           >
             Derive
@@ -225,6 +232,7 @@ export function ClassFields({
       <Attributes
         attributes={declared.attributes ?? []}
         classIndex={slot}
+        disabled={disabled}
         onChange={(attributes) => onChange({ ...declared, attributes })}
       />
     </div>
@@ -258,10 +266,12 @@ export function swatchOf(declared: LabelClassBody, index: number): string {
 function Attributes({
   attributes,
   classIndex,
+  disabled,
   onChange,
 }: {
   readonly attributes: readonly AttributeBody[];
   readonly classIndex: string;
+  readonly disabled: boolean;
   readonly onChange: (next: AttributeBody[]) => void;
 }): JSX.Element {
   return (
@@ -272,6 +282,7 @@ function Attributes({
           variant="ghost"
           size="sm"
           data-testid={`add-attribute-${classIndex}`}
+          disabled={disabled}
           onClick={() =>
             onChange([...attributes, { name: "", kind: "string", required: false, default: null }])
           }
@@ -294,6 +305,7 @@ function Attributes({
               <Input
                 id={`attr-name-${classIndex}-${index}`}
                 data-testid={`attr-name-${classIndex}-${index}`}
+                disabled={disabled}
                 value={attribute.name}
                 onChange={(event) =>
                   onChange(replace(attributes, index, { ...attribute, name: event.target.value }))
@@ -305,6 +317,7 @@ function Attributes({
                 Kind
               </Label>
               <Select
+                disabled={disabled}
                 value={attribute.kind}
                 onValueChange={(kind) =>
                   // The default is dropped on a kind change rather than coerced: a
@@ -345,6 +358,7 @@ function Attributes({
               <Input
                 id={`attr-options-${classIndex}-${index}`}
                 data-testid={`attr-options-${classIndex}-${index}`}
+                disabled={disabled}
                 value={
                   attribute.kind === "select"
                     ? (attribute.options ?? []).join(", ")
@@ -372,6 +386,7 @@ function Attributes({
                   type="checkbox"
                   className="accent-primary"
                   data-testid={`attr-required-${classIndex}-${index}`}
+                  disabled={disabled}
                   checked={attribute.required ?? false}
                   onChange={(event) =>
                     onChange(
@@ -386,6 +401,7 @@ function Attributes({
                 size="icon"
                 aria-label={`Remove attribute ${index + 1}`}
                 data-testid={`remove-attribute-${classIndex}-${index}`}
+                disabled={disabled}
                 onClick={() => onChange(attributes.filter((_, i) => i !== index))}
               >
                 <Trash2 className="size-4" aria-hidden="true" />
diff --git a/frontend/ui-core/src/screens/SchemaEditor.tsx b/frontend/ui-core/src/screens/SchemaEditor.tsx
index 86dfa81f..7580b3c6 100644
--- a/frontend/ui-core/src/screens/SchemaEditor.tsx
+++ b/frontend/ui-core/src/screens/SchemaEditor.tsx
@@ -122,25 +122,34 @@ import {
   SelectValue,
 } from "../primitives/Select";
 import type {
+  ClassCount,
   DraftLabelClassBody,
   LabelClassBody,
+  SchemaChangePreview,
   SchemaDiff,
   ServerSchemaDraft,
   SchemaVersion,
 } from "./queries";
 import {
   usePublishSchemaDraft,
+  usePreviewSchemaChange,
   useProjectStats,
   useSchemaComparison,
   useSchemaVersions,
 } from "./queries";
 
-/** The two 409s. Only the first has an override, and that is the whole rule. */
-const DESTRUCTIVE = "DESTRUCTIVE_SCHEMA_CHANGE";
+/** The terminal 409: annotations already use a class this change removes. */
 const WOULD_ORPHAN = "SCHEMA_CHANGE_WOULD_ORPHAN";
 /** The third, and the only one whose remedy is to throw your own copy away. */
 const STALE_DRAFT = "STALE_WRITE";
 
+type SchemaChangeFlow =
+  | { readonly kind: "idle" }
+  | { readonly kind: "checking-removal" }
+  | { readonly kind: "blockers"; readonly blockers: readonly ClassCount[] }
+  | { readonly kind: "destructive"; readonly preview: SchemaChangePreview }
+  | { readonly kind: "preview-error"; readonly error: unknown };
+
 /**
  * A draft of the next version, and the version it was drafted from.
  *
@@ -291,13 +300,14 @@ export function SchemaEditor({
   onFlushDraft,
   onReloadDraft,
 }: SchemaEditorProps): JSX.Element {
-  const [confirming, setConfirming] = useState(false);
+  const [flow, setFlow] = useState<SchemaChangeFlow>({ kind: "idle" });
   const [selected, setSelected] = useState(0);
   const [filter, setFilter] = useState("");
-  const [removing, setRemoving] = useState<number | null>(null);
   // True only across the `await onFlushDraft()` inside `save`, so a second
   // click cannot start a second flush racing the first one's publish.
   const [flushing, setFlushing] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const saveInFlight = useRef(false);
   // Which version the tab is showing. `null` is the active one — the editor —
   // and a number is a past version, read-only.
   //
@@ -308,6 +318,7 @@ export function SchemaEditor({
   // internals.
   const [viewing, setViewing] = useState<number | null>(null);
   const publish = usePublishSchemaDraft(projectId, "curated");
+  const preview = usePreviewSchemaChange(projectId);
   const history = useSchemaVersions(projectId);
   // Per-class annotation counts, for the list's secondary line and for the blast
   // radius a delete has to state. Shared query key with the Overview, so opening
@@ -371,6 +382,8 @@ export function SchemaEditor({
   const classes = showing.classes;
   const note = showing.note;
   const failure = publish.isError ? asApiError(publish.error) : null;
+  const publishBlockers = failure?.code === WOULD_ORPHAN ? orphanBlockers(failure.detail) : null;
+  const shownBlockers = flow.kind === "blockers" ? flow.blockers : publishBlockers;
   const draftFailure = draftSaveError == null ? null : asApiError(draftSaveError);
   /**
    * `STALE_WRITE`, whichever of the two calls surfaced it.
@@ -392,6 +405,7 @@ export function SchemaEditor({
         ? publish.error
         : null;
   const staleDraft = staleDraftError !== null;
+  const draftLocked = saving || preview.isPending || publish.isPending || flushing;
   /**
    * Whether saving would change anything — measured against **the version in
    * force**, not against the snapshot the draft was seeded from.
@@ -423,6 +437,7 @@ export function SchemaEditor({
 
   /** Every edit writes the whole draft, so `seed` and `basedOn` travel with it. */
   function edit(next: readonly LabelClassBody[]): void {
+    if (saveInFlight.current || preview.isPending) return;
     onDraftChange({ ...showing, classes: next });
   }
 
@@ -453,7 +468,18 @@ export function SchemaEditor({
   const countOf = (name: string): number =>
     counts.find((entry) => entry.label_class === name)?.annotations ?? 0;
 
+  function closeBlockers(): void {
+    setFlow({ kind: "idle" });
+    if (failure?.code === WOULD_ORPHAN) publish.reset();
+  }
+
+  function finishSave(): void {
+    saveInFlight.current = false;
+    setSaving(false);
+  }
+
   async function save(allowDestructive = false): Promise<void> {
+    if (saveInFlight.current || preview.isPending) return;
     if (!dirty) {
       // `DESIGN.md`: a button either answers or explains, never sits grey with
       // nothing to say. Nothing is sent — an identical version would be a new
@@ -472,6 +498,8 @@ export function SchemaEditor({
       toast("Every class needs a name");
       return;
     }
+    saveInFlight.current = true;
+    setSaving(true);
     // Publishing is now publishing the *draft*, and the draft on the server has
     // to be the one actually being shown here first. A held draft may still have
     // a debounced write pending, so it is flushed and its revision is what gets
@@ -484,6 +512,24 @@ export function SchemaEditor({
       // The flush failed — `STALE_WRITE` or otherwise — and is already recorded
       // on `draftSaveError` for the announcement below to render. Publishing
       // against no revision would only be a second, less legible failure.
+      finishSave();
+      return;
+    }
+    try {
+      const previewed = await preview.mutateAsync({ classes });
+      if (previewed.is_refused) {
+        setFlow({ kind: "blockers", blockers: previewed.blockers });
+        finishSave();
+        return;
+      }
+      if (previewed.diff.is_destructive && !allowDestructive) {
+        setFlow({ kind: "destructive", preview: previewed });
+        finishSave();
+        return;
+      }
+    } catch (error: unknown) {
+      setFlow({ kind: "preview-error", error });
+      finishSave();
       return;
     }
     publish.mutate(
@@ -492,9 +538,12 @@ export function SchemaEditor({
         ...(allowDestructive ? { allowDestructive: true } : {}),
       },
       {
+        onError: () => {
+          setFlow({ kind: "idle" });
+        },
         onSuccess: (publication) => {
           const created = publication.published;
-          setConfirming(false);
+          setFlow({ kind: "idle" });
           // What the publish did to the rest of the project, said once. An
           // additive version moves every open batch onto it (#381), and a screen
           // that answered only "saved" would leave somebody to discover that from
@@ -526,11 +575,13 @@ export function SchemaEditor({
             revision: null,
           });
         },
+        onSettled: finishSave,
       },
     );
   }
 
   function addClass(): void {
+    if (saveInFlight.current || preview.isPending) return;
     edit([...classes, { name: "", geometries: ["bbox"], color: null, attributes: [] }]);
     // Selected, and the filter cleared — a new class has an empty name, so any
     // filter at all would hide the row that was just created.
@@ -545,7 +596,23 @@ export function SchemaEditor({
     setSelected((chosen) =>
       Math.max(0, chosen > index ? chosen - 1 : Math.min(chosen, classes.length - 2)),
     );
-    setRemoving(null);
+  }
+
+  async function requestRemoveClass(index: number): Promise<void> {
+    if (saveInFlight.current || preview.isPending) return;
+    setFlow({ kind: "checking-removal" });
+    const candidate = classes.filter((_, position) => position !== index);
+    try {
+      const previewed = await preview.mutateAsync({ classes: candidate });
+      if (previewed.is_refused) {
+        setFlow({ kind: "blockers", blockers: previewed.blockers });
+        return;
+      }
+      setFlow({ kind: "idle" });
+      removeClass(index);
+    } catch (error: unknown) {
+      setFlow({ kind: "preview-error", error });
+    }
   }
 
   /** Arrow keys walk the list; Enter and Space are the button's own. */
@@ -594,10 +661,19 @@ export function SchemaEditor({
             placeholder="Why this version? (optional)"
             data-testid="version-note"
             className="w-56"
+            disabled={draftLocked}
             value={note}
-            onChange={(event) => onDraftChange({ ...showing, note: event.target.value })}
+            onChange={(event) => {
+              if (saveInFlight.current || preview.isPending) return;
+              onDraftChange({ ...showing, note: event.target.value });
+            }}
           />
-          <Button variant="secondary" data-testid="add-class" onClick={addClass}>
+          <Button
+            variant="secondary"
+            data-testid="add-class"
+            disabled={draftLocked}
+            onClick={addClass}
+          >
             <Plus className="size-4" aria-hidden="true" />
             Add class
           </Button>
@@ -605,18 +681,27 @@ export function SchemaEditor({
             variant="primary"
             data-testid="save-schema"
             // Never disabled for "nothing to save" — `save` answers that with a
-            // toast. Still disabled while the flush or the publish is in flight,
-            // which is a state the label itself explains — and which is what
-            // keeps a second click from racing the first one's own flush.
-            disabled={publish.isPending || flushing}
+            // toast. It is also disabled while a removal preview, flush, or
+            // publish is in flight, so none can race a draft-changing action.
+            disabled={draftLocked}
             onClick={() => void save()}
           >
-            {publish.isPending || flushing ? "Saving…" : "Save version"}
+            {saving || publish.isPending || flushing ? "Saving…" : "Save version"}
           </Button>
         </div>
         )}
       </div>
 
+      {flow.kind === "preview-error" && (
+        <Alert
+          variant="destructive"
+          title="Could not preview this change"
+          data-testid="schema-preview-error"
+        >
+          {refusalProse(flow.error)}
+        </Alert>
+      )}
+
       {/* One line of prose beside the ambient status line, in the same register
           as it: a version arriving underneath is news, not a failure and not a
           question, so it is neither an `Alert` nor a dialog. The reload is the
@@ -658,7 +743,11 @@ export function SchemaEditor({
             size="sm"
             className="h-auto p-0 align-baseline text-meta"
             data-testid="schema-reload"
-            onClick={() => onDraftChange(freshFromActive(showing.revision))}
+            disabled={draftLocked}
+            onClick={() => {
+              if (saveInFlight.current || preview.isPending) return;
+              onDraftChange(freshFromActive(showing.revision));
+            }}
           >
             {held !== null ? <>Discard mine and load v{moved}</> : <>Load v{moved}</>}
           </Button>
@@ -675,7 +764,7 @@ export function SchemaEditor({
           Reached from either mutation — `staleDraftError` is whichever one
           actually carries the code — so `publish.reset()` runs alongside
           `onReloadDraft()` the same way `DestructiveDialog`'s Cancel and
-          `OrphanDialog`'s Close already reset it: without this, a `STALE_WRITE`
+          the blocker dialog's Close already reset it: without this, a `STALE_WRITE`
           that reached this banner via a *publish* would leave `publish.isError`
           true after the reload, and the banner would still be here to greet the
           freshly reloaded draft. */}
@@ -687,7 +776,9 @@ export function SchemaEditor({
             size="sm"
             className="h-auto p-0 align-baseline text-meta"
             data-testid="schema-reload-draft"
+            disabled={draftLocked}
             onClick={() => {
+              if (saveInFlight.current || preview.isPending) return;
               publish.reset();
               onReloadDraft();
             }}
@@ -716,11 +807,10 @@ export function SchemaEditor({
       />
 
       {failure !== null &&
-        failure.code !== DESTRUCTIVE &&
-        failure.code !== WOULD_ORPHAN &&
-        failure.code !== STALE_DRAFT && (
+        failure.code !== STALE_DRAFT &&
+        (failure.code !== WOULD_ORPHAN || shownBlockers === null) && (
           <Alert variant="destructive" title={failure.code} data-testid="schema-error">
-            {failure.message}
+            {refusalProse(publish.error)}
           </Alert>
         )}
 
@@ -803,37 +893,26 @@ export function SchemaEditor({
               index={selected}
               annotations={countOf(current.name)}
               onChange={(next) => edit(classes.map((c, i) => (i === selected ? next : c)))}
-              onRemove={() => setRemoving(selected)}
+              locked={draftLocked}
+              checking={flow.kind === "checking-removal"}
+              onRemove={() => void requestRemoveClass(selected)}
             />
           )}
         </div>
       )}
 
-      <RemoveClassDialog
-        declared={removing === null ? undefined : classes[removing]}
-        annotations={removing === null ? 0 : countOf(classes[removing]?.name ?? "")}
-        onCancel={() => setRemoving(null)}
-        onConfirm={() => removing !== null && removeClass(removing)}
-      />
+      <OrphanBlockersDialog blockers={shownBlockers} onClose={closeBlockers} />
 
       <DestructiveDialog
-        open={failure?.code === DESTRUCTIVE || confirming}
-        message={failure?.message ?? ""}
-        pending={publish.isPending}
+        preview={shownBlockers === null && flow.kind === "destructive" ? flow.preview : null}
+        pending={saving || preview.isPending || publish.isPending || flushing}
         onCancel={() => {
-          setConfirming(false);
-          publish.reset();
+          setFlow({ kind: "idle" });
         }}
         onConfirm={() => {
-          setConfirming(true);
           void save(true);
         }}
       />
-      <OrphanDialog
-        open={failure?.code === WOULD_ORPHAN}
-        message={failure?.message ?? ""}
-        onClose={() => publish.reset()}
-      />
     </section>
   );
 }
@@ -1051,12 +1130,16 @@ function ClassDetail({
   declared,
   index,
   annotations,
+  locked,
+  checking,
   onChange,
   onRemove,
 }: {
   readonly declared: LabelClassBody;
   readonly index: number;
   readonly annotations: number;
+  readonly locked: boolean;
+  readonly checking: boolean;
   readonly onChange: (next: LabelClassBody) => void;
   readonly onRemove: () => void;
 }): JSX.Element {
@@ -1088,12 +1171,13 @@ function ClassDetail({
           </span>
           <Button
             variant="ghost"
-            size="icon"
-            aria-label={`Remove class ${index + 1}`}
+            size={checking ? "sm" : "icon"}
+            aria-label={checking ? "Checking class removal" : `Remove class ${index + 1}`}
             data-testid={`remove-class-${index}`}
+            disabled={locked}
             onClick={onRemove}
           >
-            <Trash2 className="size-4" aria-hidden="true" />
+            {checking ? "Checking…" : <Trash2 className="size-4" aria-hidden="true" />}
           </Button>
         </div>
       </CardHeader>
@@ -1103,6 +1187,7 @@ function ClassDetail({
           slot={String(index)}
           swatch={swatch}
           hotkey={index < 9 ? index + 1 : null}
+          disabled={locked}
           onChange={onChange}
         />
       </CardContent>
@@ -1110,47 +1195,30 @@ function ClassDetail({
   );
 }
 
-/**
- * Removing a class, with what it costs stated rather than gestured at.
- *
- * A class carrying annotations cannot be removed at all — the kernel answers
- * `SCHEMA_CHANGE_WOULD_ORPHAN` on save, and that refusal has **no override**. So
- * this dialog is not asking permission for something that will then work: it is
- * saying, before a version is composed that cannot be published, that this is
- * where it will fail.
- *
- * A class nobody has used yet removes cleanly, and the dialog says that instead.
- * Same control, two honest sentences, and the count is what tells them apart.
- */
-function RemoveClassDialog({
-  declared,
-  annotations,
-  onCancel,
-  onConfirm,
+function OrphanBlockersDialog({
+  blockers,
+  onClose,
 }: {
-  readonly declared: LabelClassBody | undefined;
-  readonly annotations: number;
-  readonly onCancel: () => void;
-  readonly onConfirm: () => void;
-}): JSX.Element | null {
-  if (declared === undefined) return null;
-  const named = declared.name === "" ? "this class" : `“${declared.name}”`;
-
+  readonly blockers: readonly ClassCount[] | null;
+  readonly onClose: () => void;
+}): JSX.Element {
   return (
-    <Dialog open onOpenChange={(next) => !next && onCancel()}>
-      <DialogContent data-testid="remove-class-dialog">
-        <DialogTitle>Remove {declared.name === "" ? "class" : declared.name}?</DialogTitle>
-        <DialogDescription data-testid="remove-class-blast-radius">
-          {annotations === 0
-            ? `Nothing has been labeled ${named} yet, so removing it from the draft costs nothing. Saving publishes the next version without it.`
-            : `${formatCount(annotations)} ${annotations === 1 ? "annotation" : "annotations"} already use ${named}. Saving a version without it is refused outright — SCHEMA_CHANGE_WOULD_ORPHAN has no override — so this removal cannot be published until those annotations are gone.`}
+    <Dialog open={blockers !== null} onOpenChange={(next) => !next && onClose()}>
+      <DialogContent data-testid="orphan-dialog">
+        <DialogTitle>Annotations already use these classes</DialogTitle>
+        {blockers?.map((blocker) => (
+          <DialogDescription key={blocker.label_class}>
+            {blocker.label_class}: {formatCount(blocker.annotations)}{" "}
+            {blocker.annotations === 1 ? "annotation" : "annotations"} across{" "}
+            {formatCount(blocker.assets)} {blocker.assets === 1 ? "asset" : "assets"}.
+          </DialogDescription>
+        ))}
+        <DialogDescription>
+          There is no override for this one. Keep the class or remove the annotations first.
         </DialogDescription>
         <DialogFooter>
-          <Button variant="secondary" onClick={onCancel}>
-            Cancel
-          </Button>
-          <Button variant="destructive" data-testid="remove-class-confirm" onClick={onConfirm}>
-            Remove from draft
+          <Button variant="secondary" data-testid="orphan-close" onClick={onClose}>
+            Close
           </Button>
         </DialogFooter>
       </DialogContent>
@@ -1158,25 +1226,50 @@ function RemoveClassDialog({
   );
 }
 
-/** Retryable: the change narrows the contract and the caller may say so. */
+function isClassCount(value: unknown): value is ClassCount {
+  if (typeof value !== "object" || value === null) return false;
+  const candidate = value as Record<string, unknown>;
+  return (
+    typeof candidate["label_class"] === "string" &&
+    typeof candidate["annotations"] === "number" &&
+    typeof candidate["assets"] === "number"
+  );
+}
+
+function orphanBlockers(detail: Record<string, unknown> | null): readonly ClassCount[] | null {
+  const blockers = detail?.["blockers"];
+  if (!Array.isArray(blockers) || !blockers.every(isClassCount)) return null;
+  return blockers;
+}
+
+function describeDestructiveClasses(classes: readonly string[]): string {
+  const named = classes.map((labelClass) => `“${labelClass}”`);
+  if (named.length === 0) return "the affected classes";
+  if (named.length === 1) return named[0];
+  if (named.length === 2) return `${named[0]} and ${named[1]}`;
+  return `${named.slice(0, -1).join(", ")}, and ${named.at(-1) ?? "another class"}`;
+}
+
+/** Retryable: a publishable preview says the change narrows the contract. */
 function DestructiveDialog({
-  open,
-  message,
+  preview,
   pending,
   onCancel,
   onConfirm,
 }: {
-  readonly open: boolean;
-  readonly message: string;
+  readonly preview: SchemaChangePreview | null;
   readonly pending: boolean;
   readonly onCancel: () => void;
   readonly onConfirm: () => void;
 }): JSX.Element {
+  const destructiveClasses = preview?.diff.destructive_classes ?? [];
   return (
-    <Dialog open={open} onOpenChange={(next) => !next && onCancel()}>
+    <Dialog open={preview !== null} onOpenChange={(next) => !next && onCancel()}>
       <DialogContent data-testid="destructive-dialog">
         <DialogTitle>This narrows the schema</DialogTitle>
-        <DialogDescription>{message}</DialogDescription>
+        <DialogDescription>
+          This change narrows the schema for {describeDestructiveClasses(destructiveClasses)}.
+        </DialogDescription>
         <DialogDescription>
           Existing annotations are not touched. Saving anyway publishes the new version and leaves
           earlier ones exactly as they are — a version is immutable.
@@ -1198,40 +1291,3 @@ function DestructiveDialog({
     </Dialog>
   );
 }
-
-/**
- * Not retryable, and the missing button is the point.
- *
- * `SchemaChangeWouldOrphan` has **no override** and is deliberately not a subclass
- * of `DestructiveSchemaChange`, so a caller catching the base and retrying with the
- * flag would loop. A dialog offering "Save anyway" here would be that loop with a
- * person in it.
- */
-function OrphanDialog({
-  open,
-  message,
-  onClose,
-}: {
-  readonly open: boolean;
-  readonly message: string;
-  readonly onClose: () => void;
-}): JSX.Element {
-  return (
-    <Dialog open={open} onOpenChange={(next) => !next && onClose()}>
-      <DialogContent data-testid="orphan-dialog">
-        <DialogTitle>Annotations already use these classes</DialogTitle>
-        <DialogDescription>{message}</DialogDescription>
-        <DialogDescription>
-          There is no override for this one. Delete or relabel the annotations first, or keep the
-          class and change something else.
-        </DialogDescription>
-        <DialogFooter>
-          <Button variant="secondary" data-testid="orphan-close" onClick={onClose}>
-            Close
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
diff --git a/frontend/ui-core/src/screens/queries.ts b/frontend/ui-core/src/screens/queries.ts
index 18a3c3b7..7da64a1c 100644
--- a/frontend/ui-core/src/screens/queries.ts
+++ b/frontend/ui-core/src/screens/queries.ts
@@ -70,6 +70,7 @@ import {
   checkListSources,
   checkCreateCorrectionBatch,
   checkPreLabelBatch,
+  checkPreviewSchemaChange,
   checkPromoteBatch,
   checkPublishRelease,
   checkPublishSchemaDraft,
@@ -94,6 +95,7 @@ export type SchemaVersion = components["schemas"]["SchemaVersionOut"];
 export type SchemaVersionPage = components["schemas"]["SchemaVersionPage"];
 export type SchemaDiff = components["schemas"]["SchemaDiffOut"];
 export type SchemaChange = components["schemas"]["SchemaChangeOut"];
+export type SchemaChangePreview = components["schemas"]["SchemaChangePreviewOut"];
 export type SchemaProvenance = components["schemas"]["SchemaProvenance"];
 export type LabelClassBody = components["schemas"]["LabelClassBody"];
 export type AttributeBody = components["schemas"]["AttributeBody"];
@@ -358,6 +360,20 @@ export function useSchemaComparison(
   });
 }
 
+export function usePreviewSchemaChange(projectId: string) {
+  const client = useApiClient();
+  return useMutation({
+    mutationFn: async ({ classes }: { readonly classes: readonly LabelClassBody[] }) =>
+      unwrap(
+        await client.POST("/projects/{project_id}/schema/preview", {
+          params: { path: { project_id: projectId } },
+          body: { classes: [...classes] },
+        }),
+        checkPreviewSchemaChange,
+      ),
+  });
+}
+
 /**
  * Publish a new schema version.
  *
diff --git a/frontend/ui-core/src/screens/schemaDraft.test.tsx b/frontend/ui-core/src/screens/schemaDraft.test.tsx
index 0a4ee3d9..f32fd1df 100644
--- a/frontend/ui-core/src/screens/schemaDraft.test.tsx
+++ b/frontend/ui-core/src/screens/schemaDraft.test.tsx
@@ -135,6 +135,16 @@ beforeEach(() => {
       if (/\/releases$/.test(path)) return respond({ status: 200, body: { items: [], total: 0 } });
       if (/\/dataset$/.test(path)) return respond({ status: 200, body: DATASET });
     }
+    if (request.method === "POST" && /\/schema\/preview$/.test(path)) {
+      return respond({
+        status: 200,
+        body: {
+          diff: { changes: [], destructive_classes: [], is_destructive: false },
+          blockers: [],
+          is_refused: false,
+        },
+      });
+    }
     if (request.method === "PUT") {
       const draftProject = draftProjectId(path);
       if (draftProject !== null) {
diff --git a/frontend/ui-core/src/screens/screens.test.tsx b/frontend/ui-core/src/screens/screens.test.tsx
index 1b040c2b..9c627a9e 100644
--- a/frontend/ui-core/src/screens/screens.test.tsx
+++ b/frontend/ui-core/src/screens/screens.test.tsx
@@ -17,13 +17,18 @@ import { QueryClient } from "@tanstack/react-query";
 import { render, screen, waitFor, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import type { JSX, ReactNode } from "react";
+import { useState, type JSX, type ReactNode } from "react";
 
 import { ApiProvider } from "../data/ApiProvider";
 import { classColor, hexColor } from "../palette";
 import { writeToken } from "../data/session";
 import { ProjectScreen } from "./ProjectScreen";
 import { ProjectsScreen } from "./ProjectsScreen";
+import {
+  usePreviewSchemaChange,
+  type LabelClassBody,
+  type SchemaChangePreview,
+} from "./queries";
 import { batchActions } from "../testing/wire.fixtures.js";
 import type { components as capComponents } from "../generated/api.js";
 
@@ -34,7 +39,8 @@ const API = "http://visionset.test";
 const PROJECT = "11111111-1111-4111-8111-111111111111";
 
 /** One route table, matched in order. A miss is a loud 500 rather than a hang. */
-type Handler = (request: Request) => { status: number; body: unknown } | undefined;
+type HandlerAnswer = { status: number; body: unknown } | undefined;
+type Handler = (request: Request) => HandlerAnswer | Promise<HandlerAnswer>;
 
 let handlers: Handler[] = [];
 const sent: Request[] = [];
@@ -83,7 +89,7 @@ beforeEach(() => {
     sent.push(request);
     if (request.method !== "GET") bodies.set(request, await request.clone().text());
     for (const handler of handlers) {
-      const answer = handler(request);
+      const answer = await handler(request);
       if (answer !== undefined) {
         return Promise.resolve(
           new Response(answer.status === 204 ? null : JSON.stringify(answer.body), {
@@ -121,6 +127,15 @@ beforeEach(() => {
       curatedDrafts.set(draftProject, saved);
       return Promise.resolve(jsonResponse(200, saved));
     }
+    if (path.endsWith("/schema/preview") && request.method === "POST") {
+      return Promise.resolve(
+        jsonResponse(200, {
+          diff: { changes: [], destructive_classes: [], is_destructive: false },
+          blockers: [],
+          is_refused: false,
+        }),
+      );
+    }
     return Promise.resolve(
       new Response(JSON.stringify({ code: "NO_STUB", message: `${request.method} ${request.url}` }), {
         status: 500,
@@ -159,6 +174,35 @@ const CLASSES = [
   { name: "lane", geometries: ["polygon"], color: null, attributes: [] },
 ];
 
+function PreviewSchemaChangeProbe({
+  projectId,
+  classes,
+}: {
+  readonly projectId: string;
+  readonly classes: readonly LabelClassBody[];
+}): JSX.Element {
+  const preview = usePreviewSchemaChange(projectId);
+  const [result, setResult] = useState<SchemaChangePreview | null>(null);
+
+  return (
+    <div>
+      <button
+        data-testid="preview-schema-change"
+        onClick={() => {
+          void preview.mutateAsync({ classes }).then(setResult);
+        }}
+      >
+        preview
+      </button>
+      {result === null ? null : (
+        <p data-testid="preview-result">
+          {`${result.diff.destructive_classes.join(",")}:${result.blockers[0]?.annotations}:${result.blockers[0]?.assets}:${result.is_refused}`}
+        </p>
+      )}
+    </div>
+  );
+}
+
 describe("the project list", () => {
   it("lists projects and opens one through the callback, never a router", async () => {
     on("GET", /^\/projects$/, {
@@ -269,12 +313,6 @@ describe("the schema editor", () => {
     });
   }
 
-  /**
-   * Select a class and remove it from the draft, through the confirmation.
-   *
-   * Three steps rather than one: only the *selected* class has a
-   * detail panel, and removal states its blast radius before it happens.
-   */
   /** Open one class's detail panel. Only the selected class has one. */
   async function selectClass(index: number): Promise<void> {
     await userEvent.click(screen.getByTestId("class-list").querySelectorAll("button")[index]);
@@ -283,9 +321,47 @@ describe("the schema editor", () => {
   async function removeClass(index: number): Promise<void> {
     await selectClass(index);
     await userEvent.click(screen.getByTestId(`remove-class-${index}`));
-    await userEvent.click(await screen.findByTestId("remove-class-confirm"));
+    await waitFor(() =>
+      expect(screen.getByTestId("class-list").querySelectorAll("button")).toHaveLength(
+        CLASSES.length - 1,
+      ),
+    );
   }
 
+  it("previews a candidate without lane and reads its orphan blockers", async () => {
+    const candidate: readonly LabelClassBody[] = [
+      { name: "vehicle", geometries: ["bbox"], color: "#38bdf8", attributes: [] },
+    ];
+    on("POST", /\/schema\/preview$/, {
+      status: 200,
+      body: {
+        diff: { changes: [], destructive_classes: ["lane"], is_destructive: true },
+        blockers: [{ label_class: "lane", annotations: 12, assets: 3 }],
+        is_refused: true,
+      },
+    });
+
+    render(mount(<PreviewSchemaChangeProbe projectId={PROJECT} classes={candidate} />));
+    await userEvent.click(screen.getByTestId("preview-schema-change"));
+
+    await waitFor(() =>
+      expect(screen.getByTestId("preview-result").textContent).toBe("lane:12:3:true"),
+    );
+    const request = sent.find(
+      (sentRequest) =>
+        sentRequest.method === "POST" && new URL(sentRequest.url).pathname.endsWith("/schema/preview"),
+    );
+    if (request === undefined) throw new Error("Expected a schema preview request");
+    expect(JSON.parse(bodies.get(request) ?? "")).toEqual({ classes: candidate });
+    expect(
+      sent.some(
+        (sentRequest) =>
+          sentRequest.method === "POST" &&
+          new URL(sentRequest.url).pathname.endsWith("/schema/drafts/curated/publish"),
+      ),
+    ).toBe(false);
+  });
+
   it("treats a schema-less project as an empty draft, not as an error", async () => {
     on("GET", /^\/projects\/[^/]+$/, {
       status: 200,
@@ -337,19 +413,89 @@ describe("the schema editor", () => {
     expect(screen.getByTestId("schema-status").textContent).toContain("unsaved changes");
     await userEvent.click(screen.getByTestId("save-schema"));
 
-    await waitFor(() => expect(sent.some((r) => r.method === "POST")).toBe(true));
-    const request = sent.find((r) => r.method === "POST");
+    await waitFor(() =>
+      expect(
+        sent.some(
+          (request) =>
+            request.method === "POST" &&
+            new URL(request.url).pathname.endsWith("/schema/drafts/curated/publish"),
+        ),
+      ).toBe(true),
+    );
+    const request = sent.find(
+      (request) =>
+        request.method === "POST" &&
+        new URL(request.url).pathname.endsWith("/schema/drafts/curated/publish"),
+    );
+    expect(request).toBeDefined();
     // The plain save carries no gate — `allow_destructive` is only ever sent
     // after the API has said it is needed.
     expect(new URL(request?.url ?? "").searchParams.get("allow_destructive")).toBeNull();
   });
 
-  it("offers an override for a destructive change, and retries with the flag", async () => {
+  it("locks draft mutations until a deferred publish settles", async () => {
+    projectWithSchema();
+    let resolvePublish: ((answer: Exclude<HandlerAnswer, undefined>) => void) | undefined;
+    handlers.push((request) => {
+      if (
+        request.method !== "POST" ||
+        !new URL(request.url).pathname.endsWith("/schema/drafts/curated/publish")
+      ) {
+        return undefined;
+      }
+      return new Promise((resolve) => {
+        resolvePublish = resolve;
+      });
+    });
+
+    render(mount(<ProjectScreen projectId={PROJECT} tab="schema" />));
+    await screen.findByTestId("schema-editor");
+    await userEvent.click(screen.getByTestId("add-class"));
+    await userEvent.type(screen.getByTestId("class-name-2"), "pedestrian");
+    await userEvent.click(screen.getByTestId("save-schema"));
+    await waitFor(() => expect(resolvePublish).toBeDefined());
+
+    const className = screen.getByTestId("class-name-2");
+    expect(className).toHaveProperty("disabled", true);
+    expect(screen.getByTestId("version-note")).toHaveProperty("disabled", true);
+    expect(screen.getByTestId("add-class")).toHaveProperty("disabled", true);
+    expect(screen.getByTestId("remove-class-2")).toHaveProperty("disabled", true);
+    await userEvent.type(className, "-newer");
+    expect(className).toHaveProperty("value", "pedestrian");
+
+    if (resolvePublish === undefined) throw new Error("Expected the deferred publish request");
+    resolvePublish({
+      status: 201,
+      body: {
+        published: {
+          project_id: PROJECT,
+          version: 4,
+          classes: [...CLASSES, { name: "pedestrian", geometries: ["bbox"], color: null, attributes: [] }],
+        },
+        advanced_batches: [],
+      },
+    });
+    await waitFor(() => expect(screen.getByTestId("save-schema")).toHaveProperty("disabled", false));
+    expect(screen.getByTestId("class-name-2")).toHaveProperty("value", "pedestrian");
+  });
+
+  it("previews a publishable narrowing before one flagged publish", async () => {
     projectWithSchema();
-    let attempts = 0;
+    on("POST", /schema\/preview$/, {
+      status: 200,
+      body: {
+        diff: { changes: [], destructive_classes: ["lane"], is_destructive: true },
+        blockers: [],
+        is_refused: false,
+      },
+    });
     handlers.push((request) => {
-      if (request.method !== "POST") return undefined;
-      attempts += 1;
+      if (
+        request.method !== "POST" ||
+        !new URL(request.url).pathname.endsWith("/schema/drafts/curated/publish")
+      ) {
+        return undefined;
+      }
       const allowed = new URL(request.url).searchParams.get("allow_destructive") === "true";
       return allowed
         ? {
@@ -363,7 +509,7 @@ describe("the schema editor", () => {
             status: 409,
             body: {
               code: "DESTRUCTIVE_SCHEMA_CHANGE",
-              message: "Removing “lane” narrows the contract.",
+              message: "internal wording must not appear",
             },
           };
     });
@@ -374,24 +520,125 @@ describe("the schema editor", () => {
     await userEvent.click(screen.getByTestId("save-schema"));
 
     const dialog = await screen.findByTestId("destructive-dialog");
-    expect(dialog.textContent).toContain("narrows the contract");
-
-    await userEvent.click(screen.getByTestId("allow-destructive"));
-    await waitFor(() => expect(attempts).toBe(2));
+    expect(dialog.textContent).toContain("lane");
+    expect(dialog.textContent).not.toContain("internal wording must not appear");
     expect(
-      new URL(sent.filter((r) => r.method === "POST")[1].url).searchParams.get("allow_destructive"),
-    ).toBe("true");
+      sent.some(
+        (request) =>
+          request.method === "POST" &&
+          new URL(request.url).pathname.endsWith("/schema/drafts/curated/publish"),
+      ),
+    ).toBe(false);
+
+    const allow = screen.getByTestId("allow-destructive");
+    await waitFor(() => expect(allow).toHaveProperty("disabled", false));
+    await userEvent.click(allow);
+    await waitFor(() =>
+      expect(
+        sent.filter(
+          (request) =>
+            request.method === "POST" &&
+            new URL(request.url).pathname.endsWith("/schema/drafts/curated/publish"),
+        ),
+      ).toHaveLength(1),
+    );
+    const publishRequest = sent.find(
+      (request) =>
+        request.method === "POST" &&
+        new URL(request.url).pathname.endsWith("/schema/drafts/curated/publish"),
+    );
+    expect(new URL(publishRequest?.url ?? "").searchParams.get("allow_destructive")).toBe("true");
   });
 
-  it("offers no override for an orphaning change, because there is none", async () => {
+  it("prevents repeated confirmation while its second preview is pending", async () => {
     projectWithSchema();
-    on("POST", /schema\/drafts\/curated\/publish$/, {
-      status: 409,
+    let previews = 0;
+    let resolveSecondPreview: ((answer: Exclude<HandlerAnswer, undefined>) => void) | undefined;
+    handlers.push((request) => {
+      if (request.method !== "POST" || !new URL(request.url).pathname.endsWith("/schema/preview")) {
+        return undefined;
+      }
+      previews += 1;
+      if (previews === 3) {
+        return new Promise((resolve) => {
+          resolveSecondPreview = resolve;
+        });
+      }
+      return {
+        status: 200,
+        body: {
+          diff: { changes: [], destructive_classes: ["lane"], is_destructive: true },
+          blockers: [],
+          is_refused: false,
+        },
+      };
+    });
+    on("POST", /schema\/drafts\/curated\/publish(?:\?.*)?$/, {
+      status: 201,
       body: {
-        code: "SCHEMA_CHANGE_WOULD_ORPHAN",
-        message: "1,204 annotations use “lane”.",
+        published: { project_id: PROJECT, version: 4, classes: [] },
+        advanced_batches: [],
+      },
+    });
+
+    render(mount(<ProjectScreen projectId={PROJECT} tab="schema" />));
+    await screen.findByTestId("schema-editor");
+    await removeClass(1);
+    await userEvent.click(screen.getByTestId("save-schema"));
+    const allow = await screen.findByTestId("allow-destructive");
+    await waitFor(() => expect(allow).toHaveProperty("disabled", false));
+    await userEvent.click(allow);
+    await waitFor(() => expect(resolveSecondPreview).toBeDefined());
+
+    expect(allow).toHaveProperty("disabled", true);
+    await userEvent.click(allow);
+
+    if (resolveSecondPreview === undefined) throw new Error("Expected the deferred second preview");
+    resolveSecondPreview({
+      status: 200,
+      body: {
+        diff: { changes: [], destructive_classes: ["lane"], is_destructive: true },
+        blockers: [],
+        is_refused: false,
       },
     });
+    await waitFor(() =>
+      expect(
+        sent.filter(
+          (request) =>
+            request.method === "POST" &&
+            new URL(request.url).pathname.endsWith("/schema/drafts/curated/publish"),
+        ),
+      ).toHaveLength(1),
+    );
+  });
+
+  it("opens the terminal blocker dialog when the save-time preview refuses", async () => {
+    projectWithSchema();
+    let previews = 0;
+    handlers.push((request) => {
+      if (request.method !== "POST" || !new URL(request.url).pathname.endsWith("/schema/preview")) {
+        return undefined;
+      }
+      previews += 1;
+      return previews === 1
+        ? {
+            status: 200,
+            body: {
+              diff: { changes: [], destructive_classes: ["lane"], is_destructive: true },
+              blockers: [],
+              is_refused: false,
+            },
+          }
+        : {
+            status: 200,
+            body: {
+              diff: { changes: [], destructive_classes: ["lane"], is_destructive: true },
+              blockers: [{ label_class: "lane", annotations: 12, assets: 3 }],
+              is_refused: true,
+            },
+          };
+    });
 
     render(mount(<ProjectScreen projectId={PROJECT} tab="schema" />));
     await screen.findByTestId("schema-editor");
@@ -399,15 +646,106 @@ describe("the schema editor", () => {
     await userEvent.click(screen.getByTestId("save-schema"));
 
     const dialog = await screen.findByTestId("orphan-dialog");
-    expect(dialog.textContent).toContain("1,204 annotations");
+    expect(dialog.textContent).toContain("12 annotations");
+    expect(dialog.textContent).toContain("3 assets");
     // The missing button *is* the assertion. `SchemaChangeWouldOrphan` has no
     // override and is deliberately not a subclass of `DestructiveSchemaChange`, so
     // a "Save anyway" here would be an infinite loop with a person in it.
     expect(screen.queryByTestId("allow-destructive")).toBeNull();
     expect(screen.queryByTestId("destructive-dialog")).toBeNull();
     expect(within(dialog).getByTestId("orphan-close")).not.toBeNull();
+    expect(
+      sent.some(
+        (request) =>
+          request.method === "POST" &&
+          new URL(request.url).pathname.endsWith("/schema/drafts/curated/publish"),
+      ),
+    ).toBe(false);
+  });
+
+  it("uses typed publish-time orphan blockers when the preview becomes stale", async () => {
+    projectWithSchema();
+    on("POST", /schema\/preview$/, {
+      status: 200,
+      body: {
+        diff: { changes: [], destructive_classes: ["lane"], is_destructive: true },
+        blockers: [],
+        is_refused: false,
+      },
+    });
+    on("POST", /schema\/drafts\/curated\/publish(?:\?.*)?$/, {
+      status: 409,
+      body: {
+        code: "SCHEMA_CHANGE_WOULD_ORPHAN",
+        message: "internal wording must not appear",
+        detail: { blockers: [{ label_class: "lane", annotations: 12, assets: 3 }] },
+      },
+    });
+
+    render(mount(<ProjectScreen projectId={PROJECT} tab="schema" />));
+    await screen.findByTestId("schema-editor");
+    await removeClass(1);
+    await userEvent.click(screen.getByTestId("save-schema"));
+    const allow = await screen.findByTestId("allow-destructive");
+    await waitFor(() => expect(allow).toHaveProperty("disabled", false));
+    await userEvent.click(allow);
+    await waitFor(() =>
+      expect(
+        sent.filter(
+          (request) =>
+            request.method === "POST" &&
+            new URL(request.url).pathname.endsWith("/schema/drafts/curated/publish"),
+        ),
+      ).toHaveLength(1),
+    );
+
+    const dialog = await screen.findByTestId("orphan-dialog");
+    expect(dialog.textContent).toContain("lane: 12 annotations across 3 assets");
+    expect(dialog.textContent).not.toContain("internal wording must not appear");
+    expect(screen.queryByTestId("allow-destructive")).toBeNull();
+    expect(screen.queryByTestId("destructive-dialog")).toBeNull();
   });
 
+  it.each([
+    { shape: "absent", detail: undefined },
+    { shape: "malformed", detail: { blockers: [{ label_class: "lane" }] } },
+  ])(
+    "clears destructive confirmation and renders prose for an orphan refusal with $shape detail",
+    async ({ detail }) => {
+      projectWithSchema();
+      on("POST", /schema\/preview$/, {
+        status: 200,
+        body: {
+          diff: { changes: [], destructive_classes: ["lane"], is_destructive: true },
+          blockers: [],
+          is_refused: false,
+        },
+      });
+      on("POST", /schema\/drafts\/curated\/publish(?:\?.*)?$/, {
+        status: 409,
+        body: {
+          code: "SCHEMA_CHANGE_WOULD_ORPHAN",
+          message: "internal wording must not appear",
+          detail,
+        },
+      });
+
+      render(mount(<ProjectScreen projectId={PROJECT} tab="schema" />));
+      await screen.findByTestId("schema-editor");
+      await removeClass(1);
+      await userEvent.click(screen.getByTestId("save-schema"));
+      await userEvent.click(await screen.findByTestId("allow-destructive"));
+
+      const error = await screen.findByTestId("schema-error");
+      expect(error.textContent).toContain(
+        "Annotations already exist under a class this change removes.",
+      );
+      expect(error.textContent).not.toContain("internal wording must not appear");
+      expect(screen.queryByTestId("allow-destructive")).toBeNull();
+      expect(screen.queryByTestId("destructive-dialog")).toBeNull();
+    },
+  );
+
   it("offers only the geometries an annotation can carry", async () => {
     projectWithSchema();
     render(mount(<ProjectScreen projectId={PROJECT} tab="schema" />));
@@ -1063,30 +1401,109 @@ describe("the schema editor's two panels", () => {
     expect(screen.getByTestId("class-list").querySelectorAll("button")).toHaveLength(51);
   });
 
-  it("states the blast radius when the class being removed carries annotations", async () => {
-    withClasses(MANY);
+  it("keeps an orphaning removal terminal and leaves the draft unchanged", async () => {
+    withClasses(CLASSES);
+    on("POST", /\/schema\/preview$/, {
+      status: 200,
+      body: {
+        diff: { changes: [], destructive_classes: ["lane"], is_destructive: true },
+        blockers: [{ label_class: "lane", annotations: 12, assets: 3 }],
+        is_refused: true,
+      },
+    });
     render(mount(<ProjectScreen projectId={PROJECT} tab="schema" />));
     await screen.findByTestId("class-list");
 
-    await userEvent.click(screen.getByTestId("remove-class-0"));
+    await userEvent.click(screen.getByTestId("class-list").querySelectorAll("button")[1]);
+    await userEvent.click(screen.getByTestId("remove-class-1"));
 
-    const said = (await screen.findByTestId("remove-class-blast-radius")).textContent ?? "";
-    expect(said).toContain((4372).toLocaleString(undefined));
-    // And that this removal cannot be published at all, which is the fact that
-    // matters: the orphan refusal has no override.
-    expect(said).toContain("no override");
+    expect((await screen.findByTestId("orphan-dialog")).textContent).toContain("12 annotations");
+    expect(screen.getByTestId("orphan-dialog").textContent).toContain("3 assets");
+    expect(screen.queryByTestId("remove-class-confirm")).toBeNull();
+    expect(screen.queryByTestId("allow-destructive")).toBeNull();
+    expect(screen.getByTestId("class-name-1")).toHaveProperty("value", "lane");
   });
 
-  it("says a removal costs nothing when nobody has used the class", async () => {
-    withClasses(MANY);
+  it("removes a clear candidate from the local draft without publishing", async () => {
+    withClasses(CLASSES);
+    on("POST", /\/schema\/preview$/, {
+      status: 200,
+      body: {
+        diff: { changes: [], destructive_classes: ["lane"], is_destructive: true },
+        blockers: [],
+        is_refused: false,
+      },
+    });
+    render(mount(<ProjectScreen projectId={PROJECT} tab="schema" />));
+    await screen.findByTestId("class-list");
+
+    await userEvent.click(screen.getByTestId("class-list").querySelectorAll("button")[1]);
+    await userEvent.click(screen.getByTestId("remove-class-1"));
+
+    await waitFor(() =>
+      expect(screen.getByTestId("class-list").querySelectorAll("button")).toHaveLength(1),
+    );
+    expect(screen.queryByTestId("orphan-dialog")).toBeNull();
+    expect(sent.some((request) => new URL(request.url).pathname.endsWith("/publish"))).toBe(false);
+  });
+
+  it("shows shared preview failure prose and leaves the draft unchanged", async () => {
+    withClasses(CLASSES);
+    on("POST", /\/schema\/preview$/, {
+      status: 503,
+      body: { code: "NETWORK_ERROR", message: "unreachable" },
+    });
     render(mount(<ProjectScreen projectId={PROJECT} tab="schema" />));
     await screen.findByTestId("class-list");
 
     await userEvent.click(screen.getByTestId("class-list").querySelectorAll("button")[1]);
     await userEvent.click(screen.getByTestId("remove-class-1"));
 
-    const said = (await screen.findByTestId("remove-class-blast-radius")).textContent ?? "";
-    expect(said).toContain("costs nothing");
+    const error = await screen.findByTestId("schema-preview-error");
+    expect(error.textContent).toContain("The server could not be reached");
+    expect(error.textContent).not.toContain("unreachable");
+    expect(screen.getByTestId("class-name-1")).toHaveProperty("value", "lane");
+    expect(screen.queryByTestId("orphan-dialog")).toBeNull();
+  });
+
+  it("does not apply field edits while a removal preview is pending", async () => {
+    withClasses(CLASSES);
+    let resolvePreview: ((answer: Exclude<HandlerAnswer, undefined>) => void) | undefined;
+    handlers.push((request) => {
+      if (
+        request.method !== "POST" ||
+        !new URL(request.url).pathname.endsWith("/schema/preview")
+      ) {
+        return undefined;
+      }
+      return new Promise((resolve) => {
+        resolvePreview = resolve;
+      });
+    });
+    render(mount(<ProjectScreen projectId={PROJECT} tab="schema" />));
+    await screen.findByTestId("class-list");
+
+    await userEvent.click(screen.getByTestId("remove-class-0"));
+    await waitFor(() => expect(screen.getByTestId("remove-class-0")).toHaveProperty("disabled", true));
+    expect(screen.getByTestId("remove-class-0").textContent).toContain("Checking…");
+
+    await userEvent.type(screen.getByTestId("class-name-0"), "-edited");
+    expect(screen.getByTestId("class-name-0")).toHaveProperty("value", "vehicle");
+
+    if (resolvePreview === undefined) throw new Error("Expected the deferred preview request");
+    resolvePreview({
+      status: 200,
+      body: {
+        diff: { changes: [], destructive_classes: ["vehicle"], is_destructive: true },
+        blockers: [],
+        is_refused: false,
+      },
+    });
+
+    await waitFor(() =>
+      expect(screen.getByTestId("class-list").querySelectorAll("button")).toHaveLength(1),
+    );
+    expect(screen.getByTestId("class-name-0")).toHaveProperty("value", "lane");
   });
 
   it("shows each class's annotation count in its panel header", async () => {
@@ -1111,7 +1528,9 @@ describe("the schema editor's two panels", () => {
 
     await userEvent.click(screen.getByTestId("class-list").querySelectorAll("button")[2]);
     await userEvent.click(screen.getByTestId("remove-class-2"));
-    await userEvent.click(await screen.findByTestId("remove-class-confirm"));
+    await waitFor(() =>
+      expect(screen.getByTestId("class-list").querySelectorAll("button")).toHaveLength(2),
+    );
 
     expect(screen.getByTestId("class-list").querySelectorAll("button")).toHaveLength(2);
     expect(screen.queryByTestId("class-name-1")).not.toBeNull();