From 99e114c3558fdbd09b28fc5f79d0d66cf98fea74 Mon Sep 17 00:00:00 2001
From: Gustavo Carvalho <gustavo.carvalho@container-solutions.com>
Date: Mon, 5 Oct 2026 07:40:53 -0300
Subject: [PATCH 1/2] feat(agent-config): save preview with diff rows and
 safety tags

Layer 13 of 21 in the stacked split of compliance-framework/ui#318.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../config/__tests__/SavePreviewPanel.spec.ts | 243 +++++++++++
 .../agents/config/editor/DiffRows.vue         |  80 ++++
 .../agents/config/editor/SafetyTag.vue        |  32 ++
 .../agents/config/editor/SavePreviewPanel.vue | 411 ++++++++++++++++++
 4 files changed, 766 insertions(+)
 create mode 100644 src/components/agents/config/__tests__/SavePreviewPanel.spec.ts
 create mode 100644 src/components/agents/config/editor/DiffRows.vue
 create mode 100644 src/components/agents/config/editor/SafetyTag.vue
 create mode 100644 src/components/agents/config/editor/SavePreviewPanel.vue

diff --git a/src/components/agents/config/__tests__/SavePreviewPanel.spec.ts b/src/components/agents/config/__tests__/SavePreviewPanel.spec.ts
new file mode 100644
index 00000000..05d7df24
--- /dev/null
+++ b/src/components/agents/config/__tests__/SavePreviewPanel.spec.ts
@@ -0,0 +1,243 @@
+import { describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import type { ConfigPreview, InstancePreview } from '@/types/agent-config';
+import {
+  detailFor,
+  error422,
+  instanceIds,
+  instancesMixed,
+  previewMixed,
+  previewStandalone,
+} from '@/composables/agent-config/__tests__/fixtures';
+import PrimeDialog from 'primevue/dialog';
+import SavePreviewPanel from '../editor/SavePreviewPanel.vue';
+import DiffRows from '../editor/DiffRows.vue';
+import { safetyForRow } from '../editor/review';
+import { globalWith, piniaWith, ADMIN } from './helpers';
+
+// The async CodeMirror wrappers are replaced by synchronous stubs.
+vi.mock('@/components/code-editor', () => import('./codeEditorMock'));
+
+const details = new Map(
+  instancesMixed.items
+    .filter((i) => i.reportedAt)
+    .map((i) => [i.instanceId, detailFor(i, {})]),
+);
+
+function mountPanel(
+  preview: ConfigPreview,
+  extra: Record<string, unknown> = {},
+) {
+  return mount(SavePreviewPanel, {
+    props: {
+      preview,
+      instanceDetails: details,
+      currentOverlay: {},
+      draftOverlay: { plugins: { 'local-ssh': { schedule: '@hourly' } } },
+      baseRevision: 7,
+      ...extra,
+    },
+    global: globalWith(piniaWith(ADMIN)),
+  });
+}
+
+const inst = (over: Partial<InstancePreview>): InstancePreview => ({
+  instanceId: instanceIds.a,
+  hostname: 'ip-a',
+  mode: 'apply_safe',
+  stale: false,
+  validated: true,
+  effective: null,
+  errors: [],
+  warnings: [],
+  changes: [],
+  willApply: true,
+  ...over,
+});
+const clean = (instances: InstancePreview[]): ConfigPreview => ({
+  desiredRevision: 7,
+  standalone: false,
+  overlayErrors: [],
+  instances,
+});
+const saveButton = (w: ReturnType<typeof mount>) =>
+  w.find('[data-test="save-config"]');
+
+describe('SavePreviewPanel (U2.5)', () => {
+  it('summarises will-apply with willApplyReason labels and offending changes', () => {
+    const w = mountPanel(previewMixed);
+    expect(w.find('[data-test="apply-summary"]').text()).toContain(
+      '0 of 3 instances will apply',
+    );
+    const lines = w.findAll('[data-test="not-applying"]').map((l) => l.text());
+    expect(lines[0]).toContain('Needs apply_all for some changes');
+    expect(lines[0]).toContain('/plugins/local-ssh/source');
+    expect(lines[0]).toContain('Untrusted source');
+    expect(lines[2]).toContain('Report-only mode');
+  });
+
+  it('tags rows by the most specific change prefix', () => {
+    const changes = [
+      { path: '/plugins/a', safety: 'unsafe' as const, reason: 'x' },
+      {
+        path: '/plugins/a/schedule',
+        safety: 'safe' as const,
+        reason: 'logging',
+      },
+    ];
+    expect(safetyForRow('/plugins/a/schedule', changes)).toBe('safe');
+    expect(safetyForRow('/plugins/a/config/k', changes)).toBe('unsafe');
+    expect(safetyForRow('/verbosity', changes)).toBe('no-effect');
+    expect(
+      safetyForRow('/plugins', [
+        { path: '/plugins/b/source', safety: 'forbidden', reason: 'y' },
+      ]),
+    ).toBe('forbidden');
+  });
+
+  it('blocks saving on overlay errors / error policy errors / validated instance errors only', () => {
+    // previewMixed: overlay error + validated ip-d error → blocked.
+    expect(
+      saveButton(mountPanel(previewMixed)).attributes('disabled'),
+    ).toBeDefined();
+
+    // Errors only on a non-validated instance → warnings, not blocking.
+    const nonValidated = clean([
+      inst({
+        validated: false,
+        mode: 'report',
+        errors: [{ path: '/x', message: 'bad' }],
+      }),
+    ]);
+    const w = mountPanel(nonValidated);
+    expect(saveButton(w).attributes('disabled')).toBeUndefined();
+    expect(w.find('[data-test="instance-error-nonblocking"]').text()).toContain(
+      'Not validated on save',
+    );
+
+    const validated = clean([
+      inst({ errors: [{ path: '/x', message: 'bad' }] }),
+    ]);
+    expect(
+      saveButton(mountPanel(validated)).attributes('disabled'),
+    ).toBeDefined();
+  });
+
+  it('R59 file warnings do not block', () => {
+    const p = clean([
+      inst({
+        warnings: [{ path: '/plugins/y/schedule', message: 'file cron' }],
+      }),
+    ]);
+    const w = mountPanel(p);
+    expect(saveButton(w).attributes('disabled')).toBeUndefined();
+    expect(w.find('[data-test="instance-warnings"]').text()).toContain(
+      'does not block',
+    );
+    expect(saveButton(w).text()).toBe('Save as r8');
+  });
+
+  it('shows the standalone banner and an overlay diff', () => {
+    const w = mountPanel(previewStandalone);
+    expect(w.find('[data-test="standalone"]').exists()).toBe(true);
+    expect(w.find('[data-test="apply-summary"]').exists()).toBe(false);
+    expect(w.find('[data-test="diff-rows"]').text()).toContain('/plugins');
+  });
+
+  it('diffs merge(base, current) vs merge(base, draft) per instance with safety tags', () => {
+    const p = clean([
+      inst({
+        changes: [
+          {
+            path: '/plugins/local-ssh/schedule',
+            safety: 'safe',
+            reason: 'logging',
+          },
+        ],
+      }),
+    ]);
+    const w = mountPanel(p);
+    const row = w.find('[data-path="/plugins/local-ssh/schedule"]');
+    expect(row.text()).toContain('*/5 * * * *');
+    expect(row.text()).toContain('@hourly');
+    expect(row.find('[data-safety="safe"]').exists()).toBe(true);
+  });
+
+  it('falls back to the change list when the base is unavailable', () => {
+    const p = clean([
+      inst({
+        instanceId: 'unknown-id',
+        changes: [{ path: '/v', safety: 'safe', reason: 'logging' }],
+      }),
+    ]);
+    expect(mountPanel(p).find('[data-test="changes-fallback"]').exists()).toBe(
+      true,
+    );
+  });
+
+  it('treats errors as blocking on non-stale instances when validated is absent (older API)', () => {
+    const p = clean([
+      inst({ validated: undefined, errors: [{ path: '/x', message: 'bad' }] }),
+    ]);
+    const w = mountPanel(p);
+    expect(saveButton(w).attributes('disabled')).toBeDefined();
+    expect(w.find('[data-test="legacy-validation"]').exists()).toBe(true);
+  });
+
+  it('maps a 422 body onto the lists and instance panels', () => {
+    const w = mountPanel(clean([inst({})]), { saveErrors: error422.errors });
+    expect(w.find('[data-test="overlay-error"]').text()).toContain('/api');
+    expect(
+      w.find(`[data-test="instance-panel-${instanceIds.a}"]`).text(),
+    ).toContain('invalid cron');
+    expect(saveButton(w).attributes('disabled')).toBeDefined();
+  });
+
+  it('emits save with the comment', async () => {
+    const w = mountPanel(clean([inst({})]));
+    await w.find('[data-test="save-comment"]').setValue('why');
+    await saveButton(w).trigger('click');
+    expect(w.emitted('save')?.[0]).toEqual(['why']);
+  });
+
+  it('disables Back while saving', () => {
+    const w = mountPanel(clean([inst({})]), { saving: true });
+    expect(
+      w.find('[data-test="review-back"]').attributes('disabled'),
+    ).toBeDefined();
+    expect(saveButton(w).attributes('disabled')).toBeDefined();
+  });
+
+  it('reports its nested diff dialog opening and closing (Esc gate)', async () => {
+    const w = mountPanel(clean([inst({})]));
+    const row = { path: '/x', kind: 'changed', before: 'a', after: 'b' };
+    w.findComponent(DiffRows).vm.$emit('open-diff', row);
+    await w.vm.$nextTick();
+    expect(w.emitted('childOpen')).toEqual([[true]]);
+    const diff = w
+      .findAllComponents(PrimeDialog)
+      .find((d) => d.props('header') === '/x')!;
+    diff.vm.$emit('update:visible', false);
+    await w.vm.$nextTick();
+    expect(w.emitted('childOpen')).toEqual([[true], [false]]);
+  });
+});
+
+describe('review rows for policy_data arrays', () => {
+  it('shows a whole-array write as element-level rows', () => {
+    const w = mountPanel(clean([inst({})]), {
+      currentOverlay: {
+        plugins: { 'local-ssh': { policy_data: { users: ['a', 'b'] } } },
+      },
+      draftOverlay: {
+        plugins: { 'local-ssh': { policy_data: { users: ['a', 'B', 'c'] } } },
+      },
+    });
+    const paths = w
+      .findAll('[data-test="diff-rows"] tr[data-path]')
+      .map((r) => r.attributes('data-path'));
+    expect(paths).toContain('/plugins/local-ssh/policy_data/users/1');
+    expect(paths).toContain('/plugins/local-ssh/policy_data/users/2');
+    expect(paths).not.toContain('/plugins/local-ssh/policy_data/users');
+  });
+});
diff --git a/src/components/agents/config/editor/DiffRows.vue b/src/components/agents/config/editor/DiffRows.vue
new file mode 100644
index 00000000..1934e3eb
--- /dev/null
+++ b/src/components/agents/config/editor/DiffRows.vue
@@ -0,0 +1,80 @@
+<template>
+  <table class="w-full text-left text-xs" data-test="diff-rows">
+    <tbody>
+      <tr v-if="!rows.length">
+        <td class="py-1 text-gray-500">No differences.</td>
+      </tr>
+      <tr
+        v-for="row in rows"
+        :key="row.path"
+        class="border-t border-ccf-300 align-top dark:border-slate-700"
+        :data-path="row.path"
+      >
+        <td class="py-1 pr-2 font-mono break-all">{{ row.path }}</td>
+        <td class="py-1 pr-2">
+          <template v-if="row.multiline">
+            <button
+              type="button"
+              class="text-sky-700 hover:underline dark:text-sky-300"
+              data-test="view-diff"
+              @click="$emit('open-diff', row)"
+            >
+              View diff
+            </button>
+          </template>
+          <template v-else>
+            <ValueCell :value="row.before" :missing="row.kind === 'added'" />
+            <span class="mx-1 text-gray-400">→</span>
+            <ValueCell :value="row.after" :missing="row.kind === 'removed'" />
+          </template>
+        </td>
+        <td v-if="!hideTags" class="py-1 text-right">
+          <SafetyTag :kind="safetyForRow(row.path, changes)" />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, h, ref } from 'vue';
+import type { ConfigChange } from '@/types/agent-config';
+import type { DiffEntry } from '@/utils/agent-config/config-diff';
+import SafetyTag from './SafetyTag.vue';
+import { safetyForRow, truncate } from './review';
+
+defineProps<{
+  rows: DiffEntry[];
+  changes: ConfigChange[];
+  hideTags?: boolean;
+}>();
+defineEmits<{ 'open-diff': [row: DiffEntry] }>();
+
+// A value truncated to 120 characters with a "show" toggle.
+const ValueCell = defineComponent({
+  props: { value: { type: null, default: undefined }, missing: Boolean },
+  setup(p) {
+    const open = ref(false);
+    return () => {
+      if (p.missing)
+        return h('span', { class: 'text-gray-400 italic' }, 'absent');
+      const t = truncate(p.value);
+      const full = truncate(p.value, Number.MAX_SAFE_INTEGER).text;
+      return h('span', { class: 'font-mono break-all' }, [
+        open.value ? full : t.text,
+        t.truncated
+          ? h(
+              'button',
+              {
+                type: 'button',
+                class: 'ml-1 text-sky-700 hover:underline dark:text-sky-300',
+                onClick: () => (open.value = !open.value),
+              },
+              open.value ? 'hide' : 'show',
+            )
+          : null,
+      ]);
+    };
+  },
+});
+</script>
diff --git a/src/components/agents/config/editor/SafetyTag.vue b/src/components/agents/config/editor/SafetyTag.vue
new file mode 100644
index 00000000..5bb40c21
--- /dev/null
+++ b/src/components/agents/config/editor/SafetyTag.vue
@@ -0,0 +1,32 @@
+<template>
+  <ConfigPill :severity="severity" :data-safety="kind">{{ label }}</ConfigPill>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import ConfigPill from '../ConfigPill.vue';
+import type { SafetyTagKind } from './review';
+
+const props = defineProps<{ kind: SafetyTagKind }>();
+
+const severity = computed(
+  () =>
+    (
+      ({
+        safe: 'success',
+        unsafe: 'warn',
+        forbidden: 'danger',
+        'no-effect': 'secondary',
+      }) as const
+    )[props.kind],
+);
+const label = computed(
+  () =>
+    ({
+      safe: 'safe',
+      unsafe: 'needs apply_all',
+      forbidden: 'forbidden',
+      'no-effect': 'no effect vs file',
+    })[props.kind],
+);
+</script>
diff --git a/src/components/agents/config/editor/SavePreviewPanel.vue b/src/components/agents/config/editor/SavePreviewPanel.vue
new file mode 100644
index 00000000..7201b46d
--- /dev/null
+++ b/src/components/agents/config/editor/SavePreviewPanel.vue
@@ -0,0 +1,411 @@
+<template>
+  <div class="space-y-4" data-test="save-preview">
+    <!-- Top-level errors / warnings -->
+    <section v-if="topErrors.length" class="space-y-1" data-test="top-errors">
+      <h4 class="text-sm font-semibold text-gray-900 dark:text-slate-200">
+        Problems
+      </h4>
+      <ul class="space-y-1 text-sm">
+        <li
+          v-for="(e, i) in topErrors"
+          :key="`o${i}`"
+          class="text-red-700 dark:text-red-300"
+          data-test="overlay-error"
+        >
+          <code class="font-mono text-xs">{{ e.path || '/' }}</code>
+          <span
+            v-if="e.code"
+            class="ml-1 text-xs text-gray-500 dark:text-slate-400"
+          >
+            <CodeLabel :labels="FIELD_ERROR_CODE_LABELS" :code="e.code" />
+          </span>
+          — {{ e.message }}
+        </li>
+      </ul>
+    </section>
+
+    <Message v-if="preview.standalone" severity="info" data-test="standalone">
+      No agent instance has reported a configuration yet, so only overlay-level
+      checks ran. Agents validate it again when they fetch it.
+    </Message>
+
+    <!-- Summary -->
+    <section
+      v-if="!preview.standalone"
+      class="space-y-2 rounded-md border border-ccf-300 p-3 text-sm dark:border-slate-700"
+      data-test="apply-summary"
+    >
+      <p class="font-medium text-gray-900 dark:text-slate-200">
+        {{ applying }} of {{ preview.instances.length }} instances will apply
+        this revision.
+      </p>
+      <ul class="space-y-1">
+        <li
+          v-for="inst in notApplying"
+          :key="inst.instanceId"
+          data-test="not-applying"
+        >
+          <span class="font-mono text-xs">{{
+            inst.hostname || inst.instanceId.slice(0, 8)
+          }}</span>
+          · {{ inst.mode || 'unknown mode' }} ·
+          <CodeLabel
+            :labels="WILL_APPLY_REASON_LABELS"
+            :code="inst.willApplyReason"
+          />
+          <ul
+            v-if="
+              inst.willApplyReason === 'unsafe-changes' ||
+              inst.willApplyReason === 'forbidden-changes'
+            "
+            class="mt-1 ml-4 space-y-0.5 text-xs"
+          >
+            <li
+              v-for="c in offending(inst)"
+              :key="`${c.path}|${c.value ?? ''}`"
+            >
+              <code class="font-mono">{{ c.path }}</code> ·
+              <CodeLabel :labels="CHANGE_REASON_LABELS" :code="c.reason" />
+              <template v-if="c.value">
+                ·
+                <code class="font-mono break-all">{{ c.value }}</code></template
+              >
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <p class="text-xs text-gray-500 dark:text-slate-400">
+        Changes are classified against each instance's local file, so this list
+        can include changes saved in earlier revisions.
+      </p>
+      <p
+        v-if="legacyValidation"
+        class="text-xs text-amber-700 dark:text-amber-300"
+        data-test="legacy-validation"
+      >
+        This API does not say which instances a save validates against; errors
+        on every non-stale instance are treated as blocking.
+      </p>
+    </section>
+
+    <!-- Standalone diff: current overlay vs draft -->
+    <section v-if="preview.standalone" class="space-y-2">
+      <DiffRows
+        :rows="standaloneRows"
+        :changes="[]"
+        hide-tags
+        @open-diff="openDiff"
+      />
+      <CodeMergeView
+        :original="toYaml(currentOverlay)"
+        :modified="toYaml(draftOverlay)"
+        language="yaml"
+        mode="unified"
+      />
+    </section>
+
+    <!-- Per instance -->
+    <Panel
+      v-for="inst in panels"
+      :key="inst.preview.instanceId"
+      toggleable
+      :collapsed="inst.preview.willApply && !inst.blocking"
+      :data-test="`instance-panel-${inst.preview.instanceId}`"
+    >
+      <template #header>
+        <div class="flex flex-wrap items-center gap-2 text-sm">
+          <span class="font-mono">{{
+            inst.preview.hostname || inst.preview.instanceId.slice(0, 8)
+          }}</span>
+          <ConfigPill severity="info">{{
+            inst.preview.mode || 'no mode'
+          }}</ConfigPill>
+          <ConfigPill v-if="inst.preview.stale" severity="secondary"
+            >stale</ConfigPill
+          >
+          <ConfigPill :severity="inst.preview.willApply ? 'success' : 'warn'">
+            {{ inst.preview.willApply ? 'will apply' : 'will not apply' }}
+          </ConfigPill>
+          <ConfigPill v-if="inst.blocking" severity="danger"
+            >blocks save</ConfigPill
+          >
+        </div>
+      </template>
+      <div class="space-y-3">
+        <ul v-if="inst.errors.length" class="space-y-1 text-sm">
+          <li
+            v-for="(e, i) in inst.errors"
+            :key="`e${i}`"
+            :class="
+              inst.blocking
+                ? 'text-red-700 dark:text-red-300'
+                : 'text-amber-700 dark:text-amber-300'
+            "
+            :data-test="
+              inst.blocking ? 'instance-error' : 'instance-error-nonblocking'
+            "
+          >
+            <code class="font-mono text-xs">{{ e.path || '/' }}</code> —
+            {{ e.message }}
+            <span v-if="!inst.blocking" class="text-xs">
+              (Not validated on save: stale or not in an apply mode)
+            </span>
+          </li>
+        </ul>
+        <ul
+          v-if="inst.warnings.length"
+          class="space-y-1 text-sm"
+          data-test="instance-warnings"
+        >
+          <li
+            v-for="(w, i) in inst.warnings"
+            :key="`w${i}`"
+            class="text-amber-700 dark:text-amber-300"
+          >
+            <code class="font-mono text-xs">{{ w.path || '/' }}</code> —
+            {{ w.message }}
+            <span class="text-xs">(in this host's file; does not block)</span>
+          </li>
+        </ul>
+
+        <template v-if="inst.rows">
+          <DiffRows
+            :rows="inst.rows"
+            :changes="inst.preview.changes"
+            @open-diff="openDiff"
+          />
+          <button
+            type="button"
+            class="text-xs text-sky-700 hover:underline dark:text-sky-300"
+            data-test="toggle-yaml-diff"
+            @click="toggleYaml(inst.preview.instanceId)"
+          >
+            {{ yamlOpen.has(inst.preview.instanceId) ? 'Hide' : 'Show' }} YAML
+            diff
+          </button>
+          <CodeMergeView
+            v-if="yamlOpen.has(inst.preview.instanceId)"
+            :original="toYaml(inst.before)"
+            :modified="toYaml(inst.after)"
+            language="yaml"
+            mode="unified"
+          />
+        </template>
+        <div v-else class="space-y-1" data-test="changes-fallback">
+          <p class="text-xs text-gray-500 dark:text-slate-400">
+            The file of this instance is unavailable; classified changes:
+          </p>
+          <ul class="space-y-0.5 text-xs">
+            <li
+              v-for="c in inst.preview.changes"
+              :key="`${c.path}|${c.value ?? ''}|${c.reason}`"
+              class="flex gap-2"
+            >
+              <code class="font-mono">{{ c.path }}</code>
+              <SafetyTag :kind="c.safety" />
+              <CodeLabel :labels="CHANGE_REASON_LABELS" :code="c.reason" />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </Panel>
+
+    <!-- Comment + save -->
+    <section class="space-y-2">
+      <label
+        class="block text-xs font-medium tracking-wide text-gray-500 uppercase dark:text-slate-400"
+        for="cfg-comment"
+      >
+        Comment (optional)
+      </label>
+      <Textarea
+        id="cfg-comment"
+        v-model="comment"
+        :maxlength="LIMITS.commentChars"
+        rows="2"
+        class="w-full"
+        data-test="save-comment"
+      />
+      <p class="text-right text-xs text-gray-500 dark:text-slate-400">
+        {{ comment.length }}/{{ LIMITS.commentChars }}
+      </p>
+      <div class="flex justify-end gap-2">
+        <SecondaryButton
+          :disabled="saving"
+          data-test="review-back"
+          @click="$emit('back')"
+          >{{ backLabel }}</SecondaryButton
+        >
+        <span
+          v-tooltip.top="{
+            value: saveDisabledReason,
+            disabled: !saveDisabledReason,
+          }"
+        >
+          <PrimaryButton
+            :disabled="blocking || saving || !!saveDisabledReason"
+            data-test="save-config"
+            @click="$emit('save', comment)"
+          >
+            {{ saving ? 'Saving…' : `Save as r${baseRevision + 1}` }}
+          </PrimaryButton>
+        </span>
+      </div>
+    </section>
+
+    <Dialog
+      v-model:visible="diffOpen"
+      modal
+      :header="diffTitle"
+      class="w-full max-w-5xl"
+    >
+      <CodeMergeView
+        v-if="diffOpen"
+        :original="diffOriginal"
+        :modified="diffModified"
+        language="text"
+        mode="split"
+      />
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+import Dialog from '@/volt/Dialog.vue';
+import Message from '@/volt/Message.vue';
+import Panel from '@/volt/Panel.vue';
+import PrimaryButton from '@/volt/PrimaryButton.vue';
+import SecondaryButton from '@/volt/SecondaryButton.vue';
+import Textarea from '@/volt/Textarea.vue';
+import { CodeMergeView } from '@/components/code-editor';
+import type {
+  AgentInstanceDetail,
+  ConfigDoc,
+  ConfigErrorBody,
+  ConfigPreview,
+  FieldError,
+  InstancePreview,
+  OverlayDoc,
+} from '@/types/agent-config';
+import { mergePatch } from '@/utils/agent-config/merge-patch';
+import { diffConfigs, type DiffEntry } from '@/utils/agent-config/config-diff';
+import { toYaml } from '@/utils/agent-config/yaml';
+import { LIMITS } from '@/utils/agent-config/validation';
+import ConfigPill from '../ConfigPill.vue';
+import CodeLabel from '../CodeLabel.vue';
+import {
+  CHANGE_REASON_LABELS,
+  FIELD_ERROR_CODE_LABELS,
+  WILL_APPLY_REASON_LABELS,
+} from '../constants';
+import DiffRows from './DiffRows.vue';
+import SafetyTag from './SafetyTag.vue';
+import { instanceErrorsBlock, previewBlocks, saveErrorsBlock } from './review';
+
+const props = withDefaults(
+  defineProps<{
+    preview: ConfigPreview;
+    instanceDetails: Map<string, AgentInstanceDetail>;
+    currentOverlay: OverlayDoc;
+    draftOverlay: OverlayDoc;
+    baseRevision: number;
+    saving?: boolean;
+    /** Raw 422 body of the last failed save (R6). */
+    saveErrors?: ConfigErrorBody | null;
+    saveDisabledReason?: string;
+    backLabel?: string;
+  }>(),
+  {
+    saving: false,
+    saveErrors: null,
+    saveDisabledReason: '',
+    backLabel: 'Back',
+  },
+);
+
+const emit = defineEmits<{
+  back: [];
+  save: [comment: string];
+  /** A nested dialog (View diff) opened or closed: the host gates its own Esc on it. */
+  childOpen: [open: boolean];
+}>();
+
+const comment = defineModel<string>('comment', { default: '' });
+const yamlOpen = reactive(new Set<string>());
+const diffOpen = ref(false);
+const diffTitle = ref('');
+const diffOriginal = ref('');
+const diffModified = ref('');
+watch(diffOpen, (open) => emit('childOpen', open));
+
+const topErrors = computed<FieldError[]>(() => [
+  ...props.preview.overlayErrors,
+  ...(props.saveErrors?.overlay ?? []),
+]);
+const legacyValidation = computed(() =>
+  props.preview.instances.some((i) => i.validated === undefined),
+);
+const applying = computed(
+  () => props.preview.instances.filter((i) => i.willApply).length,
+);
+const notApplying = computed(() =>
+  props.preview.instances.filter((i) => !i.willApply),
+);
+
+function offending(inst: InstancePreview) {
+  return inst.changes.filter((c) => c.safety !== 'safe');
+}
+
+const panels = computed(() =>
+  props.preview.instances.map((p) => {
+    const detail = props.instanceDetails.get(p.instanceId);
+    const base = detail?.base ?? null;
+    const saveInst = props.saveErrors?.instances?.find(
+      (i) => i['instance-id'] === p.instanceId,
+    );
+    const errorsBlock = instanceErrorsBlock(p) || !!saveInst?.errors?.length;
+    const errors = [...p.errors, ...(saveInst?.errors ?? [])];
+    const warnings = [...(p.warnings ?? []), ...(saveInst?.warnings ?? [])];
+    let before: ConfigDoc | null = null;
+    let after: ConfigDoc | null = null;
+    let rows: DiffEntry[] | null = null;
+    if (base) {
+      before = mergePatch<ConfigDoc>(base, props.currentOverlay);
+      after = mergePatch<ConfigDoc>(base, props.draftOverlay);
+      rows = diffConfigs(before, after);
+    }
+    return {
+      preview: p,
+      before,
+      after,
+      rows,
+      errors,
+      warnings,
+      blocking: errorsBlock && errors.length > 0,
+    };
+  }),
+);
+
+const standaloneRows = computed(() =>
+  diffConfigs(props.currentOverlay, props.draftOverlay),
+);
+
+const blocking = computed(
+  () => previewBlocks(props.preview) || saveErrorsBlock(props.saveErrors),
+);
+
+function toggleYaml(id: string) {
+  if (yamlOpen.has(id)) yamlOpen.delete(id);
+  else yamlOpen.add(id);
+}
+
+function openDiff(row: DiffEntry) {
+  diffTitle.value = row.path;
+  diffOriginal.value = typeof row.before === 'string' ? row.before : '';
+  diffModified.value = typeof row.after === 'string' ? row.after : '';
+  diffOpen.value = true;
+}
+
+defineExpose({ blocking });
+</script>

From 7b9959637e89da9722a5db6c23b4009ba9fc591a Mon Sep 17 00:00:00 2001
From: "ccf-lisa[bot]" <286799724+ccf-lisa[bot]@users.noreply.github.com>
Date: Tue, 6 Oct 2026 08:17:21 -0300
Subject: [PATCH 2/2] fix(agent-config): show what the save preview left out

- the apply summary says how many instances the API's bounded preview
  omitted (omitted-instances): a save still validates against them
- 422 errors of instances without a preview panel (an omitted one, or
  one that reported after the preview) are listed under "Other
  instances": they block Save, so they must be visible

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../config/__tests__/SavePreviewPanel.spec.ts | 57 +++++++++++++++++
 .../agents/config/editor/SavePreviewPanel.vue | 61 +++++++++++++++++++
 2 files changed, 118 insertions(+)

diff --git a/src/components/agents/config/__tests__/SavePreviewPanel.spec.ts b/src/components/agents/config/__tests__/SavePreviewPanel.spec.ts
index 05d7df24..491eb6f1 100644
--- a/src/components/agents/config/__tests__/SavePreviewPanel.spec.ts
+++ b/src/components/agents/config/__tests__/SavePreviewPanel.spec.ts
@@ -241,3 +241,60 @@ describe('review rows for policy_data arrays', () => {
     expect(paths).not.toContain('/plugins/local-ssh/policy_data/users');
   });
 });
+
+describe('instances the preview did not include', () => {
+  // What the API sends when it bounds the preview (configPreviewResponse).
+  const bounded: ConfigPreview = {
+    ...clean([inst({})]),
+    omittedInstances: 60,
+  };
+  const omittedId = 'ffffffff-0000-4000-8000-0000000000ff';
+
+  it('says how many instances were left out of the preview', () => {
+    const w = mountPanel(bounded, { draftOverlay: { verbosity: 2 } });
+    const summary = w.find('[data-test="apply-summary"]').text();
+    expect(summary).toContain('1 of 1 instances will apply');
+    expect(w.find('[data-test="omitted-instances"]').text()).toContain(
+      '60 more instances were not previewed; a save still validates against them',
+    );
+  });
+
+  it('says nothing when the preview covers every instance', () => {
+    const w = mountPanel(clean([inst({})]));
+    expect(w.find('[data-test="apply-summary"]').exists()).toBe(true);
+    expect(w.find('[data-test="omitted-instances"]').exists()).toBe(false);
+  });
+
+  it('shows a 422 error for an instance that is not in the preview', () => {
+    const w = mountPanel(bounded, {
+      draftOverlay: { verbosity: 2 },
+      saveErrors: {
+        body: 'invalid',
+        instances: [
+          {
+            'instance-id': omittedId,
+            hostname: 'ip-omitted',
+            errors: [{ path: '/verbosity', message: 'BOOM-not-allowed' }],
+          },
+          {
+            'instance-id': instanceIds.a,
+            hostname: 'ip-a',
+            errors: [{ path: '/verbosity', message: 'in-its-panel' }],
+          },
+        ],
+      },
+    });
+    // Save is blocked by that error...
+    expect(saveButton(w).attributes('disabled')).toBeDefined();
+    // ...so the user must be able to see it, with the host it is about.
+    const other = w.find(`[data-test="other-instance-${omittedId}"]`);
+    expect(other.exists()).toBe(true);
+    expect(other.text()).toContain('ip-omitted');
+    expect(other.text()).toContain('BOOM-not-allowed');
+    // A previewed instance's errors stay in its own panel only.
+    expect(w.findAll('[data-test="other-instance-error"]')).toHaveLength(1);
+    expect(
+      w.find(`[data-test="instance-panel-${instanceIds.a}"]`).text(),
+    ).toContain('in-its-panel');
+  });
+});
diff --git a/src/components/agents/config/editor/SavePreviewPanel.vue b/src/components/agents/config/editor/SavePreviewPanel.vue
index 7201b46d..68e93f93 100644
--- a/src/components/agents/config/editor/SavePreviewPanel.vue
+++ b/src/components/agents/config/editor/SavePreviewPanel.vue
@@ -39,6 +39,15 @@
         {{ applying }} of {{ preview.instances.length }} instances will apply
         this revision.
       </p>
+      <p
+        v-if="omitted"
+        class="text-amber-700 dark:text-amber-300"
+        data-test="omitted-instances"
+      >
+        {{ omitted }} more
+        {{ omitted === 1 ? 'instance was' : 'instances were' }} not previewed; a
+        save still validates against them.
+      </p>
       <ul class="space-y-1">
         <li
           v-for="inst in notApplying"
@@ -88,6 +97,48 @@
       </p>
     </section>
 
+    <!-- 422 errors of instances the preview did not include (e.g. omitted ones) -->
+    <section
+      v-if="otherSaveErrors.length"
+      class="space-y-1"
+      data-test="other-instance-errors"
+    >
+      <h4 class="text-sm font-semibold text-gray-900 dark:text-slate-200">
+        Other instances
+      </h4>
+      <ul class="space-y-2 text-sm">
+        <li
+          v-for="inst in otherSaveErrors"
+          :key="inst['instance-id']"
+          :data-test="`other-instance-${inst['instance-id']}`"
+        >
+          <span class="font-mono text-xs">{{
+            inst.hostname || inst['instance-id'].slice(0, 8)
+          }}</span>
+          <ul class="mt-1 ml-4 space-y-0.5">
+            <li
+              v-for="(e, i) in inst.errors ?? []"
+              :key="`e${i}`"
+              class="text-red-700 dark:text-red-300"
+              data-test="other-instance-error"
+            >
+              <code class="font-mono text-xs">{{ e.path || '/' }}</code> —
+              {{ e.message }}
+            </li>
+            <li
+              v-for="(w, i) in inst.warnings ?? []"
+              :key="`w${i}`"
+              class="text-amber-700 dark:text-amber-300"
+            >
+              <code class="font-mono text-xs">{{ w.path || '/' }}</code> —
+              {{ w.message }}
+              <span class="text-xs">(in this host's file; does not block)</span>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </section>
+
     <!-- Standalone diff: current overlay vs draft -->
     <section v-if="preview.standalone" class="space-y-2">
       <DiffRows
@@ -352,6 +403,16 @@ const applying = computed(
 const notApplying = computed(() =>
   props.preview.instances.filter((i) => !i.willApply),
 );
+/** Instances beyond the preview's bound (50 instances / 16 MiB); a save validates them. */
+const omitted = computed(() => props.preview.omittedInstances ?? 0);
+/** 422 instances with no preview panel: shown on their own, since they block the save. */
+const otherSaveErrors = computed(() =>
+  (props.saveErrors?.instances ?? []).filter(
+    (s) =>
+      (s.errors?.length || s.warnings?.length) &&
+      !props.preview.instances.some((p) => p.instanceId === s['instance-id']),
+  ),
+);
 
 function offending(inst: InstancePreview) {
   return inst.changes.filter((c) => c.safety !== 'safe');