From 7550823e435d387546db82825c2f247742f0a520 Mon Sep 17 00:00:00 2001
From: Willow C Reed <cypress@fyralabs.com>
Date: Tue, 27 Oct 2026 17:31:21 -0600
Subject: [PATCH 1/4] handle multiple versions for a single distro properly

---
 apps/dashboard/src/lib/state/admin.svelte.ts  | 358 ++++++++++---
 .../routes/(app)/admin/images/+page.svelte    | 490 ++++++++++++------
 2 files changed, 626 insertions(+), 222 deletions(-)

diff --git a/apps/dashboard/src/lib/state/admin.svelte.ts b/apps/dashboard/src/lib/state/admin.svelte.ts
index 3123c5e6..51714c12 100644
--- a/apps/dashboard/src/lib/state/admin.svelte.ts
+++ b/apps/dashboard/src/lib/state/admin.svelte.ts
@@ -95,6 +95,45 @@ export interface PveImage {
 	volid: string;
 }
 
+export type ImageDialogMode = 'create' | 'addVersions' | 'edit' | 'editGroup';
+
+export interface ImageVersionDraft {
+	filePath: string;
+	key: number;
+	secureBoot: boolean;
+	version: string;
+}
+
+export interface ImageGroup {
+	name: string;
+	representative: BaseImage;
+	versions: BaseImage[];
+}
+
+export function compareVersionsDesc(a: string, b: string): number {
+	const na = Number.parseFloat(a);
+	const nb = Number.parseFloat(b);
+	if (!(Number.isNaN(na) || Number.isNaN(nb)) && na !== nb) {
+		return nb - na;
+	}
+	return b.localeCompare(a, undefined, { numeric: true });
+}
+
+const ARCH_TOKEN_PATTERN = /(x86[-_]64|amd64|aarch64|arm64|i[3-6]86|ppc64le|s390x)/gi;
+const IMAGE_EXTENSION_PATTERN = /\.(qcow2|img|raw|vmdk|ova|xz|gz|zst)$/i;
+const PATH_SEPARATOR_PATTERN = /[/:]/;
+const VERSION_TOKEN_PATTERN = /(?:^|[^0-9a-z])v?(\d+(?:\.\d+)*)(?=$|[^0-9])/i;
+
+/** Best-effort version guess from an image filename, e.g. "debian-12-genericcloud-amd64.qcow2" -> "12". */
+export function guessVersionFromFilename(filePath: string): string {
+	let name = filePath.split(PATH_SEPARATOR_PATTERN).pop() ?? '';
+	while (IMAGE_EXTENSION_PATTERN.test(name)) {
+		name = name.replace(IMAGE_EXTENSION_PATTERN, '');
+	}
+	name = name.replace(ARCH_TOKEN_PATTERN, '');
+	return name.match(VERSION_TOKEN_PATTERN)?.[1] ?? '';
+}
+
 export interface PveImageImportTarget {
 	node: string;
 	storage: string;
@@ -221,20 +260,39 @@ export class AdminState {
 	importError = $state('');
 	importTasks = $state<ImportTask[]>([]);
 	imgDialogOpen = $state(false);
+	imgMode = $state<ImageDialogMode>('create');
 	imgEditing = $state<BaseImage | null>(null);
+	/** Name of the image family being edited or extended (as it was when the dialog opened). */
+	imgGroupName = $state<string | null>(null);
 	imgSaving = $state(false);
 	imgError = $state('');
 	imgName = $state('');
-	imgVersion = $state('');
 	imgDescription = $state('');
 	imgIcon = $state('');
 	imgColor = $state('bg-gray-600');
 	imgIsOfficial = $state(false);
 	imgLogoSvg = $state('');
 	imgAccentColor = $state('#6b7280');
-	imgSecureBoot = $state(true);
-	imgFilePath = $state('');
 	imgIsa = $state<VmIsa>('x86');
+	imgRows = $state<ImageVersionDraft[]>([]);
+	private imgRowSeq = 0;
+
+	/** Images grouped by name, in display order (by first appearance in sortOrder). */
+	get imageGroups(): ImageGroup[] {
+		const groups = new Map<string, BaseImage[]>();
+		for (const image of this.images) {
+			const existing = groups.get(image.name);
+			if (existing) {
+				existing.push(image);
+			} else {
+				groups.set(image.name, [image]);
+			}
+		}
+		return Array.from(groups, ([name, versions]) => {
+			const sorted = [...versions].sort((a, b) => compareVersionsDesc(a.version, b.version));
+			return { name, representative: sorted[0], versions: sorted };
+		});
+	}
 
 	constructor(data?: AdminPageData) {
 		if (data) {
@@ -744,85 +802,248 @@ export class AdminState {
 		}
 	}
 
-	imgOpenCreate() {
-		this.imgEditing = null;
-		this.imgName = '';
-		this.imgVersion = '';
-		this.imgDescription = '';
-		this.imgIcon = '';
-		this.imgColor = 'bg-gray-600';
-		this.imgIsOfficial = false;
-		this.imgLogoSvg = '';
-		this.imgAccentColor = '#6b7280';
-		this.imgSecureBoot = true;
-		this.imgFilePath = '';
+	private imgNewRow(partial: Partial<ImageVersionDraft> = {}): ImageVersionDraft {
+		this.imgRowSeq += 1;
+		return { key: this.imgRowSeq, version: '', filePath: '', secureBoot: true, ...partial };
+	}
+
+	private imgResetShared(source?: BaseImage) {
+		this.imgName = source?.name ?? '';
+		this.imgDescription = source?.description ?? '';
+		this.imgIcon = source?.icon ?? '';
+		this.imgColor = source?.color ?? 'bg-gray-600';
+		this.imgIsOfficial = source?.isOfficial ?? false;
+		this.imgLogoSvg = source?.logoSvg ?? '';
+		this.imgAccentColor = source?.accentColor ?? '#6b7280';
 		this.imgIsa = 'x86';
+	}
+
+	private imgShow() {
 		this.imgError = '';
+		this.imgSaving = false;
 		this.imgDialogOpen = true;
 		if (this.pveImages.length === 0) {
 			this.loadPveImages();
 		}
 	}
 
+	/** Brand new image family with one or more versions. */
+	imgOpenCreate(filePath = '') {
+		this.imgMode = 'create';
+		this.imgEditing = null;
+		this.imgGroupName = null;
+		this.imgResetShared();
+		this.imgRows = [this.imgNewRow({ filePath, version: guessVersionFromFilename(filePath) })];
+		this.imgShow();
+	}
+
+	/** Add versions to an existing family, reusing its shared details. */
+	imgOpenAddVersions(groupName: string) {
+		const group = this.imageGroups.find((g) => g.name === groupName);
+		if (!group) {
+			this.imgOpenCreate();
+			return;
+		}
+		this.imgMode = 'addVersions';
+		this.imgEditing = null;
+		this.imgGroupName = group.name;
+		this.imgResetShared(group.representative);
+		this.imgRows = [this.imgNewRow({ secureBoot: group.representative.secureBoot })];
+		this.imgShow();
+	}
+
+	/** While creating, typing an existing family name switches to "add versions" for it. */
+	imgAdoptExistingName() {
+		if (this.imgMode !== 'create') {
+			return;
+		}
+		const name = this.imgName.trim();
+		const group = this.imageGroups.find((g) => g.name === name);
+		if (!group) {
+			return;
+		}
+		this.imgMode = 'addVersions';
+		this.imgGroupName = group.name;
+		this.imgResetShared(group.representative);
+	}
+
+	/** Back out of "add versions" into creating a new family (keeps the rows). */
+	imgDetachFromGroup() {
+		this.imgMode = 'create';
+		this.imgGroupName = null;
+		this.imgName = '';
+	}
+
+	/** Edit shared details (name, logo, ...) for every version in a family. */
+	imgOpenEditGroup(groupName: string) {
+		const group = this.imageGroups.find((g) => g.name === groupName);
+		if (!group) {
+			return;
+		}
+		this.imgMode = 'editGroup';
+		this.imgEditing = null;
+		this.imgGroupName = group.name;
+		this.imgResetShared(group.representative);
+		this.imgRows = [];
+		this.imgShow();
+	}
+
+	/** Edit a single version (version label, Proxmox file, secure boot). */
 	imgOpenEdit(img: BaseImage) {
+		this.imgMode = 'edit';
 		this.imgEditing = img;
-		this.imgName = img.name;
-		this.imgVersion = img.version;
-		this.imgDescription = img.description;
-		this.imgIcon = img.icon ?? '';
-		this.imgColor = img.color;
-		this.imgIsOfficial = img.isOfficial;
-		this.imgLogoSvg = img.logoSvg ?? '';
-		this.imgAccentColor = img.accentColor;
-		this.imgSecureBoot = img.secureBoot;
-		this.imgFilePath = img.filePath;
-		this.imgIsa = 'x86';
-		this.imgError = '';
-		this.imgDialogOpen = true;
-		if (this.pveImages.length === 0) {
-			this.loadPveImages();
+		this.imgGroupName = img.name;
+		this.imgResetShared(img);
+		this.imgRows = [
+			this.imgNewRow({ version: img.version, filePath: img.filePath, secureBoot: img.secureBoot })
+		];
+		this.imgShow();
+	}
+
+	imgAddRow() {
+		const last = this.imgRows.at(-1);
+		this.imgRows.push(this.imgNewRow({ secureBoot: last?.secureBoot ?? true }));
+	}
+
+	imgRemoveRow(key: number) {
+		if (this.imgRows.length <= 1) {
+			return;
+		}
+		this.imgRows = this.imgRows.filter((row) => row.key !== key);
+	}
+
+	imgRowFileChanged(row: ImageVersionDraft) {
+		if (!row.version.trim()) {
+			row.version = guessVersionFromFilename(row.filePath);
+		}
+	}
+
+	/** Volids that are already referenced by a configured image, with a label for display. */
+	get imgUsedFiles(): Map<string, string> {
+		return new Map(
+			this.images
+				.filter((image) => image.id !== this.imgEditing?.id)
+				.map((image) => [image.filePath, `${image.name} ${image.version}`.trim()])
+		);
+	}
+
+	get imgRowsValid() {
+		if (this.imgMode === 'editGroup') {
+			return true;
 		}
+		const volids = new Set(this.pveImages.map((image) => image.volid));
+		return (
+			this.imgRows.length > 0 &&
+			this.imgRows.every((row) => row.version.trim() && volids.has(row.filePath))
+		);
+	}
+
+	get imgDuplicateVersions(): string[] {
+		const group = this.imageGroups.find((g) => g.name === this.imgName.trim());
+		const taken = new Set(
+			(group?.versions ?? [])
+				.filter((image) => image.id !== this.imgEditing?.id)
+				.map((image) => image.version.trim().toLowerCase())
+		);
+		const seen = new Set<string>();
+		const dupes = new Set<string>();
+		for (const row of this.imgRows) {
+			const version = row.version.trim().toLowerCase();
+			if (!version) {
+				continue;
+			}
+			if (taken.has(version) || seen.has(version)) {
+				dupes.add(row.version.trim());
+			}
+			seen.add(version);
+		}
+		return [...dupes];
+	}
+
+	private imgSharedData() {
+		const icon = this.imgIcon.trim();
+		const logoSvg = this.imgLogoSvg.trim();
+		return {
+			name: this.imgName.trim(),
+			description: this.imgDescription.trim(),
+			color: this.imgColor,
+			isOfficial: this.imgIsOfficial,
+			accentColor: this.imgAccentColor.trim() || '#6b7280',
+			isa: 'x86' as const,
+			icon,
+			logoSvg: this.imgIsOfficial ? logoSvg : ''
+		};
 	}
 
 	async imgSave() {
-		const selectedImage = this.pveImages.find((image) => image.volid === this.imgFilePath);
-		if (!(this.imgName.trim() && selectedImage)) {
+		if (!(this.imgName.trim() && this.imgRowsValid)) {
 			return;
 		}
 		this.imgSaving = true;
 		this.imgError = '';
+		const shared = this.imgSharedData();
+		const remoteShared = {
+			name: shared.name,
+			description: shared.description,
+			color: shared.color,
+			isOfficial: shared.isOfficial,
+			accentColor: shared.accentColor,
+			isa: shared.isa,
+			...(shared.icon ? { icon: shared.icon } : {})
+		};
+		const localShared = {
+			...remoteShared,
+			icon: shared.icon || null,
+			logoSvg: shared.logoSvg || null
+		};
 		try {
-			const icon = this.imgIcon.trim();
-			const logoSvg = this.imgLogoSvg.trim();
-			const data = {
-				name: this.imgName.trim(),
-				version: this.imgVersion.trim(),
-				description: this.imgDescription.trim(),
-				color: this.imgColor,
-				isOfficial: this.imgIsOfficial,
-				accentColor: this.imgAccentColor.trim() || '#6b7280',
-				secureBoot: this.imgSecureBoot,
-				filePath: selectedImage.volid,
-				isa: 'x86' as const,
-				...(icon ? { icon } : {}),
-				...(this.imgIsOfficial && logoSvg ? { logoSvg } : {})
-			};
-			const localData = {
-				...data,
-				icon: icon || null,
-				logoSvg: this.imgIsOfficial ? logoSvg || null : null,
-				imageType: selectedImage.format || 'qcow2'
-			};
-
-			if (this.imgEditing) {
-				await updateImage({ imageId: this.imgEditing.id, ...data });
-				const index = this.images.findIndex((image) => image.id === this.imgEditing?.id);
-				if (index !== -1) {
-					this.images[index] = { ...this.images[index], ...localData };
-				}
+			if (this.imgMode === 'editGroup') {
+				const members = this.images.filter((image) => image.name === this.imgGroupName);
+				await Promise.all(
+					members.map((image) =>
+						updateImage({ imageId: image.id, ...remoteShared, logoSvg: shared.logoSvg })
+					)
+				);
+				this.images = this.images.map((image) =>
+					image.name === this.imgGroupName ? { ...image, ...localShared } : image
+				);
+			} else if (this.imgMode === 'edit' && this.imgEditing) {
+				const [row] = this.imgRows;
+				const file = this.pveImages.find((image) => image.volid === row.filePath);
+				const versionData = {
+					version: row.version.trim(),
+					filePath: row.filePath,
+					secureBoot: row.secureBoot
+				};
+				const { id } = this.imgEditing;
+				await updateImage({ imageId: id, ...versionData });
+				this.images = this.images.map((image) =>
+					image.id === id ? { ...image, ...versionData, imageType: file?.format || 'qcow2' } : image
+				);
 			} else {
-				const result = await createImage(data);
-				this.images.push({ id: result.id, ...localData });
+				// Sequential so sort order follows the row order.
+				for (const row of this.imgRows) {
+					const file = this.pveImages.find((image) => image.volid === row.filePath);
+					const versionData = {
+						version: row.version.trim(),
+						filePath: row.filePath,
+						secureBoot: row.secureBoot
+					};
+					// biome-ignore lint/performance/noAwaitInLoops: preserve insertion order for sortOrder
+					const result = await createImage({
+						...remoteShared,
+						...(shared.logoSvg ? { logoSvg: shared.logoSvg } : {}),
+						...versionData
+					});
+					this.images.push({
+						id: result.id,
+						...localShared,
+						...versionData,
+						imageType: file?.format || 'qcow2'
+					});
+					// Drop saved rows so a partial failure can be retried without duplicates.
+					this.imgRows = this.imgRows.filter((r) => r.key !== row.key);
+				}
 			}
 
 			this.imgDialogOpen = false;
@@ -833,17 +1054,20 @@ export class AdminState {
 		}
 	}
 
-	async imgReorder(fromIndex: number, toIndex: number) {
+	/** Reorder whole image families; versions inside a family are sorted by version. */
+	async imgReorderGroups(fromIndex: number, toIndex: number) {
+		const groups = this.imageGroups;
 		if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0) {
 			return;
 		}
-		if (fromIndex >= this.images.length || toIndex >= this.images.length) {
+		if (fromIndex >= groups.length || toIndex >= groups.length) {
 			return;
 		}
+		const nextGroups = [...groups];
+		const [moved] = nextGroups.splice(fromIndex, 1);
+		nextGroups.splice(toIndex, 0, moved);
 		const previous = [...this.images];
-		const next = [...this.images];
-		const [moved] = next.splice(fromIndex, 1);
-		next.splice(toIndex, 0, moved);
+		const next = nextGroups.flatMap((group) => group.versions);
 		this.images = next;
 		try {
 			await reorderImages({ imageIds: next.map((image) => image.id) });
diff --git a/apps/dashboard/src/routes/(app)/admin/images/+page.svelte b/apps/dashboard/src/routes/(app)/admin/images/+page.svelte
index 33ff790b..63caaa77 100644
--- a/apps/dashboard/src/routes/(app)/admin/images/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/admin/images/+page.svelte
@@ -10,6 +10,7 @@
 	import GripVertical from '~icons/lucide/grip-vertical';
 	import Loader2 from '~icons/lucide/loader-2';
 	import Plus from '~icons/lucide/plus';
+	import X from '~icons/lucide/x';
 	import AlertTriangle from '~icons/nucleo/alert-triangle';
 	import Disc from '~icons/nucleo/disc';
 	import Image from '~icons/nucleo/layers';
@@ -44,9 +45,9 @@
 		if (event.dataTransfer) {
 			event.dataTransfer.effectAllowed = 'move';
 			event.dataTransfer.setData('text/plain', String(index));
-			const row = (event.target as HTMLElement).closest('tr');
-			if (row) {
-				event.dataTransfer.setDragImage(row, 0, 0);
+			const group = (event.target as HTMLElement).closest('tbody');
+			if (group) {
+				event.dataTransfer.setDragImage(group, 0, 0);
 			}
 		}
 	}
@@ -65,7 +66,7 @@
 	function imgDrop(event: DragEvent, index: number) {
 		event.preventDefault();
 		if (imgDragIndex !== null) {
-			admin.imgReorder(imgDragIndex, index);
+			admin.imgReorderGroups(imgDragIndex, index);
 		}
 		imgDragIndex = null;
 		imgDropIndex = null;
@@ -81,15 +82,36 @@
 			return;
 		}
 		event.preventDefault();
-		admin.imgReorder(index, event.key === 'ArrowUp' ? index - 1 : index + 1);
+		admin.imgReorderGroups(index, event.key === 'ArrowUp' ? index - 1 : index + 1);
 	}
 
+	const dialogTitles = {
+		create: 'Add Image',
+		addVersions: 'Add Versions',
+		edit: 'Edit Version',
+		editGroup: 'Edit Image Details'
+	} as const;
+
+	let showSharedFields = $derived(admin.imgMode === 'create' || admin.imgMode === 'editGroup');
+	let showVersionRows = $derived(admin.imgMode !== 'editGroup');
+	let groupVersionCount = $derived(
+		admin.imgGroupName
+			? (admin.imageGroups.find((group) => group.name === admin.imgGroupName)?.versions.length ?? 0)
+			: 0
+	);
+	let saveLabel = $derived.by(() => {
+		if (admin.imgMode === 'edit' || admin.imgMode === 'editGroup') {
+			return 'Save';
+		}
+		const count = admin.imgRows.length;
+		if (count > 1) {
+			return `Add ${count} versions`;
+		}
+		return admin.imgMode === 'create' ? 'Create' : 'Add version';
+	});
 	let localImportTargets = $derived(
 		admin.pveImageImportTargets.filter((target) => target.storage === admin.importStorage)
 	);
-	let selectedPveImage = $derived(
-		admin.pveImages.find((image) => image.volid === admin.imgFilePath)
-	);
 </script>
 
 <div class="flex-1 overflow-auto">
@@ -111,7 +133,7 @@
 	{#if admin.images.length === 0}
 		<div class="flex flex-col items-center justify-center py-20 text-muted-foreground">
 			<Disc class="mb-3 h-6 w-6" />
-			<p class="text-xs">No admin.images configured</p>
+			<p class="text-xs">No images configured</p>
 			<Button
 				variant="outline"
 				size="sm"
@@ -127,28 +149,30 @@
 				<tr class="border-b border-border">
 					<th class="w-8 px-3 py-3"><span class="sr-only">Drag handle</span></th>
 					<th class="px-5 py-3 text-left text-xs font-medium text-muted-foreground">Image</th>
-					<th class="px-5 py-3 text-left text-xs font-medium text-muted-foreground">Version</th>
 					<th class="px-5 py-3 text-left text-xs font-medium text-muted-foreground">Type</th>
 					<th class="px-5 py-3 text-left text-xs font-medium text-muted-foreground">
 						Proxmox Path
 					</th>
-					<th class="px-5 py-3 text-left text-xs font-medium text-muted-foreground">Description</th>
+					<th class="px-5 py-3 text-left text-xs font-medium text-muted-foreground">Secure Boot</th>
 					<th class="px-5 py-3 text-right text-xs font-medium text-muted-foreground">Actions</th>
 				</tr>
 			</thead>
-			<tbody class="divide-y divide-border/50">
-				{#each admin.images as img, index (img.id)}
+			{#each admin.imageGroups as group, index (group.name)}
+				{@const rep = group.representative}
+				<tbody
+					class="border-b border-border transition-colors {imgDragIndex === index
+						? 'opacity-40'
+						: ''} {imgDropIndex === index && imgDragIndex !== index ? 'bg-muted/40' : ''}"
+				>
 					<tr
-						class="transition-colors hover:bg-muted/20 {imgDragIndex === index
-							? 'opacity-40'
-							: ''} {imgDropIndex === index && imgDragIndex !== index ? 'bg-muted/40' : ''}"
+						class="bg-muted/20"
 						ondragover={(event) => imgDragOver(event, index)}
 						ondrop={(event) => imgDrop(event, index)}
 					>
 						<td class="px-3 py-3">
 							<button
 								type="button"
-								aria-label={`Drag or use arrow keys to reorder ${img.name}`}
+								aria-label={`Drag or use arrow keys to reorder ${group.name}`}
 								draggable="true"
 								class="flex h-7 w-5 cursor-grab items-center justify-center text-muted-foreground transition-colors hover:text-foreground focus:text-muted-foreground focus:outline-none active:cursor-grabbing"
 								ondragstart={(event) => imgDragStart(event, index)}
@@ -158,62 +182,104 @@
 								<GripVertical class="h-3.5 w-3.5" />
 							</button>
 						</td>
-						<td class="px-5 py-3">
+						<td class="px-5 py-3" colspan="4">
 							<div class="flex items-center gap-2.5">
 								<span
-									class="flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden text-white {img.color}"
+									class="flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden text-white {rep.color}"
 								>
-									{#if img.isOfficial && img.logoSvg}
-										<img src={svgDataUrl(img.logoSvg)} alt="" class="h-4 w-4" />
+									{#if rep.isOfficial && rep.logoSvg}
+										<img src={svgDataUrl(rep.logoSvg)} alt="" class="h-4 w-4" />
 									{:else}
 										<Disc class="size-4" />
 									{/if}
 								</span>
-								<div class="flex flex-col gap-1">
-									<span class="text-sm font-medium text-foreground">{img.name}</span>
-									{#if img.isOfficial}
-										<Badge
-											variant="secondary"
-											class="w-fit text-[10px] text-emerald-700 dark:text-emerald-300"
-											>Official</Badge
+								<div class="flex min-w-0 flex-col gap-0.5">
+									<div class="flex items-center gap-2">
+										<span class="text-sm font-medium text-foreground">{group.name}</span>
+										{#if rep.isOfficial}
+											<Badge
+												variant="secondary"
+												class="text-[10px] text-emerald-700 dark:text-emerald-300"
+												>Official</Badge
+											>
+										{/if}
+										<span class="text-[10px] text-muted-foreground">
+											{group.versions.length}
+											version{group.versions.length === 1 ? '' : 's'}
+										</span>
+									</div>
+									{#if rep.description}
+										<span class="max-w-md truncate text-xs text-muted-foreground"
+											>{rep.description}</span
 										>
 									{/if}
 								</div>
 							</div>
 						</td>
-						<td class="px-5 py-3 text-sm text-muted-foreground">{img.version}</td>
-						<td class="px-5 py-3">
-							<Badge variant="secondary" class="text-[10px]">{img.imageType || 'import'}</Badge>
-						</td>
-						<td class="max-w-xs truncate px-5 py-3 font-mono text-xs text-muted-foreground">
-							{img.filePath}
-						</td>
-						<td class="max-w-xs truncate px-5 py-3 text-xs text-muted-foreground">
-							{img.description}
-						</td>
 						<td class="px-5 py-3 text-right">
 							<div class="flex items-center justify-end gap-1">
 								<Button
-									variant="ghost"
+									variant="outline"
 									size="sm"
-									aria-label={`Edit ${img.name}`}
-									class="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
-									onclick={() => admin.imgOpenEdit(img)}
-									><Pencil class="h-3 w-3" /></Button
+									class="h-7 gap-1 px-2 text-xs"
+									onclick={() => admin.imgOpenAddVersions(group.name)}
+									><Plus class="h-3 w-3" />
+									Version</Button
 								>
 								<Button
 									variant="ghost"
 									size="sm"
-									aria-label={`Delete ${img.name}`}
-									class="h-7 w-7 p-0 text-red-400 hover:text-red-300"
-									onclick={() => admin.imgRemove(img.id)}
-									><Trash2 class="h-3 w-3" /></Button
+									aria-label={`Edit details for ${group.name}`}
+									class="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
+									onclick={() => admin.imgOpenEditGroup(group.name)}
+									><Pencil class="h-3 w-3" /></Button
 								>
 							</div>
 						</td>
 					</tr>
-				{/each}
-			</tbody>
+					{#each group.versions as img (img.id)}
+						<tr
+							class="transition-colors hover:bg-muted/20"
+							ondragover={(event) => imgDragOver(event, index)}
+							ondrop={(event) => imgDrop(event, index)}
+						>
+							<td></td>
+							<td class="py-2 pr-5 pl-14 text-sm text-foreground">
+								{img.version || '—'}
+							</td>
+							<td class="px-5 py-2">
+								<Badge variant="secondary" class="text-[10px]">{img.imageType || 'import'}</Badge>
+							</td>
+							<td class="max-w-xs truncate px-5 py-2 font-mono text-xs text-muted-foreground">
+								{img.filePath}
+							</td>
+							<td class="px-5 py-2 text-xs text-muted-foreground">
+								{img.secureBoot ? 'On' : 'Off'}
+							</td>
+							<td class="px-5 py-2 text-right">
+								<div class="flex items-center justify-end gap-1">
+									<Button
+										variant="ghost"
+										size="sm"
+										aria-label={`Edit ${img.name} ${img.version}`}
+										class="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
+										onclick={() => admin.imgOpenEdit(img)}
+										><Pencil class="h-3 w-3" /></Button
+									>
+									<Button
+										variant="ghost"
+										size="sm"
+										aria-label={`Delete ${img.name} ${img.version}`}
+										class="h-7 w-7 p-0 text-red-400 hover:text-red-300"
+										onclick={() => admin.imgRemove(img.id)}
+										><Trash2 class="h-3 w-3" /></Button
+									>
+								</div>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			{/each}
 		</table>
 	{/if}
 </div>
@@ -360,10 +426,19 @@
 
 <!-- Image Dialog -->
 <Dialog.Root bind:open={admin.imgDialogOpen}>
-	<Dialog.Content class="border-border bg-background sm:max-w-lg">
+	<Dialog.Content class="max-h-[90vh] overflow-y-auto border-border bg-background sm:max-w-2xl">
 		<Dialog.Header>
-			<Dialog.Title>{admin.imgEditing ? 'Edit Image' : 'Add Image'}</Dialog.Title>
-			<Dialog.Description>Configure a base image for VM provisioning.</Dialog.Description>
+			<Dialog.Title>{dialogTitles[admin.imgMode]}</Dialog.Title>
+			<Dialog.Description>
+				{#if admin.imgMode === 'editGroup'}
+					Changes apply to all {groupVersionCount} version{groupVersionCount === 1 ? '' : 's'}
+					of this image.
+				{:else if admin.imgMode === 'edit'}
+					Edit this version. Name, logo and description are shared, so edit them from the image row.
+				{:else}
+					Configure a base image and one or more versions for VM provisioning.
+				{/if}
+			</Dialog.Description>
 		</Dialog.Header>
 		<div class="flex flex-col gap-4 py-4">
 			{#if admin.imgError}
@@ -374,125 +449,230 @@
 				</div>
 			{/if}
 
-			<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
-				<div class="flex flex-col gap-2">
-					<Label>Name</Label><Input bind:value={admin.imgName} placeholder="Fedora Server" />
-				</div>
-				<div class="flex flex-col gap-2">
-					<Label>Version</Label><Input bind:value={admin.imgVersion} placeholder="42" />
-				</div>
-			</div>
-
-			<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
-				<div class="flex flex-col gap-2">
-					<Label>Architecture</Label>
-					<div
-						class="flex h-9 items-center border border-border bg-muted px-3 text-sm text-muted-foreground"
+			{#if !showSharedFields}
+				<!-- Compact summary of the family these versions belong to -->
+				<div class="flex items-center gap-3 border border-border bg-muted/40 px-3 py-2.5">
+					<span
+						class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden text-white {admin.imgColor}"
 					>
-						x86
+						{#if admin.imgIsOfficial && admin.imgLogoSvg.trim()}
+							<img src={svgDataUrl(admin.imgLogoSvg)} alt="" class="h-5 w-5" />
+						{:else}
+							<Disc class="size-4" />
+						{/if}
+					</span>
+					<div class="flex min-w-0 flex-1 flex-col">
+						<span class="text-sm font-medium text-foreground">{admin.imgName}</span>
+						<span class="truncate text-xs text-muted-foreground">
+							{groupVersionCount}
+							existing version{groupVersionCount === 1 ? '' : 's'}{admin.imgDescription
+								? ` · ${admin.imgDescription}`
+								: ''}
+						</span>
 					</div>
+					{#if admin.imgMode === 'addVersions'}
+						<Button
+							variant="ghost"
+							size="sm"
+							class="h-7 px-2 text-xs text-muted-foreground"
+							onclick={() => admin.imgDetachFromGroup()}
+							>New image instead</Button
+						>
+					{/if}
 				</div>
+			{/if}
+
+			{#if showSharedFields}
 				<div class="flex flex-col gap-2">
-					<Label>Official</Label>
-					<label
-						class="flex h-9 items-center gap-2 border border-border bg-muted px-3 text-sm text-muted-foreground"
-					>
-						<input type="checkbox" bind:checked={admin.imgIsOfficial} class="h-4 w-4" />
-						Official image
-					</label>
+					<Label for="img-name">Name</Label>
+					<Input
+						id="img-name"
+						bind:value={admin.imgName}
+						placeholder="Fedora Server"
+						list={admin.imgMode === 'create' ? 'img-existing-names' : undefined}
+						onchange={() => admin.imgAdoptExistingName()}
+					/>
+					<datalist id="img-existing-names">
+						{#each admin.imageGroups as group (group.name)}
+							<option value={group.name}></option>
+						{/each}
+					</datalist>
+					{#if admin.imgMode === 'create'}
+						<p class="text-[11px] text-muted-foreground">
+							Pick an existing name to add versions to it instead of re-entering details.
+						</p>
+					{/if}
 				</div>
-			</div>
-
-			<div class="flex flex-col gap-2">
-				<Label>Secure Boot</Label>
-				<label
-					class="flex h-9 items-center gap-2 border border-border bg-muted px-3 text-sm text-muted-foreground"
-				>
-					<input type="checkbox" bind:checked={admin.imgSecureBoot} class="h-4 w-4" />
-					Enable UEFI Secure Boot for VMs using this image
-				</label>
-			</div>
-
-			<div class="flex flex-col gap-2">
-				<Label>Description</Label>
-				<textarea
-					bind:value={admin.imgDescription}
-					{...autofillAttributes()}
-					placeholder="Short description of this image..."
-					rows="2"
-					class="w-full resize-none border border-border bg-muted px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none"
-				></textarea>
-			</div>
 
-			{#if admin.imgIsOfficial}
-				<div class="grid grid-cols-[1fr_auto] gap-3">
+				<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
 					<div class="flex flex-col gap-2">
-						<Label
-							>Logo SVG
-							<span class="font-normal text-muted-foreground">(official only)</span></Label
+						<Label>Architecture</Label>
+						<div
+							class="flex h-9 items-center border border-border bg-muted px-3 text-sm text-muted-foreground"
 						>
-						<textarea
-							bind:value={admin.imgLogoSvg}
-							{...autofillAttributes()}
-							placeholder="<svg ...></svg>"
-							rows="3"
-							class="w-full resize-none border border-border bg-muted px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none"
-						></textarea>
+							x86
+						</div>
 					</div>
 					<div class="flex flex-col gap-2">
-						<Label>Preview</Label>
-						<div
-							class="flex h-20 w-20 items-center justify-center border border-border bg-muted p-3 text-muted-foreground"
-							style:color={admin.imgAccentColor}
+						<Label>Official</Label>
+						<label
+							class="flex h-9 items-center gap-2 border border-border bg-muted px-3 text-sm text-muted-foreground"
 						>
-							{#if admin.imgLogoSvg.trim()}
-								<img src={svgDataUrl(admin.imgLogoSvg)} alt="" class="h-12 w-12" />
-							{:else}
-								<Image class="h-6 w-6" />
-							{/if}
-						</div>
+							<input type="checkbox" bind:checked={admin.imgIsOfficial} class="h-4 w-4" />
+							Official image
+						</label>
 					</div>
 				</div>
+
 				<div class="flex flex-col gap-2">
-					<Label>Accent Color</Label>
-					<Input bind:value={admin.imgAccentColor} placeholder="#6b7280" />
+					<Label>Description</Label>
+					<textarea
+						bind:value={admin.imgDescription}
+						placeholder="Short description of this image..."
+						rows="2"
+						class="w-full resize-none border border-border bg-muted px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none"
+					></textarea>
 				</div>
+
+				{#if admin.imgIsOfficial}
+					<div class="grid grid-cols-[1fr_auto] gap-3">
+						<div class="flex flex-col gap-2">
+							<Label
+								>Logo SVG
+								<span class="font-normal text-muted-foreground">(official only)</span></Label
+							>
+							<textarea
+								bind:value={admin.imgLogoSvg}
+								placeholder="<svg ...></svg>"
+								rows="3"
+								class="w-full resize-none border border-border bg-muted px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none"
+							></textarea>
+						</div>
+						<div class="flex flex-col gap-2">
+							<Label>Preview</Label>
+							<div
+								class="flex h-20 w-20 items-center justify-center border border-border bg-muted p-3 text-muted-foreground"
+								style:color={admin.imgAccentColor}
+							>
+								{#if admin.imgLogoSvg.trim()}
+									<img src={svgDataUrl(admin.imgLogoSvg)} alt="" class="h-12 w-12" />
+								{:else}
+									<Image class="h-6 w-6" />
+								{/if}
+							</div>
+						</div>
+					</div>
+					<div class="flex flex-col gap-2">
+						<Label>Accent Color</Label>
+						<Input bind:value={admin.imgAccentColor} placeholder="#6b7280" />
+					</div>
+				{/if}
 			{/if}
 
-			<!-- Proxmox import image -->
-			<div class="flex flex-col gap-2">
-				<div class="flex items-center justify-between">
-					<Label>Proxmox Image</Label>
-					<Button
-						variant="ghost"
-						size="sm"
-						class="h-6 gap-1 px-2 text-[10px] text-muted-foreground"
-						onclick={() => admin.loadPveImages()}
-						disabled={admin.isoLoading}
-					>
-						{#if admin.isoLoading}
-							<Loader2 class="h-3 w-3 animate-spin" />
-						{:else}
-							<RefreshCw class="h-3 w-3" />
-						{/if}
-						Refresh
-					</Button>
+			{#if showVersionRows}
+				<div class="flex flex-col gap-2">
+					<div class="flex items-center justify-between">
+						<Label>{admin.imgMode === 'edit' ? 'Version' : 'Versions'}</Label>
+						<Button
+							variant="ghost"
+							size="sm"
+							class="h-6 gap-1 px-2 text-[10px] text-muted-foreground"
+							onclick={() => admin.loadPveImages()}
+							disabled={admin.isoLoading}
+						>
+							{#if admin.isoLoading}
+								<Loader2 class="h-3 w-3 animate-spin" />
+							{:else}
+								<RefreshCw class="h-3 w-3" />
+							{/if}
+							Refresh images
+						</Button>
+					</div>
+
+					<div class="flex flex-col divide-y divide-border/60 border border-border">
+						<div
+							class="grid grid-cols-[7rem_1fr_auto_1.75rem] items-center gap-2 bg-muted/40 px-2 py-1.5 text-[10px] font-medium text-muted-foreground uppercase"
+						>
+							<span>Version</span>
+							<span>Proxmox image</span>
+							<span>Secure Boot</span>
+							<span class="sr-only">Remove</span>
+						</div>
+						{#each admin.imgRows as row, rowIndex (row.key)}
+							<div class="grid grid-cols-[7rem_1fr_auto_1.75rem] items-center gap-2 px-2 py-2">
+								<Input
+									bind:value={row.version}
+									placeholder="42"
+									aria-label={`Version ${rowIndex + 1}`}
+									class="h-8 text-sm"
+								/>
+								<select
+									bind:value={row.filePath}
+									onchange={() => admin.imgRowFileChanged(row)}
+									aria-label={`Proxmox image for version ${rowIndex + 1}`}
+									class="h-8 w-full min-w-0 border border-border bg-muted px-2 font-mono text-xs text-foreground focus:border-ring focus:outline-none"
+								>
+									<option value="">Select an imported image</option>
+									{#each admin.pveImages as image (image.volid)}
+										{@const usedBy = admin.imgUsedFiles.get(image.volid)}
+										<option value={image.volid}>
+											{image.volid}
+											· {formatSize(image.size)}{usedBy ? ` · used by ${usedBy}` : ''}
+										</option>
+									{/each}
+								</select>
+								<label
+									class="flex h-8 items-center justify-center px-2"
+									title="Enable UEFI Secure Boot for VMs using this version"
+								>
+									<input
+										type="checkbox"
+										bind:checked={row.secureBoot}
+										class="h-4 w-4"
+										aria-label={`Secure Boot for version ${rowIndex + 1}`}
+									/>
+								</label>
+								{#if admin.imgRows.length > 1}
+									<Button
+										variant="ghost"
+										size="sm"
+										aria-label={`Remove version ${rowIndex + 1}`}
+										class="h-7 w-7 p-0 text-muted-foreground hover:text-red-400"
+										onclick={() => admin.imgRemoveRow(row.key)}
+										><X class="h-3 w-3" /></Button
+									>
+								{:else}
+									<span></span>
+								{/if}
+							</div>
+						{/each}
+					</div>
+
+					{#if admin.imgMode !== 'edit'}
+						<Button
+							variant="outline"
+							size="sm"
+							class="h-7 w-fit gap-1 text-xs"
+							onclick={() => admin.imgAddRow()}
+							><Plus class="h-3 w-3" />
+							Add another version</Button
+						>
+					{/if}
+
+					{#if admin.isoError}
+						<p class="text-xs text-red-400">{admin.isoError}</p>
+					{:else if admin.pveImages.length === 0 && !admin.isoLoading}
+						<p class="text-xs text-muted-foreground">
+							No imported images found. Use Upload/Import Image first.
+						</p>
+					{/if}
+					{#if admin.imgDuplicateVersions.length > 0}
+						<p class="text-xs text-amber-600 dark:text-amber-400">
+							Heads up: {admin.imgDuplicateVersions.join(', ')} already exists for this image.
+						</p>
+					{/if}
 				</div>
-				<select
-					bind:value={admin.imgFilePath}
-					class="h-9 w-full border border-border bg-muted px-3 font-mono text-xs text-foreground focus:border-ring focus:outline-none"
-				>
-					<option value="">Select an imported Proxmox image</option>
-					{#each admin.pveImages as image (image.volid)}
-						<option value={image.volid}>{image.volid} · {formatSize(image.size)}</option>
-					{/each}
-				</select>
-				{#if admin.isoError}
-					<p class="text-xs text-red-400">{admin.isoError}</p>
-				{:else if admin.pveImages.length === 0}
-					<p class="text-xs text-muted-foreground">Import an image first, then select it here.</p>
-				{/if}
-			</div>
+			{/if}
 		</div>
 		<Dialog.Footer>
 			<Button variant="outline" size="sm" onclick={() => (admin.imgDialogOpen = false)}
@@ -501,12 +681,12 @@
 			<Button
 				size="sm"
 				onclick={() => admin.imgSave()}
-				disabled={admin.imgSaving || !admin.imgName.trim() || !selectedPveImage}
+				disabled={admin.imgSaving || !admin.imgName.trim() || !admin.imgRowsValid}
 			>
 				{#if admin.imgSaving}
 					<Loader2 class="h-3 w-3 animate-spin" />
 				{/if}
-				{admin.imgEditing ? 'Save' : 'Create'}
+				{saveLabel}
 			</Button>
 		</Dialog.Footer>
 	</Dialog.Content>

From 9c80534328796c614c35d6248b04594d783f9e10 Mon Sep 17 00:00:00 2001
From: Willow C Reed <cypress@fyralabs.com>
Date: Tue, 27 Oct 2026 17:34:54 -0600
Subject: [PATCH 2/4] fix css grid

---
 apps/dashboard/src/routes/(app)/admin/images/+page.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/routes/(app)/admin/images/+page.svelte b/apps/dashboard/src/routes/(app)/admin/images/+page.svelte
index 63caaa77..42851b83 100644
--- a/apps/dashboard/src/routes/(app)/admin/images/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/admin/images/+page.svelte
@@ -426,7 +426,9 @@
 
 <!-- Image Dialog -->
 <Dialog.Root bind:open={admin.imgDialogOpen}>
-	<Dialog.Content class="max-h-[90vh] overflow-y-auto border-border bg-background sm:max-w-2xl">
+	<Dialog.Content
+		class="max-h-[90vh] grid-cols-[minmax(0,1fr)] overflow-x-hidden overflow-y-auto border-border bg-background sm:max-w-2xl"
+	>
 		<Dialog.Header>
 			<Dialog.Title>{dialogTitles[admin.imgMode]}</Dialog.Title>
 			<Dialog.Description>
@@ -440,7 +442,7 @@
 				{/if}
 			</Dialog.Description>
 		</Dialog.Header>
-		<div class="flex flex-col gap-4 py-4">
+		<div class="flex min-w-0 flex-col gap-4 py-4">
 			{#if admin.imgError}
 				<div
 					class="flex items-center gap-2 border border-red-700 bg-red-950 px-3 py-2 text-sm text-red-400"
@@ -463,7 +465,7 @@
 					</span>
 					<div class="flex min-w-0 flex-1 flex-col">
 						<span class="text-sm font-medium text-foreground">{admin.imgName}</span>
-						<span class="truncate text-xs text-muted-foreground">
+						<span class="line-clamp-2 text-xs text-muted-foreground">
 							{groupVersionCount}
 							existing version{groupVersionCount === 1 ? '' : 's'}{admin.imgDescription
 								? ` · ${admin.imgDescription}`

From cdca01803178856782723848065df462e7750dc2 Mon Sep 17 00:00:00 2001
From: Willow C Reed <cypress@fyralabs.com>
Date: Tue, 27 Oct 2026 17:41:47 -0600
Subject: [PATCH 3/4] move everything into one manage screen

---
 apps/dashboard/src/lib/state/admin.svelte.ts  | 374 +++++++-----
 .../routes/(app)/admin/images/+page.svelte    | 532 ++++++++++--------
 2 files changed, 510 insertions(+), 396 deletions(-)

diff --git a/apps/dashboard/src/lib/state/admin.svelte.ts b/apps/dashboard/src/lib/state/admin.svelte.ts
index 51714c12..1dea3dff 100644
--- a/apps/dashboard/src/lib/state/admin.svelte.ts
+++ b/apps/dashboard/src/lib/state/admin.svelte.ts
@@ -95,15 +95,19 @@ export interface PveImage {
 	volid: string;
 }
 
-export type ImageDialogMode = 'create' | 'addVersions' | 'edit' | 'editGroup';
-
 export interface ImageVersionDraft {
+	error: string;
 	filePath: string;
+	/** Existing base image id, or null for a version that hasn't been created yet. */
+	id: string | null;
 	key: number;
+	removed: boolean;
 	secureBoot: boolean;
 	version: string;
 }
 
+export type ImageVersionStatus = 'new' | 'changed' | 'removed' | 'unchanged';
+
 export interface ImageGroup {
 	name: string;
 	representative: BaseImage;
@@ -260,10 +264,9 @@ export class AdminState {
 	importError = $state('');
 	importTasks = $state<ImportTask[]>([]);
 	imgDialogOpen = $state(false);
-	imgMode = $state<ImageDialogMode>('create');
-	imgEditing = $state<BaseImage | null>(null);
-	/** Name of the image family being edited or extended (as it was when the dialog opened). */
+	/** Saved name of the image family being managed, or null when creating a new one. */
 	imgGroupName = $state<string | null>(null);
+	imgDetailsExpanded = $state(true);
 	imgSaving = $state(false);
 	imgError = $state('');
 	imgName = $state('');
@@ -804,7 +807,25 @@ export class AdminState {
 
 	private imgNewRow(partial: Partial<ImageVersionDraft> = {}): ImageVersionDraft {
 		this.imgRowSeq += 1;
-		return { key: this.imgRowSeq, version: '', filePath: '', secureBoot: true, ...partial };
+		return {
+			key: this.imgRowSeq,
+			id: null,
+			version: '',
+			filePath: '',
+			secureBoot: true,
+			removed: false,
+			error: '',
+			...partial
+		};
+	}
+
+	private imgRowFromImage(image: BaseImage) {
+		return this.imgNewRow({
+			id: image.id,
+			version: image.version,
+			filePath: image.filePath,
+			secureBoot: image.secureBoot
+		});
 	}
 
 	private imgResetShared(source?: BaseImage) {
@@ -818,43 +839,46 @@ export class AdminState {
 		this.imgIsa = 'x86';
 	}
 
-	private imgShow() {
-		this.imgError = '';
-		this.imgSaving = false;
-		this.imgDialogOpen = true;
-		if (this.pveImages.length === 0) {
-			this.loadPveImages();
-		}
+	private imgLoadGroup(group: ImageGroup) {
+		this.imgGroupName = group.name;
+		this.imgResetShared(group.representative);
+		this.imgDetailsExpanded = false;
 	}
 
-	/** Brand new image family with one or more versions. */
+	/** Start a brand new image family. */
 	imgOpenCreate(filePath = '') {
-		this.imgMode = 'create';
-		this.imgEditing = null;
 		this.imgGroupName = null;
 		this.imgResetShared();
+		this.imgDetailsExpanded = true;
 		this.imgRows = [this.imgNewRow({ filePath, version: guessVersionFromFilename(filePath) })];
-		this.imgShow();
+		this.imgError = '';
+		this.imgSaving = false;
+		this.imgDialogOpen = true;
+		if (this.pveImages.length === 0) {
+			this.loadPveImages();
+		}
 	}
 
-	/** Add versions to an existing family, reusing its shared details. */
-	imgOpenAddVersions(groupName: string) {
+	/** Manage an existing family: shared details plus every version, saved in one go. */
+	imgOpenManage(groupName: string) {
 		const group = this.imageGroups.find((g) => g.name === groupName);
 		if (!group) {
 			this.imgOpenCreate();
 			return;
 		}
-		this.imgMode = 'addVersions';
-		this.imgEditing = null;
-		this.imgGroupName = group.name;
-		this.imgResetShared(group.representative);
-		this.imgRows = [this.imgNewRow({ secureBoot: group.representative.secureBoot })];
-		this.imgShow();
+		this.imgLoadGroup(group);
+		this.imgRows = group.versions.map((image) => this.imgRowFromImage(image));
+		this.imgError = '';
+		this.imgSaving = false;
+		this.imgDialogOpen = true;
+		if (this.pveImages.length === 0) {
+			this.loadPveImages();
+		}
 	}
 
-	/** While creating, typing an existing family name switches to "add versions" for it. */
+	/** While creating, typing an existing family name pulls that family in (keeping new rows). */
 	imgAdoptExistingName() {
-		if (this.imgMode !== 'create') {
+		if (this.imgGroupName !== null) {
 			return;
 		}
 		const name = this.imgName.trim();
@@ -862,54 +886,36 @@ export class AdminState {
 		if (!group) {
 			return;
 		}
-		this.imgMode = 'addVersions';
-		this.imgGroupName = group.name;
-		this.imgResetShared(group.representative);
-	}
-
-	/** Back out of "add versions" into creating a new family (keeps the rows). */
-	imgDetachFromGroup() {
-		this.imgMode = 'create';
-		this.imgGroupName = null;
-		this.imgName = '';
-	}
-
-	/** Edit shared details (name, logo, ...) for every version in a family. */
-	imgOpenEditGroup(groupName: string) {
-		const group = this.imageGroups.find((g) => g.name === groupName);
-		if (!group) {
-			return;
-		}
-		this.imgMode = 'editGroup';
-		this.imgEditing = null;
-		this.imgGroupName = group.name;
-		this.imgResetShared(group.representative);
-		this.imgRows = [];
-		this.imgShow();
-	}
-
-	/** Edit a single version (version label, Proxmox file, secure boot). */
-	imgOpenEdit(img: BaseImage) {
-		this.imgMode = 'edit';
-		this.imgEditing = img;
-		this.imgGroupName = img.name;
-		this.imgResetShared(img);
+		const pending = this.imgRows.filter((row) => row.version.trim() || row.filePath);
+		this.imgLoadGroup(group);
 		this.imgRows = [
-			this.imgNewRow({ version: img.version, filePath: img.filePath, secureBoot: img.secureBoot })
+			...group.versions.map((image) => this.imgRowFromImage(image)),
+			...(pending.length > 0
+				? pending
+				: [this.imgNewRow({ secureBoot: group.representative.secureBoot })])
 		];
-		this.imgShow();
 	}
 
 	imgAddRow() {
-		const last = this.imgRows.at(-1);
+		const last = this.imgRows.findLast((row) => !row.removed);
 		this.imgRows.push(this.imgNewRow({ secureBoot: last?.secureBoot ?? true }));
 	}
 
-	imgRemoveRow(key: number) {
-		if (this.imgRows.length <= 1) {
+	/** New rows are dropped outright; existing versions are marked for deletion on save. */
+	imgToggleRemoveRow(row: ImageVersionDraft) {
+		if (row.id === null) {
+			this.imgRows = this.imgRows.filter((r) => r.key !== row.key);
 			return;
 		}
-		this.imgRows = this.imgRows.filter((row) => row.key !== key);
+		row.removed = !row.removed;
+	}
+
+	/** Mark every existing version for deletion and discard unsaved ones. */
+	imgRemoveAll() {
+		this.imgRows = this.imgRows.filter((row) => row.id !== null);
+		for (const row of this.imgRows) {
+			row.removed = true;
+		}
 	}
 
 	imgRowFileChanged(row: ImageVersionDraft) {
@@ -918,41 +924,101 @@ export class AdminState {
 		}
 	}
 
-	/** Volids that are already referenced by a configured image, with a label for display. */
-	get imgUsedFiles(): Map<string, string> {
-		return new Map(
-			this.images
-				.filter((image) => image.id !== this.imgEditing?.id)
-				.map((image) => [image.filePath, `${image.name} ${image.version}`.trim()])
-		);
+	imgRowStatus(row: ImageVersionDraft): ImageVersionStatus {
+		if (row.id === null) {
+			return 'new';
+		}
+		if (row.removed) {
+			return 'removed';
+		}
+		const original = this.images.find((image) => image.id === row.id);
+		if (
+			!original ||
+			original.version !== row.version.trim() ||
+			original.filePath !== row.filePath ||
+			original.secureBoot !== row.secureBoot
+		) {
+			return 'changed';
+		}
+		return 'unchanged';
 	}
 
-	get imgRowsValid() {
-		if (this.imgMode === 'editGroup') {
+	/** Label of another configured image already using this Proxmox file, if any. */
+	imgFileUsedBy(volid: string, rowId: string | null) {
+		const other = this.images.find((image) => image.filePath === volid && image.id !== rowId);
+		return other ? `${other.name} ${other.version}`.trim() : null;
+	}
+
+	private imgSharedData() {
+		return {
+			name: this.imgName.trim(),
+			description: this.imgDescription.trim(),
+			color: this.imgColor,
+			isOfficial: this.imgIsOfficial,
+			accentColor: this.imgAccentColor.trim() || '#6b7280',
+			icon: this.imgIcon.trim(),
+			logoSvg: this.imgIsOfficial ? this.imgLogoSvg.trim() : ''
+		};
+	}
+
+	get imgSharedChanged() {
+		if (this.imgGroupName === null) {
+			return false;
+		}
+		const rep = this.imageGroups.find((g) => g.name === this.imgGroupName)?.representative;
+		if (!rep) {
 			return true;
 		}
-		const volids = new Set(this.pveImages.map((image) => image.volid));
+		const shared = this.imgSharedData();
 		return (
-			this.imgRows.length > 0 &&
-			this.imgRows.every((row) => row.version.trim() && volids.has(row.filePath))
+			shared.name !== rep.name ||
+			shared.description !== rep.description ||
+			shared.color !== rep.color ||
+			shared.isOfficial !== rep.isOfficial ||
+			shared.accentColor !== rep.accentColor ||
+			shared.icon !== (rep.icon ?? '') ||
+			shared.logoSvg !== (rep.isOfficial ? (rep.logoSvg ?? '') : '')
 		);
 	}
 
+	get imgPending() {
+		const counts = { new: 0, changed: 0, removed: 0 };
+		for (const row of this.imgRows) {
+			const status = this.imgRowStatus(row);
+			if (status !== 'unchanged') {
+				counts[status] += 1;
+			}
+		}
+		return { ...counts, details: this.imgSharedChanged };
+	}
+
+	get imgHasChanges() {
+		const pending = this.imgPending;
+		return pending.details || pending.new + pending.changed + pending.removed > 0;
+	}
+
+	get imgActiveRows() {
+		return this.imgRows.filter((row) => !row.removed);
+	}
+
+	get imgRowsValid() {
+		const volids = new Set(this.pveImages.map((image) => image.volid));
+		const active = this.imgActiveRows;
+		if (active.length === 0 && this.imgGroupName === null) {
+			return false;
+		}
+		return active.every((row) => row.version.trim() && volids.has(row.filePath));
+	}
+
 	get imgDuplicateVersions(): string[] {
-		const group = this.imageGroups.find((g) => g.name === this.imgName.trim());
-		const taken = new Set(
-			(group?.versions ?? [])
-				.filter((image) => image.id !== this.imgEditing?.id)
-				.map((image) => image.version.trim().toLowerCase())
-		);
 		const seen = new Set<string>();
 		const dupes = new Set<string>();
-		for (const row of this.imgRows) {
+		for (const row of this.imgActiveRows) {
 			const version = row.version.trim().toLowerCase();
 			if (!version) {
 				continue;
 			}
-			if (taken.has(version) || seen.has(version)) {
+			if (seen.has(version)) {
 				dupes.add(row.version.trim());
 			}
 			seen.add(version);
@@ -960,35 +1026,36 @@ export class AdminState {
 		return [...dupes];
 	}
 
-	private imgSharedData() {
-		const icon = this.imgIcon.trim();
-		const logoSvg = this.imgLogoSvg.trim();
-		return {
-			name: this.imgName.trim(),
-			description: this.imgDescription.trim(),
-			color: this.imgColor,
-			isOfficial: this.imgIsOfficial,
-			accentColor: this.imgAccentColor.trim() || '#6b7280',
-			isa: 'x86' as const,
-			icon,
-			logoSvg: this.imgIsOfficial ? logoSvg : ''
-		};
+	get imgCanSave() {
+		if (this.imgSaving || !this.imgHasChanges) {
+			return false;
+		}
+		if (this.imgActiveRows.length === 0) {
+			// Deleting the whole family doesn't need valid details.
+			return this.imgGroupName !== null;
+		}
+		return Boolean(this.imgName.trim()) && this.imgRowsValid;
 	}
 
 	async imgSave() {
-		if (!(this.imgName.trim() && this.imgRowsValid)) {
+		if (!this.imgCanSave) {
 			return;
 		}
 		this.imgSaving = true;
 		this.imgError = '';
+		for (const row of this.imgRows) {
+			row.error = '';
+		}
+
 		const shared = this.imgSharedData();
+		const sharedChanged = this.imgSharedChanged;
 		const remoteShared = {
 			name: shared.name,
 			description: shared.description,
 			color: shared.color,
 			isOfficial: shared.isOfficial,
 			accentColor: shared.accentColor,
-			isa: shared.isa,
+			isa: 'x86' as const,
 			...(shared.icon ? { icon: shared.icon } : {})
 		};
 		const localShared = {
@@ -996,56 +1063,80 @@ export class AdminState {
 			icon: shared.icon || null,
 			logoSvg: shared.logoSvg || null
 		};
+		const versionData = (row: ImageVersionDraft) => ({
+			version: row.version.trim(),
+			filePath: row.filePath,
+			secureBoot: row.secureBoot
+		});
+		const formatOf = (volid: string) =>
+			this.pveImages.find((image) => image.volid === volid)?.format || 'qcow2';
+		let failed = false;
+
 		try {
-			if (this.imgMode === 'editGroup') {
-				const members = this.images.filter((image) => image.name === this.imgGroupName);
-				await Promise.all(
-					members.map((image) =>
-						updateImage({ imageId: image.id, ...remoteShared, logoSvg: shared.logoSvg })
-					)
-				);
-				this.images = this.images.map((image) =>
-					image.name === this.imgGroupName ? { ...image, ...localShared } : image
-				);
-			} else if (this.imgMode === 'edit' && this.imgEditing) {
-				const [row] = this.imgRows;
-				const file = this.pveImages.find((image) => image.volid === row.filePath);
-				const versionData = {
-					version: row.version.trim(),
-					filePath: row.filePath,
-					secureBoot: row.secureBoot
-				};
-				const { id } = this.imgEditing;
-				await updateImage({ imageId: id, ...versionData });
-				this.images = this.images.map((image) =>
-					image.id === id ? { ...image, ...versionData, imageType: file?.format || 'qcow2' } : image
-				);
-			} else {
-				// Sequential so sort order follows the row order.
-				for (const row of this.imgRows) {
-					const file = this.pveImages.find((image) => image.volid === row.filePath);
-					const versionData = {
-						version: row.version.trim(),
-						filePath: row.filePath,
-						secureBoot: row.secureBoot
-					};
+			// Deletions and updates can go in parallel.
+			const existingWork = this.imgRows
+				.filter((row) => row.id !== null)
+				.map(async (row) => {
+					const id = row.id as string;
+					const status = this.imgRowStatus(row);
+					try {
+						if (status === 'removed') {
+							await deleteImage({ imageId: id });
+							this.images = this.images.filter((image) => image.id !== id);
+							this.imgRows = this.imgRows.filter((r) => r.key !== row.key);
+						} else if (status === 'changed' || sharedChanged) {
+							const data = {
+								...(sharedChanged ? { ...remoteShared, logoSvg: shared.logoSvg } : {}),
+								...versionData(row)
+							};
+							await updateImage({ imageId: id, ...data });
+							this.images = this.images.map((image) =>
+								image.id === id
+									? {
+											...image,
+											...(sharedChanged ? localShared : {}),
+											...versionData(row),
+											imageType: formatOf(row.filePath)
+										}
+									: image
+							);
+						}
+					} catch (err) {
+						failed = true;
+						row.error = getErrorMessage(err, 'Failed to save');
+					}
+				});
+			await Promise.all(existingWork);
+
+			// Creations run sequentially so sort order follows the row order.
+			for (const row of this.imgRows.filter((r) => r.id === null)) {
+				try {
 					// biome-ignore lint/performance/noAwaitInLoops: preserve insertion order for sortOrder
 					const result = await createImage({
 						...remoteShared,
 						...(shared.logoSvg ? { logoSvg: shared.logoSvg } : {}),
-						...versionData
+						...versionData(row)
 					});
 					this.images.push({
 						id: result.id,
 						...localShared,
-						...versionData,
-						imageType: file?.format || 'qcow2'
+						...versionData(row),
+						imageType: formatOf(row.filePath)
 					});
-					// Drop saved rows so a partial failure can be retried without duplicates.
-					this.imgRows = this.imgRows.filter((r) => r.key !== row.key);
+					row.id = result.id;
+				} catch (err) {
+					failed = true;
+					row.error = getErrorMessage(err, 'Failed to create');
 				}
 			}
 
+			if (failed) {
+				this.imgError = 'Some changes failed to save. Fix the highlighted rows and try again.';
+				if (this.images.some((image) => image.name === shared.name)) {
+					this.imgGroupName = shared.name;
+				}
+				return;
+			}
 			this.imgDialogOpen = false;
 		} catch (err) {
 			this.imgError = getErrorMessage(err, 'Failed to save');
@@ -1076,13 +1167,4 @@ export class AdminState {
 			toast.error(getErrorMessage(err, 'Failed to reorder images'));
 		}
 	}
-
-	async imgRemove(id: string) {
-		try {
-			await deleteImage({ imageId: id });
-			this.images = this.images.filter((image) => image.id !== id);
-		} catch (err) {
-			toast.error(getErrorMessage(err, 'Failed to delete image'));
-		}
-	}
 }
diff --git a/apps/dashboard/src/routes/(app)/admin/images/+page.svelte b/apps/dashboard/src/routes/(app)/admin/images/+page.svelte
index 42851b83..e39f77fd 100644
--- a/apps/dashboard/src/routes/(app)/admin/images/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/admin/images/+page.svelte
@@ -10,6 +10,7 @@
 	import GripVertical from '~icons/lucide/grip-vertical';
 	import Loader2 from '~icons/lucide/loader-2';
 	import Plus from '~icons/lucide/plus';
+	import Undo from '~icons/lucide/undo-2';
 	import X from '~icons/lucide/x';
 	import AlertTriangle from '~icons/nucleo/alert-triangle';
 	import Disc from '~icons/nucleo/disc';
@@ -85,30 +86,40 @@
 		admin.imgReorderGroups(index, event.key === 'ArrowUp' ? index - 1 : index + 1);
 	}
 
-	const dialogTitles = {
-		create: 'Add Image',
-		addVersions: 'Add Versions',
-		edit: 'Edit Version',
-		editGroup: 'Edit Image Details'
-	} as const;
-
-	let showSharedFields = $derived(admin.imgMode === 'create' || admin.imgMode === 'editGroup');
-	let showVersionRows = $derived(admin.imgMode !== 'editGroup');
-	let groupVersionCount = $derived(
-		admin.imgGroupName
-			? (admin.imageGroups.find((group) => group.name === admin.imgGroupName)?.versions.length ?? 0)
-			: 0
-	);
+	let isNewImage = $derived(admin.imgGroupName === null);
+	let pendingSummary = $derived.by(() => {
+		const { new: added, changed, removed, details } = admin.imgPending;
+		const parts: string[] = [];
+		if (details) {
+			parts.push('details');
+		}
+		if (added) {
+			parts.push(`${added} new`);
+		}
+		if (changed) {
+			parts.push(`${changed} changed`);
+		}
+		if (removed) {
+			parts.push(`${removed} removed`);
+		}
+		return parts.join(', ');
+	});
 	let saveLabel = $derived.by(() => {
-		if (admin.imgMode === 'edit' || admin.imgMode === 'editGroup') {
-			return 'Save';
+		if (isNewImage) {
+			return 'Create image';
 		}
-		const count = admin.imgRows.length;
-		if (count > 1) {
-			return `Add ${count} versions`;
+		if (admin.imgActiveRows.length === 0) {
+			return 'Delete image';
 		}
-		return admin.imgMode === 'create' ? 'Create' : 'Add version';
+		return 'Save changes';
 	});
+
+	const statusStyles = {
+		new: 'text-emerald-700 dark:text-emerald-400',
+		changed: 'text-amber-700 dark:text-amber-400',
+		removed: 'text-red-600 dark:text-red-400',
+		unchanged: 'text-muted-foreground'
+	} as const;
 	let localImportTargets = $derived(
 		admin.pveImageImportTargets.filter((target) => target.storage === admin.importStorage)
 	);
@@ -217,24 +228,15 @@
 							</div>
 						</td>
 						<td class="px-5 py-3 text-right">
-							<div class="flex items-center justify-end gap-1">
-								<Button
-									variant="outline"
-									size="sm"
-									class="h-7 gap-1 px-2 text-xs"
-									onclick={() => admin.imgOpenAddVersions(group.name)}
-									><Plus class="h-3 w-3" />
-									Version</Button
-								>
-								<Button
-									variant="ghost"
-									size="sm"
-									aria-label={`Edit details for ${group.name}`}
-									class="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
-									onclick={() => admin.imgOpenEditGroup(group.name)}
-									><Pencil class="h-3 w-3" /></Button
-								>
-							</div>
+							<Button
+								variant="outline"
+								size="sm"
+								aria-label={`Manage ${group.name}`}
+								class="h-7 gap-1 px-2 text-xs"
+								onclick={() => admin.imgOpenManage(group.name)}
+								><Pencil class="h-3 w-3" />
+								Manage</Button
+							>
 						</td>
 					</tr>
 					{#each group.versions as img (img.id)}
@@ -256,26 +258,7 @@
 							<td class="px-5 py-2 text-xs text-muted-foreground">
 								{img.secureBoot ? 'On' : 'Off'}
 							</td>
-							<td class="px-5 py-2 text-right">
-								<div class="flex items-center justify-end gap-1">
-									<Button
-										variant="ghost"
-										size="sm"
-										aria-label={`Edit ${img.name} ${img.version}`}
-										class="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
-										onclick={() => admin.imgOpenEdit(img)}
-										><Pencil class="h-3 w-3" /></Button
-									>
-									<Button
-										variant="ghost"
-										size="sm"
-										aria-label={`Delete ${img.name} ${img.version}`}
-										class="h-7 w-7 p-0 text-red-400 hover:text-red-300"
-										onclick={() => admin.imgRemove(img.id)}
-										><Trash2 class="h-3 w-3" /></Button
-									>
-								</div>
-							</td>
+							<td></td>
 						</tr>
 					{/each}
 				</tbody>
@@ -424,25 +407,20 @@
 	</Dialog.Content>
 </Dialog.Root>
 
-<!-- Image Dialog -->
+<!-- Manage Image Dialog -->
 <Dialog.Root bind:open={admin.imgDialogOpen}>
 	<Dialog.Content
-		class="max-h-[90vh] grid-cols-[minmax(0,1fr)] overflow-x-hidden overflow-y-auto border-border bg-background sm:max-w-2xl"
+		class="max-h-[90vh] grid-cols-[minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden border-border bg-background sm:max-w-3xl"
 	>
 		<Dialog.Header>
-			<Dialog.Title>{dialogTitles[admin.imgMode]}</Dialog.Title>
+			<Dialog.Title>{isNewImage ? 'Add Image' : `Manage ${admin.imgGroupName}`}</Dialog.Title>
 			<Dialog.Description>
-				{#if admin.imgMode === 'editGroup'}
-					Changes apply to all {groupVersionCount} version{groupVersionCount === 1 ? '' : 's'}
-					of this image.
-				{:else if admin.imgMode === 'edit'}
-					Edit this version. Name, logo and description are shared, so edit them from the image row.
-				{:else}
-					Configure a base image and one or more versions for VM provisioning.
-				{/if}
+				{isNewImage
+					? 'Configure a base image and its versions for VM provisioning.'
+					: 'Edit details and versions. Nothing is saved until you hit Save.'}
 			</Dialog.Description>
 		</Dialog.Header>
-		<div class="flex min-w-0 flex-col gap-4 py-4">
+		<div class="-mx-4 flex min-h-0 min-w-0 flex-col gap-5 overflow-y-auto px-4 py-2">
 			{#if admin.imgError}
 				<div
 					class="flex items-center gap-2 border border-red-700 bg-red-950 px-3 py-2 text-sm text-red-400"
@@ -451,8 +429,8 @@
 				</div>
 			{/if}
 
-			{#if !showSharedFields}
-				<!-- Compact summary of the family these versions belong to -->
+			<!-- Shared details -->
+			<section class="flex flex-col gap-3">
 				<div class="flex items-center gap-3 border border-border bg-muted/40 px-3 py-2.5">
 					<span
 						class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden text-white {admin.imgColor}"
@@ -464,159 +442,176 @@
 						{/if}
 					</span>
 					<div class="flex min-w-0 flex-1 flex-col">
-						<span class="text-sm font-medium text-foreground">{admin.imgName}</span>
-						<span class="line-clamp-2 text-xs text-muted-foreground">
-							{groupVersionCount}
-							existing version{groupVersionCount === 1 ? '' : 's'}{admin.imgDescription
-								? ` · ${admin.imgDescription}`
-								: ''}
+						<span class="flex items-center gap-2 text-sm font-medium text-foreground">
+							{admin.imgName || 'New image'}
+							{#if admin.imgIsOfficial}
+								<Badge
+									variant="secondary"
+									class="text-[10px] text-emerald-700 dark:text-emerald-300"
+									>Official</Badge
+								>
+							{/if}
 						</span>
+						{#if admin.imgDescription}
+							<span class="line-clamp-2 text-xs text-muted-foreground">{admin.imgDescription}</span>
+						{/if}
 					</div>
-					{#if admin.imgMode === 'addVersions'}
-						<Button
-							variant="ghost"
-							size="sm"
-							class="h-7 px-2 text-xs text-muted-foreground"
-							onclick={() => admin.imgDetachFromGroup()}
-							>New image instead</Button
-						>
-					{/if}
-				</div>
-			{/if}
-
-			{#if showSharedFields}
-				<div class="flex flex-col gap-2">
-					<Label for="img-name">Name</Label>
-					<Input
-						id="img-name"
-						bind:value={admin.imgName}
-						placeholder="Fedora Server"
-						list={admin.imgMode === 'create' ? 'img-existing-names' : undefined}
-						onchange={() => admin.imgAdoptExistingName()}
-					/>
-					<datalist id="img-existing-names">
-						{#each admin.imageGroups as group (group.name)}
-							<option value={group.name}></option>
-						{/each}
-					</datalist>
-					{#if admin.imgMode === 'create'}
-						<p class="text-[11px] text-muted-foreground">
-							Pick an existing name to add versions to it instead of re-entering details.
-						</p>
-					{/if}
+					<Button
+						variant="ghost"
+						size="sm"
+						class="h-7 shrink-0 px-2 text-xs text-muted-foreground"
+						aria-expanded={admin.imgDetailsExpanded}
+						onclick={() => (admin.imgDetailsExpanded = !admin.imgDetailsExpanded)}
+					>
+						{admin.imgDetailsExpanded ? 'Hide details' : 'Edit details'}
+					</Button>
 				</div>
 
-				<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
-					<div class="flex flex-col gap-2">
-						<Label>Architecture</Label>
-						<div
-							class="flex h-9 items-center border border-border bg-muted px-3 text-sm text-muted-foreground"
-						>
-							x86
+				{#if admin.imgDetailsExpanded}
+					<div class="flex flex-col gap-4 border-l-2 border-border pl-4">
+						<div class="grid grid-cols-1 gap-3 sm:grid-cols-[1fr_auto]">
+							<div class="flex flex-col gap-2">
+								<Label for="img-name">Name</Label>
+								<Input
+									id="img-name"
+									bind:value={admin.imgName}
+									placeholder="Fedora Server"
+									list={isNewImage ? 'img-existing-names' : undefined}
+									onchange={() => admin.imgAdoptExistingName()}
+								/>
+								{#if isNewImage}
+									<datalist id="img-existing-names">
+										{#each admin.imageGroups as group (group.name)}
+											<option value={group.name}></option>
+										{/each}
+									</datalist>
+								{/if}
+							</div>
+							<div class="flex flex-col gap-2">
+								<Label>Official</Label>
+								<label
+									class="flex h-9 items-center gap-2 border border-border bg-muted px-3 text-sm text-muted-foreground"
+								>
+									<input type="checkbox" bind:checked={admin.imgIsOfficial} class="h-4 w-4" />
+									Official image
+								</label>
+							</div>
 						</div>
-					</div>
-					<div class="flex flex-col gap-2">
-						<Label>Official</Label>
-						<label
-							class="flex h-9 items-center gap-2 border border-border bg-muted px-3 text-sm text-muted-foreground"
-						>
-							<input type="checkbox" bind:checked={admin.imgIsOfficial} class="h-4 w-4" />
-							Official image
-						</label>
-					</div>
-				</div>
-
-				<div class="flex flex-col gap-2">
-					<Label>Description</Label>
-					<textarea
-						bind:value={admin.imgDescription}
-						placeholder="Short description of this image..."
-						rows="2"
-						class="w-full resize-none border border-border bg-muted px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none"
-					></textarea>
-				</div>
+						{#if isNewImage}
+							<p class="-mt-2 text-[11px] text-muted-foreground">
+								Picking an existing name opens that image so you can add versions to it.
+							</p>
+						{/if}
 
-				{#if admin.imgIsOfficial}
-					<div class="grid grid-cols-[1fr_auto] gap-3">
 						<div class="flex flex-col gap-2">
-							<Label
-								>Logo SVG
-								<span class="font-normal text-muted-foreground">(official only)</span></Label
-							>
+							<Label>Description</Label>
 							<textarea
-								bind:value={admin.imgLogoSvg}
-								placeholder="<svg ...></svg>"
-								rows="3"
-								class="w-full resize-none border border-border bg-muted px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none"
+								bind:value={admin.imgDescription}
+								placeholder="Short description of this image..."
+								rows="2"
+								class="w-full resize-none border border-border bg-muted px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none"
 							></textarea>
 						</div>
-						<div class="flex flex-col gap-2">
-							<Label>Preview</Label>
-							<div
-								class="flex h-20 w-20 items-center justify-center border border-border bg-muted p-3 text-muted-foreground"
-								style:color={admin.imgAccentColor}
-							>
-								{#if admin.imgLogoSvg.trim()}
-									<img src={svgDataUrl(admin.imgLogoSvg)} alt="" class="h-12 w-12" />
-								{:else}
-									<Image class="h-6 w-6" />
-								{/if}
+
+						{#if admin.imgIsOfficial}
+							<div class="grid grid-cols-[1fr_auto] gap-3">
+								<div class="flex flex-col gap-2">
+									<Label>Logo SVG</Label>
+									<textarea
+										bind:value={admin.imgLogoSvg}
+										placeholder="<svg ...></svg>"
+										rows="3"
+										class="w-full resize-none border border-border bg-muted px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none"
+									></textarea>
+								</div>
+								<div class="flex flex-col gap-2">
+									<Label>Preview</Label>
+									<div
+										class="flex h-20 w-20 items-center justify-center border border-border bg-muted p-3 text-muted-foreground"
+										style:color={admin.imgAccentColor}
+									>
+										{#if admin.imgLogoSvg.trim()}
+											<img src={svgDataUrl(admin.imgLogoSvg)} alt="" class="h-12 w-12" />
+										{:else}
+											<Image class="h-6 w-6" />
+										{/if}
+									</div>
+								</div>
 							</div>
-						</div>
-					</div>
-					<div class="flex flex-col gap-2">
-						<Label>Accent Color</Label>
-						<Input bind:value={admin.imgAccentColor} placeholder="#6b7280" />
+							<div class="flex flex-col gap-2">
+								<Label>Accent Color</Label>
+								<Input bind:value={admin.imgAccentColor} placeholder="#6b7280" />
+							</div>
+						{/if}
+
+						{#if !isNewImage}
+							<p class="text-[11px] text-muted-foreground">
+								Detail changes apply to every version of this image.
+							</p>
+						{/if}
 					</div>
 				{/if}
-			{/if}
+			</section>
 
-			{#if showVersionRows}
-				<div class="flex flex-col gap-2">
-					<div class="flex items-center justify-between">
-						<Label>{admin.imgMode === 'edit' ? 'Version' : 'Versions'}</Label>
-						<Button
-							variant="ghost"
-							size="sm"
-							class="h-6 gap-1 px-2 text-[10px] text-muted-foreground"
-							onclick={() => admin.loadPveImages()}
-							disabled={admin.isoLoading}
-						>
-							{#if admin.isoLoading}
-								<Loader2 class="h-3 w-3 animate-spin" />
-							{:else}
-								<RefreshCw class="h-3 w-3" />
-							{/if}
-							Refresh images
-						</Button>
-					</div>
+			<!-- Versions -->
+			<section class="flex flex-col gap-2">
+				<div class="flex items-center justify-between">
+					<Label>Versions</Label>
+					<Button
+						variant="ghost"
+						size="sm"
+						class="h-6 gap-1 px-2 text-[10px] text-muted-foreground"
+						onclick={() => admin.loadPveImages()}
+						disabled={admin.isoLoading}
+					>
+						{#if admin.isoLoading}
+							<Loader2 class="h-3 w-3 animate-spin" />
+						{:else}
+							<RefreshCw class="h-3 w-3" />
+						{/if}
+						Refresh images
+					</Button>
+				</div>
 
-					<div class="flex flex-col divide-y divide-border/60 border border-border">
-						<div
-							class="grid grid-cols-[7rem_1fr_auto_1.75rem] items-center gap-2 bg-muted/40 px-2 py-1.5 text-[10px] font-medium text-muted-foreground uppercase"
-						>
-							<span>Version</span>
-							<span>Proxmox image</span>
-							<span>Secure Boot</span>
-							<span class="sr-only">Remove</span>
-						</div>
-						{#each admin.imgRows as row, rowIndex (row.key)}
-							<div class="grid grid-cols-[7rem_1fr_auto_1.75rem] items-center gap-2 px-2 py-2">
+				<div class="flex flex-col divide-y divide-border/60 border border-border">
+					<div
+						class="grid grid-cols-[7rem_minmax(0,1fr)_5rem_4.5rem_1.75rem] items-center gap-2 bg-muted/40 px-2 py-1.5 text-[10px] font-medium text-muted-foreground uppercase"
+					>
+						<span>Version</span>
+						<span>Proxmox image</span>
+						<span class="text-center">Secure Boot</span>
+						<span>Status</span>
+						<span class="sr-only">Remove</span>
+					</div>
+					{#each admin.imgRows as row, rowIndex (row.key)}
+						{@const status = admin.imgRowStatus(row)}
+						<div class={row.error ? 'bg-red-950/20' : ''}>
+							<div
+								class="grid grid-cols-[7rem_minmax(0,1fr)_5rem_4.5rem_1.75rem] items-center gap-2 px-2 py-2 {row.removed
+									? 'opacity-50'
+									: ''}"
+							>
 								<Input
 									bind:value={row.version}
-									placeholder="42"
+									placeholder="e.g. 42"
+									disabled={row.removed}
 									aria-label={`Version ${rowIndex + 1}`}
-									class="h-8 text-sm"
+									class="h-8 text-sm {row.removed ? 'line-through' : ''}"
 								/>
 								<select
 									bind:value={row.filePath}
 									onchange={() => admin.imgRowFileChanged(row)}
+									disabled={row.removed}
 									aria-label={`Proxmox image for version ${rowIndex + 1}`}
 									class="h-8 w-full min-w-0 border border-border bg-muted px-2 font-mono text-xs text-foreground focus:border-ring focus:outline-none"
 								>
 									<option value="">Select an imported image</option>
+									{#if row.filePath &&
+										!admin.pveImages.some((image) => image.volid === row.filePath)}
+										<option value={row.filePath} disabled>{row.filePath} · missing</option>
+									{/if}
 									{#each admin.pveImages as image (image.volid)}
-										{@const usedBy = admin.imgUsedFiles.get(image.volid)}
+										{@const usedBy = admin.imgFileUsedBy(image.volid, row.id)}
 										<option value={image.volid}>
 											{image.volid}
 											· {formatSize(image.size)}{usedBy ? ` · used by ${usedBy}` : ''}
@@ -624,72 +619,109 @@
 									{/each}
 								</select>
 								<label
-									class="flex h-8 items-center justify-center px-2"
+									class="flex h-8 items-center justify-center"
 									title="Enable UEFI Secure Boot for VMs using this version"
 								>
 									<input
 										type="checkbox"
 										bind:checked={row.secureBoot}
+										disabled={row.removed}
 										class="h-4 w-4"
 										aria-label={`Secure Boot for version ${rowIndex + 1}`}
 									/>
 								</label>
-								{#if admin.imgRows.length > 1}
-									<Button
-										variant="ghost"
-										size="sm"
-										aria-label={`Remove version ${rowIndex + 1}`}
-										class="h-7 w-7 p-0 text-muted-foreground hover:text-red-400"
-										onclick={() => admin.imgRemoveRow(row.key)}
-										><X class="h-3 w-3" /></Button
-									>
-								{:else}
-									<span></span>
-								{/if}
+								<span class="text-[11px] capitalize {statusStyles[status]}">
+									{status === 'unchanged' ? '' : status}
+								</span>
+								<Button
+									variant="ghost"
+									size="sm"
+									aria-label={row.removed
+										? `Restore version ${rowIndex + 1}`
+										: `Remove version ${rowIndex + 1}`}
+									title={row.removed ? 'Undo remove' : 'Remove version'}
+									class="h-7 w-7 p-0 text-muted-foreground {row.removed
+										? 'hover:text-foreground'
+										: 'hover:text-red-400'}"
+									onclick={() => admin.imgToggleRemoveRow(row)}
+								>
+									{#if row.removed}
+										<Undo class="h-3 w-3" />
+									{:else}
+										<X class="h-3 w-3" />
+									{/if}
+								</Button>
 							</div>
-						{/each}
-					</div>
+							{#if row.error}
+								<p class="px-2 pb-2 text-xs text-red-400">{row.error}</p>
+							{/if}
+						</div>
+					{:else}
+						<p class="px-3 py-4 text-center text-xs text-muted-foreground">No versions yet.</p>
+					{/each}
+				</div>
 
-					{#if admin.imgMode !== 'edit'}
-						<Button
-							variant="outline"
-							size="sm"
-							class="h-7 w-fit gap-1 text-xs"
-							onclick={() => admin.imgAddRow()}
-							><Plus class="h-3 w-3" />
-							Add another version</Button
-						>
-					{/if}
+				<Button
+					variant="outline"
+					size="sm"
+					class="h-7 w-fit gap-1 text-xs"
+					onclick={() => admin.imgAddRow()}
+					><Plus class="h-3 w-3" />
+					Add version</Button
+				>
 
-					{#if admin.isoError}
-						<p class="text-xs text-red-400">{admin.isoError}</p>
-					{:else if admin.pveImages.length === 0 && !admin.isoLoading}
-						<p class="text-xs text-muted-foreground">
-							No imported images found. Use Upload/Import Image first.
-						</p>
-					{/if}
-					{#if admin.imgDuplicateVersions.length > 0}
-						<p class="text-xs text-amber-600 dark:text-amber-400">
-							Heads up: {admin.imgDuplicateVersions.join(', ')} already exists for this image.
-						</p>
-					{/if}
-				</div>
-			{/if}
+				{#if admin.isoError}
+					<p class="text-xs text-red-400">{admin.isoError}</p>
+				{:else if admin.pveImages.length === 0 && !admin.isoLoading}
+					<p class="text-xs text-muted-foreground">
+						No imported images found. Use Upload/Import Image first.
+					</p>
+				{/if}
+				{#if admin.imgDuplicateVersions.length > 0}
+					<p class="text-xs text-amber-600 dark:text-amber-400">
+						Heads up: {admin.imgDuplicateVersions.join(', ')} is listed more than once.
+					</p>
+				{/if}
+				{#if !isNewImage && admin.imgActiveRows.length === 0}
+					<p class="text-xs text-red-400">
+						Every version is marked for removal. Saving will delete this image entirely.
+					</p>
+				{/if}
+			</section>
 		</div>
-		<Dialog.Footer>
-			<Button variant="outline" size="sm" onclick={() => (admin.imgDialogOpen = false)}
-				>Cancel</Button
-			>
-			<Button
-				size="sm"
-				onclick={() => admin.imgSave()}
-				disabled={admin.imgSaving || !admin.imgName.trim() || !admin.imgRowsValid}
-			>
-				{#if admin.imgSaving}
-					<Loader2 class="h-3 w-3 animate-spin" />
+		<Dialog.Footer class="items-center sm:justify-between">
+			<div class="flex items-center gap-3">
+				{#if !isNewImage}
+					<Button
+						variant="ghost"
+						size="sm"
+						class="h-8 gap-1 px-2 text-xs text-red-400 hover:text-red-300"
+						onclick={() => admin.imgRemoveAll()}
+						disabled={admin.imgSaving || admin.imgActiveRows.length === 0}
+						><Trash2 class="h-3 w-3" />
+						Delete image</Button
+					>
 				{/if}
-				{saveLabel}
-			</Button>
+				{#if pendingSummary && !isNewImage}
+					<span class="text-xs text-muted-foreground">Pending: {pendingSummary}</span>
+				{/if}
+			</div>
+			<div class="flex items-center gap-2">
+				<Button variant="outline" size="sm" onclick={() => (admin.imgDialogOpen = false)}
+					>Cancel</Button
+				>
+				<Button
+					size="sm"
+					variant={saveLabel === 'Delete image' ? 'destructive' : 'default'}
+					onclick={() => admin.imgSave()}
+					disabled={!admin.imgCanSave}
+				>
+					{#if admin.imgSaving}
+						<Loader2 class="h-3 w-3 animate-spin" />
+					{/if}
+					{saveLabel}
+				</Button>
+			</div>
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>

From 586a97926ff813d19928d375a50f0672d7fc3c78 Mon Sep 17 00:00:00 2001
From: Willow C Reed <cypress@fyralabs.com>
Date: Tue, 27 Oct 2026 17:47:31 -0600
Subject: [PATCH 4/4] formatting

---
 apps/dashboard/src/lib/state/admin.svelte.ts | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/apps/dashboard/src/lib/state/admin.svelte.ts b/apps/dashboard/src/lib/state/admin.svelte.ts
index 1dea3dff..ffddce90 100644
--- a/apps/dashboard/src/lib/state/admin.svelte.ts
+++ b/apps/dashboard/src/lib/state/admin.svelte.ts
@@ -98,7 +98,6 @@ export interface PveImage {
 export interface ImageVersionDraft {
 	error: string;
 	filePath: string;
-	/** Existing base image id, or null for a version that hasn't been created yet. */
 	id: string | null;
 	key: number;
 	removed: boolean;
@@ -264,7 +263,6 @@ export class AdminState {
 	importError = $state('');
 	importTasks = $state<ImportTask[]>([]);
 	imgDialogOpen = $state(false);
-	/** Saved name of the image family being managed, or null when creating a new one. */
 	imgGroupName = $state<string | null>(null);
 	imgDetailsExpanded = $state(true);
 	imgSaving = $state(false);
@@ -280,7 +278,6 @@ export class AdminState {
 	imgRows = $state<ImageVersionDraft[]>([]);
 	private imgRowSeq = 0;
 
-	/** Images grouped by name, in display order (by first appearance in sortOrder). */
 	get imageGroups(): ImageGroup[] {
 		const groups = new Map<string, BaseImage[]>();
 		for (const image of this.images) {
@@ -845,7 +842,6 @@ export class AdminState {
 		this.imgDetailsExpanded = false;
 	}
 
-	/** Start a brand new image family. */
 	imgOpenCreate(filePath = '') {
 		this.imgGroupName = null;
 		this.imgResetShared();
@@ -859,7 +855,6 @@ export class AdminState {
 		}
 	}
 
-	/** Manage an existing family: shared details plus every version, saved in one go. */
 	imgOpenManage(groupName: string) {
 		const group = this.imageGroups.find((g) => g.name === groupName);
 		if (!group) {
@@ -876,7 +871,6 @@ export class AdminState {
 		}
 	}
 
-	/** While creating, typing an existing family name pulls that family in (keeping new rows). */
 	imgAdoptExistingName() {
 		if (this.imgGroupName !== null) {
 			return;
@@ -901,7 +895,6 @@ export class AdminState {
 		this.imgRows.push(this.imgNewRow({ secureBoot: last?.secureBoot ?? true }));
 	}
 
-	/** New rows are dropped outright; existing versions are marked for deletion on save. */
 	imgToggleRemoveRow(row: ImageVersionDraft) {
 		if (row.id === null) {
 			this.imgRows = this.imgRows.filter((r) => r.key !== row.key);
@@ -910,7 +903,6 @@ export class AdminState {
 		row.removed = !row.removed;
 	}
 
-	/** Mark every existing version for deletion and discard unsaved ones. */
 	imgRemoveAll() {
 		this.imgRows = this.imgRows.filter((row) => row.id !== null);
 		for (const row of this.imgRows) {
@@ -943,7 +935,6 @@ export class AdminState {
 		return 'unchanged';
 	}
 
-	/** Label of another configured image already using this Proxmox file, if any. */
 	imgFileUsedBy(volid: string, rowId: string | null) {
 		const other = this.images.find((image) => image.filePath === volid && image.id !== rowId);
 		return other ? `${other.name} ${other.version}`.trim() : null;
@@ -1145,7 +1136,6 @@ export class AdminState {
 		}
 	}
 
-	/** Reorder whole image families; versions inside a family are sorted by version. */
 	async imgReorderGroups(fromIndex: number, toIndex: number) {
 		const groups = this.imageGroups;
 		if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0) {