@hot-updater/console 0.31.4 → 0.33.0

package/.output/server/_ssr/{routes-BSs-dv4D.mjs → routes-D5CmWxI7.mjs}

@@ -3,7 +3,7 @@ import { c as createServerFn, i as TSS_SERVER_FUNCTION } from "./createServerFn-
 import { c as getPatchBaseFileHash, d as isValidCohort, f as normalizeCohortValue, l as getPatchFileHash, n as NUMERIC_COHORT_SIZE, o as getNumericCohortRolloutPosition, p as normalizeRolloutCohortCount, s as getPatchBaseBundleId, t as INVALID_COHORT_ERROR_MESSAGE } from "./dist-CRiLZLfa.mjs";
 import { A as Slot, P as require_jsx_runtime, a as Overlay2, c as Title2, d as Description, f as Overlay, g as Trigger, h as Title, i as Description2, l as Close, m as Root, n as Cancel, o as Portal2, p as Portal, r as Content2, s as Root2, t as Action, u as Content } from "../_libs/@radix-ui/react-alert-dialog+[...].mjs";
 import { u as require_react } from "../_libs/@floating-ui/react-dom+[...].mjs";
-import { C as ArrowRight, S as Check, b as ChevronLeft, d as List, g as Download, h as ExternalLink, i as Plus, l as Minus, m as FingerprintPattern, n as TriangleAlert, o as Package, p as Funnel, t as X, v as ChevronUp, x as ChevronDown, y as ChevronRight } from "../_libs/lucide-react.mjs";
+import { C as ChevronLeft, E as ArrowRight, S as ChevronRight, T as Check, _ as ExternalLink, a as RotateCcw, b as CircleCheck, c as Package, d as Minus, f as LoaderCircle, g as FingerprintPattern, h as Funnel, n as TriangleAlert, o as Plus, p as List, r as Trash2, t as X, v as Download, w as ChevronDown, x as ChevronUp, y as CircleX } from "../_libs/lucide-react.mjs";
 import { t as cva } from "../_libs/class-variance-authority+clsx.mjs";
 import { a as ItemText, c as ScrollDownButton, d as Value, f as Viewport, i as ItemIndicator, l as ScrollUpButton, n as Icon, o as Portal$1, r as Item, s as Root2$1, t as Content2$1, u as Trigger$1 } from "../_libs/@radix-ui/react-select+[...].mjs";
 import { t as Root$1 } from "../_libs/radix-ui__react-label.mjs";
@@ -14,11 +14,11 @@ import { d as useNavigate, f as useSearch } from "../_libs/@tanstack/react-route
 import { n as useStore, t as useForm } from "../_libs/@tanstack/react-form+[...].mjs";
 import { i as useQueryClient, n as useQuery, t as useMutation } from "../_libs/tanstack__react-query.mjs";
 import { n as toast } from "../_libs/sonner.mjs";
-import { t as getServerFnById } from "../__tanstack-start-server-fn-resolver-5wPQ8bZ3.mjs";
+import { t as getServerFnById } from "../__tanstack-start-server-fn-resolver-ySzPUDlM.mjs";
 import { t as require_semver } from "../_libs/semver.mjs";
 import { i as getCoreRowModel, n as useReactTable, r as createColumnHelper, t as flexRender } from "../_libs/@tanstack/react-table+[...].mjs";
 import { n as require_dayjs_min, t as require_relativeTime } from "../_libs/dayjs.mjs";
-//#region node_modules/.nitro/vite/services/ssr/assets/routes-BSs-dv4D.js
+//#region node_modules/.nitro/vite/services/ssr/assets/routes-D5CmWxI7.js
 var import_jsx_runtime = require_jsx_runtime();
 var import_semver = /* @__PURE__ */ __toESM(require_semver());
 var import_react = /* @__PURE__ */ __toESM(require_react());
@@ -441,6 +441,17 @@ function replaceBundleInQueryData(data, updatedBundle) {
 		data: data.data.map((bundle) => bundle.id === updatedBundle.id ? updatedBundle : bundle)
 	};
 }
+function removeBundleFromQueryData(data, bundleId) {
+	if (!data) return data;
+	return {
+		...data,
+		data: data.data.filter((bundle) => bundle.id !== bundleId)
+	};
+}
+var hasOwn = (value, key) => Object.prototype.hasOwnProperty.call(value, key);
+var invalidateInBackground = (queryClient, queryKey) => {
+	queryClient.invalidateQueries({ queryKey }).catch(() => void 0);
+};
 function useConfigQuery() {
 	return useQuery({
 		queryKey: queryKeys.config,
@@ -495,15 +506,12 @@ function useUpdateBundleMutation() {
 	const queryClient = useQueryClient();
 	return useMutation({
 		mutationFn: (params) => updateBundle({ data: params }),
-		onSuccess: async ({ bundle: updatedBundle }, vars) => {
+		onSuccess: ({ bundle: updatedBundle }, vars) => {
 			queryClient.setQueryData(queryKeys.bundle(vars.bundleId), updatedBundle);
 			queryClient.setQueriesData({ queryKey: queryKeys.bundles.all }, (data) => replaceBundleInQueryData(data, updatedBundle));
-			await Promise.all([
-				queryClient.invalidateQueries({ queryKey: queryKeys.bundles.all }),
-				queryClient.invalidateQueries({ queryKey: queryKeys.bundleChildren.all }),
-				queryClient.invalidateQueries({ queryKey: queryKeys.bundle(vars.bundleId) }),
-				queryClient.invalidateQueries({ queryKey: queryKeys.channels })
-			]);
+			invalidateInBackground(queryClient, queryKeys.bundles.all);
+			if (hasOwn(vars.bundle, "patches") || hasOwn(vars.bundle, "channel") || hasOwn(vars.bundle, "platform")) invalidateInBackground(queryClient, queryKeys.bundleChildren.all);
+			if (hasOwn(vars.bundle, "channel")) invalidateInBackground(queryClient, queryKeys.channels);
 		}
 	});
 }
@@ -528,6 +536,7 @@ function useDeleteBundleMutation() {
 		mutationFn: (params) => deleteBundle({ data: params }),
 		onSuccess: async (_, vars) => {
 			queryClient.removeQueries({ queryKey: queryKeys.bundle(vars.bundleId) });
+			queryClient.setQueriesData({ queryKey: queryKeys.bundles.all }, (data) => removeBundleFromQueryData(data, vars.bundleId));
 			await Promise.all([
 				queryClient.invalidateQueries({ queryKey: queryKeys.bundles.all }),
 				queryClient.invalidateQueries({ queryKey: queryKeys.bundleChildren.all }),
@@ -2296,6 +2305,209 @@ var createBundleColumns = ({ expandedBundleId, patchCountsByBundleId, onDetailCl
 		cell: (info) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimestampDisplay, { uuid: info.getValue() })
 	})
 ];
+var statusLabels = {
+	queued: "Queued",
+	deleting: "Deleting",
+	deleted: "Deleted",
+	failed: "Failed"
+};
+var getDeleteErrorMessage = (error) => error instanceof Error ? error.message : "Delete request failed";
+var createDeleteItems = (bundles) => bundles.map((bundle) => ({
+	bundle,
+	status: "queued"
+}));
+function getStatusIcon(status) {
+	switch (status) {
+		case "failed": return {
+			className: "size-3.5 text-destructive",
+			Icon: CircleX
+		};
+		case "deleting": return {
+			className: "size-3.5 animate-spin text-primary",
+			Icon: LoaderCircle
+		};
+		case "deleted": return {
+			className: "size-3.5 text-primary",
+			Icon: CircleCheck
+		};
+	}
+}
+function DeleteStatusIcon({ status }) {
+	if (status === "queued") return null;
+	const label = statusLabels[status];
+	const { className, Icon } = getStatusIcon(status);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tooltip$1, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			"aria-label": label,
+			role: "img",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className })
+		})
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipContent, { children: label })] });
+}
+function SelectedBundlesDeleteDialog({ bundles, open, onOpenChange, onComplete }) {
+	const deleteBundleMutation = useDeleteBundleMutation();
+	const [phase, setPhase] = (0, import_react.useState)("confirming");
+	const [items, setItems] = (0, import_react.useState)(() => createDeleteItems(bundles));
+	const isDeleting = phase === "deleting";
+	const totalCount = items.length;
+	const activeCount = items.filter((item) => item.status === "deleted").length + items.filter((item) => item.status === "failed").length;
+	const failedBundleIds = items.filter((item) => item.status === "failed").map((item) => item.bundle.id);
+	const hasFailures = failedBundleIds.length > 0;
+	const title = phase === "confirming" ? "Delete selected bundles?" : "Deleting bundles";
+	const description = phase === "confirming" ? `This action cannot be undone. This will permanently delete ${bundles.length} bundles and remove them from storage.` : `${activeCount} of ${totalCount} delete requests finished.`;
+	const deleteButtonLabel = (0, import_react.useMemo)(() => {
+		if (!isDeleting) return "Delete";
+		return `Deleting ${Math.min(activeCount + 1, totalCount)}/${totalCount}`;
+	}, [
+		activeCount,
+		isDeleting,
+		totalCount
+	]);
+	(0, import_react.useEffect)(() => {
+		if (open && phase === "confirming") setItems(createDeleteItems(bundles));
+	}, [
+		bundles,
+		open,
+		phase
+	]);
+	const handleOpenChange = (nextOpen) => {
+		if (!nextOpen && isDeleting) return;
+		onOpenChange(nextOpen);
+		if (!nextOpen) {
+			setPhase("confirming");
+			setItems(createDeleteItems(bundles));
+		}
+	};
+	const runDeletion = async (bundleIds) => {
+		if (isDeleting || bundleIds.length === 0) return;
+		const bundleIdSet = new Set(bundleIds);
+		const deletedBundleIds = [];
+		const nextFailedBundleIds = [];
+		setPhase("deleting");
+		setItems((currentItems) => currentItems.map((item) => bundleIdSet.has(item.bundle.id) ? {
+			bundle: item.bundle,
+			status: "queued"
+		} : item));
+		for (const bundleId of bundleIds) {
+			setItems((currentItems) => currentItems.map((item) => item.bundle.id === bundleId ? {
+				bundle: item.bundle,
+				status: "deleting"
+			} : item));
+			try {
+				await deleteBundleMutation.mutateAsync({ bundleId });
+				deletedBundleIds.push(bundleId);
+				setItems((currentItems) => currentItems.map((item) => item.bundle.id === bundleId ? {
+					bundle: item.bundle,
+					status: "deleted"
+				} : item));
+			} catch (error) {
+				nextFailedBundleIds.push(bundleId);
+				setItems((currentItems) => currentItems.map((item) => item.bundle.id === bundleId ? {
+					bundle: item.bundle,
+					message: getDeleteErrorMessage(error),
+					status: "failed"
+				} : item));
+			}
+		}
+		setPhase("complete");
+		onComplete({
+			deletedBundleIds,
+			failedBundleIds: nextFailedBundleIds
+		});
+		if (nextFailedBundleIds.length > 0) {
+			toast.error(`${deletedBundleIds.length} deleted, ${nextFailedBundleIds.length} failed`);
+			return;
+		}
+		toast.success(`${deletedBundleIds.length} bundles deleted successfully`);
+	};
+	const handleDelete = () => {
+		runDeletion(items.map((item) => item.bundle.id));
+	};
+	const handleRetryFailed = () => {
+		runDeletion(failedBundleIds);
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog$1, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogContent, {
+			showCloseButton: !isDeleting,
+			className: "sm:max-w-lg",
+			onEscapeKeyDown: (event) => {
+				if (isDeleting) event.preventDefault();
+			},
+			onInteractOutside: (event) => {
+				if (isDeleting) event.preventDefault();
+			},
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { children: title }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescription, { children: description })] }),
+				phase === "confirming" ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, {
+					className: "max-h-[50vh] overflow-y-auto p-0",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Table, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHeader, {
+						className: "sticky top-0 bg-card",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TableRow, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, {
+							className: "w-12 text-center",
+							children: "Status"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, { children: "Bundle" })] })
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableBody, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TableRow, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
+						className: "text-center align-middle",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: "flex justify-center",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DeleteStatusIcon, { status: item.status })
+						})
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
+						className: "whitespace-normal",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								className: "break-all font-mono text-[11px] text-foreground",
+								children: item.bundle.id
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "mt-0.5 flex flex-wrap gap-x-2 gap-y-1 text-[11px] text-muted-foreground",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: item.bundle.channel }),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: item.bundle.platform }),
+									item.message ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+										className: "text-destructive",
+										children: item.message
+									}) : null
+								]
+							})]
+						})
+					})] }, item.bundle.id)) })] })
+				}) }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogFooter, { children: [
+					phase === "confirming" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						variant: "outline",
+						onClick: () => handleOpenChange(false),
+						children: "Cancel"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+						variant: "destructive",
+						onClick: handleDelete,
+						disabled: totalCount === 0,
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, { "data-icon": "inline-start" }), "Delete"]
+					})] }) : null,
+					phase === "deleting" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+						variant: "destructive",
+						disabled: true,
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, {
+							"data-icon": "inline-start",
+							className: "animate-spin"
+						}), deleteButtonLabel]
+					}) : null,
+					phase === "complete" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						variant: "outline",
+						onClick: () => handleOpenChange(false),
+						children: "Close"
+					}), hasFailures ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+						onClick: handleRetryFailed,
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RotateCcw, { "data-icon": "inline-start" }), "Retry failed"]
+					}) : null] }) : null
+				] })
+			]
+		})
+	});
+}
 function MobileStatusBadge({ enabled, trueLabel, falseLabel, falseIcon = "x", trueTone = "success" }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
 		className: cn("inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium", enabled ? trueTone === "warning" ? "bg-amber-500/14 text-amber-700 dark:text-amber-300" : "bg-emerald-500/12 text-emerald-700 dark:text-emerald-300" : falseIcon === "minus" ? "bg-muted text-muted-foreground" : "bg-red-500/12 text-red-700 dark:text-red-300"),
@@ -2310,8 +2522,13 @@ function MobileStatusBadge({ enabled, trueLabel, falseLabel, falseIcon = "x", tr
 function BundlesTable({ bundles, pagination, expandedBundleId, selectedBundleId, onExpandedBundleChange, onDetailClick }) {
 	const { setFilters } = useFilterParams();
 	const isMobile = useIsMobile();
+	const [selectedBundleIds, setSelectedBundleIds] = (0, import_react.useState)([]);
+	const [deleteDialogOpen, setDeleteDialogOpen] = (0, import_react.useState)(false);
 	const cursorPagination = pagination;
-	const { data: patchCountsByBundleId = {} } = useBundleChildCountsQuery(bundles.map((bundle) => bundle.id));
+	const bundleIds = bundles.map((bundle) => bundle.id);
+	const selectedBundles = bundles.filter((bundle) => selectedBundleIds.includes(bundle.id));
+	const allBundlesSelected = bundles.length > 0 && selectedBundles.length === bundles.length;
+	const { data: patchCountsByBundleId = {} } = useBundleChildCountsQuery(bundleIds);
 	const { data: childBundles = [], isLoading: isChildBundlesLoading } = useBundleChildrenQuery(expandedBundleId ?? "");
 	const bundleColumns = createBundleColumns({
 		expandedBundleId,
@@ -2346,280 +2563,338 @@ function BundlesTable({ bundles, pagination, expandedBundleId, selectedBundleId,
 			before: void 0
 		});
 	};
+	const toggleBundleSelection = (bundleId) => {
+		setSelectedBundleIds((current) => current.includes(bundleId) ? current.filter((selectedBundleId) => selectedBundleId !== bundleId) : [...current, bundleId]);
+	};
+	const handleToggleAllBundles = () => {
+		setSelectedBundleIds(allBundlesSelected ? [] : bundleIds);
+	};
 	const startEntry = bundles.length === 0 ? 0 : (currentPage - 1) * 20 + 1;
 	const endEntry = startEntry === 0 ? 0 : startEntry + bundles.length - 1;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col gap-4",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-			className: "overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm",
-			children: isMobile ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: "flex flex-col",
-				children: bundles.length ? bundles.map((bundle) => {
-					const isExpanded = bundle.id === expandedBundleId;
-					const panelId = `bundle-lineage-panel-${bundle.id}`;
-					const rolloutPercentage = (bundle.rolloutCohortCount ?? 1e3) / 10;
-					const patchCount = patchCountsByBundleId[bundle.id];
-					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						"data-state": bundle.id === selectedBundleId ? "selected" : void 0,
-						className: cn("border-b border-border/60 last:border-b-0 data-[state=selected]:bg-muted/20", isExpanded && "bg-primary/5"),
-						children: [
-							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
-								type: "button",
-								className: "flex w-full flex-col gap-4 p-4 text-left",
-								onClick: () => onDetailClick(bundle),
-								children: [
-									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-										className: "flex items-start justify-between gap-3",
-										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-											className: "min-w-0 space-y-2",
-											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-												className: "text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground/70",
-												children: "Bundle"
-											}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-												className: "min-w-0 text-sm font-medium",
-												children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleIdDisplay, {
-													bundleId: bundle.id,
-													maxLength: 18,
-													fullOnMobile: true
-												})
-											})]
-										}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-											className: "shrink-0",
-											children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChannelBadge, { channel: bundle.channel })
-										})]
-									}),
-									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-										className: "grid grid-cols-2 gap-3 text-sm",
-										children: [
-											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-												className: "rounded-md bg-muted/40 p-3",
-												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-													className: "mb-1 text-[11px] font-medium uppercase text-muted-foreground/70",
-													children: "Platform"
-												}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-													className: "flex items-center gap-2",
-													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlatformIcon, {
-														platform: bundle.platform,
-														className: "h-4 w-4"
-													}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: bundle.platform === "ios" ? "iOS" : "Android" })]
-												})]
-											}),
-											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-												className: "rounded-md bg-muted/40 p-3",
-												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-													className: "mb-1 text-[11px] font-medium uppercase text-muted-foreground/70",
-													children: "Created"
-												}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-													className: "text-xs text-foreground",
-													children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimestampDisplay, { uuid: bundle.id })
-												})]
-											}),
-											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-												className: "rounded-md bg-muted/40 p-3",
-												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-													className: "mb-1 text-[11px] font-medium uppercase text-muted-foreground/70",
-													children: "Rollout"
-												}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RolloutPercentageBadge, { percentage: rolloutPercentage })]
-											}),
-											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-												className: "rounded-md bg-muted/40 p-3",
+		className: "flex min-h-0 min-w-0 flex-1 flex-col gap-4",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "min-h-0 min-w-0 flex-1 overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm [&_[data-slot=table-container]]:h-full [&_[data-slot=table-container]]:overflow-auto",
+				children: isMobile ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "flex h-full flex-col overflow-y-auto",
+					children: bundles.length ? bundles.map((bundle) => {
+						const isExpanded = bundle.id === expandedBundleId;
+						const panelId = `bundle-lineage-panel-${bundle.id}`;
+						const rolloutPercentage = (bundle.rolloutCohortCount ?? 1e3) / 10;
+						const patchCount = patchCountsByBundleId[bundle.id];
+						return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							"data-state": bundle.id === selectedBundleId ? "selected" : void 0,
+							className: cn("border-b border-border/60 last:border-b-0 data-[state=selected]:bg-muted/20", isExpanded && "bg-primary/5"),
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
+									className: "flex items-center gap-2 border-b border-border/60 px-4 py-3 text-xs font-medium text-muted-foreground",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+										type: "checkbox",
+										checked: selectedBundleIds.includes(bundle.id),
+										className: "size-4 accent-primary",
+										onChange: () => toggleBundleSelection(bundle.id)
+									}), "Select bundle"]
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "flex w-full flex-col gap-4 p-4 text-left",
+									onClick: () => onDetailClick(bundle),
+									children: [
+										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+											className: "flex items-start justify-between gap-3",
+											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+												className: "min-w-0 space-y-2",
 												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-													className: "mb-1 text-[11px] font-medium uppercase text-muted-foreground/70",
-													children: "Patches"
+													className: "text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground/70",
+													children: "Bundle"
 												}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-													className: "text-xs text-foreground",
-													children: patchCount === void 0 ? "Checking" : patchCount > 0 ? `${patchCount} ${patchCount === 1 ? "patch" : "patches"}` : "-"
+													className: "min-w-0 text-sm font-medium",
+													children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleIdDisplay, {
+														bundleId: bundle.id,
+														maxLength: 18,
+														fullOnMobile: true
+													})
 												})]
-											}),
-											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-												className: "rounded-md bg-muted/40 p-3",
-												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-													className: "mb-1 text-[11px] font-medium uppercase text-muted-foreground/70",
-													children: "Status"
-												}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-													className: "flex flex-wrap items-center gap-2",
-													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MobileStatusBadge, {
-														enabled: bundle.enabled,
-														trueLabel: "Enabled",
-														falseLabel: "Disabled"
-													}), bundle.shouldForceUpdate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MobileStatusBadge, {
-														enabled: bundle.shouldForceUpdate,
-														trueLabel: "Force update",
-														falseLabel: "Optional",
-														falseIcon: "minus",
-														trueTone: "warning"
-													}) : null]
-												})]
-											})
-										]
-									}),
-									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-										className: "grid gap-2 rounded-md border border-border/70 bg-background/80 p-3 text-sm",
-										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-											className: "flex items-center justify-between gap-3",
-											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-												className: "text-muted-foreground",
-												children: "Target"
 											}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-												className: "min-w-0 text-right",
-												children: bundle.fingerprintHash ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-													translate: "no",
-													className: "inline-flex min-w-0 items-start gap-2 font-mono text-xs",
-													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FingerprintPattern, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HashValueDisplay, {
-														value: bundle.fingerprintHash,
-														maxLength: 12
+												className: "shrink-0",
+												children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChannelBadge, { channel: bundle.channel })
+											})]
+										}),
+										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+											className: "grid grid-cols-2 gap-3 text-sm",
+											children: [
+												/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+													className: "rounded-md bg-muted/40 p-3",
+													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+														className: "mb-1 text-[11px] font-medium uppercase text-muted-foreground/70",
+														children: "Platform"
+													}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+														className: "flex items-center gap-2",
+														children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlatformIcon, {
+															platform: bundle.platform,
+															className: "h-4 w-4"
+														}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: bundle.platform === "ios" ? "iOS" : "Android" })]
+													})]
+												}),
+												/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+													className: "rounded-md bg-muted/40 p-3",
+													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+														className: "mb-1 text-[11px] font-medium uppercase text-muted-foreground/70",
+														children: "Created"
+													}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+														className: "text-xs text-foreground",
+														children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimestampDisplay, { uuid: bundle.id })
+													})]
+												}),
+												/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+													className: "rounded-md bg-muted/40 p-3",
+													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+														className: "mb-1 text-[11px] font-medium uppercase text-muted-foreground/70",
+														children: "Rollout"
+													}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RolloutPercentageBadge, { percentage: rolloutPercentage })]
+												}),
+												/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+													className: "rounded-md bg-muted/40 p-3",
+													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+														className: "mb-1 text-[11px] font-medium uppercase text-muted-foreground/70",
+														children: "Patches"
+													}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+														className: "text-xs text-foreground",
+														children: patchCount === void 0 ? "Checking" : patchCount > 0 ? `${patchCount} ${patchCount === 1 ? "patch" : "patches"}` : "-"
+													})]
+												}),
+												/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+													className: "rounded-md bg-muted/40 p-3",
+													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+														className: "mb-1 text-[11px] font-medium uppercase text-muted-foreground/70",
+														children: "Status"
+													}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+														className: "flex flex-wrap items-center gap-2",
+														children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MobileStatusBadge, {
+															enabled: bundle.enabled,
+															trueLabel: "Enabled",
+															falseLabel: "Disabled"
+														}), bundle.shouldForceUpdate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MobileStatusBadge, {
+															enabled: bundle.shouldForceUpdate,
+															trueLabel: "Force update",
+															falseLabel: "Optional",
+															falseIcon: "minus",
+															trueTone: "warning"
+														}) : null]
 													})]
-												}) : bundle.targetAppVersion ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-													translate: "no",
-													className: "inline-flex items-center gap-2 text-xs",
-													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Package, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), bundle.targetAppVersion]
-												}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-													className: "text-xs text-muted-foreground",
-													children: "-"
 												})
+											]
+										}),
+										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+											className: "grid gap-2 rounded-md border border-border/70 bg-background/80 p-3 text-sm",
+											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+												className: "flex items-center justify-between gap-3",
+												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+													className: "text-muted-foreground",
+													children: "Target"
+												}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+													className: "min-w-0 text-right",
+													children: bundle.fingerprintHash ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+														translate: "no",
+														className: "inline-flex min-w-0 items-start gap-2 font-mono text-xs",
+														children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FingerprintPattern, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HashValueDisplay, {
+															value: bundle.fingerprintHash,
+															maxLength: 12
+														})]
+													}) : bundle.targetAppVersion ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+														translate: "no",
+														className: "inline-flex items-center gap-2 text-xs",
+														children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Package, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), bundle.targetAppVersion]
+													}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+														className: "text-xs text-muted-foreground",
+														children: "-"
+													})
+												})]
+											}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+												className: "flex items-start justify-between gap-3",
+												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+													className: "text-muted-foreground",
+													children: "Message"
+												}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+													className: "min-w-0 text-right text-xs text-foreground/80",
+													children: bundle.message || "-"
+												})]
 											})]
-										}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-											className: "flex items-start justify-between gap-3",
-											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-												className: "text-muted-foreground",
-												children: "Message"
-											}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-												className: "min-w-0 text-right text-xs text-foreground/80",
-												children: bundle.message || "-"
-											})]
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+									className: "border-t border-border/60 px-4 py-3",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+										type: "button",
+										variant: "ghost",
+										className: "h-9 w-full justify-between px-3 text-sm",
+										"aria-label": isExpanded ? "Hide Lineage" : "Show Lineage",
+										"aria-controls": panelId,
+										"aria-expanded": isExpanded,
+										onClick: () => onExpandedBundleChange(isExpanded ? void 0 : bundle.id),
+										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: patchCount === void 0 ? "Patch lineage" : `Patch lineage (${patchCount})` }), isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronUp, {
+											className: "h-4 w-4",
+											"aria-hidden": "true"
+										}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, {
+											className: "h-4 w-4",
+											"aria-hidden": "true"
 										})]
 									})
-								]
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-								className: "border-t border-border/60 px-4 py-3",
-								children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
-									type: "button",
-									variant: "ghost",
-									className: "h-9 w-full justify-between px-3 text-sm",
-									"aria-label": isExpanded ? "Hide Lineage" : "Show Lineage",
-									"aria-controls": panelId,
-									"aria-expanded": isExpanded,
-									onClick: () => onExpandedBundleChange(isExpanded ? void 0 : bundle.id),
-									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: patchCount === void 0 ? "Patch lineage" : `Patch lineage (${patchCount})` }), isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronUp, {
-										className: "h-4 w-4",
-										"aria-hidden": "true"
-									}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, {
-										className: "h-4 w-4",
-										"aria-hidden": "true"
-									})]
-								})
-							}),
-							isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleChildrenPanel, {
+								}),
+								isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleChildrenPanel, {
+									panelId,
+									bundle,
+									bundles: childBundles,
+									loading: isChildBundlesLoading,
+									onDetailClick
+								}) : null
+							]
+						}, bundle.id);
+					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "flex h-32 items-center justify-center px-6 text-center text-sm text-muted-foreground",
+						children: "No bundles found matching your filters."
+					})
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Table, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHeader, {
+					className: "bg-muted/40",
+					children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TableRow, {
+						className: "border-b border-border/60 hover:bg-transparent",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, {
+							className: "w-10",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+								type: "checkbox",
+								checked: allBundlesSelected,
+								"aria-label": "Select all bundles",
+								className: "size-4 accent-primary",
+								onChange: handleToggleAllBundles
+							})
+						}), headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, {
+							className: "h-10 text-xs font-semibold uppercase text-muted-foreground/70",
+							children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+						}, header.id))]
+					}, headerGroup.id))
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => {
+					const isExpanded = row.original.id === expandedBundleId;
+					const panelId = `bundle-lineage-panel-${row.original.id}`;
+					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TableRow, {
+						"data-state": row.original.id === selectedBundleId ? "selected" : void 0,
+						className: cn("cursor-pointer transition-colors hover:bg-muted/10 focus-within:bg-muted/15 data-[state=selected]:bg-muted/15", isExpanded && "bg-primary/5"),
+						onClick: () => onDetailClick(row.original),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
+							className: "py-3",
+							onClick: (event) => event.stopPropagation(),
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+								type: "checkbox",
+								checked: selectedBundleIds.includes(row.original.id),
+								"aria-label": `Select bundle ${row.original.id}`,
+								className: "size-4 accent-primary",
+								onChange: () => toggleBundleSelection(row.original.id)
+							})
+						}), row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
+							className: "py-3",
+							children: flexRender(cell.column.columnDef.cell, cell.getContext())
+						}, cell.id))]
+					}), isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableRow, {
+						className: "hover:bg-transparent",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
+							colSpan: bundleColumns.length + 1,
+							className: "border-t-0 p-0",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleChildrenPanel, {
 								panelId,
-								bundle,
+								bundle: row.original,
 								bundles: childBundles,
 								loading: isChildBundlesLoading,
 								onDetailClick
-							}) : null
-						]
-					}, bundle.id);
-				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-					className: "flex h-32 items-center justify-center px-6 text-center text-sm text-muted-foreground",
-					children: "No bundles found matching your filters."
-				})
-			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Table, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHeader, {
-				className: "bg-muted/40",
-				children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableRow, {
-					className: "border-b border-border/60 hover:bg-transparent",
-					children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, {
-						className: "h-10 text-xs font-semibold uppercase text-muted-foreground/70",
-						children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
-					}, header.id))
-				}, headerGroup.id))
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => {
-				const isExpanded = row.original.id === expandedBundleId;
-				const panelId = `bundle-lineage-panel-${row.original.id}`;
-				return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableRow, {
-					"data-state": row.original.id === selectedBundleId ? "selected" : void 0,
-					className: cn("cursor-pointer transition-colors hover:bg-muted/10 focus-within:bg-muted/15 data-[state=selected]:bg-muted/15", isExpanded && "bg-primary/5"),
-					onClick: () => onDetailClick(row.original),
-					children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
-						className: "py-3",
-						children: flexRender(cell.column.columnDef.cell, cell.getContext())
-					}, cell.id))
-				}), isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableRow, {
-					className: "hover:bg-transparent",
-					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
-						colSpan: bundleColumns.length,
-						className: "border-t-0 p-0",
-						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleChildrenPanel, {
-							panelId,
-							bundle: row.original,
-							bundles: childBundles,
-							loading: isChildBundlesLoading,
-							onDetailClick
+							})
 						})
-					})
-				}) : null] }, row.original.id);
-			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
-				colSpan: bundleColumns.length,
-				className: "h-32 text-center text-muted-foreground",
-				children: "No bundles found matching your filters."
-			}) }) })] })
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-			className: "flex flex-col gap-3 px-2 sm:flex-row sm:items-center sm:justify-between",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "text-xs font-medium text-muted-foreground",
-				children: [
-					"Showing ",
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-						className: "text-foreground",
-						children: startEntry
-					}),
-					" to",
-					" ",
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-						className: "text-foreground",
-						children: endEntry
-					}),
-					" entries"
-				]
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex flex-wrap items-center gap-3 sm:justify-end",
-				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: "text-xs font-medium text-muted-foreground",
-						children: [
-							"Page ",
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-								className: "text-foreground",
-								children: currentPage
-							}),
-							totalPages > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-								" ",
-								"of ",
+					}) : null] }, row.original.id);
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
+					colSpan: bundleColumns.length + 1,
+					className: "h-32 text-center text-muted-foreground",
+					children: "No bundles found matching your filters."
+				}) }) })] })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-3 px-2 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "text-xs font-medium text-muted-foreground",
+					children: [
+						"Showing ",
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-foreground",
+							children: startEntry
+						}),
+						" to",
+						" ",
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-foreground",
+							children: endEntry
+						}),
+						" entries"
+					]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex flex-wrap items-center gap-3 sm:justify-end",
+					children: [
+						selectedBundles.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+							type: "button",
+							variant: "destructive",
+							size: "sm",
+							className: "h-8 flex-1 px-3 text-xs sm:flex-none",
+							onClick: () => setDeleteDialogOpen(true),
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, { "data-icon": "inline-start" }),
+								"Delete selected (",
+								selectedBundles.length,
+								")"
+							]
+						}) : null,
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "text-xs font-medium text-muted-foreground",
+							children: [
+								"Page ",
 								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 									className: "text-foreground",
-									children: totalPages
-								})
-							] }) : null
-						]
-					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
-						variant: "outline",
-						size: "sm",
-						onClick: handlePreviousPage,
-						disabled: !hasPreviousPage,
-						className: "h-8 flex-1 px-3 text-xs sm:flex-none",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronLeft, { "data-icon": "inline-start" }), "Previous"]
-					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
-						variant: "outline",
-						size: "sm",
-						onClick: handleNextPage,
-						disabled: !hasNextPage,
-						className: "h-8 flex-1 px-3 text-xs sm:flex-none",
-						children: ["Next", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, { "data-icon": "inline-end" })]
-					})
-				]
-			})]
-		})]
+									children: currentPage
+								}),
+								totalPages > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+									" ",
+									"of ",
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+										className: "text-foreground",
+										children: totalPages
+									})
+								] }) : null
+							]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: handlePreviousPage,
+							disabled: !hasPreviousPage,
+							className: "h-8 flex-1 px-3 text-xs sm:flex-none",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronLeft, { "data-icon": "inline-start" }), "Previous"]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: handleNextPage,
+							disabled: !hasNextPage,
+							className: "h-8 flex-1 px-3 text-xs sm:flex-none",
+							children: ["Next", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, { "data-icon": "inline-end" })]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectedBundlesDeleteDialog, {
+				bundles: selectedBundles,
+				open: deleteDialogOpen,
+				onOpenChange: setDeleteDialogOpen,
+				onComplete: ({ failedBundleIds }) => {
+					setSelectedBundleIds([...failedBundleIds]);
+				}
+			})
+		]
 	});
 }
 function FilterToolbar() {
@@ -2704,7 +2979,7 @@ function BundlesPage() {
 		if (expandedBundleId && !bundles.some((bundle) => bundle.id === expandedBundleId)) setExpandedBundleId(void 0);
 	}, [bundles, expandedBundleId]);
 	if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col h-full",
+		className: "flex h-svh flex-col",
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterToolbar, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "flex flex-1 flex-col gap-4 bg-muted/5 p-3 sm:p-6",
 			children: [
@@ -2716,11 +2991,11 @@ function BundlesPage() {
 		})]
 	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col h-full",
+		className: "flex h-svh min-h-0 flex-col",
 		children: [
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterToolbar, {}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: "flex flex-1 flex-col gap-6 bg-muted/5 p-3 sm:p-6",
+				className: "flex min-h-0 min-w-0 flex-1 flex-col gap-6 bg-muted/5 p-3 sm:p-6",
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundlesTable, {
 					bundles,
 					pagination,