From 6c8939deb8153920b8e1d035411272c49c972a13 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Sun, 27 Sep 2026 11:04:04 +0100
Subject: [PATCH 1/6] ui(backups): Select deployment destinations

Application backup settings now choose the remote stores that receive future recovery points while preserving the existing all-destinations default.
---
 src/components/BackupsTab.test.ts | 32 ++++++++++
 src/components/BackupsTab.vue     | 99 ++++++++++++++++++++++++++++++-
 src/services/api.ts               |  9 +++
 3 files changed, 139 insertions(+), 1 deletion(-)

diff --git a/src/components/BackupsTab.test.ts b/src/components/BackupsTab.test.ts
index a6c5249..e587fd3 100644
--- a/src/components/BackupsTab.test.ts
+++ b/src/components/BackupsTab.test.ts
@@ -15,6 +15,9 @@ vi.mock("@/services/api", () => ({
       data: { job: { id: "job-123", status: "completed", type: "backup" } },
     }),
     retryPublication: vi.fn().mockResolvedValue({ data: { backup: { status: "completed" } } }),
+    getDeploymentBackupDestinations: vi.fn().mockResolvedValue({ data: { destinations: [] } }),
+    getDeploymentBackupConfig: vi.fn().mockResolvedValue({ data: { backup_config: {} } }),
+    updateDeploymentBackupConfig: vi.fn().mockResolvedValue({ data: { backup_config: {} } }),
   },
   schedulerApi: {
     listTasks: vi.fn().mockResolvedValue({ data: { tasks: [] } }),
@@ -30,6 +33,9 @@ const mockCreateDeploymentBackup = backupsApi.createDeploymentBackup as ReturnTy
 const mockDeleteBackup = backupsApi.delete as ReturnType<typeof vi.fn>;
 const mockRestoreBackup = backupsApi.restore as ReturnType<typeof vi.fn>;
 const mockRetryPublication = backupsApi.retryPublication as ReturnType<typeof vi.fn>;
+const mockGetBackupDestinations = backupsApi.getDeploymentBackupDestinations as ReturnType<typeof vi.fn>;
+const mockGetBackupConfig = backupsApi.getDeploymentBackupConfig as ReturnType<typeof vi.fn>;
+const mockUpdateBackupConfig = backupsApi.updateDeploymentBackupConfig as ReturnType<typeof vi.fn>;
 const mockListTasks = schedulerApi.listTasks as ReturnType<typeof vi.fn>;
 const mockCreateTask = schedulerApi.createTask as ReturnType<typeof vi.fn>;
 
@@ -71,6 +77,8 @@ describe("BackupsTab", () => {
     vi.clearAllMocks();
     mockGetDeploymentBackups.mockResolvedValue({ data: { backups: [] } });
     mockListTasks.mockResolvedValue({ data: { tasks: [] } });
+    mockGetBackupDestinations.mockResolvedValue({ data: { destinations: [] } });
+    mockGetBackupConfig.mockResolvedValue({ data: { backup_config: {} } });
     vi.stubGlobal("URL", {
       ...URL,
       createObjectURL: vi.fn().mockReturnValue("blob:backup"),
@@ -105,6 +113,30 @@ describe("BackupsTab", () => {
   };
 
   describe("Component structure", () => {
+    it("saves selected destinations for this deployment", async () => {
+      mockGetBackupDestinations.mockResolvedValue({
+        data: {
+          destinations: [
+            { name: "primary", kind: "external" },
+            { name: "archive", kind: "managed" },
+          ],
+        },
+      });
+      mockGetBackupConfig.mockResolvedValue({ data: { backup_config: { destinations: ["primary"] } } });
+      mockUpdateBackupConfig.mockResolvedValue({ data: { backup_config: { destinations: ["primary", "archive"] } } });
+      const wrapper = mountBackupsTab();
+      await new Promise((resolve) => setTimeout(resolve, 10));
+
+      const archive = wrapper.findAll(".destination-option").find((option) => option.text().includes("archive"));
+      await archive!.find("input").setValue(true);
+      await wrapper
+        .findAll("button")
+        .find((button) => button.text().includes("Save destinations"))!
+        .trigger("click");
+
+      expect(mockUpdateBackupConfig).toHaveBeenCalledWith("my-app", { destinations: ["primary", "archive"] });
+    });
+
     it("renders the backups tab container", () => {
       const wrapper = mountBackupsTab();
       expect(wrapper.find(".backups-tab").exists()).toBe(true);
diff --git a/src/components/BackupsTab.vue b/src/components/BackupsTab.vue
index bcb70e3..0f98c9d 100644
--- a/src/components/BackupsTab.vue
+++ b/src/components/BackupsTab.vue
@@ -16,6 +16,33 @@
       </div>
     </div>
 
+    <BaseCard v-if="canWrite" title="Backup destinations" class="backup-policy">
+      <p class="policy-copy">Choose every remote store that should receive this application's backups.</p>
+      <p v-if="destinationOptions.length === 0" class="policy-copy">No enabled remote destinations are available.</p>
+      <div v-else class="destination-options">
+        <label v-for="destination in destinationOptions" :key="destination.name" class="destination-option">
+          <input
+            type="checkbox"
+            :checked="selectedDestinations.includes(destination.name)"
+            @change="toggleDestination(destination.name)"
+          />
+          <span>{{ destination.name }}</span>
+          <span class="destination-kind">{{ destination.kind }}</span>
+        </label>
+      </div>
+      <template #footer>
+        <BaseButton
+          variant="primary"
+          size="sm"
+          :loading="savingDestinations"
+          :disabled="destinationOptions.length === 0 || selectedDestinations.length === 0"
+          @click="saveDestinations"
+        >
+          Save destinations
+        </BaseButton>
+      </template>
+    </BaseCard>
+
     <div v-if="loadingBackups" class="loading-state">
       <i class="pi pi-spin pi-spinner" />
       Loading backups...
@@ -228,9 +255,11 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
 import { backupsApi, schedulerApi } from "@/services/api";
-import type { Backup, ScheduledTask, BackupJob } from "@/services/api";
+import type { Backup, ScheduledTask, BackupJob, BackupSpec, BackupDestinationOption } from "@/services/api";
 import { useNotificationsStore } from "@/stores/notifications";
 import ConfirmModal from "@/components/ConfirmModal.vue";
+import BaseCard from "@/components/base/BaseCard.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -251,6 +280,46 @@ const creatingBackup = ref(false);
 const restoringBackup = ref<string | null>(null);
 const downloadingBackup = ref<string | null>(null);
 const retryingPublication = ref<string | null>(null);
+const destinationOptions = ref<BackupDestinationOption[]>([]);
+const selectedDestinations = ref<string[]>([]);
+const backupSpec = ref<BackupSpec>({});
+const savingDestinations = ref(false);
+
+const fetchBackupDestinations = async () => {
+  try {
+    const [optionsResponse, configResponse] = await Promise.all([
+      backupsApi.getDeploymentBackupDestinations(props.deploymentName),
+      backupsApi.getDeploymentBackupConfig(props.deploymentName),
+    ]);
+    destinationOptions.value = optionsResponse.data.destinations || [];
+    backupSpec.value = configResponse.data.backup_config || {};
+    selectedDestinations.value = backupSpec.value.destinations?.length
+      ? [...backupSpec.value.destinations]
+      : destinationOptions.value.map((destination) => destination.name);
+  } catch (err: any) {
+    notifications.error("Backup Policy Failed", err.response?.data?.error || "Failed to load backup destinations");
+  }
+};
+
+const toggleDestination = (name: string) => {
+  selectedDestinations.value = selectedDestinations.value.includes(name)
+    ? selectedDestinations.value.filter((destination) => destination !== name)
+    : [...selectedDestinations.value, name];
+};
+
+const saveDestinations = async () => {
+  savingDestinations.value = true;
+  try {
+    const updated = { ...backupSpec.value, destinations: selectedDestinations.value };
+    const response = await backupsApi.updateDeploymentBackupConfig(props.deploymentName, updated);
+    backupSpec.value = response.data.backup_config;
+    notifications.success("Backup Destinations Saved", "Future backups will use the selected stores");
+  } catch (err: any) {
+    notifications.error("Save Failed", err.response?.data?.error || "Failed to save backup destinations");
+  } finally {
+    savingDestinations.value = false;
+  }
+};
 
 const failedResults = (backup: Backup) =>
   [...(backup.component_results || []), ...(backup.cleanup_results || [])].filter(
@@ -574,6 +643,7 @@ const formatDate = (dateStr: string): string => {
 onMounted(() => {
   fetchBackups();
   fetchScheduledTasks();
+  if (props.canWrite) fetchBackupDestinations();
 });
 
 onUnmounted(() => {
@@ -599,6 +669,33 @@ onUnmounted(() => {
   font-weight: var(--font-semibold);
 }
 
+.backup-policy {
+  margin-bottom: var(--space-4);
+}
+
+.policy-copy {
+  margin: 0;
+  color: var(--text-muted);
+}
+
+.destination-options {
+  display: grid;
+  gap: var(--space-2);
+  margin-top: var(--space-3);
+}
+
+.destination-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text);
+}
+
+.destination-kind {
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+}
+
 .backups-actions {
   display: flex;
   gap: var(--space-2);
diff --git a/src/services/api.ts b/src/services/api.ts
index defe145..a191a75 100755
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1741,6 +1741,12 @@ export interface BackupSpec {
   readonly pre_hooks?: readonly BackupHookSpec[];
   readonly post_hooks?: readonly BackupHookSpec[];
   readonly exclude_patterns?: readonly string[];
+  readonly destinations?: readonly string[];
+}
+
+export interface BackupDestinationOption {
+  readonly name: string;
+  readonly kind: string;
 }
 
 export interface ContainerBackupPath {
@@ -1839,6 +1845,9 @@ export const backupsApi = {
   updateDeploymentBackupConfig: (name: string, config: BackupSpec) =>
     apiClient.put<{ backup_config: BackupSpec }>(`/deployments/${name}/backup-config`, config),
 
+  getDeploymentBackupDestinations: (name: string) =>
+    apiClient.get<{ destinations: BackupDestinationOption[] }>(`/deployments/${name}/backup-destinations`),
+
   getJob: (jobId: string, deploymentName?: string) =>
     apiClient.get<{ job: BackupJob }>(
       deploymentName ? `/deployments/${deploymentName}/backups/jobs/${jobId}` : `/backups/jobs/${jobId}`,

From 059e6b80c614547bd53591bc739e2a6db08ce94c Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Sun, 27 Sep 2026 11:08:18 +0100
Subject: [PATCH 2/6] ui(backups): Show verified remote copies

Backup results now distinguish remote copies that passed checksum verification.
---
 src/components/BackupsTab.test.ts | 12 ++++++++++++
 src/components/BackupsTab.vue     |  2 +-
 src/services/api.ts               |  3 +++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/BackupsTab.test.ts b/src/components/BackupsTab.test.ts
index e587fd3..1f895bf 100644
--- a/src/components/BackupsTab.test.ts
+++ b/src/components/BackupsTab.test.ts
@@ -229,6 +229,18 @@ describe("BackupsTab", () => {
       expect(mockRetryPublication).toHaveBeenCalledWith("my-app", mockBackups[0].id);
     });
 
+    it("shows when a remote copy was verified", async () => {
+      const verified = [
+        {
+          ...mockBackups[0],
+          destination_results: [{ name: "archive", status: "completed", verified: true }],
+        },
+      ];
+      const wrapper = mountBackupsTab({ backups: verified as typeof mockBackups });
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      expect(wrapper.text()).toContain("archive: completed verified");
+    });
+
     it("does not offer publication retry for cleanup-only failures", async () => {
       const cleanupFailure = [
         {
diff --git a/src/components/BackupsTab.vue b/src/components/BackupsTab.vue
index 0f98c9d..ddf771f 100644
--- a/src/components/BackupsTab.vue
+++ b/src/components/BackupsTab.vue
@@ -95,7 +95,7 @@
               :class="destination.status"
               :title="destination.error"
             >
-              {{ destination.name }}: {{ destination.status }}
+              {{ destination.name }}: {{ destination.status }}{{ destination.verified ? " verified" : "" }}
             </span>
           </div>
         </div>
diff --git a/src/services/api.ts b/src/services/api.ts
index a191a75..7a3aa64 100755
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1709,6 +1709,7 @@ export interface Backup {
   readonly deployment_name: string;
   readonly status: "pending" | "in_progress" | "completed" | "partial" | "local_only" | "failed";
   readonly size: number;
+  readonly checksum?: string;
   readonly path: string;
   readonly components: readonly string[];
   readonly error?: string;
@@ -1733,6 +1734,8 @@ export interface BackupDestinationResult {
   readonly name: string;
   readonly status: "completed" | "skipped" | "failed";
   readonly error?: string;
+  readonly checksum?: string;
+  readonly verified: boolean;
 }
 
 export interface BackupSpec {

From 467b01312f7a6e2cab2073fb1ee1383886b05a86 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Sun, 27 Sep 2026 11:12:55 +0100
Subject: [PATCH 3/6] ui(backups): Add isolated restore workflow

Operators can restore a backup under a new deployment name while keeping the recovered services off external networks.
---
 src/components/BackupsTab.test.ts | 25 +++++++++-
 src/components/BackupsTab.vue     | 78 ++++++++++++++++++++++++++++++-
 src/services/api.ts               |  8 +++-
 3 files changed, 108 insertions(+), 3 deletions(-)

diff --git a/src/components/BackupsTab.test.ts b/src/components/BackupsTab.test.ts
index 1f895bf..c2249bf 100644
--- a/src/components/BackupsTab.test.ts
+++ b/src/components/BackupsTab.test.ts
@@ -303,7 +303,7 @@ describe("BackupsTab", () => {
 
       const restoreButtons = wrapper
         .findAll(".backup-actions .btn-secondary")
-        .filter((btn) => btn.text().includes("Restore"));
+        .filter((btn) => btn.text().trim() === "Restore");
       expect(restoreButtons.length).toBe(2);
     });
 
@@ -422,6 +422,29 @@ describe("BackupsTab", () => {
         "my-app",
       );
     });
+
+    it("restores into a separate deployment with isolation enabled", async () => {
+      const wrapper = mountBackupsTab({ backups: mockBackups });
+      await wrapper.vm.$nextTick();
+      await new Promise((r) => setTimeout(r, 10));
+      const vm = wrapper.vm as any;
+      vm.backupToRestore = mockBackups[0];
+      vm.isolatedDeploymentName = "my-app-recovery";
+
+      await vm.restoreBackupIsolated();
+
+      expect(mockRestoreBackup).toHaveBeenCalledWith(
+        "my-app_20250101_120000",
+        {
+          deployment_name: "my-app-recovery",
+          isolated: true,
+          restore_data: true,
+          restore_db: true,
+          stop_first: true,
+        },
+        "my-app",
+      );
+    });
   });
 
   describe("Schedule modal", () => {
diff --git a/src/components/BackupsTab.vue b/src/components/BackupsTab.vue
index ddf771f..8ec4985 100644
--- a/src/components/BackupsTab.vue
+++ b/src/components/BackupsTab.vue
@@ -118,6 +118,15 @@
             <i :class="restoringBackup === backup.id ? 'pi pi-spin pi-spinner' : 'pi pi-replay'" />
             Restore
           </button>
+          <button
+            v-if="canWrite && backup.status !== 'failed'"
+            class="btn btn-sm btn-secondary"
+            :disabled="restoringBackup === backup.id"
+            @click="confirmIsolatedRestore(backup)"
+          >
+            <i class="pi pi-shield" />
+            Restore isolated
+          </button>
           <button
             v-if="backup.status !== 'failed'"
             class="btn btn-sm btn-secondary"
@@ -228,6 +237,28 @@
       @cancel="showDeleteBackupModal = false"
     />
 
+    <div v-if="showIsolatedRestoreModal" class="modal-overlay" @click.self="showIsolatedRestoreModal = false">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>Restore into isolation</h2>
+          <button class="btn-icon" @click="showIsolatedRestoreModal = false"><i class="pi pi-times" /></button>
+        </div>
+        <div class="modal-body">
+          <p>The restored services can communicate with each other, but cannot reach external networks.</p>
+          <div class="form-group">
+            <label for="isolated-deployment-name">New deployment name</label>
+            <BaseInput id="isolated-deployment-name" v-model="isolatedDeploymentName" placeholder="my-app-recovery" />
+          </div>
+        </div>
+        <div class="modal-footer">
+          <BaseButton variant="secondary" @click="showIsolatedRestoreModal = false">Cancel</BaseButton>
+          <BaseButton :disabled="!isolatedDeploymentName.trim()" @click="restoreBackupIsolated"
+            >Restore isolated</BaseButton
+          >
+        </div>
+      </div>
+    </div>
+
     <!-- Delete Task Confirm Modal -->
     <ConfirmModal
       :visible="showDeleteTaskModal"
@@ -260,6 +291,7 @@ import { useNotificationsStore } from "@/stores/notifications";
 import ConfirmModal from "@/components/ConfirmModal.vue";
 import BaseCard from "@/components/base/BaseCard.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -374,6 +406,8 @@ const taskToDelete = ref<number | null>(null);
 const showRestoreModal = ref(false);
 const backupToRestore = ref<Backup | null>(null);
 const restoreMessage = ref("");
+const showIsolatedRestoreModal = ref(false);
+const isolatedDeploymentName = ref("");
 
 const fetchBackups = async () => {
   loadingBackups.value = true;
@@ -419,7 +453,7 @@ const pollActiveJobs = async () => {
   const updatedJobs: TrackedJob[] = [];
   for (const job of activeJobs.value) {
     try {
-      const response = await backupsApi.getJob(job.id, props.deploymentName);
+      const response = await backupsApi.getJob(job.id, job.deployment_name || props.deploymentName);
       const updatedJob = response.data.job;
 
       if (["completed", "partial", "local_only"].includes(updatedJob.status)) {
@@ -513,6 +547,48 @@ const confirmRestore = (backup: Backup) => {
   showRestoreModal.value = true;
 };
 
+const confirmIsolatedRestore = (backup: Backup) => {
+  backupToRestore.value = backup;
+  isolatedDeploymentName.value = `${props.deploymentName}-recovery`;
+  showIsolatedRestoreModal.value = true;
+};
+
+const restoreBackupIsolated = async () => {
+  if (!backupToRestore.value || !isolatedDeploymentName.value.trim()) return;
+  const backupId = backupToRestore.value.id;
+  const deploymentName = isolatedDeploymentName.value.trim();
+  restoringBackup.value = backupId;
+  showIsolatedRestoreModal.value = false;
+  try {
+    const response = await backupsApi.restore(
+      backupId,
+      {
+        deployment_name: deploymentName,
+        isolated: true,
+        restore_data: true,
+        restore_db: true,
+        stop_first: true,
+      },
+      props.deploymentName,
+    );
+    activeJobs.value.push({
+      id: response.data.job_id,
+      type: "restore",
+      status: "running",
+      deployment_name: deploymentName,
+      backup_id: backupId,
+      started_at: new Date().toISOString(),
+    });
+    notifications.success("Isolated Restore Started", `Restoring into ${deploymentName}`);
+    startJobPolling();
+  } catch (err: any) {
+    notifications.error("Restore Failed", err.response?.data?.error || "Failed to start isolated restore");
+    restoringBackup.value = null;
+  } finally {
+    backupToRestore.value = null;
+  }
+};
+
 const restoreBackup = async () => {
   if (!backupToRestore.value) return;
   const backupId = backupToRestore.value.id;
diff --git a/src/services/api.ts b/src/services/api.ts
index 7a3aa64..f2e8212 100755
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1815,7 +1815,13 @@ export const backupsApi = {
 
   restore: (
     id: string,
-    options?: { restore_data?: boolean; restore_db?: boolean; stop_first?: boolean },
+    options?: {
+      deployment_name?: string;
+      isolated?: boolean;
+      restore_data?: boolean;
+      restore_db?: boolean;
+      stop_first?: boolean;
+    },
     deploymentName?: string,
   ) =>
     apiClient.post<{ job_id: string; message: string }>(

From 14020811c0fb8f18151a5356a3f663161cbf614f Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Sun, 27 Sep 2026 16:46:40 +0100
Subject: [PATCH 4/6] ui(backups): Manage storage policy together

The backup view now shows storage usage, failures, retention cleanup, exclusions, alerts, schedules, and destinations together.
---
 src/components/BackupsTab.test.ts | 23 +++++++++-
 src/components/BackupsTab.vue     | 75 ++++++++++++++++++++++++++++---
 src/services/api.ts               | 24 ++++++++++
 3 files changed, 113 insertions(+), 9 deletions(-)

diff --git a/src/components/BackupsTab.test.ts b/src/components/BackupsTab.test.ts
index c2249bf..ea79cce 100644
--- a/src/components/BackupsTab.test.ts
+++ b/src/components/BackupsTab.test.ts
@@ -18,6 +18,20 @@ vi.mock("@/services/api", () => ({
     getDeploymentBackupDestinations: vi.fn().mockResolvedValue({ data: { destinations: [] } }),
     getDeploymentBackupConfig: vi.fn().mockResolvedValue({ data: { backup_config: {} } }),
     updateDeploymentBackupConfig: vi.fn().mockResolvedValue({ data: { backup_config: {} } }),
+    getDeploymentBackupPolicy: vi.fn().mockResolvedValue({
+      data: {
+        policy: {
+          config: {},
+          schedules: [],
+          backup_count: 0,
+          local_bytes: 0,
+          failed_count: 0,
+          size_alert: false,
+          cleanup_preview: { keep_count: 7, delete_ids: [], reclaimed_bytes: 0 },
+        },
+      },
+    }),
+    cleanupDeploymentBackups: vi.fn().mockResolvedValue({ data: { deleted: 0 } }),
   },
   schedulerApi: {
     listTasks: vi.fn().mockResolvedValue({ data: { tasks: [] } }),
@@ -131,10 +145,15 @@ describe("BackupsTab", () => {
       await archive!.find("input").setValue(true);
       await wrapper
         .findAll("button")
-        .find((button) => button.text().includes("Save destinations"))!
+        .find((button) => button.text().includes("Save policy"))!
         .trigger("click");
 
-      expect(mockUpdateBackupConfig).toHaveBeenCalledWith("my-app", { destinations: ["primary", "archive"] });
+      expect(mockUpdateBackupConfig).toHaveBeenCalledWith("my-app", {
+        destinations: ["primary", "archive"],
+        retention_count: 7,
+        size_alert_bytes: 0,
+        exclude_patterns: [],
+      });
     });
 
     it("renders the backups tab container", () => {
diff --git a/src/components/BackupsTab.vue b/src/components/BackupsTab.vue
index 8ec4985..c6835d1 100644
--- a/src/components/BackupsTab.vue
+++ b/src/components/BackupsTab.vue
@@ -30,16 +30,41 @@
           <span class="destination-kind">{{ destination.kind }}</span>
         </label>
       </div>
+      <div class="policy-fields">
+        <label>
+          Keep local backups
+          <BaseInput v-model="retentionCount" type="number" />
+        </label>
+        <label>
+          Alert above MiB
+          <BaseInput v-model="sizeAlertMiB" type="number" />
+        </label>
+        <label class="policy-exclusions">
+          Exclusions, one pattern per line
+          <textarea v-model="excludePatterns" class="form-control" rows="3" placeholder="cache/**" />
+        </label>
+      </div>
+      <div v-if="policy" class="policy-summary" :class="{ warning: policy.size_alert }">
+        {{ policy.backup_count }} backups, {{ formatBytes(policy.local_bytes) }} local,
+        {{ policy.failed_count }} needing attention.
+        <span v-if="policy.cleanup_preview.delete_ids.length">
+          Cleanup would remove {{ policy.cleanup_preview.delete_ids.length }} and reclaim
+          {{ formatBytes(policy.cleanup_preview.reclaimed_bytes) }}.
+        </span>
+      </div>
       <template #footer>
         <BaseButton
           variant="primary"
           size="sm"
           :loading="savingDestinations"
           :disabled="destinationOptions.length === 0 || selectedDestinations.length === 0"
-          @click="saveDestinations"
+          @click="savePolicy"
         >
-          Save destinations
+          Save policy
         </BaseButton>
+        <BaseButton v-if="policy?.cleanup_preview.delete_ids.length" variant="secondary" size="sm" @click="applyCleanup"
+          >Apply cleanup</BaseButton
+        >
       </template>
     </BaseCard>
 
@@ -286,7 +311,14 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
 import { backupsApi, schedulerApi } from "@/services/api";
-import type { Backup, ScheduledTask, BackupJob, BackupSpec, BackupDestinationOption } from "@/services/api";
+import type {
+  Backup,
+  ScheduledTask,
+  BackupJob,
+  BackupSpec,
+  BackupDestinationOption,
+  DeploymentBackupPolicy,
+} from "@/services/api";
 import { useNotificationsStore } from "@/stores/notifications";
 import ConfirmModal from "@/components/ConfirmModal.vue";
 import BaseCard from "@/components/base/BaseCard.vue";
@@ -316,15 +348,24 @@ const destinationOptions = ref<BackupDestinationOption[]>([]);
 const selectedDestinations = ref<string[]>([]);
 const backupSpec = ref<BackupSpec>({});
 const savingDestinations = ref(false);
+const retentionCount = ref(7);
+const sizeAlertMiB = ref(0);
+const excludePatterns = ref("");
+const policy = ref<DeploymentBackupPolicy | null>(null);
 
 const fetchBackupDestinations = async () => {
   try {
-    const [optionsResponse, configResponse] = await Promise.all([
+    const [optionsResponse, configResponse, policyResponse] = await Promise.all([
       backupsApi.getDeploymentBackupDestinations(props.deploymentName),
       backupsApi.getDeploymentBackupConfig(props.deploymentName),
+      backupsApi.getDeploymentBackupPolicy(props.deploymentName),
     ]);
     destinationOptions.value = optionsResponse.data.destinations || [];
     backupSpec.value = configResponse.data.backup_config || {};
+    policy.value = policyResponse.data.policy;
+    retentionCount.value = backupSpec.value.retention_count || 7;
+    sizeAlertMiB.value = Math.round((backupSpec.value.size_alert_bytes || 0) / 1024 / 1024);
+    excludePatterns.value = (backupSpec.value.exclude_patterns || []).join("\n");
     selectedDestinations.value = backupSpec.value.destinations?.length
       ? [...backupSpec.value.destinations]
       : destinationOptions.value.map((destination) => destination.name);
@@ -339,13 +380,23 @@ const toggleDestination = (name: string) => {
     : [...selectedDestinations.value, name];
 };
 
-const saveDestinations = async () => {
+const savePolicy = async () => {
   savingDestinations.value = true;
   try {
-    const updated = { ...backupSpec.value, destinations: selectedDestinations.value };
+    const updated = {
+      ...backupSpec.value,
+      destinations: selectedDestinations.value,
+      retention_count: Number(retentionCount.value),
+      size_alert_bytes: Number(sizeAlertMiB.value) * 1024 * 1024,
+      exclude_patterns: excludePatterns.value
+        .split("\n")
+        .map((pattern) => pattern.trim())
+        .filter(Boolean),
+    };
     const response = await backupsApi.updateDeploymentBackupConfig(props.deploymentName, updated);
     backupSpec.value = response.data.backup_config;
-    notifications.success("Backup Destinations Saved", "Future backups will use the selected stores");
+    notifications.success("Backup Policy Saved", "Backup storage policy has been updated");
+    await fetchBackupDestinations();
   } catch (err: any) {
     notifications.error("Save Failed", err.response?.data?.error || "Failed to save backup destinations");
   } finally {
@@ -353,6 +404,16 @@ const saveDestinations = async () => {
   }
 };
 
+const applyCleanup = async () => {
+  try {
+    const response = await backupsApi.cleanupDeploymentBackups(props.deploymentName, Number(retentionCount.value));
+    notifications.success("Cleanup Complete", `${response.data.deleted} local backups removed`);
+    await Promise.all([fetchBackups(), fetchBackupDestinations()]);
+  } catch (err: any) {
+    notifications.error("Cleanup Failed", err.response?.data?.error || "Failed to clean up backups");
+  }
+};
+
 const failedResults = (backup: Backup) =>
   [...(backup.component_results || []), ...(backup.cleanup_results || [])].filter(
     (result) => result.status === "failed",
diff --git a/src/services/api.ts b/src/services/api.ts
index f2e8212..e9a4b6a 100755
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1745,6 +1745,24 @@ export interface BackupSpec {
   readonly post_hooks?: readonly BackupHookSpec[];
   readonly exclude_patterns?: readonly string[];
   readonly destinations?: readonly string[];
+  readonly retention_count?: number;
+  readonly size_alert_bytes?: number;
+}
+
+export interface BackupCleanupPreview {
+  readonly keep_count: number;
+  readonly delete_ids: readonly string[];
+  readonly reclaimed_bytes: number;
+}
+
+export interface DeploymentBackupPolicy {
+  readonly config: BackupSpec;
+  readonly schedules: readonly ScheduledTask[];
+  readonly backup_count: number;
+  readonly local_bytes: number;
+  readonly failed_count: number;
+  readonly size_alert: boolean;
+  readonly cleanup_preview: BackupCleanupPreview;
 }
 
 export interface BackupDestinationOption {
@@ -1854,6 +1872,12 @@ export const backupsApi = {
   updateDeploymentBackupConfig: (name: string, config: BackupSpec) =>
     apiClient.put<{ backup_config: BackupSpec }>(`/deployments/${name}/backup-config`, config),
 
+  getDeploymentBackupPolicy: (name: string) =>
+    apiClient.get<{ policy: DeploymentBackupPolicy }>(`/deployments/${name}/backup-policy`),
+
+  cleanupDeploymentBackups: (name: string, keep: number) =>
+    apiClient.post<{ deleted: number }>(`/deployments/${name}/backup-cleanup`, { keep }),
+
   getDeploymentBackupDestinations: (name: string) =>
     apiClient.get<{ destinations: BackupDestinationOption[] }>(`/deployments/${name}/backup-destinations`),
 

From 7f5bc92bcf4b3c06236babe8e0466ea5dd176306 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Sun, 27 Sep 2026 16:52:32 +0100
Subject: [PATCH 5/6] ui(migrations): Guide import and cutover

Operators can record inventory, transfers, synchronization, DNS checks, cutover, and source retirement readiness in one workflow.
---
 src/components/MigrationTab.test.ts    |  38 ++++++++
 src/components/MigrationTab.vue        | 117 +++++++++++++++++++++++++
 src/services/api.ts                    |  35 ++++++++
 src/views/DeploymentDetailView.test.ts |   5 +-
 src/views/DeploymentDetailView.vue     |   3 +
 5 files changed, 196 insertions(+), 2 deletions(-)
 create mode 100644 src/components/MigrationTab.test.ts
 create mode 100644 src/components/MigrationTab.vue

diff --git a/src/components/MigrationTab.test.ts b/src/components/MigrationTab.test.ts
new file mode 100644
index 0000000..2e7c7f5
--- /dev/null
+++ b/src/components/MigrationTab.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+import MigrationTab from "./MigrationTab.vue";
+import { migrationsApi } from "@/services/api";
+
+vi.mock("@/services/api", () => ({
+  migrationsApi: {
+    get: vi.fn().mockResolvedValue({ data: { migration: { plan: null, retirement_ready: false, blockers: [] } } }),
+    update: vi.fn().mockResolvedValue({ data: { migration: { plan: null, retirement_ready: false, blockers: [] } } }),
+    checkDns: vi.fn(),
+  },
+}));
+
+describe("MigrationTab", () => {
+  it("saves the source inventory and transfer state", async () => {
+    const wrapper = mount(MigrationTab, {
+      props: { deploymentName: "shop" },
+      global: { plugins: [createTestingPinia({ createSpy: vi.fn })] },
+    });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    const vm = wrapper.vm as any;
+    vm.plan.source = "legacy";
+    vm.plan.inventory_complete = true;
+    vm.addSite();
+    vm.plan.sites[0].hostname = "shop.example.com";
+    vm.markTransfer();
+    await vm.save();
+    expect(migrationsApi.update).toHaveBeenCalledWith(
+      "shop",
+      expect.objectContaining({
+        source: "legacy",
+        inventory_complete: true,
+        sites: [expect.objectContaining({ hostname: "shop.example.com", transferred: true })],
+      }),
+    );
+  });
+});
diff --git a/src/components/MigrationTab.vue b/src/components/MigrationTab.vue
new file mode 100644
index 0000000..82aa7b2
--- /dev/null
+++ b/src/components/MigrationTab.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="migration-tab">
+    <BaseCard title="Migration and cutover">
+      <div class="migration-grid">
+        <BaseField label="Source"><BaseInput v-model="plan.source" placeholder="legacy-server" /></BaseField>
+        <BaseField label="Target address"
+          ><BaseInput v-model="plan.expected_address" placeholder="203.0.113.10"
+        /></BaseField>
+      </div>
+      <label class="inventory-check"
+        ><input v-model="plan.inventory_complete" type="checkbox" /> Source inventory complete</label
+      >
+      <div v-for="(site, index) in plan.sites" :key="index" class="site-row">
+        <BaseInput v-model="site.hostname" placeholder="site.example.com" />
+        <BaseInput v-model="site.source_path" placeholder="/srv/site" />
+        <BaseInput v-model="site.bytes" type="number" placeholder="Bytes" />
+        <label><input v-model="site.transferred" type="checkbox" /> Transferred</label>
+        <BaseButton variant="secondary" size="sm" @click="plan.sites.splice(index, 1)">Remove</BaseButton>
+      </div>
+      <BaseButton variant="secondary" size="sm" @click="addSite">Add site</BaseButton>
+      <div class="milestones">
+        <BaseButton variant="secondary" @click="markTransfer">Record initial transfer</BaseButton>
+        <BaseButton variant="secondary" @click="markSync">Record synchronization</BaseButton>
+        <BaseButton variant="secondary" @click="markCutover">Record cutover</BaseButton>
+        <BaseButton variant="secondary" @click="checkDns">Check DNS</BaseButton>
+      </div>
+      <div v-if="status" class="readiness" :class="{ ready: status.retirement_ready }">
+        <strong>{{ status.retirement_ready ? "Source can be retired" : "Source must remain online" }}</strong>
+        <ul v-if="status.blockers.length">
+          <li v-for="blocker in status.blockers" :key="blocker">{{ blocker }}</li>
+        </ul>
+      </div>
+      <template #footer><BaseButton :loading="saving" @click="save">Save migration</BaseButton></template>
+    </BaseCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { migrationsApi } from "@/services/api";
+import type { MigrationPlan, MigrationStatus } from "@/services/api";
+import { useNotificationsStore } from "@/stores/notifications";
+import BaseButton from "@/components/base/BaseButton.vue";
+import BaseCard from "@/components/base/BaseCard.vue";
+import BaseField from "@/components/base/BaseField.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+
+const props = defineProps<{ deploymentName: string }>();
+const notifications = useNotificationsStore();
+const saving = ref(false);
+const status = ref<MigrationStatus | null>(null);
+const plan = reactive<MigrationPlan>({ source: "", sites: [], inventory_complete: false });
+
+const load = async () => {
+  const response = await migrationsApi.get(props.deploymentName);
+  status.value = response.data.migration;
+  if (status.value.plan) Object.assign(plan, status.value.plan);
+};
+const save = async () => {
+  saving.value = true;
+  try {
+    const response = await migrationsApi.update(props.deploymentName, plan);
+    status.value = response.data.migration;
+    notifications.success("Migration Saved", "Migration progress has been updated");
+  } catch (err: any) {
+    notifications.error("Migration Failed", err.response?.data?.error || "Failed to save migration");
+  } finally {
+    saving.value = false;
+  }
+};
+const addSite = () =>
+  plan.sites.push({ hostname: "", source_path: "", bytes: 0, transferred: false, dns_propagated: false });
+const now = () => new Date().toISOString();
+const markTransfer = () => {
+  plan.initial_transfer_at = now();
+  plan.sites.forEach((site) => (site.transferred = true));
+};
+const markSync = () => {
+  plan.last_sync_at = now();
+  plan.sites.forEach((site) => (site.last_synced_at = plan.last_sync_at));
+};
+const markCutover = () => (plan.cutover_at = now());
+const checkDns = async () => {
+  const response = await migrationsApi.checkDns(props.deploymentName);
+  status.value = response.data.migration;
+  if (status.value.plan) Object.assign(plan, status.value.plan);
+};
+onMounted(load);
+</script>
+
+<style scoped>
+.migration-grid,
+.site-row,
+.milestones {
+  display: flex;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-3);
+}
+.site-row > * {
+  flex: 1;
+  min-width: 150px;
+}
+.inventory-check {
+  display: block;
+  margin-bottom: var(--space-3);
+}
+.readiness {
+  margin-top: var(--space-4);
+  padding: var(--space-3);
+  border-radius: var(--radius-sm);
+  background: var(--warning-bg);
+}
+.readiness.ready {
+  background: var(--success-bg);
+}
+</style>
diff --git a/src/services/api.ts b/src/services/api.ts
index e9a4b6a..66906e0 100755
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1765,6 +1765,41 @@ export interface DeploymentBackupPolicy {
   readonly cleanup_preview: BackupCleanupPreview;
 }
 
+export interface MigrationSite {
+  hostname: string;
+  source_path?: string;
+  bytes?: number;
+  transferred: boolean;
+  last_synced_at?: string;
+  resolved?: readonly string[];
+  dns_propagated: boolean;
+}
+
+export interface MigrationPlan {
+  source: string;
+  sites: MigrationSite[];
+  inventory_complete: boolean;
+  initial_transfer_at?: string;
+  last_sync_at?: string;
+  cutover_at?: string;
+  expected_address?: string;
+  notes?: string;
+}
+
+export interface MigrationStatus {
+  plan: MigrationPlan | null;
+  retirement_ready: boolean;
+  blockers: readonly string[];
+}
+
+export const migrationsApi = {
+  get: (name: string) => apiClient.get<{ migration: MigrationStatus }>(`/deployments/${name}/migration`),
+  update: (name: string, plan: MigrationPlan) =>
+    apiClient.put<{ migration: MigrationStatus }>(`/deployments/${name}/migration`, plan),
+  checkDns: (name: string) =>
+    apiClient.post<{ migration: MigrationStatus }>(`/deployments/${name}/migration/check-dns`),
+};
+
 export interface BackupDestinationOption {
   readonly name: string;
   readonly kind: string;
diff --git a/src/views/DeploymentDetailView.test.ts b/src/views/DeploymentDetailView.test.ts
index 9b892b1..3ac4f82 100644
--- a/src/views/DeploymentDetailView.test.ts
+++ b/src/views/DeploymentDetailView.test.ts
@@ -213,11 +213,11 @@ describe("DeploymentDetailView", () => {
   });
 
   describe("Tab navigation", () => {
-    it("displays all ten tabs", async () => {
+    it("displays all eleven tabs", async () => {
       const wrapper = mountView();
       await flushPromises();
       const tabs = wrapper.findAll(".tab-btn");
-      expect(tabs.length).toBe(10);
+      expect(tabs.length).toBe(11);
     });
 
     it("has Overview tab", async () => {
@@ -341,6 +341,7 @@ describe("DeploymentDetailView", () => {
         { id: "databases", label: "Databases", icon: "pi pi-database" },
         { id: "actions", label: "Quick Actions", icon: "pi pi-bolt" },
         { id: "backups", label: "Backups", icon: "pi pi-history" },
+        { id: "migration", label: "Migration", icon: "pi pi-directions" },
         { id: "security", label: "Security", icon: "pi pi-shield" },
         { id: "config", label: "Configuration", icon: "pi pi-cog" },
       ]);
diff --git a/src/views/DeploymentDetailView.vue b/src/views/DeploymentDetailView.vue
index 735ecfd..b306882 100755
--- a/src/views/DeploymentDetailView.vue
+++ b/src/views/DeploymentDetailView.vue
@@ -784,6 +784,7 @@
           :can-schedule="canManageSchedules"
           :can-delete-schedule="canDeleteSchedules"
         />
+        <MigrationTab v-if="activeTab === 'migration'" :deployment-name="route.params.name as string" />
 
         <div v-for="pt in pluginTabs" :key="pt.id" v-show="activeTab === pt.id" class="plugin-tab">
           <PluginSlot
@@ -2043,6 +2044,7 @@ import LogViewer from "@/components/LogViewer.vue";
 import ConfirmModal from "@/components/ConfirmModal.vue";
 import ContainerTerminal from "@/components/ContainerTerminal.vue";
 import BackupsTab from "@/components/BackupsTab.vue";
+import MigrationTab from "@/components/MigrationTab.vue";
 import PluginSlot from "@/components/plugins/PluginSlot.vue";
 import { usePluginsStore } from "@/stores/plugins";
 import DomainsManager from "@/components/DomainsManager.vue";
@@ -2197,6 +2199,7 @@ const tabs = [
   { id: "databases", label: "Databases", icon: "pi pi-database" },
   { id: "actions", label: "Quick Actions", icon: "pi pi-bolt" },
   { id: "backups", label: "Backups", icon: "pi pi-history" },
+  { id: "migration", label: "Migration", icon: "pi pi-directions" },
   { id: "security", label: "Security", icon: "pi pi-shield" },
   { id: "config", label: "Configuration", icon: "pi pi-cog" },
 ];

From 33a4ab2a9cde2aff740e9c0731b687f04186d761 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Sun, 27 Sep 2026 18:23:56 +0100
Subject: [PATCH 6/6] fix(backups): Match cleanup to its preview

Cleanup now uses the saved retention value shown in the preview.
Unsaved policy edits cannot delete more backups than the preview reports.
---
 src/components/BackupsTab.test.ts | 40 +++++++++++++++++++++++++++++++
 src/components/BackupsTab.vue     |  6 ++++-
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/components/BackupsTab.test.ts b/src/components/BackupsTab.test.ts
index ea79cce..a04f23e 100644
--- a/src/components/BackupsTab.test.ts
+++ b/src/components/BackupsTab.test.ts
@@ -50,6 +50,8 @@ const mockRetryPublication = backupsApi.retryPublication as ReturnType<typeof vi
 const mockGetBackupDestinations = backupsApi.getDeploymentBackupDestinations as ReturnType<typeof vi.fn>;
 const mockGetBackupConfig = backupsApi.getDeploymentBackupConfig as ReturnType<typeof vi.fn>;
 const mockUpdateBackupConfig = backupsApi.updateDeploymentBackupConfig as ReturnType<typeof vi.fn>;
+const mockGetBackupPolicy = backupsApi.getDeploymentBackupPolicy as ReturnType<typeof vi.fn>;
+const mockCleanupBackups = backupsApi.cleanupDeploymentBackups as ReturnType<typeof vi.fn>;
 const mockListTasks = schedulerApi.listTasks as ReturnType<typeof vi.fn>;
 const mockCreateTask = schedulerApi.createTask as ReturnType<typeof vi.fn>;
 
@@ -93,6 +95,19 @@ describe("BackupsTab", () => {
     mockListTasks.mockResolvedValue({ data: { tasks: [] } });
     mockGetBackupDestinations.mockResolvedValue({ data: { destinations: [] } });
     mockGetBackupConfig.mockResolvedValue({ data: { backup_config: {} } });
+    mockGetBackupPolicy.mockResolvedValue({
+      data: {
+        policy: {
+          config: {},
+          schedules: [],
+          backup_count: 0,
+          local_bytes: 0,
+          failed_count: 0,
+          size_alert: false,
+          cleanup_preview: { keep_count: 7, delete_ids: [], reclaimed_bytes: 0 },
+        },
+      },
+    });
     vi.stubGlobal("URL", {
       ...URL,
       createObjectURL: vi.fn().mockReturnValue("blob:backup"),
@@ -156,6 +171,31 @@ describe("BackupsTab", () => {
       });
     });
 
+    it("applies the retention value shown in the cleanup preview", async () => {
+      mockGetBackupPolicy.mockResolvedValue({
+        data: {
+          policy: {
+            config: { retention_count: 7 },
+            schedules: [],
+            backup_count: 9,
+            local_bytes: 0,
+            failed_count: 0,
+            size_alert: false,
+            cleanup_preview: { keep_count: 7, delete_ids: ["old"], reclaimed_bytes: 1 },
+          },
+        },
+      });
+      const wrapper = mountBackupsTab();
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      await wrapper.find('input[type="number"]').setValue(1);
+      await wrapper
+        .findAll("button")
+        .find((button) => button.text().includes("Apply cleanup"))!
+        .trigger("click");
+
+      expect(mockCleanupBackups).toHaveBeenCalledWith("my-app", 7);
+    });
+
     it("renders the backups tab container", () => {
       const wrapper = mountBackupsTab();
       expect(wrapper.find(".backups-tab").exists()).toBe(true);
diff --git a/src/components/BackupsTab.vue b/src/components/BackupsTab.vue
index c6835d1..9898f68 100644
--- a/src/components/BackupsTab.vue
+++ b/src/components/BackupsTab.vue
@@ -406,7 +406,11 @@ const savePolicy = async () => {
 
 const applyCleanup = async () => {
   try {
-    const response = await backupsApi.cleanupDeploymentBackups(props.deploymentName, Number(retentionCount.value));
+    if (!policy.value) return;
+    const response = await backupsApi.cleanupDeploymentBackups(
+      props.deploymentName,
+      policy.value.cleanup_preview.keep_count,
+    );
     notifications.success("Cleanup Complete", `${response.data.deleted} local backups removed`);
     await Promise.all([fetchBackups(), fetchBackupDestinations()]);
   } catch (err: any) {