diff --git a/src/components/agents/config/__tests__/RawOverlayDialog.spec.ts b/src/components/agents/config/__tests__/RawOverlayDialog.spec.ts
new file mode 100644
index 00000000..3628022b
--- /dev/null
+++ b/src/components/agents/config/__tests__/RawOverlayDialog.spec.ts
@@ -0,0 +1,164 @@
+// R70: the raw overlay YAML dialog feeds the shared draft; forbidden keys (R71) are
+// highlighted and block Apply; Clear overlay needs agent:configure.
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { flushPromises, mount } from '@vue/test-utils';
+import { resetAgentDrafts } from '@/composables/agent-config/draftRegistry';
+import type { ConfigWorkspace } from '@/composables/agent-config/useConfigWorkspace';
+import {
+  ADMIN,
+  READER,
+  fakeApi,
+  globalWith,
+  piniaWith,
+  workspaceHost,
+} from './helpers';
+
+vi.mock('@/components/code-editor', () => import('./codeEditorMock'));
+
+const confirmRequire = vi.fn();
+vi.mock('primevue/useconfirm', () => ({
+  useConfirm: () => ({ require: confirmRequire }),
+}));
+
+import PrimeDialog from 'primevue/dialog';
+import RawOverlayDialog from '../workspace/RawOverlayDialog.vue';
+
+async function mountDialog(
+  perms: Record<string, string[]> = ADMIN,
+  over: Parameters<typeof fakeApi>[0] = {},
+) {
+  const out: { ws?: ConfigWorkspace } = {};
+  const wrapper = mount(
+    workspaceHost(
+      fakeApi(over),
+      RawOverlayDialog,
+      () => ({ visible: true }),
+      out,
+    ),
+    { global: globalWith(piniaWith(perms), { teleport: true }) },
+  );
+  await flushPromises();
+  await out.ws!.loadDetails();
+  await flushPromises();
+  return { wrapper, ws: out.ws! };
+}
+
+async function type(wrapper: ReturnType<typeof mount>, text: string) {
+  vi.useFakeTimers();
+  await wrapper.find('textarea').setValue(text);
+  vi.advanceTimersByTime(300);
+  vi.useRealTimers();
+  await flushPromises();
+}
+
+describe('RawOverlayDialog (R70)', () => {
+  beforeEach(() => {
+    resetAgentDrafts();
+    confirmRequire.mockReset();
+  });
+
+  it('never closes on Escape', async () => {
+    const { wrapper } = await mountDialog();
+    // The innermost Dialog is PrimeVue's (the first is the Volt wrapper).
+    const prime = wrapper.findAllComponents(PrimeDialog).at(-1)!;
+    expect(prime.props('closeOnEscape')).toBe(false);
+  });
+
+  it('Cancel closes at once while nothing was edited', async () => {
+    const { wrapper } = await mountDialog();
+    await wrapper.find('[data-test="raw-cancel"]').trigger('click');
+    expect(confirmRequire).not.toHaveBeenCalled();
+    expect(
+      wrapper.findComponent(RawOverlayDialog).emitted('update:visible'),
+    ).toEqual([[false]]);
+  });
+
+  it('Cancel and × ask before discarding edits', async () => {
+    const { wrapper } = await mountDialog();
+    await type(wrapper, 'verbosity: 3\n');
+    const dialog = wrapper.findComponent(RawOverlayDialog);
+    await wrapper.find('[data-test="raw-cancel"]').trigger('click');
+    // The × emits update:visible false from the Dialog.
+    wrapper.findComponent({ name: 'Dialog' }).vm.$emit('update:visible', false);
+    expect(confirmRequire).toHaveBeenCalledTimes(2);
+    expect(dialog.emitted('update:visible')).toBeUndefined();
+    expect(confirmRequire.mock.calls[0][0]).toMatchObject({
+      header: 'Discard overlay edits?',
+    });
+    // Keep editing (reject) leaves the dialog open; Discard (accept) closes it.
+    confirmRequire.mock.calls[0][0].accept();
+    expect(dialog.emitted('update:visible')).toEqual([[false]]);
+  });
+
+  it('starts from the draft and applies a parsed, coerced document to it', async () => {
+    const { wrapper, ws } = await mountDialog();
+    expect(
+      (wrapper.find('textarea').element as HTMLTextAreaElement).value,
+    ).toContain('local-ssh-policies:v1.1.0');
+    expect(
+      wrapper.find('[data-test="raw-apply"]').attributes('disabled'),
+    ).toBeDefined();
+    await type(
+      wrapper,
+      'verbosity: 2\nplugins:\n  local-ssh:\n    config:\n      debug: true\n',
+    );
+    // Only booleans are coerced (R27); a number would be a blocking issue instead.
+    expect(wrapper.find('[data-test="yaml-coerced"]').text()).toContain(
+      '/plugins/local-ssh/config/debug',
+    );
+    await wrapper.find('[data-test="raw-apply"]').trigger('click');
+    expect(ws.draft.overlay.value).toEqual({
+      verbosity: 2,
+      plugins: { 'local-ssh': { config: { debug: 'true' } } },
+    });
+    expect(
+      wrapper.findComponent(RawOverlayDialog).emitted('update:visible'),
+    ).toEqual([[false]]);
+  });
+
+  it('highlights forbidden keys and blocks Apply (R71)', async () => {
+    const { wrapper, ws } = await mountDialog();
+    await type(
+      wrapper,
+      'verbosity: 1\ndaemon: false\nremote_config:\n  mode: apply_all\n',
+    );
+    expect(wrapper.find('[data-test="yaml-forbidden"]').text()).toContain(
+      'daemon',
+    );
+    expect(wrapper.find('[data-test="yaml-forbidden"]').text()).toContain(
+      'can never be changed remotely',
+    );
+    const diags = JSON.parse(
+      wrapper.find('textarea').attributes('data-diagnostics') ?? '[]',
+    ) as { row: number }[];
+    expect(diags.map((d) => d.row)).toEqual([2, 3]);
+    expect(
+      wrapper.find('[data-test="raw-apply"]').attributes('disabled'),
+    ).toBeDefined();
+    expect(ws.draft.isDirty.value).toBe(false);
+  });
+
+  it('shows YAML errors and keeps Apply disabled', async () => {
+    const { wrapper } = await mountDialog();
+    await type(wrapper, 'plugins: [unclosed\n');
+    expect(wrapper.find('[data-test="yaml-error"]').exists()).toBe(true);
+    expect(
+      wrapper.find('[data-test="raw-apply"]').attributes('disabled'),
+    ).toBeDefined();
+  });
+
+  it('Clear overlay replaces the draft with {} for configure', async () => {
+    const admin = await mountDialog();
+    await admin.wrapper.find('[data-test="clear-overlay"]').trigger('click');
+    await flushPromises();
+    await admin.wrapper.find('[data-test="raw-apply"]').trigger('click');
+    expect(admin.ws.draft.overlay.value).toEqual({});
+  });
+
+  it('a reader cannot clear', async () => {
+    const { wrapper } = await mountDialog(READER);
+    expect(
+      wrapper.find('[data-test="clear-overlay"]').attributes('disabled'),
+    ).toBeDefined();
+  });
+});
diff --git a/src/components/agents/config/workspace/PendingChangesBar.vue b/src/components/agents/config/workspace/PendingChangesBar.vue
new file mode 100644
index 00000000..a5dfa31b
--- /dev/null
+++ b/src/components/agents/config/workspace/PendingChangesBar.vue
@@ -0,0 +1,196 @@
+<template>
+  <div
+    v-if="visible"
+    class="sticky bottom-0 z-20 -mx-1 rounded-md border border-sky-300 bg-sky-50/95 px-4 py-3 shadow-md backdrop-blur dark:border-sky-700 dark:bg-slate-900/95"
+    role="region"
+    aria-label="Pending configuration changes"
+    data-test="pending-bar"
+  >
+    <div class="flex flex-wrap items-center gap-3 text-sm">
+      <span
+        class="font-medium text-gray-900 dark:text-slate-100"
+        data-test="pending-count"
+      >
+        {{ count }} pending change{{ count === 1 ? '' : 's' }}
+      </span>
+      <button
+        type="button"
+        class="text-xs text-sky-700 hover:underline dark:text-sky-300"
+        :aria-expanded="expanded"
+        data-test="pending-toggle"
+        @click="expanded = !expanded"
+      >
+        {{ expanded ? 'Hide' : 'Show' }}
+      </button>
+      <span
+        v-if="ws.blockingCount.value"
+        class="text-xs text-red-600 dark:text-red-400"
+        data-test="pending-blocking"
+      >
+        <i class="pi pi-times-circle mr-1 text-[0.7rem]" />{{
+          ws.blockingCount.value
+        }}
+        problem{{ ws.blockingCount.value === 1 ? '' : 's' }} to fix
+      </span>
+      <span
+        v-if="behind"
+        class="text-xs text-amber-700 dark:text-amber-300"
+        data-test="pending-behind"
+      >
+        Based on r{{ draft.baseRevision.value }}; r{{ latestRevision }} is the
+        desired revision now
+      </span>
+      <span
+        class="text-xs text-gray-500 dark:text-slate-400"
+        aria-live="polite"
+        data-test="live-check"
+      >
+        <template v-if="ws.preview.status.value === 'checking'">
+          <i class="pi pi-spin pi-spinner mr-1 text-[0.7rem]" />Checking…
+        </template>
+        <template v-else-if="ws.preview.status.value === 'checked'">
+          <i class="pi pi-check mr-1 text-[0.7rem]" />Checked
+        </template>
+        <span
+          v-else-if="ws.preview.status.value === 'failed'"
+          class="text-red-600 dark:text-red-400"
+          data-test="live-check-failed"
+        >
+          <i class="pi pi-exclamation-circle mr-1 text-[0.7rem]" />Check
+          failed<template v-if="ws.preview.error.value"
+            >: {{ ws.preview.error.value }}</template
+          >
+          <button
+            type="button"
+            class="ml-1 text-sky-700 hover:underline dark:text-sky-300"
+            data-test="live-check-retry"
+            @click="ws.preview.retry()"
+          >
+            Retry
+          </button>
+        </span>
+      </span>
+      <span class="flex-1" />
+      <TertiaryButton
+        size="small"
+        data-test="pending-discard"
+        @click="confirmDiscard"
+      >
+        Discard
+      </TertiaryButton>
+      <span v-tooltip.top="{ value: reviewTooltip, disabled: !reviewTooltip }">
+        <PrimaryButton
+          size="small"
+          :disabled="!!reviewTooltip"
+          data-test="pending-review"
+          @click="ws.openReview()"
+        >
+          Review &amp; save
+        </PrimaryButton>
+      </span>
+    </div>
+    <div v-if="expanded" class="mt-2 space-y-1" data-test="pending-list">
+      <ul class="flex flex-wrap gap-1">
+        <li
+          v-for="p in draft.changedPaths.value"
+          :key="p"
+          class="inline-flex items-center gap-1 rounded bg-white px-1.5 font-mono text-xs dark:bg-slate-800"
+        >
+          {{ p }}
+          <button
+            type="button"
+            class="text-sky-700 dark:text-sky-300"
+            :aria-label="`Undo ${p}`"
+            :data-test="`pending-undo-${p}`"
+            @click="draft.revertPointer(p)"
+          >
+            ↺
+          </button>
+        </li>
+      </ul>
+      <ul
+        v-if="draft.issues.value.length"
+        class="space-y-0.5 text-xs"
+        data-test="pending-issues"
+      >
+        <li
+          v-for="(i, idx) in draft.issues.value"
+          :key="idx"
+          :class="
+            i.blocking
+              ? 'text-red-600 dark:text-red-400'
+              : 'text-amber-700 dark:text-amber-300'
+          "
+        >
+          <code class="font-mono">{{ i.ptr || '/' }}</code> — {{ i.message }}
+        </li>
+      </ul>
+    </div>
+  </div>
+  <ReviewSaveDialog
+    v-if="ws.reviewOpen.value"
+    v-model:visible="ws.reviewOpen.value"
+  />
+</template>
+
+<script setup lang="ts">
+// The sticky "N pending changes · Review & save · Discard" bar (R69). It follows the shared
+// per-agent draft.
+import {
+  computed,
+  defineAsyncComponent,
+  onBeforeUnmount,
+  ref,
+  watch,
+} from 'vue';
+import { useConfirm } from 'primevue/useconfirm';
+import PrimaryButton from '@/volt/PrimaryButton.vue';
+import TertiaryButton from '@/volt/TertiaryButton.vue';
+import { useWorkspace } from '@/composables/agent-config/useConfigWorkspace';
+
+// The review (diff views, CodeMirror merge) loads only when someone reviews.
+const ReviewSaveDialog = defineAsyncComponent(
+  () => import('./ReviewSaveDialog.vue'),
+);
+
+const ws = useWorkspace()!;
+const draft = ws.draft;
+const confirm = useConfirm();
+const expanded = ref(false);
+
+const visible = computed(
+  () => ws.canConfigure.value && ws.ready.value && draft.isDirty.value,
+);
+const count = computed(() => draft.changedPaths.value.length);
+const latestRevision = computed(() => ws.state.config.value?.revision ?? 0);
+const behind = computed(
+  () =>
+    !!ws.state.config.value &&
+    latestRevision.value !== draft.baseRevision.value,
+);
+const reviewTooltip = computed(() => ws.reviewDisabledReason.value);
+
+function confirmDiscard() {
+  confirm.require({
+    header: 'Discard pending changes?',
+    message: `Discard ${count.value} pending change${count.value === 1 ? '' : 's'}? Nothing has been saved yet.`,
+    rejectProps: { label: 'Keep', severity: 'secondary', outlined: true },
+    acceptProps: { label: 'Discard', severity: 'danger' },
+    accept: () => ws.discard(),
+  });
+}
+
+function beforeUnload(e: BeforeUnloadEvent) {
+  e.preventDefault();
+  e.returnValue = '';
+}
+watch(
+  visible,
+  (dirty) => {
+    if (dirty) window.addEventListener('beforeunload', beforeUnload);
+    else window.removeEventListener('beforeunload', beforeUnload);
+  },
+  { immediate: true },
+);
+onBeforeUnmount(() => window.removeEventListener('beforeunload', beforeUnload));
+</script>
diff --git a/src/components/agents/config/workspace/RawOverlayDialog.vue b/src/components/agents/config/workspace/RawOverlayDialog.vue
new file mode 100644
index 00000000..0eb8295d
--- /dev/null
+++ b/src/components/agents/config/workspace/RawOverlayDialog.vue
@@ -0,0 +1,298 @@
+<template>
+  <Dialog
+    :visible="visible"
+    modal
+    header="Advanced: edit raw overlay (YAML)"
+    class="w-full max-w-4xl"
+    data-test="raw-overlay-dialog"
+    :close-on-escape="false"
+    @update:visible="
+      (v: boolean) => (v ? $emit('update:visible', v) : requestClose())
+    "
+  >
+    <div class="space-y-3">
+      <p class="text-xs text-gray-500 dark:text-slate-400">
+        The overlay is a JSON Merge Patch over each agent's local file:
+        <code>null</code> deletes a key, an omitted key keeps the file value.
+        Applying replaces the pending changes with this document; nothing is
+        saved until you review and save.
+      </p>
+      <p class="text-xs text-gray-500 dark:text-slate-400">
+        <i class="pi pi-info-circle mr-1" />{{ OVERLAY_SECRETS_NOTICE }}
+      </p>
+      <CodeEditor
+        :model-value="text"
+        language="yaml"
+        :diagnostics="diagnostics"
+        min-height="360px"
+        max-height="60vh"
+        label="Overlay YAML"
+        @update:model-value="onInput"
+      />
+      <p
+        v-if="parseError"
+        class="rounded-md border border-red-300 bg-red-50 p-2 text-sm text-red-700 dark:border-red-700 dark:bg-red-500/10 dark:text-red-300"
+        data-test="yaml-error"
+      >
+        Line {{ parseError.line + 1 }}, column {{ parseError.column + 1 }}:
+        {{ parseError.message }}
+      </p>
+      <p
+        v-if="forbidden.length"
+        class="rounded-md border border-red-300 bg-red-50 p-2 text-sm text-red-700 dark:border-red-700 dark:bg-red-500/10 dark:text-red-300"
+        data-test="yaml-forbidden"
+      >
+        <i class="pi pi-lock mr-1" />
+        <code>{{ forbidden.join('`, `') }}</code
+        >: {{ FORBIDDEN_TOOLTIP }}. Remove
+        {{ forbidden.length === 1 ? 'it' : 'them' }} to apply.
+      </p>
+      <p
+        v-if="coerced.length"
+        class="text-xs text-sky-700 dark:text-sky-300"
+        data-test="yaml-coerced"
+      >
+        {{ coerced.length }} value{{ coerced.length === 1 ? '' : 's' }} will be
+        sent as a string: {{ coerced.join(', ') }}
+      </p>
+      <ul
+        v-if="issues.length"
+        class="space-y-1 text-xs"
+        data-test="yaml-issues"
+      >
+        <li
+          v-for="(i, idx) in issues"
+          :key="idx"
+          :class="
+            i.blocking
+              ? 'text-red-600 dark:text-red-400'
+              : 'text-amber-700 dark:text-amber-300'
+          "
+        >
+          <code class="font-mono">{{ i.ptr || '/' }}</code> — {{ i.message }}
+        </li>
+      </ul>
+    </div>
+    <template #footer>
+      <div class="flex w-full flex-wrap items-center gap-2">
+        <span
+          v-if="hasSavedOverlay"
+          v-tooltip.top="{
+            value: ws.saveDisabledReason.value,
+            disabled: !ws.saveDisabledReason.value,
+          }"
+        >
+          <Button
+            severity="danger"
+            size="small"
+            :disabled="!!ws.saveDisabledReason.value"
+            data-test="clear-overlay"
+            @click="clearOverlay"
+          >
+            Clear overlay
+          </Button>
+        </span>
+        <span class="flex-1" />
+        <TertiaryButton data-test="raw-cancel" @click="requestClose"
+          >Cancel</TertiaryButton
+        >
+        <PrimaryButton
+          :disabled="!canApply"
+          data-test="raw-apply"
+          @click="apply"
+        >
+          Apply to pending changes
+        </PrimaryButton>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+// R70: the structured drawer is gone; the raw overlay is edited here and feeds the same
+// pending-changes draft, preview and save flow. Forbidden keys (R71) are highlighted and
+// block Apply client-side; the API's 422 `locked-key` stays authoritative.
+// The tab unmounts the dialog when it closes, so closing with edits that were not applied asks
+// first; Escape never closes it (inside the editor it only leaves the editor).
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useConfirm } from 'primevue/useconfirm';
+import Button from '@/volt/Button.vue';
+import Dialog from '@/volt/Dialog.vue';
+import PrimaryButton from '@/volt/PrimaryButton.vue';
+import TertiaryButton from '@/volt/TertiaryButton.vue';
+import { CodeEditor, type EditorDiagnostic } from '@/components/code-editor';
+import { LOCKED_KEYS, type OverlayDoc } from '@/types/agent-config';
+import { useWorkspace } from '@/composables/agent-config/useConfigWorkspace';
+import { parseYaml, toYaml, type YamlError } from '@/utils/agent-config/yaml';
+import {
+  coerceStringMaps,
+  validateOverlayClientSide,
+} from '@/utils/agent-config/validation';
+import { deepEqual, isPlainObject } from '@/utils/agent-config/merge-patch';
+import { FORBIDDEN_TOOLTIP } from '@/utils/agent-config/field-access';
+import { OVERLAY_SECRETS_NOTICE } from '../constants';
+
+const props = defineProps<{ visible: boolean }>();
+const emit = defineEmits<{ 'update:visible': [v: boolean] }>();
+
+const ws = useWorkspace()!;
+const PARSE_DEBOUNCE_MS = 250;
+
+const text = ref('');
+/** The text the dialog opened with: anything else is an edit closing would lose. */
+const openedWith = ref('');
+const parsed = ref<OverlayDoc | null>(null);
+const coerced = ref<string[]>([]);
+const parseError = ref<YamlError | null>(null);
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+function parseNow(value: string) {
+  const res = parseYaml(value);
+  if (!res.ok) {
+    parseError.value = res.error;
+    parsed.value = null;
+    coerced.value = [];
+    return;
+  }
+  parseError.value = null;
+  const doc = (res.value ?? {}) as OverlayDoc;
+  if (!isPlainObject(doc)) {
+    parseError.value = {
+      line: 0,
+      column: 0,
+      message: 'The overlay must be a mapping',
+    };
+    parsed.value = null;
+    return;
+  }
+  const c = coerceStringMaps(doc);
+  parsed.value = c.overlay;
+  coerced.value = c.coerced;
+}
+
+watch(
+  () => props.visible,
+  (v) => {
+    if (!v) return;
+    text.value = toYaml(ws.draft.overlay.value);
+    openedWith.value = text.value;
+    parseNow(text.value);
+  },
+  { immediate: true },
+);
+
+const confirm = useConfirm();
+
+/** Cancel / ×: closes, after confirming when the text was edited. */
+function requestClose() {
+  if (text.value === openedWith.value) {
+    emit('update:visible', false);
+    return;
+  }
+  confirm.require({
+    header: 'Discard overlay edits?',
+    message:
+      'Your edits to the overlay YAML have not been applied to the pending changes and will be lost.',
+    rejectProps: {
+      label: 'Keep editing',
+      severity: 'secondary',
+      outlined: true,
+    },
+    acceptProps: { label: 'Discard', severity: 'danger' },
+    accept: () => emit('update:visible', false),
+  });
+}
+
+function onInput(value: string) {
+  text.value = value;
+  if (timer) clearTimeout(timer);
+  timer = setTimeout(() => {
+    timer = null;
+    parseNow(value);
+  }, PARSE_DEBOUNCE_MS);
+}
+
+onBeforeUnmount(() => {
+  if (timer) clearTimeout(timer);
+  timer = null;
+});
+
+function flush() {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+    parseNow(text.value);
+  }
+}
+
+/** Locked top-level keys present in the parsed document (even with a null value). */
+const forbidden = computed(() =>
+  parsed.value
+    ? LOCKED_KEYS.filter((k) =>
+        Object.prototype.hasOwnProperty.call(parsed.value, k),
+      )
+    : [],
+);
+
+/** Line of each top-level forbidden key, for editor markers. */
+const diagnostics = computed<EditorDiagnostic[]>(() => {
+  const out: EditorDiagnostic[] = [];
+  const e = parseError.value;
+  if (e) {
+    out.push({
+      row: e.line + 1,
+      col: e.column + 1,
+      message: e.message,
+      severity: 'error',
+    });
+  }
+  if (forbidden.value.length) {
+    text.value.split('\n').forEach((line, i) => {
+      const m = /^(["']?)([A-Za-z_]+)\1\s*:/.exec(line);
+      if (m && forbidden.value.includes(m[2] as (typeof LOCKED_KEYS)[number])) {
+        out.push({
+          row: i + 1,
+          col: 1,
+          message: `${m[2]}: ${FORBIDDEN_TOOLTIP}`,
+          severity: 'error',
+        });
+      }
+    });
+  }
+  return out;
+});
+
+const issues = computed(() =>
+  parsed.value && !forbidden.value.length
+    ? validateOverlayClientSide(parsed.value)
+    : [],
+);
+
+const canApply = computed(
+  () =>
+    !parseError.value &&
+    !!parsed.value &&
+    !forbidden.value.length &&
+    !deepEqual(parsed.value, ws.draft.overlay.value),
+);
+
+function apply() {
+  flush();
+  if (!canApply.value || !parsed.value) return;
+  ws.draft.replaceAll(parsed.value);
+  emit('update:visible', false);
+}
+
+const hasSavedOverlay = computed(
+  () => Object.keys(ws.draft.original.value).length > 0,
+);
+
+// "Clear overlay" only fills the editor with {}; it is a pending change like any other.
+function clearOverlay() {
+  if (ws.saveDisabledReason.value) return;
+  text.value = '{}\n';
+  parseNow(text.value);
+}
+
+defineExpose({ text, onInput, flush, apply, requestClose });
+</script>
diff --git a/src/components/agents/config/workspace/ReviewSaveDialog.vue b/src/components/agents/config/workspace/ReviewSaveDialog.vue
new file mode 100644
index 00000000..54282844
--- /dev/null
+++ b/src/components/agents/config/workspace/ReviewSaveDialog.vue
@@ -0,0 +1,341 @@
+<template>
+  <Dialog
+    :visible="visible"
+    modal
+    :header="`Review and save · base r${draft.baseRevision.value}`"
+    class="w-full max-w-5xl"
+    data-test="review-dialog"
+    :closable="!saving"
+    :close-on-escape="!saving && !childOpen"
+    @update:visible="onVisible"
+  >
+    <div class="space-y-4">
+      <p
+        class="text-xs text-gray-500 dark:text-slate-400"
+        data-test="secrets-notice"
+      >
+        <i class="pi pi-info-circle mr-1" />{{ OVERLAY_SECRETS_NOTICE }}
+      </p>
+
+      <Message v-if="conflict" severity="warn" data-test="conflict-banner">
+        <div class="space-y-2">
+          <p>
+            r{{ conflict.currentRevision }} was saved
+            <template v-if="conflict.latest?.createdBy"
+              >by {{ conflict.latest.createdBy }}</template
+            >
+            <template v-if="conflict.latest?.createdAt">{{
+              ' ' + formatRelative(conflict.latest.createdAt)
+            }}</template
+            >. Your pending changes are based on r{{
+              draft.baseRevision.value
+            }}.
+          </p>
+          <div class="flex flex-wrap gap-2">
+            <SecondaryButton
+              size="small"
+              :disabled="!conflict.latest"
+              data-test="conflict-view"
+              @click="theirChangesOpen = true"
+            >
+              View their changes
+            </SecondaryButton>
+            <SecondaryButton
+              size="small"
+              :disabled="!conflict.latest"
+              data-test="conflict-discard"
+              @click="resolveConflict(false)"
+            >
+              Discard my changes and reload
+            </SecondaryButton>
+            <SecondaryButton
+              v-if="!conflict.latest"
+              size="small"
+              data-test="conflict-reload"
+              @click="reloadLatest"
+            >
+              Reload latest
+            </SecondaryButton>
+            <PrimaryButton
+              size="small"
+              :disabled="!conflict.latest"
+              data-test="conflict-keep"
+              @click="resolveConflict(true)"
+            >
+              Keep my changes
+            </PrimaryButton>
+          </div>
+        </div>
+      </Message>
+
+      <Message
+        v-if="rebaseConflicts.length"
+        severity="warn"
+        data-test="rebase-conflicts"
+      >
+        Also changed by the other revision (your value is kept):
+        <code
+          v-for="(p, i) in rebaseConflicts"
+          :key="p"
+          class="font-mono text-xs"
+          >{{ p }}{{ i < rebaseConflicts.length - 1 ? ', ' : '' }}</code
+        >
+      </Message>
+
+      <Message v-if="saveError" severity="error" data-test="save-error">
+        <div class="flex flex-wrap items-center gap-3">
+          <span>{{ saveError }}</span>
+          <SecondaryButton
+            size="small"
+            :disabled="saving"
+            @click="saveError = null"
+            >Dismiss</SecondaryButton
+          >
+        </div>
+      </Message>
+
+      <p
+        v-if="reviewLoading"
+        class="text-sm text-gray-500 dark:text-slate-400"
+        data-test="review-loading"
+      >
+        <i class="pi pi-spin pi-spinner mr-1" />Checking the pending changes
+        against the agent's instances…
+      </p>
+      <Message
+        v-else-if="reviewError"
+        severity="error"
+        data-test="review-error"
+      >
+        <div class="flex flex-wrap items-center gap-3">
+          <span>{{ reviewError }}</span>
+          <SecondaryButton size="small" @click="runReview(true)"
+            >Retry</SecondaryButton
+          >
+        </div>
+      </Message>
+      <SavePreviewPanel
+        v-else-if="ws.preview.lastPreview.value"
+        v-model:comment="draft.comment.value"
+        :preview="ws.preview.lastPreview.value"
+        :instance-details="ws.instanceDetails.value"
+        :current-overlay="draft.original.value"
+        :draft-overlay="draft.overlay.value"
+        :base-revision="draft.baseRevision.value"
+        :saving="saving"
+        :save-errors="saveErrors"
+        :save-disabled-reason="saveDisabledReason"
+        back-label="Keep editing"
+        @back="onVisible(false)"
+        @save="save"
+        @child-open="panelChildOpen = $event"
+      />
+    </div>
+  </Dialog>
+
+  <Dialog
+    v-model:visible="theirChangesOpen"
+    modal
+    header="Their changes"
+    class="w-full max-w-5xl"
+  >
+    <CodeMergeView
+      v-if="theirChangesOpen && conflict?.latest"
+      :original="toYaml(draft.original.value)"
+      :modified="toYaml(conflict.latest.overlay ?? {})"
+      language="yaml"
+      mode="split"
+    />
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+// Review and save (R69): the existing preview UX (per-instance diff, safety tags, will-apply,
+// R59 warnings) over the shared draft, saved as ONE revision with If-Match
+// and the 409 flow. Opened from the pending-changes bar.
+import { computed, ref, watch } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import Dialog from '@/volt/Dialog.vue';
+import Message from '@/volt/Message.vue';
+import PrimaryButton from '@/volt/PrimaryButton.vue';
+import SecondaryButton from '@/volt/SecondaryButton.vue';
+import { CodeMergeView } from '@/components/code-editor';
+import type {
+  AgentConfigRevision,
+  ConfigErrorBody,
+} from '@/types/agent-config';
+import { clone } from '@/utils/agent-config/merge-patch';
+import { isAgentConfigApiError } from '@/composables/agent-config/api-types';
+import { useWorkspace } from '@/composables/agent-config/useConfigWorkspace';
+import { hasBlocking } from '@/utils/agent-config/validation';
+import { formatRelative } from '@/utils/agent-config/display';
+import { toYaml } from '@/utils/agent-config/yaml';
+import SavePreviewPanel from '../editor/SavePreviewPanel.vue';
+import { OVERLAY_SECRETS_NOTICE } from '../constants';
+
+const props = defineProps<{ visible: boolean }>();
+const emit = defineEmits<{ 'update:visible': [v: boolean] }>();
+
+const ws = useWorkspace()!;
+const draft = ws.draft;
+const toast = useToast();
+
+const reviewLoading = ref(false);
+const reviewError = ref<string | null>(null);
+const saving = ref(false);
+const saveError = ref<string | null>(null);
+const saveErrors = ref<ConfigErrorBody | null>(null);
+const conflict = ref<{
+  currentRevision: number;
+  latest: AgentConfigRevision | null;
+} | null>(null);
+const theirChangesOpen = ref(false);
+/** Pointers both this draft and the other revision changed ("Keep my changes"). */
+const rebaseConflicts = ref<string[]>([]);
+const panelChildOpen = ref(false);
+// PrimeVue closes every open dialog on Esc: keep this one open while a nested one is.
+const childOpen = computed(
+  () => theirChangesOpen.value || panelChildOpen.value,
+);
+
+const saveDisabledReason = computed(() =>
+  conflict.value ? 'Resolve the conflict first' : ws.saveDisabledReason.value,
+);
+
+/** @param force run a fresh preview even if the cached one matches the draft. */
+async function runReview(force = false) {
+  reviewError.value = null;
+  saveErrors.value = null;
+  if (hasBlocking(draft.clientIssues.value)) {
+    reviewError.value = 'Fix the problems listed in the pending changes first.';
+    return;
+  }
+  if (!force && ws.preview.isCurrent()) return;
+  reviewLoading.value = true;
+  try {
+    await ws.preview.run();
+  } catch (e) {
+    reviewError.value = isAgentConfigApiError(e)
+      ? e.message
+      : 'The check failed.';
+  } finally {
+    reviewLoading.value = false;
+  }
+}
+
+watch(
+  () => props.visible,
+  (v) => {
+    if (!v) return;
+    saveError.value = null;
+    // The review needs every instance's file for its diff.
+    if (!ws.detailsLoaded.value && !ws.detailsLoading.value) ws.loadDetails();
+    runReview();
+  },
+  { immediate: true },
+);
+
+// 422 details describe the draft that was sent; drop them once it changes.
+watch(draft.overlay, () => {
+  saveErrors.value = null;
+});
+
+function onVisible(v: boolean) {
+  emit('update:visible', v);
+}
+
+async function save(comment: string) {
+  saving.value = true;
+  saveError.value = null;
+  saveErrors.value = null;
+  // The draft can change while the save is in flight; onSaved compares against this.
+  const sent = clone(draft.overlay.value);
+  try {
+    const result = await ws.api.putConfig(
+      ws.agentId.value,
+      { overlay: sent, comment },
+      draft.baseRevision.value,
+    );
+    if (result.created) {
+      toast.add({
+        severity: 'success',
+        summary: 'Configuration saved',
+        detail: `Configuration saved (r${result.revision.revision})`,
+        life: 3000,
+      });
+    } else {
+      toast.add({
+        severity: 'info',
+        summary: 'No change',
+        detail: `No effective change; revision r${result.revision.revision} is unchanged`,
+        life: 4000,
+      });
+    }
+    emit('update:visible', false);
+    await ws.onSaved(result, sent);
+  } catch (e) {
+    if (!isAgentConfigApiError(e)) {
+      saveError.value = 'The configuration could not be saved.';
+      return;
+    }
+    switch (e.kind) {
+      case 'conflict': {
+        toast.add({
+          severity: 'warn',
+          summary: 'Conflict',
+          detail: 'Configuration changed by someone else',
+          life: 4000,
+        });
+        const latest = await ws.api
+          .getConfig(ws.agentId.value)
+          .catch(() => null);
+        conflict.value = {
+          currentRevision:
+            e.currentRevision ?? latest?.revision ?? draft.baseRevision.value,
+          latest,
+        };
+        break;
+      }
+      case 'invalid':
+        saveErrors.value = e.body ?? { body: e.message };
+        break;
+      case 'forbidden':
+      case 'too-large':
+        saveError.value = e.message;
+        break;
+      default:
+        saveError.value = `${e.message} Your changes are kept; try again.`;
+    }
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function reloadLatest() {
+  if (!conflict.value) return;
+  const latest = await ws.api.getConfig(ws.agentId.value).catch(() => null);
+  if (latest && conflict.value) {
+    conflict.value = { currentRevision: latest.revision, latest };
+  } else {
+    saveError.value = 'Could not load the latest configuration; try again.';
+  }
+}
+
+async function resolveConflict(keep: boolean) {
+  const latest = conflict.value?.latest;
+  if (!latest) return;
+  const both = draft.rebase(latest, keep);
+  rebaseConflicts.value = keep ? both : [];
+  conflict.value = null;
+  saveErrors.value = null;
+  if (keep) {
+    // A fresh preview against the latest revision; the user then saves over it.
+    await runReview(true);
+  } else {
+    emit('update:visible', false);
+    await ws.state.refresh();
+  }
+}
+
+defineExpose({ save, runReview, conflict });
+</script>