From 8d58a727839b02101a7faade404221324f932256 Mon Sep 17 00:00:00 2001
From: Gustavo Carvalho <gustavo.carvalho@container-solutions.com>
Date: Mon, 5 Oct 2026 07:40:54 -0300
Subject: [PATCH] feat(agent-config): configuration history and revert

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

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../agents/config/AgentConfigHistory.vue      | 499 ++++++++++++++++++
 .../__tests__/AgentConfigHistory.spec.ts      | 384 ++++++++++++++
 2 files changed, 883 insertions(+)
 create mode 100644 src/components/agents/config/AgentConfigHistory.vue
 create mode 100644 src/components/agents/config/__tests__/AgentConfigHistory.spec.ts

diff --git a/src/components/agents/config/AgentConfigHistory.vue b/src/components/agents/config/AgentConfigHistory.vue
new file mode 100644
index 00000000..c4d20bce
--- /dev/null
+++ b/src/components/agents/config/AgentConfigHistory.vue
@@ -0,0 +1,499 @@
+<template>
+  <div class="space-y-3" data-test="config-history">
+    <p
+      v-if="loading && !items.length"
+      class="text-sm text-gray-500 dark:text-slate-400"
+    >
+      Loading revisions…
+    </p>
+    <Message v-else-if="error && !items.length" severity="error">
+      <div class="flex flex-wrap items-center gap-3">
+        <span>{{ error }}</span>
+        <SecondaryButton size="small" @click="reload">Retry</SecondaryButton>
+      </div>
+    </Message>
+    <p
+      v-else-if="!items.length"
+      class="text-sm text-gray-500 dark:text-slate-400"
+      data-test="history-empty"
+    >
+      No revisions yet.
+    </p>
+    <div
+      v-else
+      class="overflow-x-auto rounded-md border border-ccf-300 dark:border-slate-700"
+    >
+      <table class="w-full min-w-[760px] text-sm">
+        <thead
+          class="bg-gray-50 text-left text-xs tracking-wider text-gray-500 uppercase dark:bg-slate-800 dark:text-slate-400"
+        >
+          <tr>
+            <th class="p-2">Rev</th>
+            <th class="p-2">Author</th>
+            <th class="p-2">When</th>
+            <th class="p-2">Comment</th>
+            <th class="p-2">Size</th>
+            <th class="p-2">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="r in items"
+            :key="r.revision"
+            class="border-t border-ccf-300 align-top dark:border-slate-700"
+            :data-rev="r.revision"
+          >
+            <td class="p-2 whitespace-nowrap">
+              <span class="font-semibold">r{{ r.revision }}</span>
+              <ConfigPill
+                v-if="r.revision === desiredRevision"
+                severity="success"
+                class="ml-1"
+                >Current</ConfigPill
+              >
+              <ConfigPill v-if="r.revertOf" severity="info" class="ml-1"
+                >Revert of r{{ r.revertOf }}</ConfigPill
+              >
+            </td>
+            <td class="p-2">{{ r.createdBy || '—' }}</td>
+            <td class="p-2 whitespace-nowrap">
+              <span v-tooltip.top="formatAbsolute(r.createdAt)">{{
+                formatRelative(r.createdAt)
+              }}</span>
+            </td>
+            <td class="p-2 break-words">{{ r.comment || '' }}</td>
+            <td class="p-2 whitespace-nowrap">
+              {{ humanBytes(r.overlaySize) }}
+            </td>
+            <td class="p-2">
+              <div class="flex flex-wrap gap-1">
+                <TertiaryButton
+                  size="small"
+                  data-test="history-view"
+                  @click="view(r.revision)"
+                  >View</TertiaryButton
+                >
+                <TertiaryButton
+                  size="small"
+                  data-test="history-diff-prev"
+                  @click="diff(r.revision - 1, r.revision)"
+                >
+                  Diff with previous
+                </TertiaryButton>
+                <TertiaryButton
+                  v-if="r.revision !== desiredRevision"
+                  size="small"
+                  data-test="history-diff-current"
+                  @click="diff(r.revision, desiredRevision)"
+                >
+                  Diff with current
+                </TertiaryButton>
+                <span
+                  v-if="r.revision !== desiredRevision"
+                  v-tooltip.top="{
+                    value: revertTooltip,
+                    disabled: canRevert,
+                  }"
+                >
+                  <TertiaryButton
+                    size="small"
+                    :disabled="!canRevert"
+                    data-test="history-revert"
+                    @click="openRevert(r.revision)"
+                  >
+                    Revert
+                  </TertiaryButton>
+                </span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <p
+      v-if="error && items.length"
+      class="text-sm text-red-600 dark:text-red-400"
+      data-test="history-page-error"
+    >
+      {{ error }}
+    </p>
+    <div v-if="items.length && page < totalPages" class="flex justify-center">
+      <SecondaryButton
+        size="small"
+        :disabled="loading"
+        data-test="history-more"
+        @click="loadMore"
+      >
+        Load more
+      </SecondaryButton>
+    </div>
+
+    <!-- View -->
+    <Dialog
+      v-model:visible="viewOpen"
+      modal
+      :header="`Overlay r${viewRev}`"
+      class="w-full max-w-4xl"
+    >
+      <p v-if="dialogLoading" class="text-sm text-gray-500 dark:text-slate-400">
+        Loading…
+      </p>
+      <p
+        v-else-if="dialogError"
+        class="text-sm text-red-600 dark:text-red-400"
+        data-test="view-error"
+      >
+        {{ dialogError }}
+      </p>
+      <ConfigYamlViewer
+        v-else-if="viewOpen"
+        :doc="viewDoc"
+        :filename="`${fileBase}-overlay-r${viewRev}.yaml`"
+        empty-text="No overlay."
+      />
+    </Dialog>
+
+    <!-- Diff -->
+    <Dialog
+      v-model:visible="diffOpen"
+      modal
+      :header="diffTitle"
+      class="w-full max-w-5xl"
+    >
+      <p v-if="dialogLoading" class="text-sm text-gray-500 dark:text-slate-400">
+        Loading…
+      </p>
+      <p
+        v-else-if="dialogError"
+        class="text-sm text-red-600 dark:text-red-400"
+        data-test="diff-error"
+      >
+        {{ dialogError }}
+      </p>
+      <CodeMergeView
+        v-else-if="diffOpen"
+        :original="diffOriginal"
+        :modified="diffModified"
+        language="yaml"
+        mode="split"
+      />
+    </Dialog>
+
+    <!-- Revert (ConfirmDialog has no input, so a small dialog asks for the comment) -->
+    <Dialog
+      v-model:visible="revertOpen"
+      modal
+      header="Revert configuration"
+      class="w-full max-w-lg"
+    >
+      <div class="space-y-3" data-test="revert-dialog">
+        <p class="text-sm">
+          Create revision r{{ desiredRevision + 1 }} with the overlay of r{{
+            revertRev
+          }}? It is re-validated against the current instances.
+        </p>
+        <label
+          class="block text-xs font-medium tracking-wide text-gray-500 uppercase dark:text-slate-400"
+          for="revert-comment"
+        >
+          Comment (optional)
+        </label>
+        <Textarea
+          id="revert-comment"
+          v-model="revertComment"
+          :maxlength="LIMITS.commentChars"
+          rows="2"
+          class="w-full"
+          data-test="revert-comment"
+        />
+        <div class="flex justify-end gap-2">
+          <TertiaryButton @click="revertOpen = false">Cancel</TertiaryButton>
+          <PrimaryButton
+            :disabled="reverting"
+            data-test="revert-confirm"
+            @click="doRevert"
+          >
+            {{ reverting ? 'Reverting…' : `Revert to r${revertRev}` }}
+          </PrimaryButton>
+        </div>
+      </div>
+    </Dialog>
+
+    <!-- 422 on revert: the old overlay may be invalid for today's bases -->
+    <Dialog
+      v-model:visible="invalidOpen"
+      modal
+      header="Revert rejected"
+      class="w-full max-w-2xl"
+    >
+      <div class="space-y-2 text-sm" data-test="revert-invalid">
+        <p>{{ invalidBody?.body }}</p>
+        <ul class="space-y-1">
+          <li
+            v-for="(e, i) in invalidBody?.overlay ?? []"
+            :key="`o${i}`"
+            class="text-red-700 dark:text-red-300"
+          >
+            <code class="font-mono text-xs">{{ e.path || '/' }}</code> —
+            {{ e.message }}
+          </li>
+          <template
+            v-for="inst in invalidBody?.instances ?? []"
+            :key="inst['instance-id']"
+          >
+            <li
+              v-for="(e, i) in inst.errors"
+              :key="`${inst['instance-id']}${i}`"
+              class="text-red-700 dark:text-red-300"
+            >
+              {{ inst.hostname || inst['instance-id'] }}:
+              <code class="font-mono text-xs">{{ e.path || '/' }}</code> —
+              {{ e.message }}
+            </li>
+          </template>
+        </ul>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, shallowRef, 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 TertiaryButton from '@/volt/TertiaryButton.vue';
+import Textarea from '@/volt/Textarea.vue';
+import { CodeMergeView } from '@/components/code-editor';
+import type {
+  AgentConfigRevision,
+  AgentConfigRevisionSummary,
+  ConfigErrorBody,
+  OverlayDoc,
+} from '@/types/agent-config';
+import {
+  isAgentConfigApiError,
+  type AgentConfigApi,
+} from '@/composables/agent-config/useAgentConfigApi';
+import {
+  formatAbsolute,
+  formatRelative,
+  humanBytes,
+} from '@/utils/agent-config/display';
+import { toYaml } from '@/utils/agent-config/yaml';
+import { LIMITS } from '@/utils/agent-config/validation';
+import ConfigPill from './ConfigPill.vue';
+import ConfigYamlViewer from './ConfigYamlViewer.vue';
+
+const PAGE_SIZE = 20;
+
+const props = defineProps<{
+  api: AgentConfigApi;
+  agentId: string;
+  fileBase: string;
+  desiredRevision: number;
+  /** Whether the user may revert (agent:configure). */
+  canRevert: boolean;
+  /** Why Revert is disabled when `canRevert` is false. */
+  revertTooltip: string;
+  /** Cached revision loader shared with the tab (U1.3). */
+  getRevision: (rev: number) => Promise<AgentConfigRevision>;
+}>();
+
+const emit = defineEmits<{ changed: [] }>();
+
+const toast = useToast();
+const items = shallowRef<AgentConfigRevisionSummary[]>([]);
+const page = ref(0);
+const totalPages = ref(1);
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+const dialogLoading = ref(false);
+const dialogError = ref<string | null>(null);
+const viewOpen = ref(false);
+const viewRev = ref(0);
+const viewDoc = shallowRef<OverlayDoc | null>(null);
+const diffOpen = ref(false);
+const diffTitle = ref('');
+const diffOriginal = ref('');
+const diffModified = ref('');
+
+const revertOpen = ref(false);
+const revertRev = ref(0);
+const revertComment = ref('');
+const reverting = ref(false);
+const invalidOpen = ref(false);
+const invalidBody = shallowRef<ConfigErrorBody | null>(null);
+
+let fetchSeq = 0;
+/** View / Diff share the dialog state: only the latest call may write it. */
+let dialogSeq = 0;
+
+async function fetchPage(p: number) {
+  const seq = ++fetchSeq;
+  loading.value = true;
+  error.value = null;
+  try {
+    const res = await props.api.listRevisions(props.agentId, p, PAGE_SIZE);
+    // A reload started meanwhile: drop this (possibly older) page.
+    if (seq !== fetchSeq) return;
+    // Revision 0 is never listed. Offsets shift when someone saves between pages, so merge
+    // by revision (newest first) instead of appending duplicates.
+    const rows = res.items.filter((r) => r.revision > 0);
+    const merged = new Map(
+      (p === 1 ? [] : items.value).map((r) => [r.revision, r]),
+    );
+    for (const r of rows) merged.set(r.revision, r);
+    items.value = [...merged.values()].sort((a, b) => b.revision - a.revision);
+    page.value = p;
+    totalPages.value = res.totalPages;
+  } catch (e) {
+    if (seq !== fetchSeq) return;
+    error.value = isAgentConfigApiError(e)
+      ? e.message
+      : 'Failed to load revisions.';
+  } finally {
+    if (seq === fetchSeq) loading.value = false;
+  }
+}
+
+function reload() {
+  return fetchPage(1);
+}
+
+function loadMore() {
+  return fetchPage(page.value + 1);
+}
+
+async function overlayOf(rev: number): Promise<OverlayDoc> {
+  if (rev <= 0) return {};
+  return (await props.getRevision(rev)).overlay ?? {};
+}
+
+/** A new View / Diff: older loads still in flight are dropped (see dialogSeq). */
+function startDialog(): number {
+  viewDoc.value = null;
+  diffOriginal.value = '';
+  diffModified.value = '';
+  dialogError.value = null;
+  dialogLoading.value = true;
+  return ++dialogSeq;
+}
+
+async function view(rev: number) {
+  const seq = startDialog();
+  viewRev.value = rev;
+  viewOpen.value = true;
+  try {
+    const doc = await overlayOf(rev);
+    if (seq !== dialogSeq) return;
+    viewDoc.value = doc;
+  } catch (e) {
+    if (seq !== dialogSeq) return;
+    // Never show a failed load as an empty overlay.
+    dialogError.value = isAgentConfigApiError(e)
+      ? e.message
+      : 'Failed to load the revision.';
+  } finally {
+    if (seq === dialogSeq) dialogLoading.value = false;
+  }
+}
+
+/** YAML diff of two revisions' overlays; r0 (and "before r1") is {}. */
+async function diff(from: number, to: number) {
+  const seq = startDialog();
+  diffTitle.value = `r${Math.max(from, 0)} → r${to}`;
+  diffOpen.value = true;
+  try {
+    const [a, b] = await Promise.all([overlayOf(from), overlayOf(to)]);
+    if (seq !== dialogSeq) return;
+    diffOriginal.value = toYaml(a);
+    diffModified.value = toYaml(b);
+  } catch (e) {
+    if (seq !== dialogSeq) return;
+    dialogError.value = isAgentConfigApiError(e)
+      ? e.message
+      : 'Failed to load the revisions.';
+  } finally {
+    if (seq === dialogSeq) dialogLoading.value = false;
+  }
+}
+
+function openRevert(rev: number) {
+  if (!props.canRevert) return;
+  revertRev.value = rev;
+  revertComment.value = '';
+  revertOpen.value = true;
+}
+
+async function doRevert() {
+  reverting.value = true;
+  const rev = revertRev.value;
+  try {
+    const res = await props.api.revert(
+      props.agentId,
+      rev,
+      props.desiredRevision,
+      revertComment.value,
+    );
+    revertOpen.value = false;
+    if (res.created) {
+      toast.add({
+        severity: 'success',
+        summary: 'Reverted',
+        detail: `Reverted to r${rev} as r${res.revision.revision}`,
+        life: 3000,
+      });
+    } else {
+      toast.add({
+        severity: 'info',
+        summary: 'No change',
+        detail: `Already equivalent to r${rev}; no new revision`,
+        life: 4000,
+      });
+    }
+    emit('changed');
+    await reload();
+  } catch (e) {
+    if (isAgentConfigApiError(e) && e.kind === 'conflict') {
+      revertOpen.value = false;
+      toast.add({
+        severity: 'warn',
+        summary: 'Conflict',
+        detail:
+          'Configuration changed by someone else. Refreshed; please retry.',
+        life: 5000,
+      });
+      emit('changed');
+      await reload();
+    } else if (isAgentConfigApiError(e) && e.kind === 'invalid') {
+      revertOpen.value = false;
+      invalidBody.value = e.body ?? { body: e.message };
+      invalidOpen.value = true;
+    } else {
+      toast.add({
+        severity: 'error',
+        summary: 'Revert failed',
+        detail: isAgentConfigApiError(e) ? e.message : 'The revert failed.',
+        life: 5000,
+      });
+    }
+  } finally {
+    reverting.value = false;
+  }
+}
+
+onMounted(reload);
+// A save or revert elsewhere (e.g. the editor) moves the desired revision: reload the list.
+watch(
+  () => props.desiredRevision,
+  (n, o) => {
+    if (n !== o) reload();
+  },
+);
+
+defineExpose({ reload });
+</script>
diff --git a/src/components/agents/config/__tests__/AgentConfigHistory.spec.ts b/src/components/agents/config/__tests__/AgentConfigHistory.spec.ts
new file mode 100644
index 00000000..6be97634
--- /dev/null
+++ b/src/components/agents/config/__tests__/AgentConfigHistory.spec.ts
@@ -0,0 +1,384 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { flushPromises, mount } from '@vue/test-utils';
+import type { AgentConfigApi } from '@/composables/agent-config/useAgentConfigApi';
+import { AgentConfigApiError } from '@/composables/agent-config/api-types';
+import type { AgentConfigRevision, OverlayDoc } from '@/types/agent-config';
+import {
+  configRev6,
+  configRev7,
+  error422,
+  revisionsPage1,
+} from '@/composables/agent-config/__tests__/fixtures';
+import { ADMIN, globalWith, piniaWith } from './helpers';
+
+const toastAdd = vi.hoisted(() => vi.fn());
+vi.mock('primevue/usetoast', () => ({ useToast: () => ({ add: toastAdd }) }));
+// The async CodeMirror wrappers are replaced by synchronous stubs.
+vi.mock('@/components/code-editor', () => import('./codeEditorMock'));
+
+import AgentConfigHistory from '../AgentConfigHistory.vue';
+
+const DialogStub = {
+  name: 'Dialog',
+  props: ['visible', 'header'],
+  template:
+    '<div v-if="visible" class="dialog-stub"><h3>{{ header }}</h3><slot /></div>',
+};
+
+function makeApi(over: Partial<AgentConfigApi> = {}): AgentConfigApi {
+  return {
+    getConfig: vi.fn(),
+    putConfig: vi.fn(),
+    preview: vi.fn(),
+    listRevisions: vi.fn().mockResolvedValue(revisionsPage1),
+    getRevision: vi.fn(),
+    revert: vi.fn().mockResolvedValue({
+      revision: { ...configRev7, revision: 8 },
+      created: true,
+    }),
+    listInstances: vi.fn(),
+    getInstance: vi.fn(),
+    ...over,
+  };
+}
+
+function mountHistory(
+  api: AgentConfigApi,
+  extra: Record<string, unknown> = {},
+  overlays: Record<number, OverlayDoc> = {},
+) {
+  const cache = new Map<number, AgentConfigRevision>();
+  const getRevision = vi.fn(async (rev: number) => {
+    if (!cache.has(rev))
+      cache.set(
+        rev,
+        overlays[rev]
+          ? { ...configRev6, revision: rev, overlay: overlays[rev] }
+          : rev === 7
+            ? configRev7
+            : rev === 6
+              ? configRev6
+              : { ...configRev6, revision: rev, overlay: { verbosity: rev } },
+      );
+    return cache.get(rev)!;
+  });
+  const global = globalWith(piniaWith(ADMIN), { Dialog: DialogStub });
+  const wrapper = mount(AgentConfigHistory, {
+    props: {
+      api,
+      agentId: 'agent-1',
+      fileBase: 'ssh',
+      desiredRevision: 7,
+      canRevert: true,
+      revertTooltip: "You don't have permission to configure agents.",
+      getRevision,
+      ...extra,
+    },
+    global: {
+      ...global,
+      // Record the tooltip on the element so specs can read it.
+      directives: {
+        tooltip: {
+          mounted: setTip,
+          updated: setTip,
+        },
+      },
+    },
+  });
+  return { wrapper, getRevision };
+}
+
+function setTip(
+  el: HTMLElement,
+  binding: { value: { value: string; disabled: boolean } },
+) {
+  el.dataset.tip = binding.value.disabled ? '' : binding.value.value;
+}
+
+const row = (w: ReturnType<typeof mount>, rev: number) =>
+  w.find(`[data-rev="${rev}"]`);
+const revertBtn = (w: ReturnType<typeof mount>, rev: number) =>
+  row(w, rev).find('[data-test="history-revert"]');
+const revertTip = (w: ReturnType<typeof mount>, rev: number) =>
+  (revertBtn(w, rev).element.parentElement as HTMLElement).dataset.tip;
+
+describe('AgentConfigHistory (U3)', () => {
+  beforeEach(() => toastAdd.mockReset());
+
+  it('lists revisions with badges and paginates via totalPages', async () => {
+    const api = makeApi({
+      listRevisions: vi
+        .fn()
+        .mockResolvedValueOnce({
+          ...revisionsPage1,
+          items: revisionsPage1.items.slice(0, 4),
+          totalPages: 2,
+        })
+        .mockResolvedValueOnce({
+          ...revisionsPage1,
+          items: revisionsPage1.items.slice(4),
+          totalPages: 2,
+        }),
+    });
+    const { wrapper } = mountHistory(api);
+    await flushPromises();
+    expect(api.listRevisions).toHaveBeenCalledWith('agent-1', 1, 20);
+    expect(row(wrapper, 7).text()).toContain('Current');
+    expect(row(wrapper, 4).text()).toContain('Revert of r2');
+    expect(row(wrapper, 7).find('[data-test="history-revert"]').exists()).toBe(
+      false,
+    );
+    await wrapper.find('[data-test="history-more"]').trigger('click');
+    await flushPromises();
+    expect(api.listRevisions).toHaveBeenLastCalledWith('agent-1', 2, 20);
+    expect(wrapper.findAll('[data-rev]')).toHaveLength(7);
+    expect(wrapper.find('[data-test="history-more"]').exists()).toBe(false);
+  });
+
+  it('View and Diff lazy-load (cached) revisions', async () => {
+    const { wrapper, getRevision } = mountHistory(makeApi());
+    await flushPromises();
+    await row(wrapper, 6).find('[data-test="history-view"]').trigger('click');
+    await flushPromises();
+    expect(getRevision).toHaveBeenCalledWith(6);
+    expect(wrapper.find('.dialog-stub').text()).toContain('Overlay r6');
+    await row(wrapper, 7)
+      .find('[data-test="history-diff-prev"]')
+      .trigger('click');
+    await flushPromises();
+    expect(getRevision).toHaveBeenCalledWith(7);
+    expect(wrapper.find('.merge-stub').text()).toContain('local-ssh');
+    await row(wrapper, 1)
+      .find('[data-test="history-diff-prev"]')
+      .trigger('click');
+    await flushPromises();
+    // r1 is diffed against {}.
+    expect(getRevision).not.toHaveBeenCalledWith(0);
+  });
+
+  it('reverts with If-Match of the desired revision and the comment; 201 refreshes', async () => {
+    const api = makeApi();
+    const { wrapper } = mountHistory(api);
+    await flushPromises();
+    await row(wrapper, 5).find('[data-test="history-revert"]').trigger('click');
+    await wrapper.find('[data-test="revert-comment"]').setValue('back to 5');
+    await wrapper.find('[data-test="revert-confirm"]').trigger('click');
+    await flushPromises();
+    expect(api.revert).toHaveBeenCalledWith('agent-1', 5, 7, 'back to 5');
+    expect(toastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({ detail: 'Reverted to r5 as r8' }),
+    );
+    expect(wrapper.emitted('changed')).toHaveLength(1);
+    expect(api.listRevisions).toHaveBeenCalledTimes(2);
+  });
+
+  it('a 200 revert says no new revision', async () => {
+    const api = makeApi({
+      revert: vi
+        .fn()
+        .mockResolvedValue({ revision: configRev7, created: false }),
+    });
+    const { wrapper } = mountHistory(api);
+    await flushPromises();
+    await row(wrapper, 5).find('[data-test="history-revert"]').trigger('click');
+    await wrapper.find('[data-test="revert-confirm"]').trigger('click');
+    await flushPromises();
+    expect(toastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        severity: 'info',
+        detail: 'Already equivalent to r5; no new revision',
+      }),
+    );
+  });
+
+  it('Revert is disabled without agent:configure', async () => {
+    const api = makeApi();
+    const { wrapper } = mountHistory(api, { canRevert: false });
+    await flushPromises();
+    expect(revertBtn(wrapper, 5).attributes('disabled')).toBeDefined();
+    expect(revertTip(wrapper, 5)).toBe(
+      "You don't have permission to configure agents.",
+    );
+    await revertBtn(wrapper, 5).trigger('click');
+    expect(wrapper.find('[data-test="revert-dialog"]').exists()).toBe(false);
+  });
+
+  it('agent:configure users can revert to any revision without loading it', async () => {
+    const { wrapper, getRevision } = mountHistory(makeApi());
+    await flushPromises();
+    for (const r of [6, 5, 4, 3, 2, 1]) {
+      expect(revertBtn(wrapper, r).attributes('disabled')).toBeUndefined();
+    }
+    expect(getRevision).not.toHaveBeenCalled();
+  });
+
+  it('handles 409 (refresh + retry) and 422 (error dialog)', async () => {
+    const conflictApi = makeApi({
+      revert: vi.fn().mockRejectedValue(
+        new AgentConfigApiError({
+          kind: 'conflict',
+          status: 409,
+          message: 'c',
+        }),
+      ),
+    });
+    const c = mountHistory(conflictApi);
+    await flushPromises();
+    await row(c.wrapper, 5)
+      .find('[data-test="history-revert"]')
+      .trigger('click');
+    await c.wrapper.find('[data-test="revert-confirm"]').trigger('click');
+    await flushPromises();
+    expect(toastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({ summary: 'Conflict' }),
+    );
+    expect(c.wrapper.emitted('changed')).toHaveLength(1);
+
+    const invalidApi = makeApi({
+      revert: vi.fn().mockRejectedValue(
+        new AgentConfigApiError({
+          kind: 'invalid',
+          status: 422,
+          message: 'invalid',
+          body: error422.errors,
+        }),
+      ),
+    });
+    const i = mountHistory(invalidApi);
+    await flushPromises();
+    await row(i.wrapper, 5)
+      .find('[data-test="history-revert"]')
+      .trigger('click');
+    await i.wrapper.find('[data-test="revert-confirm"]').trigger('click');
+    await flushPromises();
+    const dlg = i.wrapper.find('[data-test="revert-invalid"]');
+    expect(dlg.text()).toContain('/api');
+    expect(dlg.text()).toContain('invalid cron');
+  });
+
+  it('shows the empty state', async () => {
+    const { wrapper } = mountHistory(
+      makeApi({
+        listRevisions: vi
+          .fn()
+          .mockResolvedValue({ items: [], total: 0, totalPages: 1 }),
+      }),
+    );
+    await flushPromises();
+    expect(wrapper.find('[data-test="history-empty"]').text()).toBe(
+      'No revisions yet.',
+    );
+  });
+  it('shows a failed View as an error, not as an empty overlay', async () => {
+    const { wrapper, getRevision } = mountHistory(makeApi());
+    await flushPromises();
+    getRevision.mockRejectedValueOnce(
+      new AgentConfigApiError({
+        kind: 'other',
+        status: 404,
+        message: 'revision not found',
+      }),
+    );
+    await row(wrapper, 5).find('[data-test="history-view"]').trigger('click');
+    await flushPromises();
+    expect(wrapper.find('[data-test="view-error"]').text()).toBe(
+      'revision not found',
+    );
+  });
+
+  it('dedupes rows when offsets shift between pages', async () => {
+    const api = makeApi({
+      listRevisions: vi
+        .fn()
+        .mockResolvedValueOnce({
+          ...revisionsPage1,
+          items: revisionsPage1.items.slice(0, 4),
+          totalPages: 2,
+        })
+        // A new revision shifted the offsets: r4 comes again.
+        .mockResolvedValueOnce({
+          ...revisionsPage1,
+          items: revisionsPage1.items.slice(3),
+          totalPages: 2,
+        }),
+    });
+    const { wrapper } = mountHistory(api);
+    await flushPromises();
+    await wrapper.find('[data-test="history-more"]').trigger('click');
+    await flushPromises();
+    expect(
+      wrapper.findAll('[data-rev]').map((r) => r.attributes('data-rev')),
+    ).toEqual(['7', '6', '5', '4', '3', '2', '1']);
+  });
+  it('hides Load more while the first page loads and after it fails', async () => {
+    let fail!: (e: unknown) => void;
+    const api = makeApi({
+      listRevisions: vi.fn().mockReturnValueOnce(
+        new Promise((_, reject) => {
+          fail = reject;
+        }),
+      ),
+    });
+    const { wrapper } = mountHistory(api);
+    await flushPromises();
+    expect(wrapper.text()).toContain('Loading revisions…');
+    expect(wrapper.find('[data-test="history-more"]').exists()).toBe(false);
+    fail(
+      new AgentConfigApiError({ kind: 'other', status: 500, message: 'boom' }),
+    );
+    await flushPromises();
+    expect(wrapper.text()).toContain('boom');
+    expect(wrapper.text()).toContain('Retry');
+    expect(wrapper.find('[data-test="history-more"]').exists()).toBe(false);
+  });
+
+  it('a slower earlier View never replaces a later one', async () => {
+    const { wrapper, getRevision } = mountHistory(makeApi());
+    await flushPromises();
+    let finishR5!: (r: AgentConfigRevision) => void;
+    getRevision.mockImplementationOnce(
+      () =>
+        new Promise<AgentConfigRevision>((resolve) => {
+          finishR5 = resolve;
+        }),
+    );
+    await row(wrapper, 5).find('[data-test="history-view"]').trigger('click');
+    await row(wrapper, 4).find('[data-test="history-view"]').trigger('click');
+    await flushPromises();
+    finishR5({ ...configRev6, revision: 5, overlay: { verbosity: 5 } });
+    await flushPromises();
+    const dialog = wrapper.find('.dialog-stub');
+    expect(dialog.text()).toContain('Overlay r4');
+    expect(dialog.find('[data-test="yaml-text"]').text()).toContain(
+      'verbosity: 4',
+    );
+    expect(dialog.text()).not.toContain('verbosity: 5');
+  });
+
+  it('a View finishing during a Diff leaves the Diff loading', async () => {
+    const { wrapper, getRevision } = mountHistory(makeApi());
+    await flushPromises();
+    const pending: ((r: AgentConfigRevision) => void)[] = [];
+    const later = () =>
+      new Promise<AgentConfigRevision>((resolve) => pending.push(resolve));
+    getRevision
+      .mockImplementationOnce(later)
+      .mockImplementationOnce(later)
+      .mockImplementationOnce(later);
+    await row(wrapper, 5).find('[data-test="history-view"]').trigger('click');
+    await row(wrapper, 3)
+      .find('[data-test="history-diff-prev"]')
+      .trigger('click');
+    // The View's revision arrives first.
+    pending[0]({ ...configRev6, revision: 5, overlay: { verbosity: 5 } });
+    await flushPromises();
+    expect(wrapper.find('.merge-stub').exists()).toBe(false);
+    expect(wrapper.text()).toContain('Loading…');
+    pending[1]({ ...configRev6, revision: 2, overlay: { verbosity: 2 } });
+    pending[2]({ ...configRev6, revision: 3, overlay: { verbosity: 3 } });
+    await flushPromises();
+    const merge = wrapper.find('.merge-stub').text();
+    expect(merge).toContain('verbosity: 2');
+    expect(merge).toContain('verbosity: 3');
+  });
+});