From 36a09c495fcfb7eb23e2cf92b68d5ab296a8f3f4 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Sat, 18 Apr 2026 15:47:28 +0100
Subject: [PATCH 01/13] feat: card alignment + fix modals

---
 .../servers/backups/BackupCreateModal.vue     |   4 +-
 .../servers/backups/BackupDeleteModal.vue     |   4 +-
 .../components/servers/backups/BackupItem.vue | 126 +++++++------
 .../servers/backups/BackupRenameModal.vue     |  42 ++---
 .../servers/backups/BackupRestoreModal.vue    |   4 +-
 .../src/stories/servers/BackupItem.stories.ts | 167 ++++++++++++++++++
 6 files changed, 270 insertions(+), 77 deletions(-)
 create mode 100644 packages/ui/src/stories/servers/BackupItem.stories.ts

diff --git a/packages/ui/src/components/servers/backups/BackupCreateModal.vue b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
index b907c8487c..da00d1a75c 100644
--- a/packages/ui/src/components/servers/backups/BackupCreateModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
@@ -45,9 +45,9 @@
 			</Transition>
 		</div>
 		<template #actions>
-			<div class="w-full flex flex-row gap-2 justify-end">
+			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border-[1px] !border-surface-4" @click="hideModal">
+					<button class="!border !border-surface-4" @click="hideModal">
 						<XIcon />
 						Cancel
 					</button>
diff --git a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
index d53d242c68..3634f099ba 100644
--- a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
@@ -13,8 +13,8 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled>
-					<button @click="modal?.hide()">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-4" @click="modal?.hide()">
 						<XIcon />
 						Cancel
 					</button>
diff --git a/packages/ui/src/components/servers/backups/BackupItem.vue b/packages/ui/src/components/servers/backups/BackupItem.vue
index 66b9cacfbe..61ab7175ce 100644
--- a/packages/ui/src/components/servers/backups/BackupItem.vue
+++ b/packages/ui/src/components/servers/backups/BackupItem.vue
@@ -2,11 +2,12 @@
 import type { Archon } from '@modrinth/api-client'
 import {
 	ClipboardCopyIcon,
-	ClockIcon,
 	DownloadIcon,
 	EditIcon,
+	LoaderCircleIcon,
 	MoreVerticalIcon,
 	RotateCounterClockwiseIcon,
+	ShieldIcon,
 	TrashIcon,
 	UserRoundIcon,
 	XIcon,
@@ -85,7 +86,7 @@ const activeOperation = computed(() => creating.value || restoring.value)
 
 const backupIcon = computed(() => {
 	if (props.backup.automated) {
-		return ClockIcon
+		return ShieldIcon
 	}
 	return UserRoundIcon
 })
@@ -167,35 +168,54 @@ const messages = defineMessages({
 		id: 'servers.backups.item.manual-backup',
 		defaultMessage: 'Manual backup',
 	},
+	creatingBackup: {
+		id: 'servers.backups.item.creating-backup',
+		defaultMessage: 'Creating backup\u2026',
+	},
+	restoring: {
+		id: 'servers.backups.item.restoring',
+		defaultMessage: 'Restoring',
+	},
 })
 </script>
 <template>
 	<div
-		class="grid items-center gap-4 rounded-2xl bg-bg-raised p-4 shadow-md"
-		:class="
-			preview
-				? 'grid-cols-1'
-				: 'grid-cols-[auto_1fr_auto] md:grid-cols-[minmax(0,1fr)_400px_minmax(0,1fr)]'
-		"
+		class="flex items-center gap-4 rounded-[20px] bg-surface-3 p-4 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.3),0px_1px_3px_0px_rgba(0,0,0,0.15)]"
 	>
-		<div class="flex flex-row gap-4 items-center">
+		<div class="flex min-w-0 flex-1 items-center gap-4">
+			<!-- Icon tile -->
 			<div
-				class="flex size-12 shrink-0 items-center justify-center rounded-2xl border-solid border-[1px] border-surface-5 bg-surface-4 md:size-16"
+				class="flex shrink-0 items-center justify-center rounded-2xl border border-solid border-surface-5 bg-surface-4"
+				:class="preview ? 'size-10' : 'size-14'"
 			>
-				<component :is="backupIcon" class="size-7 text-secondary md:size-10" />
+				<LoaderCircleIcon
+					v-if="activeOperation"
+					v-tooltip="restoring ? formatMessage(messages.restoring) : undefined"
+					class="animate-spin text-secondary"
+					:class="preview ? 'size-6' : 'size-10'"
+				/>
+				<component
+					:is="backupIcon"
+					v-else
+					class="text-secondary"
+					:class="preview ? 'size-6' : 'size-10'"
+				/>
 			</div>
 
+			<!-- Name + badge + subtitle -->
 			<div class="flex min-w-0 flex-col gap-1.5">
-				<div class="flex flex-wrap items-center gap-2">
-					<span class="truncate font-semibold text-contrast max-w-[400px]">{{ backup.name }}</span>
+				<div class="flex min-w-0 items-center gap-2">
+					<span class="min-w-0 truncate font-semibold text-contrast">
+						{{ creating ? formatMessage(messages.creatingBackup) : backup.name }}
+					</span>
 					<span
 						v-if="backup.automated"
-						class="rounded-full border-solid border-[1px] border-surface-5 bg-surface-4 px-2.5 py-1 text-sm text-secondary"
+						class="shrink-0 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1 text-sm font-medium text-secondary"
 					>
 						{{ formatMessage(messages.auto) }}
 					</span>
 				</div>
-				<div class="flex items-center gap-1.5 text-sm text-secondary">
+				<div class="flex items-center gap-1.5 text-sm font-medium text-secondary">
 					<template v-if="preview">
 						<span>{{ formatDateTime(backup.created_at) }}</span>
 					</template>
@@ -227,47 +247,51 @@ const messages = defineMessages({
 			</div>
 		</div>
 
-		<div
-			v-if="!preview"
-			class="col-span-full row-start-2 flex flex-col gap-2 md:col-span-1 md:row-start-auto md:items-center"
-		>
-			<span class="w-full font-medium text-contrast md:text-center">
-				{{ formatDateTime(backup.created_at) }}
-			</span>
+		<!-- Date + size (middle column) -->
+		<div v-if="!preview" class="flex w-[240px] shrink-0 flex-col gap-1.5">
+			<span class="whitespace-nowrap font-medium text-contrast">{{ formatDateTime(backup.created_at) }}</span>
 			<!-- TODO: Uncomment when API supports size field -->
-			<!-- <span class="text-secondary">{{ formatBytes(backup.size) }}</span> -->
+			<!-- <span class="font-normal text-secondary">{{ formatBytes(backup.size) }}</span> -->
 		</div>
 
-		<div v-if="!preview" class="flex shrink-0 items-center gap-2 md:justify-self-end">
-			<ButtonStyled v-if="!activeOperation" color="brand" type="outlined">
-				<button
-					v-tooltip="props.restoreDisabled"
-					class="!border-[1px]"
-					:disabled="!!props.restoreDisabled"
-					@click="() => emit('restore')"
-				>
-					<RotateCounterClockwiseIcon class="size-5" />
-					{{ formatMessage(messages.restore) }}
+		<!-- Right side actions -->
+		<div v-if="!preview" class="flex w-[180px] shrink-0 items-center justify-end gap-2">
+			<ButtonStyled v-if="creating" type="outlined">
+				<button @click="() => emit('delete', true)" class="!border !border-surface-4">
+					{{ formatMessage(commonMessages.cancelButton) }}
 				</button>
 			</ButtonStyled>
-			<ButtonStyled circular type="transparent">
-				<OverflowMenu :options="overflowMenuOptions">
-					<MoreVerticalIcon class="size-5" />
-					<template #copy-id>
-						<ClipboardCopyIcon class="size-5" />
-						{{ formatMessage(commonMessages.copyIdButton) }}
-					</template>
-					<template #download>
-						<DownloadIcon class="size-5" /> {{ formatMessage(commonMessages.downloadButton) }}
-					</template>
-					<template #rename>
-						<EditIcon class="size-5" /> {{ formatMessage(messages.rename) }}
-					</template>
-					<template #delete>
-						<TrashIcon class="size-5" /> {{ formatMessage(commonMessages.deleteLabel) }}
-					</template>
-				</OverflowMenu>
-			</ButtonStyled>
+			<template v-else>
+				<ButtonStyled v-if="!activeOperation" color="brand" type="outlined">
+					<button
+						v-tooltip="props.restoreDisabled"
+						class="!border"
+						:disabled="!!props.restoreDisabled"
+						@click="() => emit('restore')"
+					>
+						<RotateCounterClockwiseIcon class="size-5" />
+						{{ formatMessage(messages.restore) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled circular type="transparent">
+					<OverflowMenu :options="overflowMenuOptions">
+						<MoreVerticalIcon class="size-5" />
+						<template #copy-id>
+							<ClipboardCopyIcon class="size-5" />
+							{{ formatMessage(commonMessages.copyIdButton) }}
+						</template>
+						<template #download>
+							<DownloadIcon class="size-5" /> {{ formatMessage(commonMessages.downloadButton) }}
+						</template>
+						<template #rename>
+							<EditIcon class="size-5" /> {{ formatMessage(messages.rename) }}
+						</template>
+						<template #delete>
+							<TrashIcon class="size-5" /> {{ formatMessage(commonMessages.deleteLabel) }}
+						</template>
+					</OverflowMenu>
+				</ButtonStyled>
+			</template>
 		</div>
 
 		<pre v-if="!preview && showDebugInfo" class="w-full rounded-xl bg-surface-4 p-2 text-xs">{{
diff --git a/packages/ui/src/components/servers/backups/BackupRenameModal.vue b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
index 8efe286aa7..df58ba7c9c 100644
--- a/packages/ui/src/components/servers/backups/BackupRenameModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
@@ -20,26 +20,28 @@
 				</span>
 			</div>
 		</div>
-		<div class="mt-2 flex justify-start gap-2">
-			<ButtonStyled color="brand">
-				<button :disabled="renameMutation.isPending.value || nameExists" @click="renameBackup">
-					<template v-if="renameMutation.isPending.value">
-						<SpinnerIcon class="animate-spin" />
-						Renaming...
-					</template>
-					<template v-else>
-						<SaveIcon />
-						Save changes
-					</template>
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button @click="hide">
-					<XIcon />
-					Cancel
-				</button>
-			</ButtonStyled>
-		</div>
+		<template #actions>
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-4" @click="hide">
+						<XIcon />
+						Cancel
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="renameMutation.isPending.value || nameExists" @click="renameBackup">
+						<template v-if="renameMutation.isPending.value">
+							<SpinnerIcon class="animate-spin" />
+							Renaming...
+						</template>
+						<template v-else>
+							<SaveIcon />
+							Save changes
+						</template>
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
 	</NewModal>
 </template>
 
diff --git a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
index bdd95ec2d1..a42b5d22e8 100644
--- a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
@@ -17,8 +17,8 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled>
-					<button @click="modal?.hide()">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-4" @click="modal?.hide()">
 						<XIcon />
 						Cancel
 					</button>
diff --git a/packages/ui/src/stories/servers/BackupItem.stories.ts b/packages/ui/src/stories/servers/BackupItem.stories.ts
new file mode 100644
index 0000000000..4c4d995450
--- /dev/null
+++ b/packages/ui/src/stories/servers/BackupItem.stories.ts
@@ -0,0 +1,167 @@
+import type { Archon } from '@modrinth/api-client'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import BackupItem from '../../components/servers/backups/BackupItem.vue'
+
+const meta = {
+	title: 'Servers/BackupItem',
+	component: BackupItem,
+	args: {
+		preview: false,
+		showCopyIdAction: false,
+		showDebugInfo: false,
+		restoreDisabled: undefined,
+	},
+} satisfies Meta<typeof BackupItem>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function makeBackup(overrides: Partial<Archon.Backups.v1.Backup> = {}): Archon.Backups.v1.Backup {
+	return {
+		id: 'backup-001',
+		physical_id: 'phys-001',
+		name: 'Backup #5',
+		created_at: new Date(Date.now() - 1000 * 60 * 10).toISOString(),
+		automated: false,
+		status: 'done',
+		interrupted: false,
+		ongoing: false,
+		locked: false,
+		...overrides,
+	}
+}
+
+export const Default: Story = {
+	name: 'Default (manual)',
+	args: {
+		backup: makeBackup({ name: 'Base finished!!' }),
+	},
+}
+
+export const Automated: Story = {
+	name: 'Automated',
+	args: {
+		backup: makeBackup({ automated: true, name: 'Backup #2' }),
+	},
+}
+
+export const Creating: Story = {
+	name: 'Creating (in progress)',
+	args: {
+		backup: makeBackup({
+			automated: true,
+			name: 'Backup #3',
+			status: 'in_progress',
+			ongoing: true,
+			task: {
+				create: { progress: 0.4, state: 'ongoing' },
+			},
+		}),
+	},
+}
+
+export const Restoring: Story = {
+	name: 'Restoring (in progress)',
+	args: {
+		backup: makeBackup({
+			name: 'Backup #5',
+			automated: true,
+			task: {
+				restore: { progress: 0.6, state: 'ongoing' },
+			},
+		}),
+	},
+}
+
+export const FailedCreate: Story = {
+	name: 'Failed (create)',
+	args: {
+		backup: makeBackup({ status: 'error', name: 'Backup #4' }),
+	},
+}
+
+export const FailedRestore: Story = {
+	name: 'Failed (restore)',
+	args: {
+		backup: makeBackup({
+			name: 'Backup #5',
+			task: {
+				restore: { progress: 0, state: 'failed' },
+			},
+		}),
+	},
+}
+
+export const Preview: Story = {
+	name: 'Preview (compact, used in delete modal)',
+	args: {
+		backup: makeBackup({ name: 'Base finished!!' }),
+		preview: true,
+	},
+}
+
+export const RestoreDisabled: Story = {
+	name: 'Restore disabled (server running)',
+	args: {
+		backup: makeBackup({ name: 'Backup #5', automated: true }),
+		restoreDisabled: 'Cannot restore backup while server is running',
+	},
+}
+
+export const AllStates: Story = {
+	render: () => ({
+		components: { BackupItem },
+		setup() {
+			const now = new Date(Date.now() - 1000 * 60 * 10).toISOString()
+
+			function makeBackup(
+				overrides: Partial<Archon.Backups.v1.Backup>,
+			): Archon.Backups.v1.Backup {
+				return {
+					id: 'backup-001',
+					physical_id: 'phys-001',
+					name: 'Backup #5',
+					created_at: now,
+					automated: false,
+					status: 'done',
+					interrupted: false,
+					ongoing: false,
+					locked: false,
+					...overrides,
+				}
+			}
+
+			return {
+				manual: makeBackup({ name: 'Base finished!!' }),
+				automated: makeBackup({ automated: true, name: 'Backup #2' }),
+				creating: makeBackup({
+					automated: true,
+					name: 'Backup #3',
+					status: 'in_progress',
+					ongoing: true,
+					task: { create: { progress: 0.4, state: 'ongoing' } },
+				}),
+				restoring: makeBackup({
+					automated: true,
+					task: { restore: { progress: 0.6, state: 'ongoing' } },
+				}),
+				failedCreate: makeBackup({ status: 'error', name: 'Backup #4' }),
+				failedRestore: makeBackup({
+					task: { restore: { progress: 0, state: 'failed' } },
+				}),
+			}
+		},
+		template: /* html */ `
+			<div style="display: flex; flex-direction: column; gap: 0.75rem; max-width: 900px;">
+				<BackupItem :backup="manual" />
+				<BackupItem :backup="automated" />
+				<BackupItem :backup="creating" />
+				<BackupItem :backup="restoring" />
+				<BackupItem :backup="failedCreate" />
+				<BackupItem :backup="failedRestore" />
+				<BackupItem :backup="manual" preview />
+			</div>
+		`,
+	}),
+}

From c1687f5f78543e5923aa8dce613e5421a12a55b5 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Sat, 18 Apr 2026 15:49:55 +0100
Subject: [PATCH 02/13] feat: change admon title in restore alert modal

---
 .../ui/src/components/servers/backups/BackupRestoreModal.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
index a42b5d22e8..5f641715d7 100644
--- a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
@@ -4,7 +4,7 @@
 			<Admonition v-if="ctx.isServerRunning.value" type="critical" header="Server is running">
 				Stop the server before restoring a backup.
 			</Admonition>
-			<Admonition v-else type="critical" header="Restore warning">
+			<Admonition v-else type="critical" header="Your server files will be replaced">
 				Restoring your server will replace the current world and server files. Any changes made
 				since that backup will be permanently lost.
 			</Admonition>

From db3bc4eda17281af426db7a8f25deb8805994a0e Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Sat, 18 Apr 2026 15:50:16 +0100
Subject: [PATCH 03/13] fix: lint

---
 packages/ui/src/components/servers/backups/BackupItem.vue | 6 ++++--
 packages/ui/src/locales/en-US/index.json                  | 6 ++++++
 packages/ui/src/stories/servers/BackupItem.stories.ts     | 4 +---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/servers/backups/BackupItem.vue b/packages/ui/src/components/servers/backups/BackupItem.vue
index 61ab7175ce..9c96964eaa 100644
--- a/packages/ui/src/components/servers/backups/BackupItem.vue
+++ b/packages/ui/src/components/servers/backups/BackupItem.vue
@@ -249,7 +249,9 @@ const messages = defineMessages({
 
 		<!-- Date + size (middle column) -->
 		<div v-if="!preview" class="flex w-[240px] shrink-0 flex-col gap-1.5">
-			<span class="whitespace-nowrap font-medium text-contrast">{{ formatDateTime(backup.created_at) }}</span>
+			<span class="whitespace-nowrap font-medium text-contrast">{{
+				formatDateTime(backup.created_at)
+			}}</span>
 			<!-- TODO: Uncomment when API supports size field -->
 			<!-- <span class="font-normal text-secondary">{{ formatBytes(backup.size) }}</span> -->
 		</div>
@@ -257,7 +259,7 @@ const messages = defineMessages({
 		<!-- Right side actions -->
 		<div v-if="!preview" class="flex w-[180px] shrink-0 items-center justify-end gap-2">
 			<ButtonStyled v-if="creating" type="outlined">
-				<button @click="() => emit('delete', true)" class="!border !border-surface-4">
+				<button class="!border !border-surface-4" @click="() => emit('delete', true)">
 					{{ formatMessage(commonMessages.cancelButton) }}
 				</button>
 			</ButtonStyled>
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 9ff0bdfd66..e6caa750a0 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -2705,6 +2705,9 @@
   "servers.backups.item.backup-schedule": {
     "defaultMessage": "Backup schedule"
   },
+  "servers.backups.item.creating-backup": {
+    "defaultMessage": "Creating backup…"
+  },
   "servers.backups.item.failed-to-create-backup": {
     "defaultMessage": "Failed to create backup"
   },
@@ -2720,6 +2723,9 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Restore"
   },
+  "servers.backups.item.restoring": {
+    "defaultMessage": "Restoring"
+  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Backup creation in progress"
   },
diff --git a/packages/ui/src/stories/servers/BackupItem.stories.ts b/packages/ui/src/stories/servers/BackupItem.stories.ts
index 4c4d995450..a2e2a16ccf 100644
--- a/packages/ui/src/stories/servers/BackupItem.stories.ts
+++ b/packages/ui/src/stories/servers/BackupItem.stories.ts
@@ -115,9 +115,7 @@ export const AllStates: Story = {
 		setup() {
 			const now = new Date(Date.now() - 1000 * 60 * 10).toISOString()
 
-			function makeBackup(
-				overrides: Partial<Archon.Backups.v1.Backup>,
-			): Archon.Backups.v1.Backup {
+			function makeBackup(overrides: Partial<Archon.Backups.v1.Backup>): Archon.Backups.v1.Backup {
 				return {
 					id: 'backup-001',
 					physical_id: 'phys-001',

From f1a32d75cf9537d891e2112684c9ac7a01735d94 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 20 Apr 2026 12:48:07 +0100
Subject: [PATCH 04/13] feat: backups queue api into api-client

---
 packages/api-client/CLAUDE.md                 |  2 +-
 .../api-client/src/core/abstract-client.ts    |  7 +-
 .../src/modules/archon/backups-queue/v1.ts    | 80 +++++++++++++++++++
 .../src/modules/archon/backups/v1.ts          | 24 ++++++
 .../api-client/src/modules/archon/index.ts    |  1 +
 .../api-client/src/modules/archon/types.ts    | 74 +++++++++++++++++
 packages/api-client/src/modules/index.ts      |  2 +
 7 files changed, 188 insertions(+), 2 deletions(-)
 create mode 100644 packages/api-client/src/modules/archon/backups-queue/v1.ts

diff --git a/packages/api-client/CLAUDE.md b/packages/api-client/CLAUDE.md
index 015556ee67..6b7d150824 100644
--- a/packages/api-client/CLAUDE.md
+++ b/packages/api-client/CLAUDE.md
@@ -37,7 +37,7 @@ client.labrinth.collections
 client.labrinth.billing_internal
 client.archon.servers_v0
 client.archon.servers_v1
-client.archon.backups_v0
+client.archon.backups_queue_v1
 client.archon.backups_v1
 client.archon.content_v0
 client.kyros.files_v0
diff --git a/packages/api-client/src/core/abstract-client.ts b/packages/api-client/src/core/abstract-client.ts
index a8dd1a3e91..d9161d9e65 100644
--- a/packages/api-client/src/core/abstract-client.ts
+++ b/packages/api-client/src/core/abstract-client.ts
@@ -9,6 +9,11 @@ import { AbstractUploadClient } from './abstract-upload-client'
 import type { AbstractWebSocketClient } from './abstract-websocket'
 import { ModrinthApiError, ModrinthServerError } from './errors'
 
+type ArchonClientModules = Omit<InferredClientModules['archon'], 'backups_v1'> & {
+	/** @deprecated Use `backups_queue_v1` for the Backups Queue API. */
+	backups_v1: InferredClientModules['archon']['backups_v1']
+}
+
 /**
  * Abstract base client for Modrinth APIs
  */
@@ -27,7 +32,7 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {
 	private _moduleNamespaces: Map<string, Record<string, AbstractModule>> = new Map()
 
 	public readonly labrinth!: InferredClientModules['labrinth']
-	public readonly archon!: InferredClientModules['archon'] & { sockets: AbstractWebSocketClient }
+	public readonly archon!: ArchonClientModules & { sockets: AbstractWebSocketClient }
 	public readonly kyros!: InferredClientModules['kyros']
 	public readonly iso3166!: InferredClientModules['iso3166']
 	public readonly mclogs!: InferredClientModules['mclogs']
diff --git a/packages/api-client/src/modules/archon/backups-queue/v1.ts b/packages/api-client/src/modules/archon/backups-queue/v1.ts
new file mode 100644
index 0000000000..b6262ca0a6
--- /dev/null
+++ b/packages/api-client/src/modules/archon/backups-queue/v1.ts
@@ -0,0 +1,80 @@
+import { AbstractModule } from '../../../core/abstract-module'
+import type { Archon } from '../types'
+
+export class ArchonBackupsQueueV1Module extends AbstractModule {
+	public getModuleID(): string {
+		return 'archon_backups_queue_v1'
+	}
+
+	/** GET /v1/servers/:server_id/worlds/:world_id/backups-queue */
+	public async list(
+		serverId: string,
+		worldId: string,
+	): Promise<Archon.BackupsQueue.v1.BackupsQueueResponse> {
+		return this.client.request<Archon.BackupsQueue.v1.BackupsQueueResponse>(
+			`/servers/${serverId}/worlds/${worldId}/backups-queue`,
+			{ api: 'archon', version: 1, method: 'GET' },
+		)
+	}
+
+	/** POST /v1/servers/:server_id/worlds/:world_id/backups-queue */
+	public async create(
+		serverId: string,
+		worldId: string,
+		request: Archon.BackupsQueue.v1.BackupRequest,
+	): Promise<Archon.BackupsQueue.v1.PostBackupQueueResponse> {
+		return this.client.request<Archon.BackupsQueue.v1.PostBackupQueueResponse>(
+			`/servers/${serverId}/worlds/${worldId}/backups-queue`,
+			{ api: 'archon', version: 1, method: 'POST', body: request },
+		)
+	}
+
+	/** POST /v1/servers/:server_id/worlds/:world_id/backups-queue/history/create/:operation_id/ack */
+	public async ackCreate(serverId: string, worldId: string, operationId: number): Promise<void> {
+		await this.client.request<void>(
+			`/servers/${serverId}/worlds/${worldId}/backups-queue/history/create/${operationId}/ack`,
+			{ api: 'archon', version: 1, method: 'POST' },
+		)
+	}
+
+	/** POST /v1/servers/:server_id/worlds/:world_id/backups-queue/history/restore/:operation_id/ack */
+	public async ackRestore(serverId: string, worldId: string, operationId: number): Promise<void> {
+		await this.client.request<void>(
+			`/servers/${serverId}/worlds/${worldId}/backups-queue/history/restore/${operationId}/ack`,
+			{ api: 'archon', version: 1, method: 'POST' },
+		)
+	}
+
+	/** DELETE /v1/servers/:server_id/worlds/:world_id/backups-queue/:backup_id */
+	public async delete(serverId: string, worldId: string, backupId: string): Promise<void> {
+		await this.client.request<void>(
+			`/servers/${serverId}/worlds/${worldId}/backups-queue/${backupId}`,
+			{
+				api: 'archon',
+				version: 1,
+				method: 'DELETE',
+			},
+		)
+	}
+
+	/** POST /v1/servers/:server_id/worlds/:world_id/backups-queue/:backup_id/restore */
+	public async restore(
+		serverId: string,
+		worldId: string,
+		backupId: string,
+		request: Archon.BackupsQueue.v1.BackupRequest,
+	): Promise<void> {
+		await this.client.request<void>(
+			`/servers/${serverId}/worlds/${worldId}/backups-queue/${backupId}/restore`,
+			{ api: 'archon', version: 1, method: 'POST', body: request },
+		)
+	}
+
+	/** POST /v1/servers/:server_id/worlds/:world_id/backups-queue/:backup_id/retry */
+	public async retry(serverId: string, worldId: string, backupId: string): Promise<void> {
+		await this.client.request<void>(
+			`/servers/${serverId}/worlds/${worldId}/backups-queue/${backupId}/retry`,
+			{ api: 'archon', version: 1, method: 'POST' },
+		)
+	}
+}
diff --git a/packages/api-client/src/modules/archon/backups/v1.ts b/packages/api-client/src/modules/archon/backups/v1.ts
index d2d8da14e9..86fadfdf73 100644
--- a/packages/api-client/src/modules/archon/backups/v1.ts
+++ b/packages/api-client/src/modules/archon/backups/v1.ts
@@ -1,11 +1,17 @@
 import { AbstractModule } from '../../../core/abstract-module'
 import type { Archon } from '../types'
 
+/**
+ * @deprecated Use `client.archon.backups_queue_v1` (Backups Queue API) instead.
+ */
 export class ArchonBackupsV1Module extends AbstractModule {
 	public getModuleID(): string {
 		return 'archon_backups_v1'
 	}
 
+	/**
+	 * @deprecated Use `client.archon.backups_queue_v1.list` instead.
+	 */
 	/** GET /v1/servers/:server_id/worlds/:world_id/backups */
 	public async list(serverId: string, worldId: string): Promise<Archon.Backups.v1.Backup[]> {
 		return this.client.request<Archon.Backups.v1.Backup[]>(
@@ -14,6 +20,9 @@ export class ArchonBackupsV1Module extends AbstractModule {
 		)
 	}
 
+	/**
+	 * @deprecated Use `client.archon.backups_queue_v1.list` instead.
+	 */
 	/** GET /v1/servers/:server_id/worlds/:world_id/backups/:backup_id */
 	public async get(
 		serverId: string,
@@ -26,6 +35,9 @@ export class ArchonBackupsV1Module extends AbstractModule {
 		)
 	}
 
+	/**
+	 * @deprecated Use `client.archon.backups_queue_v1.create` instead.
+	 */
 	/** POST /v1/servers/:server_id/worlds/:world_id/backups */
 	public async create(
 		serverId: string,
@@ -38,6 +50,9 @@ export class ArchonBackupsV1Module extends AbstractModule {
 		)
 	}
 
+	/**
+	 * @deprecated Use `client.archon.backups_queue_v1.restore` instead.
+	 */
 	/** POST /v1/servers/:server_id/worlds/:world_id/backups/:backup_id/restore */
 	public async restore(serverId: string, worldId: string, backupId: string): Promise<void> {
 		await this.client.request<void>(
@@ -50,6 +65,9 @@ export class ArchonBackupsV1Module extends AbstractModule {
 		)
 	}
 
+	/**
+	 * @deprecated Use `client.archon.backups_queue_v1.delete` instead.
+	 */
 	/** DELETE /v1/servers/:server_id/worlds/:world_id/backups/:backup_id */
 	public async delete(serverId: string, worldId: string, backupId: string): Promise<void> {
 		await this.client.request<void>(`/servers/${serverId}/worlds/${worldId}/backups/${backupId}`, {
@@ -59,6 +77,9 @@ export class ArchonBackupsV1Module extends AbstractModule {
 		})
 	}
 
+	/**
+	 * @deprecated Use `client.archon.backups_queue_v1.retry` instead.
+	 */
 	/** POST /v1/servers/:server_id/worlds/:world_id/backups/:backup_id/retry */
 	public async retry(serverId: string, worldId: string, backupId: string): Promise<void> {
 		await this.client.request<void>(
@@ -71,6 +92,9 @@ export class ArchonBackupsV1Module extends AbstractModule {
 		)
 	}
 
+	/**
+	 * @deprecated Legacy backups only; no queue equivalent. Prefer renaming via other supported flows if available.
+	 */
 	/** PATCH /v1/servers/:server_id/worlds/:world_id/backups/:backup_id */
 	public async rename(
 		serverId: string,
diff --git a/packages/api-client/src/modules/archon/index.ts b/packages/api-client/src/modules/archon/index.ts
index 917630f840..ed9719ad3c 100644
--- a/packages/api-client/src/modules/archon/index.ts
+++ b/packages/api-client/src/modules/archon/index.ts
@@ -1,4 +1,5 @@
 export * from './backups/v1'
+export * from './backups-queue/v1'
 export * from './content/v1'
 export * from './properties/v1'
 export * from './servers/v0'
diff --git a/packages/api-client/src/modules/archon/types.ts b/packages/api-client/src/modules/archon/types.ts
index 9af5472ce2..4cb550e510 100644
--- a/packages/api-client/src/modules/archon/types.ts
+++ b/packages/api-client/src/modules/archon/types.ts
@@ -404,6 +404,9 @@ export namespace Archon {
 				name: string
 				created_at: string
 				is_active: boolean
+				/**
+				 * @deprecated Prefer `client.archon.backups_queue_v1.list()` for queue-aware backup state.
+				 */
 				backups: Archon.Backups.v1.Backup[]
 				content: WorldContentInfo | null
 				readiness: WorldReadiness
@@ -434,16 +437,24 @@ export namespace Archon {
 	}
 
 	export namespace Backups {
+		/**
+		 * @deprecated Use {@link Archon.BackupsQueue.v1} and `client.archon.backups_queue_v1` instead.
+		 */
 		export namespace v1 {
+			/** @deprecated Use {@link Archon.BackupsQueue.v1} instead. */
 			export type BackupState = 'ongoing' | 'done' | 'failed' | 'cancelled' | 'unchanged'
+			/** @deprecated Use {@link Archon.BackupsQueue.v1} instead. */
 			export type BackupTask = 'file' | 'create' | 'restore'
+			/** @deprecated Use {@link Archon.BackupsQueue.v1} instead. */
 			export type BackupStatus = 'pending' | 'in_progress' | 'timed_out' | 'error' | 'done'
 
+			/** @deprecated Use {@link Archon.BackupsQueue.v1} instead. */
 			export type BackupTaskProgress = {
 				progress: number // 0.0 to 1.0
 				state: BackupState
 			}
 
+			/** @deprecated Use {@link Archon.BackupsQueue.v1.BackupQueueBackup} instead. */
 			export type Backup = {
 				id: string
 				physical_id: string
@@ -461,20 +472,83 @@ export namespace Archon {
 				}
 			}
 
+			/** @deprecated Use {@link Archon.BackupsQueue.v1.BackupRequest} instead. */
 			export type BackupRequest = {
 				name: string
 			}
 
+			/** @deprecated Use {@link Archon.BackupsQueue.v1} instead. */
 			export type PatchBackup = {
 				name?: string
 			}
 
+			/** @deprecated Use {@link Archon.BackupsQueue.v1.PostBackupQueueResponse} instead. */
 			export type PostBackupResponse = {
 				id: string
 			}
 		}
 	}
 
+	export namespace BackupsQueue {
+		export namespace v1 {
+			export type BackupQueueOperationType = 'create' | 'restore'
+
+			export type BackupQueueState =
+				| 'pending'
+				| 'ongoing'
+				| 'completed'
+				| 'cancelled'
+				| 'failed'
+				| 'timed_out'
+
+			export type BackupStatus = 'pending' | 'in_progress' | 'timed_out' | 'error' | 'done'
+
+			export type BackupRequest = {
+				name: string
+			}
+
+			export type PostBackupQueueResponse = {
+				id: string
+			}
+
+			export type ActiveOperation = {
+				backup_id: string
+				operation_type: BackupQueueOperationType
+				operation_id?: number | null
+				has_parent: boolean
+				scheduled_for: string
+				synthetic_legacy: boolean
+			}
+
+			export type BackupQueueOperation = {
+				operation_type: BackupQueueOperationType
+				operation_id?: number | null
+				state: BackupQueueState
+				scheduled_for: string
+				completed_at?: string | null
+				has_parent: boolean
+				error?: string | null
+				should_prompt: boolean
+				synthetic_legacy: boolean
+			}
+
+			export type BackupQueueBackup = {
+				id: string
+				name: string
+				created_at: string
+				status: BackupStatus
+				locked: boolean
+				automated: boolean
+				history: BackupQueueOperation[]
+			}
+
+			export type BackupsQueueResponse = {
+				active_operations: ActiveOperation[]
+				backups: BackupQueueBackup[]
+			}
+		}
+	}
+
 	export namespace Websocket {
 		export namespace v0 {
 			export type WSAuth = {
diff --git a/packages/api-client/src/modules/index.ts b/packages/api-client/src/modules/index.ts
index 9eed22bc72..c7143b6384 100644
--- a/packages/api-client/src/modules/index.ts
+++ b/packages/api-client/src/modules/index.ts
@@ -1,6 +1,7 @@
 import type { AbstractModrinthClient } from '../core/abstract-client'
 import type { AbstractModule } from '../core/abstract-module'
 import { ArchonBackupsV1Module } from './archon/backups/v1'
+import { ArchonBackupsQueueV1Module } from './archon/backups-queue/v1'
 import { ArchonContentV1Module } from './archon/content/v1'
 import { ArchonOptionsV1Module } from './archon/options/v1'
 import { ArchonPropertiesV1Module } from './archon/properties/v1'
@@ -54,6 +55,7 @@ type ModuleConstructor = new (client: AbstractModrinthClient) => AbstractModule
  * TODO: Better way? Probably not
  */
 export const MODULE_REGISTRY = {
+	archon_backups_queue_v1: ArchonBackupsQueueV1Module,
 	archon_backups_v1: ArchonBackupsV1Module,
 	archon_content_v1: ArchonContentV1Module,
 	archon_options_v1: ArchonOptionsV1Module,

From da85a17cddf8ed7fc8ec0adbc3d8611c0791152c Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 20 Apr 2026 13:49:55 +0100
Subject: [PATCH 05/13] feat: impl backup queue api endpoints into frontend

---
 .../api-client/src/modules/archon/types.ts    |  11 +-
 .../servers/backups/BackupCreateModal.vue     |   6 +-
 .../servers/backups/BackupDeleteModal.vue     |   6 +-
 .../components/servers/backups/BackupItem.vue |  65 ++--
 .../backups/BackupProgressAdmonitions.vue     | 291 ++++++++----------
 .../servers/backups/BackupRenameModal.vue     |   8 +-
 .../servers/backups/BackupRestoreModal.vue    |  46 +--
 packages/ui/src/composables/index.ts          |   1 +
 .../src/composables/server-backups-queue.ts   | 111 +++++++
 .../composables/server-manage-core-runtime.ts |  38 +--
 .../composables/use-inline-backup.ts          | 127 +++-----
 .../wrapped/hosting/manage/backups.vue        | 115 +++----
 .../layouts/wrapped/hosting/manage/root.vue   |  81 +----
 packages/ui/src/locales/en-US/index.json      |  24 ++
 packages/ui/src/providers/server-context.ts   |  17 +-
 .../stories/servers/EditServerIcon.stories.ts |   4 +-
 16 files changed, 437 insertions(+), 514 deletions(-)
 create mode 100644 packages/ui/src/composables/server-backups-queue.ts

diff --git a/packages/api-client/src/modules/archon/types.ts b/packages/api-client/src/modules/archon/types.ts
index 4cb550e510..15c5a791a1 100644
--- a/packages/api-client/src/modules/archon/types.ts
+++ b/packages/api-client/src/modules/archon/types.ts
@@ -556,7 +556,14 @@ export namespace Archon {
 				token: string
 			}
 
-			export type BackupState = 'ongoing' | 'done' | 'failed' | 'cancelled' | 'unchanged'
+			export type BackupState =
+				| 'pending'
+				| 'ongoing'
+				| 'done'
+				| 'failed'
+				| 'cancelled'
+				| 'unchanged'
+				| 'damaged'
 			export type BackupTask = 'file' | 'create' | 'restore'
 
 			export type WSBackupProgressEvent = {
@@ -565,6 +572,8 @@ export namespace Archon {
 				task: BackupTask
 				state: BackupState
 				progress: number
+				start_time?: number | null
+				finish_time?: number | null
 			}
 
 			export type WSLogEvent = {
diff --git a/packages/ui/src/components/servers/backups/BackupCreateModal.vue b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
index da00d1a75c..5cf16b547a 100644
--- a/packages/ui/src/components/servers/backups/BackupCreateModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
@@ -84,14 +84,14 @@ const queryClient = useQueryClient()
 const ctx = injectModrinthServerContext()
 
 const props = defineProps<{
-	backups?: Archon.Backups.v1.Backup[]
+	backups?: Archon.BackupsQueue.v1.BackupQueueBackup[]
 }>()
 
-const backupsQueryKey = ['backups', 'list', ctx.serverId]
+const backupsQueryKey = ['backups', 'queue', ctx.serverId]
 
 const createMutation = useMutation({
 	mutationFn: (name: string) =>
-		client.archon.backups_v1.create(ctx.serverId, ctx.worldId.value!, { name }),
+		client.archon.backups_queue_v1.create(ctx.serverId, ctx.worldId.value!, { name }),
 	onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey }),
 })
 
diff --git a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
index 3634f099ba..4731e7b7a2 100644
--- a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
@@ -41,13 +41,13 @@ import NewModal from '../../modal/NewModal.vue'
 import BackupItem from './BackupItem.vue'
 
 const emit = defineEmits<{
-	(e: 'delete', backup: Archon.Backups.v1.Backup | undefined): void
+	(e: 'delete', backup: Archon.BackupsQueue.v1.BackupQueueBackup | undefined): void
 }>()
 
 const modal = ref<InstanceType<typeof NewModal>>()
-const currentBackup = ref<Archon.Backups.v1.Backup>()
+const currentBackup = ref<Archon.BackupsQueue.v1.BackupQueueBackup>()
 
-function show(backup: Archon.Backups.v1.Backup) {
+function show(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
 	currentBackup.value = backup
 	modal.value?.show()
 }
diff --git a/packages/ui/src/components/servers/backups/BackupItem.vue b/packages/ui/src/components/servers/backups/BackupItem.vue
index 9c96964eaa..9681e3ea87 100644
--- a/packages/ui/src/components/servers/backups/BackupItem.vue
+++ b/packages/ui/src/components/servers/backups/BackupItem.vue
@@ -27,13 +27,14 @@ const formatDateTime = useFormatDateTime({
 })
 
 const emit = defineEmits<{
-	(e: 'download' | 'rename' | 'restore' | 'retry'): void
+	(e: 'download' | 'rename' | 'restore'): void
 	(e: 'delete', skipConfirmation?: boolean): void
 }>()
 
 const props = withDefaults(
 	defineProps<{
-		backup: Archon.Backups.v1.Backup
+		backup: Archon.BackupsQueue.v1.BackupQueueBackup
+		activeOperation?: Archon.BackupsQueue.v1.ActiveOperation
 		preview?: boolean
 		kyrosUrl?: string
 		jwt?: string
@@ -51,38 +52,28 @@ const props = withDefaults(
 	},
 )
 
+const latestHistoryOp = computed(() => props.backup.history[0])
+
 const failedToCreate = computed(
 	() => props.backup.status === 'error' || props.backup.status === 'timed_out',
 )
 
-const inactiveStates = ['failed', 'cancelled', 'done']
-
 const creating = computed(() => {
-	const task = props.backup.task?.create
-	if (task && task.progress < 1 && !inactiveStates.includes(task.state)) {
-		return true
-	}
-
-	if (
-		(props.backup.status === 'in_progress' || props.backup.status === 'pending') &&
-		!props.backup.task?.restore
-	) {
-		return true
-	}
-	return false
+	const op = props.activeOperation
+	if (op?.operation_type === 'create' && !op.has_parent) return true
+	if (op?.operation_type === 'restore') return false
+	return props.backup.status === 'pending' || props.backup.status === 'in_progress'
 })
 
-const restoring = computed(() => {
-	const task = props.backup.task?.restore
-	if (task && task.progress < 1 && !inactiveStates.includes(task.state)) {
-		return true
-	}
-	return false
-})
+const restoring = computed(() => props.activeOperation?.operation_type === 'restore')
 
-const failedToRestore = computed(() => props.backup.task?.restore?.state === 'failed')
+const failedToRestore = computed(
+	() =>
+		latestHistoryOp.value?.operation_type === 'restore' &&
+		(latestHistoryOp.value?.state === 'failed' || latestHistoryOp.value?.state === 'timed_out'),
+)
 
-const activeOperation = computed(() => creating.value || restoring.value)
+const activeOperationExists = computed(() => creating.value || restoring.value)
 
 const backupIcon = computed(() => {
 	if (props.backup.automated) {
@@ -101,7 +92,7 @@ const overflowMenuOptions = computed<OverflowOption[]>(() => {
 		})
 	}
 
-	if (!activeOperation.value) {
+	if (!activeOperationExists.value) {
 		if (options.length > 0) {
 			options.push({ divider: true })
 		}
@@ -116,7 +107,7 @@ const overflowMenuOptions = computed<OverflowOption[]>(() => {
 
 	options.push({ id: 'rename', action: () => emit('rename') })
 
-	if (!activeOperation.value) {
+	if (!activeOperationExists.value) {
 		options.push({ divider: true })
 		options.push({
 			id: 'delete',
@@ -132,13 +123,6 @@ async function copyId() {
 	await navigator.clipboard.writeText(props.backup.id)
 }
 
-// TODO: Uncomment when API supports size field
-// const formatBytes = (bytes?: number) => {
-// 	if (!bytes) return ''
-// 	const mb = bytes / (1024 * 1024)
-// 	return `${mb.toFixed(0)} MiB`
-// }
-
 const messages = defineMessages({
 	restore: {
 		id: 'servers.backups.item.restore',
@@ -189,7 +173,7 @@ const messages = defineMessages({
 				:class="preview ? 'size-10' : 'size-14'"
 			>
 				<LoaderCircleIcon
-					v-if="activeOperation"
+					v-if="activeOperationExists"
 					v-tooltip="restoring ? formatMessage(messages.restoring) : undefined"
 					class="animate-spin text-secondary"
 					:class="preview ? 'size-6' : 'size-10'"
@@ -230,18 +214,11 @@ const messages = defineMessages({
 						</span>
 					</template>
 					<template v-else>
-						<!-- TODO: Uncomment when API supports creator_id field -->
-						<!-- <template v-if="backup.creator_id && backup.creator_id !== 'auto'">
-						<Avatar ... class="size-6 rounded-full" />
-						<span>{{ creatorName }}</span>
-					</template>
-					<template v-else> -->
 						<span>
 							{{
 								formatMessage(backup.automated ? messages.backupSchedule : messages.manualBackup)
 							}}
 						</span>
-						<!-- </template> -->
 					</template>
 				</div>
 			</div>
@@ -252,8 +229,6 @@ const messages = defineMessages({
 			<span class="whitespace-nowrap font-medium text-contrast">{{
 				formatDateTime(backup.created_at)
 			}}</span>
-			<!-- TODO: Uncomment when API supports size field -->
-			<!-- <span class="font-normal text-secondary">{{ formatBytes(backup.size) }}</span> -->
 		</div>
 
 		<!-- Right side actions -->
@@ -264,7 +239,7 @@ const messages = defineMessages({
 				</button>
 			</ButtonStyled>
 			<template v-else>
-				<ButtonStyled v-if="!activeOperation" color="brand" type="outlined">
+				<ButtonStyled v-if="!activeOperationExists" color="brand" type="outlined">
 					<button
 						v-tooltip="props.restoreDisabled"
 						class="!border"
diff --git a/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue b/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
index 3e72d68ae6..234008f0a6 100644
--- a/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
+++ b/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
@@ -8,13 +8,12 @@ import {
 	TriangleAlertIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive } from 'vue'
 
 import { useRelativeTime } from '../../../composables'
 import { defineMessages, useVIntl } from '../../../composables/i18n'
+import { useServerBackupsQueue } from '../../../composables/server-backups-queue'
 import { injectModrinthClient, injectModrinthServerContext } from '../../../providers'
-import type { BackupProgressEntry } from '../../../providers/server-context'
 import { commonMessages } from '../../../utils'
 import Admonition from '../../base/Admonition.vue'
 import ButtonStyled from '../../base/ButtonStyled.vue'
@@ -23,188 +22,116 @@ import ProgressBar from '../../base/ProgressBar.vue'
 const { formatMessage } = useVIntl()
 const relativeTime = useRelativeTime()
 const client = injectModrinthClient()
-const queryClient = useQueryClient()
-const { serverId, worldId, backupsState, markBackupCancelled } = injectModrinthServerContext()
-
-const backupsQueryKey = ['backups', 'list', serverId]
+const { serverId, worldId } = injectModrinthServerContext()
+const { activeOperations, backups, progressFor, invalidate } = useServerBackupsQueue(
+	computed(() => serverId),
+	worldId,
+)
 
-const { data: backupsList } = useQuery({
-	queryKey: backupsQueryKey,
-	queryFn: () => client.archon.backups_v1.list(serverId, worldId.value!),
-	enabled: computed(() => !!worldId.value),
-})
+type AdmonitionDisplayState = 'ongoing' | Archon.BackupsQueue.v1.BackupQueueState
 
-interface TerminalEntry {
-	type: 'create' | 'restore'
-	state: Archon.Backups.v1.BackupState
-	backupName?: string
-	createdAt?: string
-}
-
-interface AdmonitionEntry {
+type AdmonitionEntry = {
 	key: string
 	backupId: string
 	type: 'create' | 'restore'
-	state: Archon.Backups.v1.BackupState
+	state: AdmonitionDisplayState
 	progress: number
+	operationId: number | null
+	syntheticLegacy: boolean
 	name?: string
 	createdAt?: string
 }
 
-const terminalEntries = reactive(new Map<string, TerminalEntry>())
 const dismissedIds = reactive(new Set<string>())
 
-function findBackup(backupId: string) {
-	return backupsList.value?.find((b) => b.id === backupId)
-}
-
-watch(
-	() => [...backupsState.entries()] as [string, BackupProgressEntry][],
-	(entries) => {
-		for (const [id, entry] of entries) {
-			const backup = findBackup(id)
-			if (entry.create?.state === 'failed') {
-				terminalEntries.set(`${id}:create`, {
-					type: 'create',
-					state: 'failed',
-					backupName: backup?.name,
-					createdAt: backup?.created_at,
-				})
-			}
-			if (entry.restore?.state === 'done') {
-				terminalEntries.set(`${id}:restore`, {
-					type: 'restore',
-					state: 'done',
-					backupName: backup?.name,
-					createdAt: backup?.created_at,
-				})
-			}
-			if (entry.restore?.state === 'failed') {
-				terminalEntries.set(`${id}:restore`, {
-					type: 'restore',
-					state: 'failed',
-					backupName: backup?.name,
-					createdAt: backup?.created_at,
-				})
-			}
-		}
-	},
-	{ deep: true },
-)
-
 const admonitions = computed<AdmonitionEntry[]>(() => {
 	const result: AdmonitionEntry[] = []
-	const seenIds = new Set<string>()
-
-	for (const [id, entry] of backupsState.entries()) {
-		const backup = findBackup(id)
-		seenIds.add(id)
-		if (entry.create && entry.create.state === 'ongoing') {
-			const key = `${id}:create`
-			if (!dismissedIds.has(key)) {
-				result.push({
-					key,
-					backupId: id,
-					type: 'create',
-					state: entry.create.state,
-					progress: entry.create.progress,
-					name: backup?.name,
-					createdAt: backup?.created_at,
-				})
-			}
-		}
-		if (entry.restore && entry.restore.state === 'ongoing') {
-			const key = `${id}:restore`
-			if (!dismissedIds.has(key)) {
-				result.push({
-					key,
-					backupId: id,
-					type: 'restore',
-					state: entry.restore.state,
-					progress: entry.restore.progress,
-					name: backup?.name,
-					createdAt: backup?.created_at,
-				})
-			}
-		}
-	}
+	const backupById = new Map(backups.value.map((b) => [b.id, b]))
 
-	if (backupsList.value) {
-		for (const backup of backupsList.value) {
-			if (seenIds.has(backup.id)) continue
-			if (backup.status === 'pending' || backup.status === 'in_progress') {
-				const key = `${backup.id}:create`
-				if (!dismissedIds.has(key)) {
-					result.push({
-						key,
-						backupId: backup.id,
-						type: 'create',
-						state: 'ongoing',
-						progress: 0,
-						name: backup.name,
-						createdAt: backup.created_at,
-					})
-				}
-			}
-		}
+	for (const op of activeOperations.value) {
+		const key = `${op.backup_id}:${op.operation_type}:${op.operation_id ?? 'legacy'}`
+		if (dismissedIds.has(key)) continue
+		const backup = backupById.get(op.backup_id)
+		const rawProgress = progressFor(op.backup_id, op.operation_type) ?? 0
+		result.push({
+			key,
+			backupId: op.backup_id,
+			type: op.operation_type,
+			state: 'ongoing',
+			progress: rawProgress,
+			operationId: op.operation_id ?? null,
+			syntheticLegacy: op.synthetic_legacy,
+			name: backup?.name,
+			createdAt: backup?.created_at,
+		})
 	}
 
-	for (const [key, entry] of terminalEntries.entries()) {
+	for (const backup of backups.value) {
+		const last = backup.history[0]
+		if (!last || !last.should_prompt) continue
+		if (last.state === 'pending' || last.state === 'ongoing') continue
+		const key = `${backup.id}:${last.operation_type}:${last.operation_id ?? 'legacy'}`
 		if (dismissedIds.has(key)) continue
 		if (result.some((r) => r.key === key)) continue
-
-		const backupId = key.split(':')[0]
-		const backup = findBackup(backupId)
 		result.push({
 			key,
-			backupId,
-			type: entry.type,
-			state: entry.state,
-			progress: entry.state === 'done' ? 1 : 0,
-			name: backup?.name ?? entry.backupName,
-			createdAt: backup?.created_at ?? entry.createdAt,
+			backupId: backup.id,
+			type: last.operation_type,
+			state: last.state,
+			progress: 0,
+			operationId: last.operation_id ?? null,
+			syntheticLegacy: last.synthetic_legacy,
+			name: backup.name,
+			createdAt: backup.created_at,
 		})
 	}
 
 	return result
 })
 
-function handleCancel(backupId: string) {
-	client.archon.backups_v1.delete(serverId, worldId.value!, backupId).then(() => {
-		markBackupCancelled(backupId)
-		backupsState.delete(backupId)
-		queryClient.invalidateQueries({ queryKey: backupsQueryKey })
-	})
+async function handleDismiss(item: AdmonitionEntry) {
+	dismissedIds.add(item.key)
+	if (item.syntheticLegacy || item.operationId == null) {
+		await invalidate()
+		return
+	}
+	const call =
+		item.type === 'create'
+			? client.archon.backups_queue_v1.ackCreate
+			: client.archon.backups_queue_v1.ackRestore
+	try {
+		await call(serverId, worldId.value!, item.operationId)
+	} finally {
+		await invalidate()
+	}
 }
 
-function handleRetry(backupId: string, key: string) {
-	client.archon.backups_v1.retry(serverId, worldId.value!, backupId).then(() => {
-		terminalEntries.delete(key)
-		dismissedIds.delete(key)
-		queryClient.invalidateQueries({ queryKey: backupsQueryKey })
-	})
+async function handleCancel(item: AdmonitionEntry) {
+	await client.archon.backups_v1.delete(serverId, worldId.value!, item.backupId)
+	await invalidate()
 }
 
-function handleDismiss(key: string) {
-	dismissedIds.add(key)
-	terminalEntries.delete(key)
+async function handleRetry(item: AdmonitionEntry) {
+	await client.archon.backups_queue_v1.retry(serverId, worldId.value!, item.backupId)
+	dismissedIds.add(item.key)
+	await invalidate()
 }
 
-function getAdmonitionType(state: Archon.Backups.v1.BackupState): 'info' | 'critical' | 'success' {
-	if (state === 'failed') return 'critical'
-	if (state === 'done') return 'success'
+function getAdmonitionType(state: AdmonitionDisplayState): 'info' | 'critical' | 'success' {
+	if (state === 'failed' || state === 'timed_out') return 'critical'
+	if (state === 'completed') return 'success'
 	return 'info'
 }
 
-function getIcon(state: Archon.Backups.v1.BackupState) {
-	if (state === 'failed') return TriangleAlertIcon
-	if (state === 'done') return CheckCircleIcon
+function getIcon(state: AdmonitionDisplayState) {
+	if (state === 'failed' || state === 'timed_out') return TriangleAlertIcon
+	if (state === 'completed') return CheckCircleIcon
 	return InfoIcon
 }
 
-function getButtonColor(state: Archon.Backups.v1.BackupState): 'red' | 'green' | 'blue' {
-	if (state === 'failed') return 'red'
-	if (state === 'done') return 'green'
+function getButtonColor(state: AdmonitionDisplayState): 'red' | 'green' | 'blue' {
+	if (state === 'failed' || state === 'timed_out') return 'red'
+	if (state === 'completed') return 'green'
 	return 'blue'
 }
 
@@ -216,16 +143,29 @@ function isInProgress(item: AdmonitionEntry) {
 	return item.state === 'ongoing' && item.progress > 0
 }
 
+function isTerminal(item: AdmonitionEntry) {
+	return item.state !== 'ongoing'
+}
+
+function canRetry(item: AdmonitionEntry) {
+	return item.state === 'failed' || item.state === 'timed_out'
+}
+
 function getTitle(item: AdmonitionEntry) {
 	if (item.type === 'create') {
 		if (isQueued(item)) return formatMessage(messages.backupQueuedTitle)
 		if (isInProgress(item)) return formatMessage(messages.creatingBackupTitle)
-		if (item.state === 'failed') return formatMessage(messages.backupFailedTitle)
+		if (item.state === 'failed' || item.state === 'timed_out')
+			return formatMessage(messages.backupFailedTitle)
+		if (item.state === 'cancelled') return formatMessage(messages.backupCancelledTitle)
+		if (item.state === 'completed') return formatMessage(messages.backupCompletedTitle)
 	}
 	if (isQueued(item)) return formatMessage(messages.restoreQueuedTitle)
 	if (isInProgress(item)) return formatMessage(messages.restoringBackupTitle)
-	if (item.state === 'done') return formatMessage(messages.restoreSuccessfulTitle)
+	if (item.state === 'completed') return formatMessage(messages.restoreSuccessfulTitle)
 	if (item.state === 'failed') return formatMessage(messages.restoreFailedTitle)
+	if (item.state === 'timed_out') return formatMessage(messages.restoreTimedOutTitle)
+	if (item.state === 'cancelled') return formatMessage(messages.restoreCancelledTitle)
 	return ''
 }
 
@@ -234,15 +174,23 @@ function getDescription(item: AdmonitionEntry) {
 	if (item.type === 'create') {
 		if (isQueued(item)) return formatMessage(messages.backupQueuedDescription, { backupName })
 		if (isInProgress(item)) return formatMessage(messages.creatingBackupDescription, { backupName })
-		if (item.state === 'failed')
+		if (item.state === 'failed' || item.state === 'timed_out')
 			return formatMessage(messages.backupFailedDescription, { backupName })
+		if (item.state === 'cancelled')
+			return formatMessage(messages.backupCancelledDescription, { backupName })
+		if (item.state === 'completed')
+			return formatMessage(messages.backupCompletedDescription, { backupName })
 	}
 	if (isQueued(item)) return formatMessage(messages.restoreQueuedDescription, { backupName })
 	if (isInProgress(item)) return formatMessage(messages.restoringBackupDescription, { backupName })
-	if (item.state === 'done')
+	if (item.state === 'completed')
 		return formatMessage(messages.restoreSuccessfulDescription, { backupName })
 	if (item.state === 'failed')
 		return formatMessage(messages.restoreFailedDescription, { backupName })
+	if (item.state === 'timed_out')
+		return formatMessage(messages.restoreTimedOutDescription, { backupName })
+	if (item.state === 'cancelled')
+		return formatMessage(messages.restoreCancelledDescription, { backupName })
 	return ''
 }
 
@@ -277,6 +225,22 @@ const messages = defineMessages({
 		defaultMessage:
 			'Something went wrong while creating {backupName}. Please try again or contact support if the issue continues.',
 	},
+	backupCancelledTitle: {
+		id: 'servers.backups.admonition.backup-cancelled.title',
+		defaultMessage: 'Backup cancelled',
+	},
+	backupCancelledDescription: {
+		id: 'servers.backups.admonition.backup-cancelled.description',
+		defaultMessage: 'Backup {backupName} was cancelled.',
+	},
+	backupCompletedTitle: {
+		id: 'servers.backups.admonition.backup-completed.title',
+		defaultMessage: 'Backup completed',
+	},
+	backupCompletedDescription: {
+		id: 'servers.backups.admonition.backup-completed.description',
+		defaultMessage: '{backupName} finished successfully.',
+	},
 	restoreQueuedTitle: {
 		id: 'servers.backups.admonition.restore-queued.title',
 		defaultMessage: 'Restoring from backup queued',
@@ -310,6 +274,23 @@ const messages = defineMessages({
 		defaultMessage:
 			'Something went wrong while restoring from {backupName}. Please try again or contact support if the issue continues.',
 	},
+	restoreTimedOutTitle: {
+		id: 'servers.backups.admonition.restore-timed-out.title',
+		defaultMessage: 'Restore timed out',
+	},
+	restoreTimedOutDescription: {
+		id: 'servers.backups.admonition.restore-timed-out.description',
+		defaultMessage:
+			'Restoring from {backupName} timed out. You can try again or contact support if the issue continues.',
+	},
+	restoreCancelledTitle: {
+		id: 'servers.backups.admonition.restore-cancelled.title',
+		defaultMessage: 'Restore cancelled',
+	},
+	restoreCancelledDescription: {
+		id: 'servers.backups.admonition.restore-cancelled.description',
+		defaultMessage: 'Restoring from {backupName} was cancelled.',
+	},
 })
 </script>
 
@@ -336,24 +317,24 @@ const messages = defineMessages({
 			{{ getDescription(item) }}
 			<template #top-right-actions>
 				<ButtonStyled v-if="isQueued(item) || isInProgress(item)" type="outlined" color="blue">
-					<button class="!border" @click="handleCancel(item.backupId)">
+					<button class="!border" @click="handleCancel(item)">
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
-				<ButtonStyled v-if="item.state === 'failed'" color="red">
-					<button @click="handleRetry(item.backupId, item.key)">
+				<ButtonStyled v-if="canRetry(item)" color="red">
+					<button @click="handleRetry(item)">
 						<RotateCounterClockwiseIcon class="size-5" />
 						{{ formatMessage(commonMessages.retryButton) }}
 					</button>
 				</ButtonStyled>
 				<ButtonStyled
-					v-if="item.state === 'failed' || item.state === 'done'"
+					v-if="isTerminal(item)"
 					circular
 					type="transparent"
 					hover-color-fill="background"
 					:color="getButtonColor(item.state)"
 				>
-					<button @click="handleDismiss(item.key)">
+					<button @click="handleDismiss(item)">
 						<XIcon />
 					</button>
 				</ButtonStyled>
diff --git a/packages/ui/src/components/servers/backups/BackupRenameModal.vue b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
index df58ba7c9c..9d49c05e19 100644
--- a/packages/ui/src/components/servers/backups/BackupRenameModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
@@ -66,10 +66,10 @@ const queryClient = useQueryClient()
 const ctx = injectModrinthServerContext()
 
 const props = defineProps<{
-	backups?: Archon.Backups.v1.Backup[]
+	backups?: Archon.BackupsQueue.v1.BackupQueueBackup[]
 }>()
 
-const backupsQueryKey = ['backups', 'list', ctx.serverId]
+const backupsQueryKey = ['backups', 'queue', ctx.serverId]
 
 const renameMutation = useMutation({
 	mutationFn: ({ backupId, name }: { backupId: string; name: string }) =>
@@ -82,7 +82,7 @@ const input = ref<HTMLInputElement>()
 const backupName = ref('')
 const originalName = ref('')
 
-const currentBackup = ref<Archon.Backups.v1.Backup | null>(null)
+const currentBackup = ref<Archon.BackupsQueue.v1.BackupQueueBackup | null>(null)
 
 const trimmedName = computed(() => backupName.value.trim())
 
@@ -112,7 +112,7 @@ const focusInput = () => {
 	})
 }
 
-function show(backup: Archon.Backups.v1.Backup) {
+function show(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
 	currentBackup.value = backup
 	backupName.value = backup.name
 	originalName.value = backup.name
diff --git a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
index 5f641715d7..909bec73d1 100644
--- a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
@@ -56,18 +56,24 @@ const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const ctx = injectModrinthServerContext()
 
-const backupsQueryKey = ['backups', 'list', ctx.serverId]
+const backupsQueryKey = ['backups', 'queue', ctx.serverId]
+
+function safetyBackupName(backupName: string) {
+	const base = `Before restoring "${backupName}"`
+	return base.slice(0, 92)
+}
+
 const restoreMutation = useMutation({
-	mutationFn: (backupId: string) =>
-		client.archon.backups_v1.restore(ctx.serverId, ctx.worldId.value!, backupId),
+	mutationFn: ({ backupId, name }: { backupId: string; name: string }) =>
+		client.archon.backups_queue_v1.restore(ctx.serverId, ctx.worldId.value!, backupId, { name }),
 	onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey }),
 })
 
 const modal = ref<InstanceType<typeof NewModal>>()
-const currentBackup = ref<Archon.Backups.v1.Backup | null>(null)
+const currentBackup = ref<Archon.BackupsQueue.v1.BackupQueueBackup | null>(null)
 const isRestoring = ref(false)
 
-function show(backup: Archon.Backups.v1.Backup) {
+function show(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
 	currentBackup.value = backup
 	modal.value?.show()
 }
@@ -85,22 +91,24 @@ const restoreBackup = () => {
 	}
 
 	isRestoring.value = true
-	restoreMutation.mutate(currentBackup.value.id, {
-		onSuccess: () => {
-			// Optimistically update backupsState to show restore in progress immediately
-			ctx.backupsState.set(currentBackup.value!.id, {
-				restore: { progress: 0, state: 'ongoing' },
-			})
-			modal.value?.hide()
-		},
-		onError: (error) => {
-			const message = error instanceof Error ? error.message : String(error)
-			addNotification({ type: 'error', title: 'Failed to restore backup', text: message })
+	restoreMutation.mutate(
+		{
+			backupId: currentBackup.value.id,
+			name: safetyBackupName(currentBackup.value.name),
 		},
-		onSettled: () => {
-			isRestoring.value = false
+		{
+			onSuccess: () => {
+				modal.value?.hide()
+			},
+			onError: (error) => {
+				const message = error instanceof Error ? error.message : String(error)
+				addNotification({ type: 'error', title: 'Failed to restore backup', text: message })
+			},
+			onSettled: () => {
+				isRestoring.value = false
+			},
 		},
-	})
+	)
 }
 
 defineExpose({
diff --git a/packages/ui/src/composables/index.ts b/packages/ui/src/composables/index.ts
index c5afc1d095..a94fb69c12 100644
--- a/packages/ui/src/composables/index.ts
+++ b/packages/ui/src/composables/index.ts
@@ -9,6 +9,7 @@ export * from './i18n-debug'
 export * from './page-leave-safety'
 export * from './scroll-indicator'
 export * from './server-backup'
+export * from './server-backups-queue'
 export * from './server-console'
 export * from './server-manage-core-runtime'
 export * from './sticky-observer'
diff --git a/packages/ui/src/composables/server-backups-queue.ts b/packages/ui/src/composables/server-backups-queue.ts
new file mode 100644
index 0000000000..91461e4c63
--- /dev/null
+++ b/packages/ui/src/composables/server-backups-queue.ts
@@ -0,0 +1,111 @@
+import type { Archon } from '@modrinth/api-client'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, reactive, type Ref } from 'vue'
+
+import { type BusyReason, injectModrinthClient } from '#ui/providers'
+
+import { defineMessage } from './i18n'
+
+type ProgressKey = `${string}:${'create' | 'restore'}`
+
+export function useServerBackupsQueue(serverId: Ref<string>, worldId: Ref<string | null>) {
+	const client = injectModrinthClient()
+	const queryClient = useQueryClient()
+
+	const queryKey = computed(() => ['backups', 'queue', serverId.value] as const)
+
+	const progressOverlay = reactive(new Map<ProgressKey, number>())
+	const lastSeenState = new Map<ProgressKey, Archon.Websocket.v0.BackupState>()
+
+	const query = useQuery({
+		queryKey,
+		queryFn: () => client.archon.backups_queue_v1.list(serverId.value, worldId.value!),
+		enabled: computed(() => !!worldId.value),
+		refetchInterval: (q) => {
+			const data = q.state.data as Archon.BackupsQueue.v1.BackupsQueueResponse | undefined
+			return data?.active_operations?.length ? 3000 : false
+		},
+	})
+
+	const data = computed(() => query.data.value)
+	const activeOperations = computed(() => data.value?.active_operations ?? [])
+	const backups = computed(() =>
+		[...(data.value?.backups ?? [])].sort(
+			(a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
+		),
+	)
+
+	const activeOperationByBackupId = computed(() => {
+		const map = new Map<string, Archon.BackupsQueue.v1.ActiveOperation>()
+		for (const op of activeOperations.value) map.set(op.backup_id, op)
+		return map
+	})
+
+	const hasActiveCreate = computed(() =>
+		activeOperations.value.some((o) => o.operation_type === 'create' && !o.has_parent),
+	)
+	const hasActiveRestore = computed(() =>
+		activeOperations.value.some((o) => o.operation_type === 'restore'),
+	)
+
+	function handleWsBackupProgress(evt: Archon.Websocket.v0.WSBackupProgressEvent) {
+		if (evt.task === 'file') return
+		const key = `${evt.id}:${evt.task}` as ProgressKey
+
+		if (evt.state === 'ongoing') {
+			progressOverlay.set(key, evt.progress)
+		} else {
+			progressOverlay.delete(key)
+		}
+
+		const prev = lastSeenState.get(key)
+		if (prev !== evt.state) {
+			lastSeenState.set(key, evt.state)
+			queryClient.invalidateQueries({ queryKey: queryKey.value })
+		}
+	}
+
+	function progressFor(backupId: string, kind: 'create' | 'restore'): number | undefined {
+		return progressOverlay.get(`${backupId}:${kind}`)
+	}
+
+	const busyReasons = computed<BusyReason[]>(() => {
+		const reasons: BusyReason[] = []
+		if (hasActiveCreate.value) {
+			reasons.push({
+				reason: defineMessage({
+					id: 'servers.busy.backup-creating',
+					defaultMessage: 'Backup creation in progress',
+				}),
+			})
+		}
+		if (hasActiveRestore.value) {
+			reasons.push({
+				reason: defineMessage({
+					id: 'servers.busy.backup-restoring',
+					defaultMessage: 'Backup restore in progress',
+				}),
+			})
+		}
+		return reasons
+	})
+
+	async function invalidate() {
+		await queryClient.invalidateQueries({ queryKey: queryKey.value })
+	}
+
+	return {
+		query,
+		queryKey,
+		data,
+		activeOperations,
+		activeOperationByBackupId,
+		backups,
+		hasActiveCreate,
+		hasActiveRestore,
+		progressFor,
+		handleWsBackupProgress,
+		busyReasons,
+		invalidate,
+	}
+}
diff --git a/packages/ui/src/composables/server-manage-core-runtime.ts b/packages/ui/src/composables/server-manage-core-runtime.ts
index 877aa5313b..b7d2884bd0 100644
--- a/packages/ui/src/composables/server-manage-core-runtime.ts
+++ b/packages/ui/src/composables/server-manage-core-runtime.ts
@@ -6,7 +6,7 @@ import {
 } from '@modrinth/api-client'
 import type { Stats } from '@modrinth/utils'
 import type { ComputedRef, Ref } from 'vue'
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import type { FileOperation } from '../layouts/shared/files-tab/types'
 import { injectModrinthClient, provideModrinthServerContext } from '../providers'
@@ -27,8 +27,7 @@ type UseServerManageCoreRuntimeOptions = {
 	worldId: ReadableRef<string | null>
 	server: ReadableRef<Archon.Servers.v0.Server | null | undefined>
 	isSyncingContent: ReadableRef<boolean>
-	markBackupCancelled?: (backupId: string) => void
-	includeBackupBusyReasons?: boolean
+	extraBusyReasons?: ComputedRef<BusyReason[]>
 	setDisconnectedOnAuthIncorrect?: boolean
 	syncUptimeFromState?: boolean
 	incrementUptimeLocally?: boolean
@@ -94,7 +93,6 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 	const isServerRunning = computed(() => serverPowerState.value === 'running')
 	const stats = ref<Stats>(createInitialStats())
 	const uptimeSeconds = ref(0)
-	const backupsState = reactive(new Map())
 	const fsAuth = ref<{ url: string; token: string } | null>(null)
 	const fsOps = ref<Archon.Websocket.v0.FilesystemOperation[]>([])
 	const fsQueuedOps = ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([])
@@ -107,12 +105,6 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 	let staleStatsTimeoutId: ReturnType<typeof setTimeout> | null = null
 	let staleStatsIntervalId: ReturnType<typeof setInterval> | null = null
 
-	const markBackupCancelled =
-		options.markBackupCancelled ??
-		((backupId: string) => {
-			backupsState.delete(backupId)
-		})
-
 	const busyReasons = computed<BusyReason[]>(() => {
 		const reasons: BusyReason[] = []
 		if (options.server.value?.status === 'installing') {
@@ -131,28 +123,7 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 				}),
 			})
 		}
-		if (options.includeBackupBusyReasons) {
-			for (const entry of backupsState.values()) {
-				if (entry.create?.state === 'ongoing') {
-					reasons.push({
-						reason: defineMessage({
-							id: 'servers.busy.backup-creating',
-							defaultMessage: 'Backup creation in progress',
-						}),
-					})
-					break
-				}
-				if (entry.restore?.state === 'ongoing') {
-					reasons.push({
-						reason: defineMessage({
-							id: 'servers.busy.backup-restoring',
-							defaultMessage: 'Backup restore in progress',
-						}),
-					})
-					break
-				}
-			}
-		}
+		if (options.extraBusyReasons) reasons.push(...options.extraBusyReasons.value)
 		return reasons
 	})
 
@@ -440,8 +411,6 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 		isServerRunning,
 		stats,
 		uptimeSeconds,
-		backupsState,
-		markBackupCancelled,
 		isSyncingContent: options.isSyncingContent as Ref<boolean>,
 		busyReasons,
 		fsAuth,
@@ -463,7 +432,6 @@ export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOp
 
 	return {
 		activeOperations,
-		backupsState,
 		busyReasons,
 		cancelUpload,
 		cleanupCoreRuntime,
diff --git a/packages/ui/src/layouts/shared/content-tab/composables/use-inline-backup.ts b/packages/ui/src/layouts/shared/content-tab/composables/use-inline-backup.ts
index 0abc077e2e..7123f91d38 100644
--- a/packages/ui/src/layouts/shared/content-tab/composables/use-inline-backup.ts
+++ b/packages/ui/src/layouts/shared/content-tab/composables/use-inline-backup.ts
@@ -1,12 +1,13 @@
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import { onBeforeRouteLeave } from 'vue-router'
 
+import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
 import {
 	injectAppBackup,
 	injectModrinthClient,
 	injectModrinthServerContext,
 	injectNotificationManager,
-} from '#ui/providers/'
+} from '#ui/providers'
 
 export function useInlineBackup(backupName: string | (() => string)) {
 	const serverCtx = injectModrinthServerContext(null)
@@ -60,110 +61,65 @@ export function useInlineBackup(backupName: string | (() => string)) {
 
 	const client = injectModrinthClient()
 	const { addNotification } = injectNotificationManager()
-	const { serverId, worldId, backupsState, markBackupCancelled } = serverCtx
+	const { serverId, worldId } = serverCtx
 
-	const isBackingUp = ref(false)
+	const { activeOperationByBackupId, backups, hasActiveCreate, invalidate } = useServerBackupsQueue(
+		computed(() => serverId),
+		worldId,
+	)
+
+	const createdBackupId = ref<string | null>(null)
+	const pendingCreate = ref(false)
 	const backupFailed = ref(false)
 	const backupComplete = ref(false)
 	const backupCancelled = ref(false)
 	const isCancelling = ref(false)
-	const createdBackupId = ref<string | null>(null)
 
-	const externalBackupInProgress = computed(() => {
-		for (const [id, entry] of backupsState.entries()) {
-			if (id !== createdBackupId.value && entry.create?.state === 'ongoing') return true
-		}
-		return false
-	})
-
-	// Watch backupsState for websocket progress events from Kyros
-	watch(
-		() => {
-			if (!createdBackupId.value) return null
-			return backupsState.get(createdBackupId.value)
-		},
-		(entry) => {
-			if (!entry?.create) return
-
-			if (entry.create.state === 'done') {
-				stopPolling()
-				isBackingUp.value = false
-				backupComplete.value = true
-			} else if (entry.create.state === 'cancelled') {
-				stopPolling()
-				isBackingUp.value = false
-				isCancelling.value = false
-				backupCancelled.value = true
-			} else if (entry.create.state === 'failed') {
-				stopPolling()
-				isBackingUp.value = false
-				backupFailed.value = true
-			}
-		},
-		{ deep: true },
+	const myBackup = computed(() =>
+		createdBackupId.value ? backups.value.find((b) => b.id === createdBackupId.value) : undefined,
+	)
+	const myActiveOp = computed(() =>
+		createdBackupId.value ? activeOperationByBackupId.value.get(createdBackupId.value) : undefined,
 	)
 
-	// Fallback: poll the REST API in case websocket events don't arrive
-	let pollTimer: ReturnType<typeof setInterval> | null = null
-
-	function stopPolling() {
-		if (pollTimer !== null) {
-			clearInterval(pollTimer)
-			pollTimer = null
-		}
-	}
+	const isBackingUp = computed(
+		() =>
+			!backupComplete.value &&
+			!backupFailed.value &&
+			!backupCancelled.value &&
+			(!!createdBackupId.value || pendingCreate.value),
+	)
 
-	async function pollBackupStatus(backupId: string) {
-		if (!isBackingUp.value) {
-			stopPolling()
-			return
-		}
+	const externalBackupInProgress = computed(() => hasActiveCreate.value && !myActiveOp.value)
 
-		try {
-			const backup = await client.archon.backups_v1.get(serverId, worldId.value!, backupId)
-			const isTerminal =
-				backup.status === 'done' || backup.status === 'error' || backup.status === 'timed_out'
-
-			if (isTerminal) {
-				stopPolling()
-				if (!isBackingUp.value) return
-				if (backup.status === 'error' || backup.status === 'timed_out') {
-					isBackingUp.value = false
-					backupFailed.value = true
-				} else {
-					isBackingUp.value = false
-					backupComplete.value = true
-				}
-			}
-		} catch {
-			stopPolling()
-			isBackingUp.value = false
-			backupFailed.value = true
-		}
-	}
+	watch(
+		myBackup,
+		(b) => {
+			if (!createdBackupId.value || !b) return
+			if (b.status === 'done') backupComplete.value = true
+			else if (b.status === 'error' || b.status === 'timed_out') backupFailed.value = true
+		},
+		{ immediate: true },
+	)
 
 	async function startBackup() {
 		if (!worldId.value) return
 
 		const name = typeof backupName === 'function' ? backupName() : backupName
 
-		isBackingUp.value = true
 		backupFailed.value = false
 		backupComplete.value = false
 		backupCancelled.value = false
 		isCancelling.value = false
 		createdBackupId.value = null
+		pendingCreate.value = true
 
 		try {
-			const { id } = await client.archon.backups_v1.create(serverId, worldId.value, { name })
+			const { id } = await client.archon.backups_queue_v1.create(serverId, worldId.value, { name })
 			createdBackupId.value = id
-
-			stopPolling()
-			pollTimer = setInterval(() => pollBackupStatus(id), 3000)
+			await invalidate()
 		} catch (error) {
-			isBackingUp.value = false
 			backupFailed.value = true
-
 			const message = error instanceof Error ? error.message : String(error)
 			const isRateLimit = message.includes('429')
 			addNotification({
@@ -171,6 +127,8 @@ export function useInlineBackup(backupName: string | (() => string)) {
 				title: 'Error creating backup',
 				text: isRateLimit ? "You're creating backups too fast." : message,
 			})
+		} finally {
+			pendingCreate.value = false
 		}
 	}
 
@@ -178,23 +136,19 @@ export function useInlineBackup(backupName: string | (() => string)) {
 		if (!worldId.value || !createdBackupId.value || !isBackingUp.value) return
 
 		isCancelling.value = true
-		stopPolling()
-		markBackupCancelled(createdBackupId.value)
-
 		try {
 			await client.archon.backups_v1.delete(serverId, worldId.value, createdBackupId.value)
-			isBackingUp.value = false
-			isCancelling.value = false
 			backupCancelled.value = true
+			isCancelling.value = false
+			await invalidate()
 			addNotification({
 				type: 'info',
 				title: 'Backup cancelled',
 				text: 'The backup has been cancelled. You can create a new one or proceed without a backup.',
 			})
 		} catch {
-			isBackingUp.value = false
-			isCancelling.value = false
 			backupFailed.value = true
+			isCancelling.value = false
 		}
 	}
 
@@ -216,7 +170,6 @@ export function useInlineBackup(backupName: string | (() => string)) {
 
 		onBeforeUnmount(() => {
 			window.removeEventListener('beforeunload', handleBeforeUnload)
-			stopPolling()
 		})
 
 		onBeforeRouteLeave(() => {
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
index 88871811ea..dc46a6f1c7 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
@@ -27,12 +27,12 @@
 		</div>
 
 		<div v-else key="content" class="contents">
-			<BackupCreateModal ref="createBackupModal" :backups="backupsData ?? []" />
-			<BackupRenameModal ref="renameBackupModal" :backups="backupsData ?? []" />
+			<BackupCreateModal ref="createBackupModal" :backups="backups" />
+			<BackupRenameModal ref="renameBackupModal" :backups="backups" />
 			<BackupRestoreModal ref="restoreBackupModal" />
 			<BackupDeleteModal ref="deleteBackupModal" @delete="deleteBackup" />
 
-			<div v-if="backupsData?.length" class="mb-2 flex items-center align-middle justify-between">
+			<div v-if="backups.length" class="mb-2 flex items-center align-middle justify-between">
 				<span class="text-2xl font-semibold text-contrast">Backups</span>
 				<ButtonStyled color="brand">
 					<button
@@ -53,7 +53,7 @@
 						key="empty"
 						class="mt-6 flex flex-col items-center justify-center gap-2 text-center text-secondary"
 					>
-						<template v-if="!backupsData">
+						<template v-if="query.isPending.value">
 							<SpinnerIcon class="animate-spin" />
 							Loading backups...
 						</template>
@@ -97,6 +97,7 @@
 										v-for="backup in group.backups"
 										:key="`backup-${backup.id}`"
 										:backup="backup"
+										:active-operation="activeOperationByBackupId.get(backup.id)"
 										:restore-disabled="backupRestoreDisabled"
 										:kyros-url="server.node?.instance"
 										:jwt="server.node?.token"
@@ -109,7 +110,6 @@
 											(skipConfirmation?: boolean) =>
 												skipConfirmation ? deleteBackup(backup) : deleteBackupModal?.show(backup)
 										"
-										@retry="() => retryBackup(backup.id)"
 									/>
 								</TransitionGroup>
 							</div>
@@ -143,7 +143,7 @@
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
 import { CalendarIcon, DownloadIcon, IssuesIcon, PlusIcon, SpinnerIcon } from '@modrinth/assets'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 import type { Component } from 'vue'
 import { computed, ref } from 'vue'
@@ -157,6 +157,7 @@ import BackupItem from '#ui/components/servers/backups/BackupItem.vue'
 import BackupRenameModal from '#ui/components/servers/backups/BackupRenameModal.vue'
 import BackupRestoreModal from '#ui/components/servers/backups/BackupRestoreModal.vue'
 import { useVIntl } from '#ui/composables/i18n'
+import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
@@ -167,8 +168,7 @@ const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
-const { server, worldId, backupsState, markBackupCancelled, busyReasons } =
-	injectModrinthServerContext()
+const { server, worldId, busyReasons } = injectModrinthServerContext()
 
 const props = defineProps<{
 	isServerRunning: boolean
@@ -181,68 +181,42 @@ const serverId = route.params.id as string
 
 defineEmits(['onDownload'])
 
-const backupsQueryKey = ['backups', 'list', serverId]
-const {
-	data: backupsData,
-	error,
-	refetch,
-} = useQuery({
-	queryKey: backupsQueryKey,
-	queryFn: () => client.archon.backups_v1.list(serverId, worldId.value!),
+const { backups, activeOperationByBackupId, invalidate, hasActiveCreate, query } =
+	useServerBackupsQueue(
+		computed(() => serverId),
+		worldId,
+	)
+
+const error = computed(() => {
+	const err = query.error.value
+	return err instanceof Error ? err : err ? new Error(String(err)) : null
 })
+const refetch = () => query.refetch()
 
-const deleteMutation = useMutation({
+/** Completed backups with a snapshot: queue API schedules deletion. */
+const deleteQueueMutation = useMutation({
 	mutationFn: (backupId: string) =>
-		client.archon.backups_v1.delete(serverId, worldId.value!, backupId),
-	onSuccess: (_data, backupId) => {
-		markBackupCancelled(backupId)
-		backupsState.delete(backupId)
-		queryClient.invalidateQueries({ queryKey: backupsQueryKey })
-		queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
+		client.archon.backups_queue_v1.delete(serverId, worldId.value!, backupId),
+	onSuccess: async () => {
+		await invalidate()
+		await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
 	},
 })
 
-const retryMutation = useMutation({
+/** In-progress / incomplete backups: legacy cancel + delete path. */
+const deleteLegacyMutation = useMutation({
 	mutationFn: (backupId: string) =>
-		client.archon.backups_v1.retry(serverId, worldId.value!, backupId),
-	onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey }),
-})
-
-const backups = computed(() => {
-	if (!backupsData.value) return []
-
-	const merged = backupsData.value.map((backup) => {
-		const progressState = backupsState.get(backup.id)
-		if (progressState) {
-			const hasOngoingTask = Object.values(progressState).some((task) => task?.state === 'ongoing')
-			const hasCompletedTask = Object.values(progressState).some((task) => task?.state === 'done')
-
-			return {
-				...backup,
-				task: {
-					...backup.task,
-					...progressState,
-				},
-				status: hasOngoingTask
-					? ('in_progress' as const)
-					: hasCompletedTask
-						? ('done' as const)
-						: backup.status,
-				ongoing: hasOngoingTask || (backup.ongoing && !hasCompletedTask),
-			}
-		}
-		return backup
-	})
-
-	return merged.sort((a, b) => {
-		return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-	})
+		client.archon.backups_v1.delete(serverId, worldId.value!, backupId),
+	onSuccess: async () => {
+		await invalidate()
+		await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
+	},
 })
 
 type BackupGroup = {
 	label: string
 	icon: Component | null
-	backups: Archon.Backups.v1.Backup[]
+	backups: Archon.BackupsQueue.v1.BackupQueueBackup[]
 }
 
 const groupedBackups = computed((): BackupGroup[] => {
@@ -251,7 +225,11 @@ const groupedBackups = computed((): BackupGroup[] => {
 	const now = dayjs()
 	const groups: BackupGroup[] = []
 
-	const addToGroup = (label: string, icon: Component | null, backup: Archon.Backups.v1.Backup) => {
+	const addToGroup = (
+		label: string,
+		icon: Component | null,
+		backup: Archon.BackupsQueue.v1.BackupQueueBackup,
+	) => {
 		let group = groups.find((g) => g.label === label)
 		if (!group) {
 			group = { label, icon, backups: [] }
@@ -302,7 +280,7 @@ const backupRestoreDisabled = computed(() => {
 const backupCreationDisabled = computed(() => {
 	const quota = server.value.backup_quota
 	if (quota !== undefined) {
-		const usedCount = backupsData.value?.length ?? server.value.used_backup_quota ?? 0
+		const usedCount = backups.value.length ?? server.value.used_backup_quota ?? 0
 		if (usedCount >= quota) {
 			return `All ${quota} of your backup slots are in use`
 		}
@@ -310,8 +288,7 @@ const backupCreationDisabled = computed(() => {
 	if (busyReasons.value.length > 0) {
 		return formatMessage(busyReasons.value[0].reason)
 	}
-	// also check for active backups, combining REST data with WS overlay
-	if (backups.value.some((b) => b.status === 'in_progress' || b.status === 'pending')) {
+	if (hasActiveCreate.value) {
 		return 'A backup is already in progress'
 	}
 	return undefined
@@ -326,15 +303,11 @@ function triggerDownloadAnimation() {
 	setTimeout(() => (overTheTopDownloadAnimation.value = false), 500)
 }
 
-const retryBackup = (backupId: string) => {
-	retryMutation.mutate(backupId, {
-		onError: (err) => {
-			console.error('Failed to retry backup:', err)
-		},
-	})
+function useQueueDeleteFor(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
+	return backup.status === 'done'
 }
 
-function deleteBackup(backup?: Archon.Backups.v1.Backup) {
+function deleteBackup(backup?: Archon.BackupsQueue.v1.BackupQueueBackup) {
 	if (!backup) {
 		addNotification({
 			type: 'error',
@@ -344,7 +317,9 @@ function deleteBackup(backup?: Archon.Backups.v1.Backup) {
 		return
 	}
 
-	deleteMutation.mutate(backup.id, {
+	const mutation = useQueueDeleteFor(backup) ? deleteQueueMutation : deleteLegacyMutation
+
+	mutation.mutate(backup.id, {
 		onError: (err) => {
 			const message = err instanceof Error ? err.message : String(err)
 			addNotification({
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 4bb18bdf89..14a6b5f3a9 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -468,6 +468,7 @@ import {
 	useServerProject,
 } from '#ui/composables'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
 import { useServerManageCoreRuntime } from '#ui/composables/server-manage-core-runtime'
 import type { LogLine } from '#ui/layouts/shared/console'
 import type { ServerSettingsTabId } from '#ui/layouts/shared/server-settings'
@@ -629,17 +630,17 @@ const worldId = computed(() => {
 	return activeWorld?.id ?? serverFull.value.worlds[0]?.id ?? null
 })
 
+const { handleWsBackupProgress, busyReasons: backupsBusy } = useServerBackupsQueue(
+	computed(() => props.serverId),
+	worldId,
+)
+
 const { image: serverImage } = useServerImage(
 	props.serverId,
 	computed(() => serverData.value?.upstream ?? null),
 )
 const { data: serverProject } = useServerProject(computed(() => serverData.value?.upstream ?? null))
 
-const cancelledBackups = new Set<string>()
-const markBackupCancelled = (backupId: string) => {
-	cancelledBackups.add(backupId)
-}
-
 const syncProgress = ref<Archon.Websocket.v0.SyncContentProgress | null>(null)
 const contentError = ref<Archon.Websocket.v0.SyncContentError | null>(null)
 const syncProgressActive = ref(false)
@@ -697,7 +698,6 @@ const onStateEvent = (data: Archon.Websocket.v0.WSStateEvent) => {
 }
 
 const {
-	backupsState,
 	cancelUpload,
 	cleanupCoreRuntime,
 	connectSocket,
@@ -715,8 +715,7 @@ const {
 	worldId,
 	server: serverData,
 	isSyncingContent,
-	markBackupCancelled,
-	includeBackupBusyReasons: true,
+	extraBusyReasons: backupsBusy,
 	setDisconnectedOnAuthIncorrect: false,
 	syncUptimeFromState: true,
 	incrementUptimeLocally: true,
@@ -988,69 +987,7 @@ async function handleContentRetry() {
 }
 
 const handleBackupProgress = (data: Archon.Websocket.v0.WSBackupProgressEvent) => {
-	if (data.task === 'file') return
-
-	const backupId = data.id
-
-	if (cancelledBackups.has(backupId)) return
-
-	const current = backupsState.get(backupId) ?? {}
-	const currentTaskState = current[data.task]?.state
-	const isIncomingTerminal =
-		data.state === 'done' || data.state === 'failed' || data.state === 'cancelled'
-
-	if (currentTaskState === data.state && isIncomingTerminal) return
-
-	const previousProgress = current[data.task]?.progress
-	if (currentTaskState !== data.state || previousProgress !== data.progress) {
-		backupsState.set(backupId, {
-			...current,
-			[data.task]: {
-				progress: data.progress,
-				state: data.state,
-			},
-		})
-	}
-
-	if (isIncomingTerminal) {
-		const attemptCleanup = (attempt: number = 1) => {
-			queryClient.invalidateQueries({ queryKey: ['backups', 'list', props.serverId] }).then(() => {
-				const backupData = queryClient.getQueryData<Archon.Backups.v1.Backup[]>([
-					'backups',
-					'list',
-					props.serverId,
-				])
-				const backup = backupData?.find((b) => b.id === backupId)
-				const isStillActive =
-					backup && (backup.status === 'in_progress' || backup.status === 'pending')
-
-				if (isStillActive && attempt < 6) {
-					setTimeout(() => attemptCleanup(attempt + 1), 1000 * Math.pow(2, attempt - 1))
-					return
-				}
-
-				if (isStillActive) {
-					queryClient.setQueryData<Archon.Backups.v1.Backup[]>(
-						['backups', 'list', props.serverId],
-						(old) =>
-							old?.map((b) => {
-								if (b.id !== backupId) return b
-								return {
-									...b,
-									status: data.state === 'done' ? ('done' as const) : ('error' as const),
-									ongoing: false,
-									interrupted: data.state === 'failed',
-								}
-							}),
-					)
-				}
-
-				backupsState.delete(backupId)
-			})
-		}
-
-		attemptCleanup()
-	}
+	handleWsBackupProgress(data)
 }
 
 const handleFilesystemOps = (data: Archon.Websocket.v0.WSFilesystemOpsEvent) => {
@@ -1474,8 +1411,6 @@ const cleanup = () => {
 	isReconnecting.value = false
 	isLoading.value = true
 
-	cancelledBackups.clear()
-
 	DOMPurify.removeHook('afterSanitizeAttributes')
 }
 
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index e6caa750a0..a9fd47afce 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -2654,6 +2654,18 @@
   "search.server_content_type.vanilla": {
     "defaultMessage": "Vanilla"
   },
+  "servers.backups.admonition.backup-cancelled.description": {
+    "defaultMessage": "Backup {backupName} was cancelled."
+  },
+  "servers.backups.admonition.backup-cancelled.title": {
+    "defaultMessage": "Backup cancelled"
+  },
+  "servers.backups.admonition.backup-completed.description": {
+    "defaultMessage": "{backupName} finished successfully."
+  },
+  "servers.backups.admonition.backup-completed.title": {
+    "defaultMessage": "Backup completed"
+  },
   "servers.backups.admonition.backup-failed.description": {
     "defaultMessage": "Something went wrong while creating {backupName}. Please try again or contact support if the issue continues."
   },
@@ -2675,6 +2687,12 @@
   "servers.backups.admonition.fallback-name": {
     "defaultMessage": "Your backup"
   },
+  "servers.backups.admonition.restore-cancelled.description": {
+    "defaultMessage": "Restoring from {backupName} was cancelled."
+  },
+  "servers.backups.admonition.restore-cancelled.title": {
+    "defaultMessage": "Restore cancelled"
+  },
   "servers.backups.admonition.restore-failed.description": {
     "defaultMessage": "Something went wrong while restoring from {backupName}. Please try again or contact support if the issue continues."
   },
@@ -2693,6 +2711,12 @@
   "servers.backups.admonition.restore-successful.title": {
     "defaultMessage": "Restoring from backup successful"
   },
+  "servers.backups.admonition.restore-timed-out.description": {
+    "defaultMessage": "Restoring from {backupName} timed out. You can try again or contact support if the issue continues."
+  },
+  "servers.backups.admonition.restore-timed-out.title": {
+    "defaultMessage": "Restore timed out"
+  },
   "servers.backups.admonition.restoring-backup.description": {
     "defaultMessage": "Restoring your server from {backupName}. This may take a couple of minutes."
   },
diff --git a/packages/ui/src/providers/server-context.ts b/packages/ui/src/providers/server-context.ts
index 2c6cd84e5e..5b786d98d6 100644
--- a/packages/ui/src/providers/server-context.ts
+++ b/packages/ui/src/providers/server-context.ts
@@ -1,6 +1,6 @@
 import type { Archon, UploadState } from '@modrinth/api-client'
 import type { Stats } from '@modrinth/utils'
-import type { ComputedRef, Reactive, Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 
 import type { MessageDescriptor } from '#ui/composables/i18n'
 import type { FileOperation } from '#ui/layouts/shared/files-tab/types'
@@ -11,19 +11,6 @@ export interface BusyReason {
 	reason: MessageDescriptor
 }
 
-export type BackupTaskState = {
-	progress: number
-	state: Archon.Backups.v1.BackupState
-}
-
-export type BackupProgressEntry = {
-	file?: BackupTaskState
-	create?: BackupTaskState
-	restore?: BackupTaskState
-}
-
-export type BackupsState = Map<string, BackupProgressEntry>
-
 export interface FilesystemAuth {
 	url: string
 	token: string
@@ -42,8 +29,6 @@ export interface ModrinthServerContext {
 	readonly isServerRunning: ComputedRef<boolean>
 	readonly stats: Ref<Stats>
 	readonly uptimeSeconds: Ref<number>
-	readonly backupsState: Reactive<BackupsState>
-	markBackupCancelled: (backupId: string) => void
 
 	// Content sync state
 	readonly isSyncingContent: Ref<boolean>
diff --git a/packages/ui/src/stories/servers/EditServerIcon.stories.ts b/packages/ui/src/stories/servers/EditServerIcon.stories.ts
index e93ddc154b..a9b0bfdf6f 100644
--- a/packages/ui/src/stories/servers/EditServerIcon.stories.ts
+++ b/packages/ui/src/stories/servers/EditServerIcon.stories.ts
@@ -1,7 +1,7 @@
 import type { Archon, UploadState } from '@modrinth/api-client'
 import type { Stats } from '@modrinth/utils'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { computed, reactive, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import EditServerIcon from '../../components/servers/edit-server-icon/EditServerIcon.vue'
 import { provideModrinthServerContext } from '../../providers'
@@ -66,8 +66,6 @@ const meta = {
 					isServerRunning: computed(() => true),
 					stats,
 					uptimeSeconds: ref(0),
-					backupsState: reactive(new Map()),
-					markBackupCancelled: () => {},
 					isSyncingContent: ref(false),
 					busyReasons: computed(() => []),
 					fsAuth: ref(null),

From e998a6acdec452699477718056c51fcd0f90bcfe Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 20 Apr 2026 14:19:20 +0100
Subject: [PATCH 06/13] feat: ack fix

---
 .../backups/BackupProgressAdmonitions.vue     | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue b/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
index 234008f0a6..fd7665cf08 100644
--- a/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
+++ b/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
@@ -95,12 +95,23 @@ async function handleDismiss(item: AdmonitionEntry) {
 		await invalidate()
 		return
 	}
-	const call =
-		item.type === 'create'
-			? client.archon.backups_queue_v1.ackCreate
-			: client.archon.backups_queue_v1.ackRestore
 	try {
-		await call(serverId, worldId.value!, item.operationId)
+		if (item.type === 'create') {
+			await client.archon.backups_queue_v1.ackCreate(
+				serverId,
+				worldId.value!,
+				item.operationId,
+			)
+		} else {
+			await client.archon.backups_queue_v1.ackRestore(
+				serverId,
+				worldId.value!,
+				item.operationId,
+			)
+		}
+	} catch (err) {
+		dismissedIds.delete(item.key)
+		console.error('Failed to acknowledge backup operation', err)
 	} finally {
 		await invalidate()
 	}

From c406884ebedeaebaa0380a503933f457dfaeb07c Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 20 Apr 2026 16:30:37 +0100
Subject: [PATCH 07/13] feat: bulk actions

---
 packages/ui/src/components/base/Checkbox.vue  |   4 +-
 .../servers/backups/BackupDeleteModal.vue     |  79 +++-
 .../components/servers/backups/BackupItem.vue |   5 +-
 .../backups/BackupProgressAdmonitions.vue     |  21 +-
 .../hosting/manage/backups-selection.ts       |  74 ++++
 .../wrapped/hosting/manage/backups.vue        | 411 +++++++++++++++---
 packages/ui/src/locales/en-US/index.json      |  51 +++
 7 files changed, 540 insertions(+), 105 deletions(-)
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/backups-selection.ts

diff --git a/packages/ui/src/components/base/Checkbox.vue b/packages/ui/src/components/base/Checkbox.vue
index 02a935e3ab..16d7b1f949 100644
--- a/packages/ui/src/components/base/Checkbox.vue
+++ b/packages/ui/src/components/base/Checkbox.vue
@@ -7,8 +7,8 @@
 				? 'cursor-not-allowed opacity-50'
 				: 'cursor-pointer hover:brightness-[--hover-brightness] focus-visible:brightness-[--hover-brightness]'
 		"
-		:aria-label="description || label"
-		:aria-checked="modelValue"
+		:aria-label="description || label || undefined"
+		:aria-checked="indeterminate ? 'mixed' : modelValue"
 		role="checkbox"
 		@click="toggle"
 	>
diff --git a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
index 4731e7b7a2..9e0d1d3c84 100644
--- a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
@@ -1,28 +1,28 @@
 <template>
-	<NewModal ref="modal" header="Delete backup" fade="danger">
-		<div class="flex flex-col gap-6 max-w-[400px]">
-			<Admonition type="critical" header="Delete warning">
-				This backup will be permanently deleted. This action cannot be undone.
+	<NewModal
+		ref="modal"
+		:header="formatMessage(messages.header, { count })"
+		fade="danger"
+		max-width="500px"
+	>
+		<div class="flex flex-col gap-6">
+			<Admonition type="critical" :header="formatMessage(messages.admonitionHeader)">
+				{{ formatMessage(messages.admonitionBody, { count }) }}
 			</Admonition>
-
-			<div v-if="currentBackup" class="flex flex-col gap-2">
-				<span class="font-semibold text-contrast">Backup</span>
-				<BackupItem :backup="currentBackup" preview class="!bg-surface-2 !shadow-none" />
-			</div>
 		</div>
 
 		<template #actions>
-			<div class="flex gap-2 justify-end">
+			<div class="flex justify-end gap-2">
 				<ButtonStyled type="outlined">
 					<button class="!border !border-surface-4" @click="modal?.hide()">
 						<XIcon />
-						Cancel
+						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="red">
-					<button @click="deleteBackup">
+					<button @click="confirmDelete">
 						<TrashIcon />
-						Delete backup
+						{{ formatMessage(messages.confirm, { count }) }}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -33,31 +33,72 @@
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
 import { TrashIcon, XIcon } from '@modrinth/assets'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
+import { defineMessages, useVIntl } from '../../../composables/i18n'
+import { commonMessages } from '../../../utils'
 import Admonition from '../../base/Admonition.vue'
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import NewModal from '../../modal/NewModal.vue'
-import BackupItem from './BackupItem.vue'
+
+const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{
 	(e: 'delete', backup: Archon.BackupsQueue.v1.BackupQueueBackup | undefined): void
+	(e: 'bulk-delete', backups: Archon.BackupsQueue.v1.BackupQueueBackup[]): void
 }>()
 
+const messages = defineMessages({
+	header: {
+		id: 'servers.backups.delete-modal.header',
+		defaultMessage: 'Delete {count, plural, one {backup} other {backups}}',
+	},
+	admonitionHeader: {
+		id: 'servers.backups.delete-modal.admonition-header',
+		defaultMessage: 'Deletion warning',
+	},
+	admonitionBody: {
+		id: 'servers.backups.delete-modal.admonition-body',
+		defaultMessage:
+			'{count, plural, one {This backup} other {These backups}} cannot be recovered once deleted. This action is permanent.',
+	},
+	confirm: {
+		id: 'servers.backups.delete-modal.confirm',
+		defaultMessage: 'Delete {count, plural, one {backup} other {# backups}}',
+	},
+})
+
 const modal = ref<InstanceType<typeof NewModal>>()
-const currentBackup = ref<Archon.BackupsQueue.v1.BackupQueueBackup>()
+const singleBackup = ref<Archon.BackupsQueue.v1.BackupQueueBackup>()
+const bulkBackups = ref<Archon.BackupsQueue.v1.BackupQueueBackup[]>([])
+
+const isBulk = computed(() => bulkBackups.value.length > 0)
+const count = computed(() => (isBulk.value ? bulkBackups.value.length : 1))
 
 function show(backup: Archon.BackupsQueue.v1.BackupQueueBackup) {
-	currentBackup.value = backup
+	singleBackup.value = backup
+	bulkBackups.value = []
+	modal.value?.show()
+}
+
+function showBulk(backups: Archon.BackupsQueue.v1.BackupQueueBackup[]) {
+	singleBackup.value = undefined
+	bulkBackups.value = [...backups]
 	modal.value?.show()
 }
 
-function deleteBackup() {
+function confirmDelete() {
 	modal.value?.hide()
-	emit('delete', currentBackup.value)
+	if (isBulk.value) {
+		emit('bulk-delete', bulkBackups.value)
+		bulkBackups.value = []
+	} else {
+		emit('delete', singleBackup.value)
+	}
 }
 
 defineExpose({
 	show,
+	showBulk,
 })
 </script>
diff --git a/packages/ui/src/components/servers/backups/BackupItem.vue b/packages/ui/src/components/servers/backups/BackupItem.vue
index 9681e3ea87..9873573938 100644
--- a/packages/ui/src/components/servers/backups/BackupItem.vue
+++ b/packages/ui/src/components/servers/backups/BackupItem.vue
@@ -41,6 +41,7 @@ const props = withDefaults(
 		showCopyIdAction?: boolean
 		showDebugInfo?: boolean
 		restoreDisabled?: string
+		selected?: boolean
 	}>(),
 	{
 		preview: false,
@@ -49,6 +50,7 @@ const props = withDefaults(
 		showCopyIdAction: false,
 		showDebugInfo: false,
 		restoreDisabled: undefined,
+		selected: false,
 	},
 )
 
@@ -164,7 +166,8 @@ const messages = defineMessages({
 </script>
 <template>
 	<div
-		class="flex items-center gap-4 rounded-[20px] bg-surface-3 p-4 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.3),0px_1px_3px_0px_rgba(0,0,0,0.15)]"
+		class="flex items-center gap-4 rounded-[20px] border-2 border-solid bg-surface-3 p-4 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.3),0px_1px_3px_0px_rgba(0,0,0,0.15)]"
+		:class="props.selected ? 'border-brand-green' : 'border-transparent'"
 	>
 		<div class="flex min-w-0 flex-1 items-center gap-4">
 			<!-- Icon tile -->
diff --git a/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue b/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
index fd7665cf08..389c7d44ba 100644
--- a/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
+++ b/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
@@ -8,6 +8,7 @@ import {
 	TriangleAlertIcon,
 	XIcon,
 } from '@modrinth/assets'
+import { useNow } from '@vueuse/core'
 import { computed, reactive } from 'vue'
 
 import { useRelativeTime } from '../../../composables'
@@ -21,6 +22,12 @@ import ProgressBar from '../../base/ProgressBar.vue'
 
 const { formatMessage } = useVIntl()
 const relativeTime = useRelativeTime()
+const now = useNow({ interval: 1000 })
+
+function formatCreatedRelative(createdAt: string | undefined) {
+	void now.value // tracks the useNow tick so the string re-renders every second
+	return relativeTime(createdAt)
+}
 const client = injectModrinthClient()
 const { serverId, worldId } = injectModrinthServerContext()
 const { activeOperations, backups, progressFor, invalidate } = useServerBackupsQueue(
@@ -97,17 +104,9 @@ async function handleDismiss(item: AdmonitionEntry) {
 	}
 	try {
 		if (item.type === 'create') {
-			await client.archon.backups_queue_v1.ackCreate(
-				serverId,
-				worldId.value!,
-				item.operationId,
-			)
+			await client.archon.backups_queue_v1.ackCreate(serverId, worldId.value!, item.operationId)
 		} else {
-			await client.archon.backups_queue_v1.ackRestore(
-				serverId,
-				worldId.value!,
-				item.operationId,
-			)
+			await client.archon.backups_queue_v1.ackRestore(serverId, worldId.value!, item.operationId)
 		}
 	} catch (err) {
 		dismissedIds.delete(item.key)
@@ -321,7 +320,7 @@ const messages = defineMessages({
 					<span>{{ getTitle(item) }}</span>
 					<div v-if="item.createdAt" class="flex items-center gap-1.5 text-secondary">
 						<ClockIcon class="size-4" />
-						<span class="font-medium">{{ relativeTime(item.createdAt) }}</span>
+						<span class="font-medium">{{ formatCreatedRelative(item.createdAt) }}</span>
 					</div>
 				</div>
 			</template>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups-selection.ts b/packages/ui/src/layouts/wrapped/hosting/manage/backups-selection.ts
new file mode 100644
index 0000000000..fd8e65331d
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups-selection.ts
@@ -0,0 +1,74 @@
+import type { Archon } from '@modrinth/api-client'
+import type { ComputedRef, Ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+
+type BackupQueueBackup = Archon.BackupsQueue.v1.BackupQueueBackup
+
+export function useBackupsSelection(
+	visibleBackups: Ref<BackupQueueBackup[]>,
+	displayOrderedBackups: ComputedRef<BackupQueueBackup[]>,
+) {
+	const selectedIds = ref<Set<string>>(new Set())
+
+	watch(visibleBackups, () => {
+		const ids = new Set(visibleBackups.value.map((b) => b.id))
+		const next = new Set<string>()
+		for (const id of selectedIds.value) {
+			if (ids.has(id)) next.add(id)
+		}
+		if (next.size !== selectedIds.value.size) {
+			selectedIds.value = next
+		}
+	})
+
+	function toggleSelection(id: string) {
+		const next = new Set(selectedIds.value)
+		if (next.has(id)) next.delete(id)
+		else next.add(id)
+		selectedIds.value = next
+	}
+
+	function selectAll() {
+		selectedIds.value = new Set(visibleBackups.value.map((b) => b.id))
+	}
+
+	function deselectAll() {
+		selectedIds.value = new Set()
+	}
+
+	function toggleSelectAll() {
+		if (allSelected.value) deselectAll()
+		else selectAll()
+	}
+
+	const allSelected = computed(
+		() =>
+			visibleBackups.value.length > 0 &&
+			visibleBackups.value.every((b) => selectedIds.value.has(b.id)),
+	)
+
+	const someSelected = computed(() => {
+		const vis = visibleBackups.value
+		if (vis.length === 0) return false
+		let n = 0
+		for (const b of vis) {
+			if (selectedIds.value.has(b.id)) n++
+		}
+		return n > 0 && n < vis.length
+	})
+
+	const selectedBackups = computed(() =>
+		displayOrderedBackups.value.filter((b) => selectedIds.value.has(b.id)),
+	)
+
+	return {
+		selectedIds,
+		toggleSelection,
+		selectAll,
+		deselectAll,
+		toggleSelectAll,
+		allSelected,
+		someSelected,
+		selectedBackups,
+	}
+}
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
index 62efc198c8..89c8a09027 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
@@ -31,10 +31,26 @@
 				<BackupCreateModal ref="createBackupModal" :backups="backups" />
 				<BackupRenameModal ref="renameBackupModal" :backups="backups" />
 				<BackupRestoreModal ref="restoreBackupModal" />
-				<BackupDeleteModal ref="deleteBackupModal" @delete="deleteBackup" />
-
-				<div v-if="backups.length" class="mb-2 flex items-center align-middle justify-between">
-					<span class="text-2xl font-semibold text-contrast">Backups</span>
+				<BackupDeleteModal
+					ref="deleteBackupModal"
+					@delete="deleteBackup"
+					@bulk-delete="bulkDelete"
+				/>
+
+				<div v-if="backups.length" class="mb-2 flex flex-wrap items-center justify-between gap-4">
+					<div class="flex min-w-0 flex-wrap items-center gap-4">
+						<Checkbox
+							:model-value="allSelected"
+							:indeterminate="someSelected"
+							:label="formatMessage(messages.selectAll)"
+							class="shrink-0 font-semibold"
+							@update:model-value="toggleSelectAll"
+						/>
+						<div class="hidden h-6 w-px bg-surface-5 sm:block" />
+						<FilterPills v-model="selectedFilters" :options="filterPillOptions">
+							<template #all>{{ formatMessage(commonMessages.allProjectType) }}</template>
+						</FilterPills>
+					</div>
 					<ButtonStyled color="brand">
 						<button
 							v-tooltip="backupCreationDisabled"
@@ -42,79 +58,175 @@
 							@click="showCreateModel"
 						>
 							<PlusIcon class="size-5" />
-							Create backup
+							{{ formatMessage(messages.createBackup) }}
 						</button>
 					</ButtonStyled>
 				</div>
 
 				<div class="flex w-full flex-col gap-1.5">
-					<Transition name="fade" mode="out-in">
-						<div
-							v-if="groupedBackups.length === 0"
-							key="empty"
-							class="mt-6 flex flex-col items-center justify-center gap-2 text-center text-secondary"
+					<div
+						v-if="groupedBackups.length === 0"
+						class="mt-6 flex flex-col items-center justify-center gap-2 text-center text-secondary"
+					>
+						<EmptyState
+							v-if="backups.length === 0"
+							type="empty-inbox"
+							:heading="formatMessage(messages.emptyHeading)"
+							:description="formatMessage(messages.emptyDescription)"
 						>
-							<EmptyState
-								type="empty-inbox"
-								heading="No backups yet"
-								description="Create your first backup"
-							>
-								<template #actions>
-									<ButtonStyled color="brand">
-										<button
-											v-tooltip="backupCreationDisabled"
-											:disabled="!!backupCreationDisabled"
-											class="w-min mx-auto"
-											@click="showCreateModel"
-										>
-											<PlusIcon class="size-5" />
-											Create backup
-										</button>
-									</ButtonStyled>
-								</template>
-							</EmptyState>
-						</div>
-
-						<div v-else key="list" class="flex flex-col gap-1.5">
-							<template v-for="group in groupedBackups" :key="group.label">
-								<div class="flex items-center gap-2">
-									<component :is="group.icon" v-if="group.icon" class="size-6 text-secondary" />
-									<span class="text-lg font-semibold text-secondary">{{ group.label }}</span>
-								</div>
-
-								<div class="flex gap-2">
-									<div class="flex w-5 justify-center">
-										<div class="h-full w-px bg-surface-5" />
-									</div>
+							<template #actions>
+								<ButtonStyled color="brand">
+									<button
+										v-tooltip="backupCreationDisabled"
+										:disabled="!!backupCreationDisabled"
+										class="mx-auto w-min"
+										@click="showCreateModel"
+									>
+										<PlusIcon class="size-5" />
+										{{ formatMessage(messages.createBackup) }}
+									</button>
+								</ButtonStyled>
+							</template>
+						</EmptyState>
+						<EmptyState
+							v-else
+							type="empty-inbox"
+							:heading="formatMessage(messages.filteredEmptyHeading)"
+							:description="formatMessage(messages.filteredEmptyDescription)"
+						>
+							<template #actions>
+								<ButtonStyled type="outlined">
+									<button class="!border !border-surface-4" @click="clearBackupFilters">
+										{{ formatMessage(messages.clearFilters) }}
+									</button>
+								</ButtonStyled>
+							</template>
+						</EmptyState>
+					</div>
 
-									<TransitionGroup name="list" tag="div" class="flex flex-1 flex-col gap-3 py-3">
-										<BackupItem
-											v-for="backup in group.backups"
-											:key="`backup-${backup.id}`"
-											:backup="backup"
-											:active-operation="activeOperationByBackupId.get(backup.id)"
-											:restore-disabled="backupRestoreDisabled"
-											:kyros-url="server.node?.instance"
-											:jwt="server.node?.token"
-											:show-copy-id-action="showCopyIdAction"
-											:show-debug-info="showDebugInfo"
-											@download="() => triggerDownloadAnimation()"
-											@rename="() => renameBackupModal?.show(backup)"
-											@restore="() => restoreBackupModal?.show(backup)"
-											@delete="
-												(skipConfirmation?: boolean) =>
-													skipConfirmation
-														? deleteBackup(backup)
-														: deleteBackupModal?.show(backup)
-											"
+					<div v-else class="flex flex-col gap-1.5">
+						<template v-for="group in groupedBackups" :key="group.label">
+							<div class="flex items-center gap-2">
+								<component :is="group.icon" v-if="group.icon" class="size-6 text-secondary" />
+								<span class="text-lg font-semibold text-secondary">{{ group.label }}</span>
+							</div>
+
+							<TransitionGroup name="list" tag="div" class="flex flex-col gap-3 py-3">
+								<div
+									v-for="backup in group.backups"
+									:key="`backup-${backup.id}`"
+									class="flex gap-2"
+								>
+									<div class="flex w-5 flex-col items-center">
+										<div class="min-h-3 w-px flex-1 bg-surface-5" />
+										<Checkbox
+											:model-value="selectedIds.has(backup.id)"
+											:description="formatMessage(messages.selectBackupAria, { name: backup.name })"
+											class="shrink-0"
+											@update:model-value="toggleSelection(backup.id)"
 										/>
-									</TransitionGroup>
+										<div class="min-h-3 w-px flex-1 bg-surface-5" />
+									</div>
+									<BackupItem
+										class="min-w-0 flex-1"
+										:backup="backup"
+										:selected="selectedIds.has(backup.id)"
+										:active-operation="activeOperationByBackupId.get(backup.id)"
+										:restore-disabled="backupRestoreDisabled"
+										:kyros-url="server.node?.instance"
+										:jwt="server.node?.token"
+										:show-copy-id-action="showCopyIdAction"
+										:show-debug-info="showDebugInfo"
+										@download="() => triggerDownloadAnimation()"
+										@rename="() => renameBackupModal?.show(backup)"
+										@restore="() => restoreBackupModal?.show(backup)"
+										@delete="
+											(skipConfirmation?: boolean) =>
+												skipConfirmation ? deleteBackup(backup) : deleteBackupModal?.show(backup)
+										"
+									/>
 								</div>
-							</template>
-						</div>
-					</Transition>
+							</TransitionGroup>
+						</template>
+					</div>
 				</div>
 
+				<FloatingActionBar
+					:shown="selectedIds.size > 0 || isBulkOperating"
+					:aria-label="
+						formatMessage(messages.bulkBarAriaLabel, {
+							count: isBulkOperating ? bulkTotal : selectedIds.size,
+						})
+					"
+				>
+					<div class="flex items-center gap-0.5">
+						<span class="px-4 py-2.5 text-base font-semibold tabular-nums text-contrast">
+							{{
+								formatMessage(messages.selectedCount, {
+									count: isBulkOperating ? bulkTotal : selectedIds.size,
+								})
+							}}
+						</span>
+						<div class="mx-1 h-6 w-px bg-surface-5" />
+						<ButtonStyled type="transparent">
+							<button
+								type="button"
+								:disabled="isBulkOperating"
+								:class="{ 'pointer-events-none opacity-60': isBulkOperating }"
+								@click="deselectAll"
+							>
+								{{ formatMessage(commonMessages.clearButton) }}
+							</button>
+						</ButtonStyled>
+					</div>
+
+					<div v-if="!isBulkOperating" class="ml-auto flex items-center gap-0.5">
+						<ButtonStyled type="transparent">
+							<button
+								type="button"
+								class="cq-show-icon"
+								:disabled="!canBulkDownload"
+								@click="bulkDownload"
+							>
+								<DownloadIcon />
+								<span class="bar-label">{{ formatMessage(commonMessages.downloadButton) }}</span>
+							</button>
+						</ButtonStyled>
+						<div class="mx-1 h-6 w-px bg-surface-5" />
+						<ButtonStyled type="transparent" color="red" hover-color-fill="background">
+							<button type="button" @click="confirmBulkDelete">
+								<TrashIcon />
+								<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
+							</button>
+						</ButtonStyled>
+					</div>
+
+					<div v-else class="ml-auto flex items-center">
+						<span class="px-4 py-2.5 text-base font-semibold tabular-nums text-secondary">
+							{{
+								formatMessage(messages.bulkDeleting, {
+									progress: bulkProgress,
+									total: bulkTotal,
+								})
+							}}
+						</span>
+					</div>
+
+					<div v-if="isBulkOperating" class="absolute bottom-0 left-0 right-0 h-1">
+						<div
+							class="h-full rounded-l-full bg-brand transition-[width] duration-200 ease-in-out"
+							:style="{
+								width: `${bulkTotal > 0 ? (bulkProgress / bulkTotal) * 100 : 0}%`,
+							}"
+							role="progressbar"
+							:aria-valuenow="bulkProgress"
+							:aria-valuemin="0"
+							:aria-valuemax="bulkTotal"
+							style="box-shadow: 0px -2px 4px 0px rgba(27, 217, 106, 0.1)"
+						/>
+					</div>
+				</FloatingActionBar>
+
 				<div
 					class="over-the-top-download-animation"
 					:class="{ 'animation-hidden': !overTheTopDownloadAnimation }"
@@ -140,7 +252,7 @@
 
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
-import { CalendarIcon, DownloadIcon, IssuesIcon, PlusIcon } from '@modrinth/assets'
+import { CalendarIcon, DownloadIcon, IssuesIcon, PlusIcon, TrashIcon } from '@modrinth/assets'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 import type { Component } from 'vue'
@@ -148,24 +260,91 @@ import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import Checkbox from '#ui/components/base/Checkbox.vue'
 import EmptyState from '#ui/components/base/EmptyState.vue'
+import FilterPills, { type FilterPillOption } from '#ui/components/base/FilterPills.vue'
+import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
 import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
 import BackupCreateModal from '#ui/components/servers/backups/BackupCreateModal.vue'
 import BackupDeleteModal from '#ui/components/servers/backups/BackupDeleteModal.vue'
 import BackupItem from '#ui/components/servers/backups/BackupItem.vue'
 import BackupRenameModal from '#ui/components/servers/backups/BackupRenameModal.vue'
 import BackupRestoreModal from '#ui/components/servers/backups/BackupRestoreModal.vue'
-import { useReadyState } from '#ui/composables'
-import { useVIntl } from '#ui/composables/i18n'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
+import { useBulkOperation } from '#ui/layouts/shared/content-tab/composables/bulk-operations'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
 	injectNotificationManager,
 } from '#ui/providers'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import { useBackupsSelection } from './backups-selection'
+
+const messages = defineMessages({
+	selectAll: {
+		id: 'servers.backups.toolbar.select-all',
+		defaultMessage: 'Select all',
+	},
+	selectBackupAria: {
+		id: 'servers.backups.select-backup-aria',
+		defaultMessage: 'Select backup {name}',
+	},
+	filterManual: {
+		id: 'servers.backups.toolbar.filter-manual',
+		defaultMessage: 'Manual',
+	},
+	filterAuto: {
+		id: 'servers.backups.toolbar.filter-auto',
+		defaultMessage: 'Auto',
+	},
+	selectedCount: {
+		id: 'servers.backups.bulk-bar.selected-count',
+		defaultMessage: '{count, plural, one {# backup selected} other {# backups selected}}',
+	},
+	bulkBarAriaLabel: {
+		id: 'servers.backups.bulk-bar.aria-label',
+		defaultMessage:
+			'{count, plural, one {Bulk actions for one selected backup} other {Bulk actions for # selected backups}}',
+	},
+	createBackup: {
+		id: 'servers.backups.toolbar.create-backup',
+		defaultMessage: 'Create backup',
+	},
+	emptyHeading: {
+		id: 'servers.backups.empty.heading',
+		defaultMessage: 'No backups yet',
+	},
+	emptyDescription: {
+		id: 'servers.backups.empty.description',
+		defaultMessage: 'Create your first backup',
+	},
+	filteredEmptyHeading: {
+		id: 'servers.backups.filtered-empty.heading',
+		defaultMessage: 'No backups match',
+	},
+	filteredEmptyDescription: {
+		id: 'servers.backups.filtered-empty.description',
+		defaultMessage: 'Try a different filter or clear filters to see all backups.',
+	},
+	clearFilters: {
+		id: 'servers.backups.filtered-empty.clear-filters',
+		defaultMessage: 'Clear filters',
+	},
+	bulkDeleting: {
+		id: 'servers.backups.bulk-bar.deleting',
+		defaultMessage: 'Deleting {progress}/{total} backups...',
+	},
+})
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
+
+const filterPillOptions = computed<FilterPillOption[]>(() => [
+	{ id: 'manual', label: formatMessage(messages.filterManual) },
+	{ id: 'auto', label: formatMessage(messages.filterAuto) },
+])
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const { server, worldId, busyReasons } = injectModrinthServerContext()
@@ -193,7 +372,21 @@ const error = computed(() => {
 })
 const refetch = () => query.refetch()
 
-const backupsReadyPending = useReadyState(query)
+/** Until world exists we cannot fetch; `isLoading` is false while the query is disabled, which would flash empty state. */
+const backupsReadyPending = computed(
+	() => !worldId.value || (query.data.value === undefined && !query.error.value),
+)
+
+const selectedFilters = ref<string[]>([])
+
+const filteredBackups = computed(() => {
+	const f = selectedFilters.value
+	if (f.length === 0 || f.length === 2) {
+		return backups.value
+	}
+	const wantAuto = f.includes('auto')
+	return backups.value.filter((b) => b.automated === wantAuto)
+})
 
 /** Completed backups with a snapshot: queue API schedules deletion. */
 const deleteQueueMutation = useMutation({
@@ -222,7 +415,7 @@ type BackupGroup = {
 }
 
 const groupedBackups = computed((): BackupGroup[] => {
-	if (!backups.value.length) return []
+	if (!filteredBackups.value.length) return []
 
 	const now = dayjs()
 	const groups: BackupGroup[] = []
@@ -240,7 +433,7 @@ const groupedBackups = computed((): BackupGroup[] => {
 		group.backups.push(backup)
 	}
 
-	for (const backup of backups.value) {
+	for (const backup of filteredBackups.value) {
 		const created = dayjs(backup.created_at)
 		const diffMinutes = now.diff(created, 'minute')
 		const isToday = created.isSame(now, 'day')
@@ -263,6 +456,22 @@ const groupedBackups = computed((): BackupGroup[] => {
 	return groups
 })
 
+const displayOrderedBackups = computed(() => groupedBackups.value.flatMap((g) => g.backups))
+
+const {
+	selectedIds,
+	toggleSelection,
+	deselectAll,
+	toggleSelectAll,
+	allSelected,
+	someSelected,
+	selectedBackups,
+} = useBackupsSelection(filteredBackups, displayOrderedBackups)
+
+const canBulkDownload = computed(() => selectedBackups.value.some((b) => b.status === 'done'))
+
+const { isBulkOperating, bulkProgress, bulkTotal, runBulk } = useBulkOperation()
+
 const overTheTopDownloadAnimation = ref()
 const createBackupModal = ref<InstanceType<typeof BackupCreateModal>>()
 const renameBackupModal = ref<InstanceType<typeof BackupRenameModal>>()
@@ -300,6 +509,64 @@ const showCreateModel = () => {
 	createBackupModal.value?.show()
 }
 
+function clearBackupFilters() {
+	selectedFilters.value = []
+}
+
+function bulkDownload() {
+	const kyros = server.value.node?.instance
+	const jwt = server.value.node?.token
+	if (!kyros || !jwt) return
+
+	const toDownload = selectedBackups.value.filter((b) => b.status === 'done')
+	if (!toDownload.length) return
+
+	for (const backup of toDownload) {
+		const url = `https://${kyros}/modrinth/v0/backups/${backup.id}/download?auth=${jwt}`
+		const iframe = document.createElement('iframe')
+		iframe.style.display = 'none'
+		iframe.src = url
+		document.body.appendChild(iframe)
+		setTimeout(() => iframe.remove(), 60_000)
+	}
+	triggerDownloadAnimation()
+	deselectAll()
+}
+
+function confirmBulkDelete() {
+	if (!selectedBackups.value.length) return
+	deleteBackupModal.value?.showBulk(selectedBackups.value)
+}
+
+async function bulkDelete(toRemove: Archon.BackupsQueue.v1.BackupQueueBackup[]) {
+	const failures: { name: string; message: string }[] = []
+
+	await runBulk(
+		'delete',
+		toRemove,
+		async (backup) => {
+			const mutation = useQueueDeleteFor(backup) ? deleteQueueMutation : deleteLegacyMutation
+			try {
+				await mutation.mutateAsync(backup.id)
+			} catch (err) {
+				failures.push({
+					name: backup.name,
+					message: err instanceof Error ? err.message : String(err),
+				})
+			}
+		},
+		{ delayMs: 0, onComplete: deselectAll },
+	)
+
+	if (failures.length) {
+		addNotification({
+			type: 'error',
+			title: `Failed to delete ${failures.length} backup${failures.length === 1 ? '' : 's'}`,
+			text: failures.map((f) => `${f.name}: ${f.message}`).join('\n'),
+		})
+	}
+}
+
 function triggerDownloadAnimation() {
 	overTheTopDownloadAnimation.value = true
 	setTimeout(() => (overTheTopDownloadAnimation.value = false), 500)
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 141028f7fa..08e2e7d8fb 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -2723,6 +2723,42 @@
   "servers.backups.admonition.restoring-backup.title": {
     "defaultMessage": "Restoring from backup"
   },
+  "servers.backups.bulk-bar.aria-label": {
+    "defaultMessage": "{count, plural, one {Bulk actions for one selected backup} other {Bulk actions for # selected backups}}"
+  },
+  "servers.backups.bulk-bar.deleting": {
+    "defaultMessage": "Deleting {progress}/{total} backups..."
+  },
+  "servers.backups.bulk-bar.selected-count": {
+    "defaultMessage": "{count, plural, one {# backup selected} other {# backups selected}}"
+  },
+  "servers.backups.delete-modal.admonition-body": {
+    "defaultMessage": "{count, plural, one {This backup} other {These backups}} cannot be recovered once deleted. This action is permanent."
+  },
+  "servers.backups.delete-modal.admonition-header": {
+    "defaultMessage": "Deletion warning"
+  },
+  "servers.backups.delete-modal.confirm": {
+    "defaultMessage": "Delete {count, plural, one {backup} other {# backups}}"
+  },
+  "servers.backups.delete-modal.header": {
+    "defaultMessage": "Delete {count, plural, one {backup} other {backups}}"
+  },
+  "servers.backups.empty.description": {
+    "defaultMessage": "Create your first backup"
+  },
+  "servers.backups.empty.heading": {
+    "defaultMessage": "No backups yet"
+  },
+  "servers.backups.filtered-empty.clear-filters": {
+    "defaultMessage": "Clear filters"
+  },
+  "servers.backups.filtered-empty.description": {
+    "defaultMessage": "Try a different filter or clear filters to see all backups."
+  },
+  "servers.backups.filtered-empty.heading": {
+    "defaultMessage": "No backups match"
+  },
   "servers.backups.item.auto": {
     "defaultMessage": "Auto"
   },
@@ -2750,6 +2786,21 @@
   "servers.backups.item.restoring": {
     "defaultMessage": "Restoring"
   },
+  "servers.backups.select-backup-aria": {
+    "defaultMessage": "Select backup {name}"
+  },
+  "servers.backups.toolbar.create-backup": {
+    "defaultMessage": "Create backup"
+  },
+  "servers.backups.toolbar.filter-auto": {
+    "defaultMessage": "Auto"
+  },
+  "servers.backups.toolbar.filter-manual": {
+    "defaultMessage": "Manual"
+  },
+  "servers.backups.toolbar.select-all": {
+    "defaultMessage": "Select all"
+  },
   "servers.busy.backup-creating": {
     "defaultMessage": "Backup creation in progress"
   },

From b404140b6a76cee60310bc4113c36c80c69ce6af Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 20 Apr 2026 19:47:43 +0100
Subject: [PATCH 08/13] feat: bulk delete impl

---
 .../src/modules/archon/backups-queue/v1.ts    |  17 +++
 .../api-client/src/modules/archon/types.ts    |   4 +
 .../wrapped/hosting/manage/backups.vue        | 112 +++++++-----------
 3 files changed, 64 insertions(+), 69 deletions(-)

diff --git a/packages/api-client/src/modules/archon/backups-queue/v1.ts b/packages/api-client/src/modules/archon/backups-queue/v1.ts
index b6262ca0a6..667eb1160a 100644
--- a/packages/api-client/src/modules/archon/backups-queue/v1.ts
+++ b/packages/api-client/src/modules/archon/backups-queue/v1.ts
@@ -57,6 +57,23 @@ export class ArchonBackupsQueueV1Module extends AbstractModule {
 		)
 	}
 
+	/** POST /v1/servers/:server_id/worlds/:world_id/backups-queue/delete-many */
+	public async deleteMany(
+		serverId: string,
+		worldId: string,
+		backupIds: string[],
+	): Promise<void> {
+		await this.client.request<void>(
+			`/servers/${serverId}/worlds/${worldId}/backups-queue/delete-many`,
+			{
+				api: 'archon',
+				version: 1,
+				method: 'POST',
+				body: { backup_ids: backupIds } satisfies Archon.BackupsQueue.v1.DeleteManyBackupRequest,
+			},
+		)
+	}
+
 	/** POST /v1/servers/:server_id/worlds/:world_id/backups-queue/:backup_id/restore */
 	public async restore(
 		serverId: string,
diff --git a/packages/api-client/src/modules/archon/types.ts b/packages/api-client/src/modules/archon/types.ts
index 15c5a791a1..b6435c0be2 100644
--- a/packages/api-client/src/modules/archon/types.ts
+++ b/packages/api-client/src/modules/archon/types.ts
@@ -511,6 +511,10 @@ export namespace Archon {
 				id: string
 			}
 
+			export type DeleteManyBackupRequest = {
+				backup_ids: string[]
+			}
+
 			export type ActiveOperation = {
 				backup_id: string
 				operation_type: BackupQueueOperationType
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
index 89c8a09027..25cd19cb6b 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
@@ -181,18 +181,6 @@
 					</div>
 
 					<div v-if="!isBulkOperating" class="ml-auto flex items-center gap-0.5">
-						<ButtonStyled type="transparent">
-							<button
-								type="button"
-								class="cq-show-icon"
-								:disabled="!canBulkDownload"
-								@click="bulkDownload"
-							>
-								<DownloadIcon />
-								<span class="bar-label">{{ formatMessage(commonMessages.downloadButton) }}</span>
-							</button>
-						</ButtonStyled>
-						<div class="mx-1 h-6 w-px bg-surface-5" />
 						<ButtonStyled type="transparent" color="red" hover-color-fill="background">
 							<button type="button" @click="confirmBulkDelete">
 								<TrashIcon />
@@ -201,25 +189,16 @@
 						</ButtonStyled>
 					</div>
 
-					<div v-else class="ml-auto flex items-center">
+					<div v-else class="ml-auto flex items-center" aria-live="polite">
 						<span class="px-4 py-2.5 text-base font-semibold tabular-nums text-secondary">
-							{{
-								formatMessage(messages.bulkDeleting, {
-									progress: bulkProgress,
-									total: bulkTotal,
-								})
-							}}
+							{{ formatMessage(messages.bulkDeleting, { total: bulkTotal }) }}
 						</span>
 					</div>
 
 					<div v-if="isBulkOperating" class="absolute bottom-0 left-0 right-0 h-1">
 						<div
-							class="h-full rounded-l-full bg-brand transition-[width] duration-200 ease-in-out"
-							:style="{
-								width: `${bulkTotal > 0 ? (bulkProgress / bulkTotal) * 100 : 0}%`,
-							}"
+							class="animate-indeterminate h-full rounded-l-full bg-brand"
 							role="progressbar"
-							:aria-valuenow="bulkProgress"
 							:aria-valuemin="0"
 							:aria-valuemax="bulkTotal"
 							style="box-shadow: 0px -2px 4px 0px rgba(27, 217, 106, 0.1)"
@@ -334,7 +313,7 @@ const messages = defineMessages({
 	},
 	bulkDeleting: {
 		id: 'servers.backups.bulk-bar.deleting',
-		defaultMessage: 'Deleting {progress}/{total} backups...',
+		defaultMessage: 'Deleting {total, plural, one {# backup} other {# backups}}...',
 	},
 })
 
@@ -408,6 +387,16 @@ const deleteLegacyMutation = useMutation({
 	},
 })
 
+/** Bulk delete via queue API — handles both completed and in-progress backups (cancels the latter). */
+const deleteManyMutation = useMutation({
+	mutationFn: (backupIds: string[]) =>
+		client.archon.backups_queue_v1.deleteMany(serverId, worldId.value!, backupIds),
+	onSuccess: async () => {
+		await invalidate()
+		await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
+	},
+})
+
 type BackupGroup = {
 	label: string
 	icon: Component | null
@@ -468,9 +457,7 @@ const {
 	selectedBackups,
 } = useBackupsSelection(filteredBackups, displayOrderedBackups)
 
-const canBulkDownload = computed(() => selectedBackups.value.some((b) => b.status === 'done'))
-
-const { isBulkOperating, bulkProgress, bulkTotal, runBulk } = useBulkOperation()
+const { isBulkOperating, bulkTotal } = useBulkOperation()
 
 const overTheTopDownloadAnimation = ref()
 const createBackupModal = ref<InstanceType<typeof BackupCreateModal>>()
@@ -513,57 +500,29 @@ function clearBackupFilters() {
 	selectedFilters.value = []
 }
 
-function bulkDownload() {
-	const kyros = server.value.node?.instance
-	const jwt = server.value.node?.token
-	if (!kyros || !jwt) return
-
-	const toDownload = selectedBackups.value.filter((b) => b.status === 'done')
-	if (!toDownload.length) return
-
-	for (const backup of toDownload) {
-		const url = `https://${kyros}/modrinth/v0/backups/${backup.id}/download?auth=${jwt}`
-		const iframe = document.createElement('iframe')
-		iframe.style.display = 'none'
-		iframe.src = url
-		document.body.appendChild(iframe)
-		setTimeout(() => iframe.remove(), 60_000)
-	}
-	triggerDownloadAnimation()
-	deselectAll()
-}
-
 function confirmBulkDelete() {
 	if (!selectedBackups.value.length) return
 	deleteBackupModal.value?.showBulk(selectedBackups.value)
 }
 
 async function bulkDelete(toRemove: Archon.BackupsQueue.v1.BackupQueueBackup[]) {
-	const failures: { name: string; message: string }[] = []
-
-	await runBulk(
-		'delete',
-		toRemove,
-		async (backup) => {
-			const mutation = useQueueDeleteFor(backup) ? deleteQueueMutation : deleteLegacyMutation
-			try {
-				await mutation.mutateAsync(backup.id)
-			} catch (err) {
-				failures.push({
-					name: backup.name,
-					message: err instanceof Error ? err.message : String(err),
-				})
-			}
-		},
-		{ delayMs: 0, onComplete: deselectAll },
-	)
+	if (!toRemove.length) return
 
-	if (failures.length) {
+	isBulkOperating.value = true
+	bulkTotal.value = toRemove.length
+
+	try {
+		await deleteManyMutation.mutateAsync(toRemove.map((b) => b.id))
+	} catch (err) {
 		addNotification({
 			type: 'error',
-			title: `Failed to delete ${failures.length} backup${failures.length === 1 ? '' : 's'}`,
-			text: failures.map((f) => `${f.name}: ${f.message}`).join('\n'),
+			title: `Failed to delete ${toRemove.length} backup${toRemove.length === 1 ? '' : 's'}`,
+			text: err instanceof Error ? err.message : String(err),
 		})
+	} finally {
+		deselectAll()
+		isBulkOperating.value = false
+		bulkTotal.value = 0
 	}
 }
 
@@ -634,6 +593,21 @@ function deleteBackup(backup?: Archon.BackupsQueue.v1.BackupQueueBackup) {
 	transition: transform 200ms ease-in-out;
 }
 
+@keyframes indeterminate {
+	0% {
+		width: 20%;
+		margin-left: -20%;
+	}
+	100% {
+		width: 60%;
+		margin-left: 100%;
+	}
+}
+
+.animate-indeterminate {
+	animation: indeterminate 1.5s ease-in-out infinite;
+}
+
 .over-the-top-download-animation {
 	position: fixed;
 	z-index: 100;

From cd6d896b763878fa632b2f49604be45eb6817294 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 20 Apr 2026 19:54:36 +0100
Subject: [PATCH 09/13] fix: lint

---
 packages/api-client/src/modules/archon/backups-queue/v1.ts | 6 +-----
 packages/ui/src/locales/en-US/index.json                   | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/api-client/src/modules/archon/backups-queue/v1.ts b/packages/api-client/src/modules/archon/backups-queue/v1.ts
index 667eb1160a..99d5d8531e 100644
--- a/packages/api-client/src/modules/archon/backups-queue/v1.ts
+++ b/packages/api-client/src/modules/archon/backups-queue/v1.ts
@@ -58,11 +58,7 @@ export class ArchonBackupsQueueV1Module extends AbstractModule {
 	}
 
 	/** POST /v1/servers/:server_id/worlds/:world_id/backups-queue/delete-many */
-	public async deleteMany(
-		serverId: string,
-		worldId: string,
-		backupIds: string[],
-	): Promise<void> {
+	public async deleteMany(serverId: string, worldId: string, backupIds: string[]): Promise<void> {
 		await this.client.request<void>(
 			`/servers/${serverId}/worlds/${worldId}/backups-queue/delete-many`,
 			{
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 08e2e7d8fb..f1f170292c 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -2727,7 +2727,7 @@
     "defaultMessage": "{count, plural, one {Bulk actions for one selected backup} other {Bulk actions for # selected backups}}"
   },
   "servers.backups.bulk-bar.deleting": {
-    "defaultMessage": "Deleting {progress}/{total} backups..."
+    "defaultMessage": "Deleting {total, plural, one {# backup} other {# backups}}..."
   },
   "servers.backups.bulk-bar.selected-count": {
     "defaultMessage": "{count, plural, one {# backup selected} other {# backups selected}}"

From fe755d0840b3cd66935d19e6ee42fc2208e9ff01 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 20 Apr 2026 20:09:29 +0100
Subject: [PATCH 10/13] fix: align error states

---
 .../backups/BackupProgressAdmonitions.vue     | 51 ++++++++++++++++---
 .../wrapped/hosting/manage/backups.vue        |  8 +--
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue b/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
index 389c7d44ba..ec0d4db0a4 100644
--- a/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
+++ b/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
@@ -47,9 +47,11 @@ type AdmonitionEntry = {
 	syntheticLegacy: boolean
 	name?: string
 	createdAt?: string
+	error?: string | null
 }
 
 const dismissedIds = reactive(new Set<string>())
+const cancellingIds = reactive(new Set<string>())
 
 const admonitions = computed<AdmonitionEntry[]>(() => {
 	const result: AdmonitionEntry[] = []
@@ -90,6 +92,7 @@ const admonitions = computed<AdmonitionEntry[]>(() => {
 			syntheticLegacy: last.synthetic_legacy,
 			name: backup.name,
 			createdAt: backup.created_at,
+			error: last.error ?? null,
 		})
 	}
 
@@ -117,8 +120,15 @@ async function handleDismiss(item: AdmonitionEntry) {
 }
 
 async function handleCancel(item: AdmonitionEntry) {
-	await client.archon.backups_v1.delete(serverId, worldId.value!, item.backupId)
-	await invalidate()
+	if (cancellingIds.has(item.key)) return
+	cancellingIds.add(item.key)
+	try {
+		await client.archon.backups_v1.delete(serverId, worldId.value!, item.backupId)
+		await invalidate()
+	} catch (err) {
+		cancellingIds.delete(item.key)
+		throw err
+	}
 }
 
 async function handleRetry(item: AdmonitionEntry) {
@@ -161,12 +171,16 @@ function canRetry(item: AdmonitionEntry) {
 	return item.state === 'failed' || item.state === 'timed_out'
 }
 
+function hasErrorDetail(item: AdmonitionEntry) {
+	return !!item.error && (item.state === 'failed' || item.state === 'timed_out')
+}
+
 function getTitle(item: AdmonitionEntry) {
 	if (item.type === 'create') {
 		if (isQueued(item)) return formatMessage(messages.backupQueuedTitle)
 		if (isInProgress(item)) return formatMessage(messages.creatingBackupTitle)
-		if (item.state === 'failed' || item.state === 'timed_out')
-			return formatMessage(messages.backupFailedTitle)
+		if (item.state === 'failed') return formatMessage(messages.backupFailedTitle)
+		if (item.state === 'timed_out') return formatMessage(messages.backupTimedOutTitle)
 		if (item.state === 'cancelled') return formatMessage(messages.backupCancelledTitle)
 		if (item.state === 'completed') return formatMessage(messages.backupCompletedTitle)
 	}
@@ -184,8 +198,10 @@ function getDescription(item: AdmonitionEntry) {
 	if (item.type === 'create') {
 		if (isQueued(item)) return formatMessage(messages.backupQueuedDescription, { backupName })
 		if (isInProgress(item)) return formatMessage(messages.creatingBackupDescription, { backupName })
-		if (item.state === 'failed' || item.state === 'timed_out')
+		if (item.state === 'failed')
 			return formatMessage(messages.backupFailedDescription, { backupName })
+		if (item.state === 'timed_out')
+			return formatMessage(messages.backupTimedOutDescription, { backupName })
 		if (item.state === 'cancelled')
 			return formatMessage(messages.backupCancelledDescription, { backupName })
 		if (item.state === 'completed')
@@ -235,6 +251,15 @@ const messages = defineMessages({
 		defaultMessage:
 			'Something went wrong while creating {backupName}. Please try again or contact support if the issue continues.',
 	},
+	backupTimedOutTitle: {
+		id: 'servers.backups.admonition.backup-timed-out.title',
+		defaultMessage: 'Backup timed out',
+	},
+	backupTimedOutDescription: {
+		id: 'servers.backups.admonition.backup-timed-out.description',
+		defaultMessage:
+			'Creating {backupName} timed out. You can try again or contact support if the issue continues.',
+	},
 	backupCancelledTitle: {
 		id: 'servers.backups.admonition.backup-cancelled.title',
 		defaultMessage: 'Backup cancelled',
@@ -324,10 +349,22 @@ const messages = defineMessages({
 					</div>
 				</div>
 			</template>
-			{{ getDescription(item) }}
+			<div class="flex flex-col gap-2">
+				<span>{{ getDescription(item) }}</span>
+				<span
+					v-if="hasErrorDetail(item)"
+					class="break-all font-mono text-sm text-secondary"
+				>
+					{{ item.error }}
+				</span>
+			</div>
 			<template #top-right-actions>
 				<ButtonStyled v-if="isQueued(item) || isInProgress(item)" type="outlined" color="blue">
-					<button class="!border" @click="handleCancel(item)">
+					<button
+						class="!border"
+						:disabled="cancellingIds.has(item.key)"
+						@click="handleCancel(item)"
+					>
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
index 25cd19cb6b..70541c274e 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
@@ -111,21 +111,21 @@
 								<span class="text-lg font-semibold text-secondary">{{ group.label }}</span>
 							</div>
 
-							<TransitionGroup name="list" tag="div" class="flex flex-col gap-3 py-3">
+							<TransitionGroup name="list" tag="div" class="flex flex-col">
 								<div
 									v-for="backup in group.backups"
 									:key="`backup-${backup.id}`"
-									class="flex gap-2"
+									class="flex gap-2 py-1.5"
 								>
 									<div class="flex w-5 flex-col items-center">
-										<div class="min-h-3 w-px flex-1 bg-surface-5" />
+										<div class="w-px flex-1 bg-surface-5" />
 										<Checkbox
 											:model-value="selectedIds.has(backup.id)"
 											:description="formatMessage(messages.selectBackupAria, { name: backup.name })"
 											class="shrink-0"
 											@update:model-value="toggleSelection(backup.id)"
 										/>
-										<div class="min-h-3 w-px flex-1 bg-surface-5" />
+										<div class="w-px flex-1 bg-surface-5" />
 									</div>
 									<BackupItem
 										class="min-w-0 flex-1"

From c69156a2b20e6e025c785c39254be39430f4bcc4 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 20 Apr 2026 20:12:28 +0100
Subject: [PATCH 11/13] fix: transition group

---
 .../backups/BackupProgressAdmonitions.vue     | 32 +++++++------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue b/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
index ec0d4db0a4..19481d0de4 100644
--- a/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
+++ b/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
@@ -331,12 +331,21 @@ const messages = defineMessages({
 
 <template>
 	<TransitionGroup
-		v-if="admonitions.length > 0"
 		name="backup-admonition"
 		tag="div"
-		class="flex flex-col gap-3"
+		enter-active-class="transition-all duration-300 ease-out overflow-hidden"
+		enter-from-class="opacity-0 max-h-0"
+		enter-to-class="opacity-100 max-h-40"
+		leave-active-class="transition-all duration-200 ease-in overflow-hidden"
+		leave-from-class="opacity-100 max-h-40"
+		leave-to-class="opacity-0 max-h-0"
 	>
-		<Admonition v-for="item in admonitions" :key="item.key" :type="getAdmonitionType(item.state)">
+		<Admonition
+			v-for="item in admonitions"
+			:key="item.key"
+			:type="getAdmonitionType(item.state)"
+			class="mb-4"
+		>
 			<template #icon="{ iconClass }">
 				<component :is="getIcon(item.state)" :class="iconClass" />
 			</template>
@@ -401,23 +410,6 @@ const messages = defineMessages({
 </template>
 
 <style scoped>
-.backup-admonition-enter-active,
-.backup-admonition-leave-active {
-	transition:
-		opacity 300ms ease-in-out,
-		transform 300ms ease-in-out;
-}
-
-.backup-admonition-enter-from {
-	opacity: 0;
-	transform: translateY(-10px);
-}
-
-.backup-admonition-leave-to {
-	opacity: 0;
-	transform: translateY(-10px);
-}
-
 .backup-admonition-move {
 	transition: transform 300ms ease-in-out;
 }

From 46e5fc1636b8c6b00c5b28a99d5b223c8b7efa94 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 20 Apr 2026 20:33:59 +0100
Subject: [PATCH 12/13] feat: ready for qa

---
 .../ui/src/layouts/wrapped/hosting/manage/backups.vue     | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
index 70541c274e..6f78cf203a 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
@@ -107,7 +107,9 @@
 					<div v-else class="flex flex-col gap-1.5">
 						<template v-for="group in groupedBackups" :key="group.label">
 							<div class="flex items-center gap-2">
-								<component :is="group.icon" v-if="group.icon" class="size-6 text-secondary" />
+								<div class="flex w-5 shrink-0 justify-center">
+									<component :is="group.icon" v-if="group.icon" class="size-5 text-secondary" />
+								</div>
 								<span class="text-lg font-semibold text-secondary">{{ group.label }}</span>
 							</div>
 
@@ -115,7 +117,7 @@
 								<div
 									v-for="backup in group.backups"
 									:key="`backup-${backup.id}`"
-									class="flex gap-2 py-1.5"
+									class="flex gap-2"
 								>
 									<div class="flex w-5 flex-col items-center">
 										<div class="w-px flex-1 bg-surface-5" />
@@ -128,7 +130,7 @@
 										<div class="w-px flex-1 bg-surface-5" />
 									</div>
 									<BackupItem
-										class="min-w-0 flex-1"
+										class="my-1.5 min-w-0 flex-1"
 										:backup="backup"
 										:selected="selectedIds.has(backup.id)"
 										:active-operation="activeOperationByBackupId.get(backup.id)"

From 25333b14237e9ad4ea3eb91a1481478f3268c6eb Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 20 Apr 2026 20:43:15 +0100
Subject: [PATCH 13/13] fix: lint

---
 .../servers/backups/BackupProgressAdmonitions.vue           | 5 +----
 packages/ui/src/locales/en-US/index.json                    | 6 ++++++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue b/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
index 19481d0de4..27242e84a4 100644
--- a/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
+++ b/packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue
@@ -360,10 +360,7 @@ const messages = defineMessages({
 			</template>
 			<div class="flex flex-col gap-2">
 				<span>{{ getDescription(item) }}</span>
-				<span
-					v-if="hasErrorDetail(item)"
-					class="break-all font-mono text-sm text-secondary"
-				>
+				<span v-if="hasErrorDetail(item)" class="break-all font-mono text-sm text-secondary">
 					{{ item.error }}
 				</span>
 			</div>
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index f1f170292c..1faa6e029c 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -2678,6 +2678,12 @@
   "servers.backups.admonition.backup-queued.title": {
     "defaultMessage": "Backup queued"
   },
+  "servers.backups.admonition.backup-timed-out.description": {
+    "defaultMessage": "Creating {backupName} timed out. You can try again or contact support if the issue continues."
+  },
+  "servers.backups.admonition.backup-timed-out.title": {
+    "defaultMessage": "Backup timed out"
+  },
   "servers.backups.admonition.creating-backup.description": {
     "defaultMessage": "Saving world data and server configuration for {backupName}. This can take a few minutes."
   },