@hot-updater/console 0.30.12 → 0.31.1

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

@@ -1,28 +1,198 @@
 import { r as __toESM } from "../_runtime.mjs";
 import { c as createServerFn, i as TSS_SERVER_FUNCTION } from "./createServerFn-CdeRXnVy.mjs";
+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 { 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 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 { 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";
 import { i as Track, n as Root$2, r as Thumb, t as Range } from "../_libs/radix-ui__react-slider.mjs";
 import { n as Thumb$1, t as Root$3 } from "../_libs/radix-ui__react-switch.mjs";
-import { C as Tooltip$1, D as cn, E as TooltipTrigger, S as Skeleton, T as TooltipProvider, a as SheetContent, c as SheetTitle, i as Sheet, n as Input, o as SheetDescription, r as Separator$1, s as SheetHeader, t as Button, w as TooltipContent, x as SidebarTrigger } from "./sidebar-DXng0IOP.mjs";
+import { C as useIsMobile, S as cn, _ as Skeleton, g as SidebarTrigger, n as Input, r as Separator$1, t as Button, v as Tooltip$1, x as TooltipTrigger, y as TooltipContent } from "./sidebar-CgbtXkE2.mjs";
 import { d as useNavigate, f as useSearch } from "../_libs/@tanstack/react-router+[...].mjs";
 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-rXMsqALt.mjs";
+import { t as getServerFnById } from "../__tanstack-start-server-fn-resolver-5wPQ8bZ3.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-DyUhibF4.js
+//#region node_modules/.nitro/vite/services/ssr/assets/routes-BSs-dv4D.js
 var import_jsx_runtime = require_jsx_runtime();
-var import_react = /* @__PURE__ */ __toESM(require_react());
 var import_semver = /* @__PURE__ */ __toESM(require_semver());
+var import_react = /* @__PURE__ */ __toESM(require_react());
 var import_dayjs_min = /* @__PURE__ */ __toESM(require_dayjs_min());
 var import_relativeTime = /* @__PURE__ */ __toESM(require_relativeTime());
+var extractTimestampFromUUIDv7 = (uuid) => {
+	const timestampHex = uuid.split("-").join("").slice(0, 12);
+	return Number.parseInt(timestampHex, 16);
+};
+function createUUIDv7FromTimestampHex(timestampHex) {
+	const randomBytes = new Uint8Array(10);
+	crypto.getRandomValues(randomBytes);
+	const randomHex = Array.from(randomBytes).map((b) => b.toString(16).padStart(2, "0")).join("");
+	const randA = randomHex.slice(0, 3);
+	const randBHex = randomHex.slice(3, 19);
+	const versionAndRandA = `7${randA}`;
+	const variantAndFirstRandB = (128 | parseInt(randBHex.slice(0, 2), 16) & 63).toString(16).padStart(2, "0");
+	return [
+		timestampHex.slice(0, 8),
+		timestampHex.slice(8, 12),
+		versionAndRandA,
+		variantAndFirstRandB + randBHex.slice(2, 4),
+		randBHex.slice(4, 16)
+	].join("-");
+}
+var createUUIDv7 = () => createUUIDv7FromTimestampHex(Date.now().toString(16).padStart(12, "0"));
+function Dialog$1({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Root, {
+		"data-slot": "dialog",
+		...props
+	});
+}
+function DialogTrigger({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+}
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Overlay, {
+		"data-slot": "dialog-overlay",
+		className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className),
+		...props
+	});
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Content, {
+		"data-slot": "dialog-content",
+		className: cn("bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Close, {
+			"data-slot": "dialog-close",
+			asChild: true,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+				variant: "ghost",
+				className: "absolute top-2 right-2",
+				size: "icon-sm",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			})
+		})]
+	})] });
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "dialog-header",
+		className: cn("gap-1 flex flex-col", className),
+		...props
+	});
+}
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		"data-slot": "dialog-footer",
+		className: cn("gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Close, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+				variant: "outline",
+				children: "Close"
+			})
+		})]
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, {
+		"data-slot": "dialog-title",
+		className: cn("text-sm font-medium", className),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Description, {
+		"data-slot": "dialog-description",
+		className: cn("text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3", className),
+		...props
+	});
+}
+function Sheet({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Root, {
+		"data-slot": "sheet",
+		...props
+	});
+}
+function SheetPortal({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal, {
+		"data-slot": "sheet-portal",
+		...props
+	});
+}
+function SheetOverlay({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Overlay, {
+		"data-slot": "sheet-overlay",
+		className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className),
+		...props
+	});
+}
+function SheetContent({ className, children, overlayClassName, side = "right", showCloseButton = true, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SheetPortal, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetOverlay, { className: overlayClassName }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Content, {
+		"data-slot": "sheet-content",
+		"data-side": side,
+		className: cn("bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Close, {
+			"data-slot": "sheet-close",
+			asChild: true,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+				variant: "ghost",
+				className: "absolute top-4 right-4",
+				size: "icon-sm",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			})
+		})]
+	})] });
+}
+function SheetHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "sheet-header",
+		className: cn("gap-1.5 p-6 flex flex-col", className),
+		...props
+	});
+}
+function SheetTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, {
+		"data-slot": "sheet-title",
+		className: cn("text-foreground text-sm font-medium", className),
+		...props
+	});
+}
+function SheetDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Description, {
+		"data-slot": "sheet-description",
+		className: cn("text-muted-foreground text-xs/relaxed", className),
+		...props
+	});
+}
+function BundleIdDisplay({ bundleId, className }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		translate: "no",
+		className: cn("break-all font-mono text-xs tabular-nums", className),
+		children: bundleId
+	});
+}
 function AppleIcon({ className }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
 		role: "img",
@@ -51,131 +221,59 @@ function PlatformIcon({ platform, className }) {
 }
 function BundleBasicInfo({ bundle }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col gap-3 text-sm mt-1",
+		className: "mt-1 flex flex-col gap-3 text-sm",
 		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: /* @__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", {
+						className: "font-medium",
+						children: bundle.platform === "ios" ? "iOS" : "Android"
+					})]
+				})
+			}),
 			/* @__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"
+				className: "flex flex-wrap items-start gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "font-medium text-muted-foreground",
+					children: "Bundle"
 				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-					className: "font-medium",
-					children: bundle.platform === "ios" ? "iOS" : "Android"
+					className: "min-w-0 basis-full sm:basis-auto",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleIdDisplay, {
+						bundleId: bundle.id,
+						maxLength: 18,
+						fullOnMobile: true
+					})
 				})]
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
+				className: "flex flex-wrap items-center gap-2",
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 					className: "font-medium text-muted-foreground",
-					children: "Bundle ID"
+					children: "Channel"
 				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 					className: "text-xs text-foreground",
-					children: bundle.id
+					translate: "no",
+					children: bundle.channel
 				})]
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
+				className: "flex flex-wrap items-center gap-2",
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 					className: "font-medium text-muted-foreground",
-					children: "Channel"
+					children: "Platform"
 				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 					className: "text-xs text-foreground",
-					children: bundle.channel
+					children: bundle.platform === "ios" ? "iOS" : "Android"
 				})]
 			})
 		]
 	});
 }
-var NUMERIC_COHORT_SIZE = 1e3;
-var DEFAULT_ROLLOUT_COHORT_COUNT = NUMERIC_COHORT_SIZE;
-var INVALID_COHORT_ERROR_MESSAGE = `Invalid cohort. Use 1-1000 or a lowercase slug without spaces, up to 64 characters.`;
-var CUSTOM_COHORT_PATTERN = /^[a-z0-9-]+$/;
-function parseNumericCohortValue(cohort) {
-	if (!/^\d+$/.test(cohort)) return null;
-	const parsed = Number.parseInt(cohort, 10);
-	if (Number.isNaN(parsed) || parsed < 1 || parsed > 1e3) return null;
-	return parsed;
-}
-function positiveMod(value, modulus) {
-	return (value % modulus + modulus) % modulus;
-}
-function hashString(value) {
-	let hash = 0;
-	for (let i = 0; i < value.length; i++) {
-		const char = value.charCodeAt(i);
-		hash = (hash << 5) - hash + char;
-		hash |= 0;
-	}
-	return hash;
-}
-function gcd(a, b) {
-	let x = Math.abs(a);
-	let y = Math.abs(b);
-	while (y !== 0) {
-		const next = x % y;
-		x = y;
-		y = next;
-	}
-	return x;
-}
-function modularInverse(value, modulus) {
-	let t = 0;
-	let newT = 1;
-	let r = modulus;
-	let newR = positiveMod(value, modulus);
-	while (newR !== 0) {
-		const quotient = Math.floor(r / newR);
-		[t, newT] = [newT, t - quotient * newT];
-		[r, newR] = [newR, r - quotient * newR];
-	}
-	if (r > 1) throw new Error(`No modular inverse for ${value} mod ${modulus}`);
-	return positiveMod(t, modulus);
-}
-function getRolloutShuffleParameters(bundleId) {
-	let multiplier = positiveMod(hashString(`${bundleId}:multiplier`), 997);
-	if (multiplier === 0) multiplier = 1;
-	while (gcd(multiplier, NUMERIC_COHORT_SIZE) !== 1) {
-		multiplier = positiveMod(multiplier + 1, NUMERIC_COHORT_SIZE);
-		if (multiplier === 0) multiplier = 1;
-	}
-	const offset = positiveMod(hashString(`${bundleId}:offset`), NUMERIC_COHORT_SIZE);
-	return {
-		multiplier,
-		offset,
-		inverseMultiplier: modularInverse(multiplier, NUMERIC_COHORT_SIZE)
-	};
-}
-function normalizeRolloutCohortCount(rolloutCohortCount) {
-	if (rolloutCohortCount === null || rolloutCohortCount === void 0) return DEFAULT_ROLLOUT_COHORT_COUNT;
-	if (rolloutCohortCount <= 0) return 0;
-	if (rolloutCohortCount >= 1e3) return NUMERIC_COHORT_SIZE;
-	return Math.floor(rolloutCohortCount);
-}
-function normalizeCohortValue(cohort) {
-	const normalized = cohort.trim().toLowerCase();
-	const numericCohort = parseNumericCohortValue(normalized);
-	if (numericCohort !== null) return String(numericCohort);
-	return normalized;
-}
-function getNumericCohortValue(cohort) {
-	return parseNumericCohortValue(normalizeCohortValue(cohort));
-}
-function isNumericCohort(cohort) {
-	return getNumericCohortValue(cohort) !== null;
-}
-function isCustomCohort(cohort) {
-	const normalized = normalizeCohortValue(cohort);
-	return normalized.length > 0 && normalized.length <= 64 && !/^\d+$/.test(normalized) && CUSTOM_COHORT_PATTERN.test(normalized);
-}
-function isValidCohort(cohort) {
-	const normalized = normalizeCohortValue(cohort);
-	return isNumericCohort(normalized) || isCustomCohort(normalized);
-}
-function getNumericCohortRolloutPosition(bundleId, cohortValue) {
-	if (cohortValue < 1 || cohortValue > 1e3) throw new Error(`Invalid numeric cohort: ${cohortValue}`);
-	const { offset, inverseMultiplier } = getRolloutShuffleParameters(bundleId);
-	return positiveMod(inverseMultiplier * (cohortValue - 1 - offset), NUMERIC_COHORT_SIZE);
-}
 var badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
 	variants: { variant: {
 		default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
@@ -309,6 +407,8 @@ var getChannels = createServerFn().handler(createSsrRpc("79ada05964de8f2123bfcd6
 createServerFn().handler(createSsrRpc("f8bdca3d0579adb812d6404f55d9261a89cdb025e920b1fcad82883646a5fe9e"));
 var getBundles = createServerFn({ method: "GET" }).inputValidator((input) => input).handler(createSsrRpc("00ccacb4a0212c83ec29f4d11719046ad91ea8291cfc557d514dbf00d3bd7f5f"));
 var getBundle = createServerFn({ method: "GET" }).inputValidator((input) => input).handler(createSsrRpc("1bd85c2a50e24785cb6abb023a247a9f048f37ddfa85cbb1c57e579563bad013"));
+var getBundleChildren = createServerFn({ method: "GET" }).inputValidator((input) => input).handler(createSsrRpc("4370f1bf70b91f1168d85379d3008449a1bedb915e9878ca4ef89d5f3a80fa7f"));
+var getBundleChildCounts = createServerFn({ method: "GET" }).inputValidator((input) => input).handler(createSsrRpc("4ca367070b00f58179a572f0bb8196a4ccdd3881e9b1dbfe33deee0cb6e1f549"));
 var getBundleDownloadUrl = createServerFn({ method: "GET" }).inputValidator((input) => input).handler(createSsrRpc("e000081a14772a0496dfdf615232fbbb1a23b89191d0e32f89a05dd67a1916f7"));
 var updateBundle = createServerFn({ method: "POST" }).inputValidator((input) => input).handler(createSsrRpc("67f90ce4cd10fd0226cd9d77cdcd8d0f25a59a6ac406360b655e44296bc4208b"));
 var promoteBundle = createServerFn({ method: "POST" }).inputValidator((input) => input).handler(createSsrRpc("c4ef3bbb77ea8a4410623fd18a4741e2ff0668b1a97510bcdd032a8428eaa5da"));
@@ -323,6 +423,15 @@ var queryKeys = {
 		all: bundleListQueryKey,
 		list: (filters) => [...bundleListQueryKey, filters ?? {}]
 	},
+	bundleChildren: {
+		all: ["bundle-children"],
+		list: (baseBundleId) => ["bundle-children", baseBundleId],
+		counts: (bundleIds) => [
+			"bundle-children",
+			"counts",
+			...bundleIds
+		]
+	},
 	bundle: (bundleId) => ["bundle", bundleId]
 };
 function replaceBundleInQueryData(data, updatedBundle) {
@@ -362,6 +471,23 @@ function useBundleQuery(bundleId) {
 		enabled: !!bundleId
 	});
 }
+function useBundleChildrenQuery(baseBundleId) {
+	return useQuery({
+		queryKey: queryKeys.bundleChildren.list(baseBundleId),
+		queryFn: () => getBundleChildren({ data: { baseBundleId } }),
+		staleTime: Infinity,
+		enabled: !!baseBundleId
+	});
+}
+function useBundleChildCountsQuery(bundleIds) {
+	const normalizedBundleIds = [...bundleIds].sort((left, right) => left.localeCompare(right));
+	return useQuery({
+		queryKey: queryKeys.bundleChildren.counts(normalizedBundleIds),
+		queryFn: () => getBundleChildCounts({ data: { bundleIds: normalizedBundleIds } }),
+		staleTime: Infinity,
+		enabled: normalizedBundleIds.length > 0
+	});
+}
 function useBundleDownloadUrlMutation() {
 	return useMutation({ mutationFn: (params) => getBundleDownloadUrl({ data: params }) });
 }
@@ -374,6 +500,7 @@ function useUpdateBundleMutation() {
 			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 })
 			]);
@@ -388,6 +515,7 @@ function usePromoteBundleMutation() {
 			queryClient.setQueryData(queryKeys.bundle(bundle.id), bundle);
 			await Promise.all([
 				queryClient.invalidateQueries({ queryKey: queryKeys.bundles.all }),
+				queryClient.invalidateQueries({ queryKey: queryKeys.bundleChildren.all }),
 				queryClient.invalidateQueries({ queryKey: queryKeys.channels }),
 				queryClient.invalidateQueries({ queryKey: queryKeys.bundle(bundle.id) })
 			]);
@@ -400,7 +528,11 @@ function useDeleteBundleMutation() {
 		mutationFn: (params) => deleteBundle({ data: params }),
 		onSuccess: async (_, vars) => {
 			queryClient.removeQueries({ queryKey: queryKeys.bundle(vars.bundleId) });
-			await Promise.all([queryClient.invalidateQueries({ queryKey: queryKeys.bundles.all }), queryClient.invalidateQueries({ queryKey: queryKeys.channels })]);
+			await Promise.all([
+				queryClient.invalidateQueries({ queryKey: queryKeys.bundles.all }),
+				queryClient.invalidateQueries({ queryKey: queryKeys.bundleChildren.all }),
+				queryClient.invalidateQueries({ queryKey: queryKeys.channels })
+			]);
 		}
 	});
 }
@@ -548,107 +680,6 @@ function DeleteBundleDialog({ bundle, open, onOpenChange, onSuccess }) {
 		})
 	});
 }
-var extractTimestampFromUUIDv7 = (uuid) => {
-	const timestampHex = uuid.split("-").join("").slice(0, 12);
-	return Number.parseInt(timestampHex, 16);
-};
-function createUUIDv7FromTimestampHex(timestampHex) {
-	const randomBytes = new Uint8Array(10);
-	crypto.getRandomValues(randomBytes);
-	const randomHex = Array.from(randomBytes).map((b) => b.toString(16).padStart(2, "0")).join("");
-	const randA = randomHex.slice(0, 3);
-	const randBHex = randomHex.slice(3, 19);
-	const versionAndRandA = `7${randA}`;
-	const variantAndFirstRandB = (128 | parseInt(randBHex.slice(0, 2), 16) & 63).toString(16).padStart(2, "0");
-	return [
-		timestampHex.slice(0, 8),
-		timestampHex.slice(8, 12),
-		versionAndRandA,
-		variantAndFirstRandB + randBHex.slice(2, 4),
-		randBHex.slice(4, 16)
-	].join("-");
-}
-var createUUIDv7 = () => createUUIDv7FromTimestampHex(Date.now().toString(16).padStart(12, "0"));
-function Dialog$1({ ...props }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Root, {
-		"data-slot": "dialog",
-		...props
-	});
-}
-function DialogTrigger({ ...props }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trigger, {
-		"data-slot": "dialog-trigger",
-		...props
-	});
-}
-function DialogPortal({ ...props }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal, {
-		"data-slot": "dialog-portal",
-		...props
-	});
-}
-function DialogOverlay({ className, ...props }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Overlay, {
-		"data-slot": "dialog-overlay",
-		className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className),
-		...props
-	});
-}
-function DialogContent({ className, children, showCloseButton = true, ...props }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Content, {
-		"data-slot": "dialog-content",
-		className: cn("bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2", className),
-		...props,
-		children: [children, showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Close, {
-			"data-slot": "dialog-close",
-			asChild: true,
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
-				variant: "ghost",
-				className: "absolute top-2 right-2",
-				size: "icon-sm",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-					className: "sr-only",
-					children: "Close"
-				})]
-			})
-		})]
-	})] });
-}
-function DialogHeader({ className, ...props }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-		"data-slot": "dialog-header",
-		className: cn("gap-1 flex flex-col", className),
-		...props
-	});
-}
-function DialogFooter({ className, showCloseButton = false, children, ...props }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		"data-slot": "dialog-footer",
-		className: cn("gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
-		...props,
-		children: [children, showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Close, {
-			asChild: true,
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
-				variant: "outline",
-				children: "Close"
-			})
-		})]
-	});
-}
-function DialogTitle({ className, ...props }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, {
-		"data-slot": "dialog-title",
-		className: cn("text-sm font-medium", className),
-		...props
-	});
-}
-function DialogDescription({ className, ...props }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Description, {
-		"data-slot": "dialog-description",
-		className: cn("text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3", className),
-		...props
-	});
-}
 function Select$1({ ...props }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Root2$1, {
 		"data-slot": "select",
@@ -728,10 +759,12 @@ function useFilterParams() {
 		before: search.before
 	};
 	const bundleId = search.bundleId;
-	const navigateWithSearch = (nextSearch) => {
+	const expandedBundleId = search.expandedBundleId;
+	const navigateWithSearch = (nextSearch, options) => {
 		navigate({
 			to: "/",
-			search: nextSearch
+			search: nextSearch,
+			resetScroll: options?.resetScroll
 		});
 	};
 	const getNextFilters = (newFilters) => {
@@ -753,14 +786,23 @@ function useFilterParams() {
 	const setFilters = (newFilters) => {
 		navigateWithSearch({
 			...getNextFilters(newFilters),
-			bundleId: void 0
+			bundleId: void 0,
+			expandedBundleId: void 0
 		});
 	};
 	const setBundleId = (nextBundleId, newFilters = {}) => {
 		navigateWithSearch({
 			...getNextFilters(newFilters),
-			bundleId: nextBundleId
-		});
+			bundleId: nextBundleId,
+			expandedBundleId: void 0
+		}, { resetScroll: false });
+	};
+	const setExpandedBundleId = (nextExpandedBundleId, newFilters = {}) => {
+		navigateWithSearch({
+			...getNextFilters(newFilters),
+			bundleId,
+			expandedBundleId: nextExpandedBundleId
+		}, { resetScroll: false });
 	};
 	const resetFilters = () => {
 		navigateWithSearch({
@@ -769,14 +811,17 @@ function useFilterParams() {
 			page: void 0,
 			after: void 0,
 			before: void 0,
-			bundleId: void 0
+			bundleId: void 0,
+			expandedBundleId: void 0
 		});
 	};
 	return {
 		filters,
 		bundleId,
+		expandedBundleId,
 		setFilters,
 		setBundleId,
+		setExpandedBundleId,
 		resetFilters
 	};
 }
@@ -1016,6 +1061,78 @@ function RolloutCohortsDialog({ bundleId, rolloutCohortCount, targetCohorts, tri
 	const rolloutCohorts = Array.from({ length: NUMERIC_COHORT_SIZE }, (_, index) => index + 1).filter((cohortValue) => getNumericCohortRolloutPosition(bundleId, cohortValue) < normalizedRolloutCount);
 	const rolloutPercentage = (normalizedRolloutCount / 10).toFixed(1);
 	const excludedCount = NUMERIC_COHORT_SIZE - rolloutCohorts.length;
+	const isMobile = useIsMobile();
+	const dialogBody = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "grid gap-3 grid-cols-2 sm:grid-cols-3",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
+					className: "p-4",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "Selected Cohorts" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
+						className: "font-mono text-xl",
+						children: rolloutCohorts.length
+					})]
+				}) }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
+					className: "p-4",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "Excluded Cohorts" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
+						className: "font-mono text-xl",
+						children: excludedCount
+					})]
+				}) }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+					className: "col-span-2 sm:col-span-1",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
+						className: "p-4",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "Bundle ID" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
+							className: "font-mono text-xs break-all leading-relaxed",
+							children: bundleId
+						})]
+					})
+				})
+			]
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
+			className: "p-4 pb-3",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
+				className: "text-sm",
+				children: "Numeric Cohorts"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "Listed in ascending order for readability." })]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, {
+			className: "p-4 pt-0",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "max-h-[50vh] overflow-y-auto rounded-lg border bg-muted/20 p-3 sm:max-h-[45vh]",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "grid grid-cols-3 gap-2 sm:grid-cols-6 lg:grid-cols-8",
+					children: rolloutCohorts.map((cohortValue) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+						variant: "outline",
+						className: "justify-center font-mono",
+						children: cohortValue
+					}, cohortValue))
+				})
+			})
+		})] }),
+		hasTargetCohorts ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
+			className: "p-4 pb-3",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
+				className: "text-sm",
+				children: "Target Cohorts"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "These cohorts are also included, even if they are outside the numeric rollout." })]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, {
+			className: "p-4 pt-0",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "flex flex-wrap gap-2 rounded-lg border bg-muted/20 p-3",
+				children: normalizedTargetCohorts.map((cohort) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+					variant: "secondary",
+					className: "max-w-full font-mono",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "truncate",
+						children: cohort
+					})
+				}, cohort))
+			})
+		})] }) : null
+	] });
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog$1, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTrigger, {
 		asChild: true,
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
@@ -1026,84 +1143,50 @@ function RolloutCohortsDialog({ bundleId, rolloutCohortCount, targetCohorts, tri
 			onClick: (event) => event.stopPropagation(),
 			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(List, { className: "h-3.5 w-3.5" }), triggerLabel]
 		})
-	}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogContent, {
-		className: "sm:max-w-3xl",
-		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { children: "Rolled Out Cohorts" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogDescription, { children: [
-				rolloutPercentage,
-				"% rollout currently targets",
-				" ",
-				rolloutCohorts.length,
-				" of ",
-				NUMERIC_COHORT_SIZE,
-				" numeric cohorts. The selected set stays stable for this bundle as you expand or shrink rollout.",
-				hasTargetCohorts ? " Target Cohorts are added on top of this numeric rollout." : ""
-			] })] }),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "grid gap-3 sm:grid-cols-3",
-				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
-						className: "p-4",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "Selected Cohorts" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
-							className: "font-mono text-xl",
-							children: rolloutCohorts.length
-						})]
-					}) }),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
-						className: "p-4",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "Excluded Cohorts" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
-							className: "font-mono text-xl",
-							children: excludedCount
-						})]
-					}) }),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
-						className: "p-4",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "Bundle ID" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
-							className: "font-mono text-xs break-all leading-relaxed",
-							children: bundleId
-						})]
-					}) })
-				]
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
-				className: "p-4 pb-3",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
-					className: "text-sm",
-					children: "Numeric Cohorts"
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "Listed in ascending order for readability." })]
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, {
-				className: "p-4 pt-0",
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-					className: "max-h-[50vh] overflow-y-auto rounded-lg border bg-muted/20 p-3",
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContent, {
+		className: isMobile ? "top-0 left-0 h-dvh max-w-none translate-x-0 translate-y-0 rounded-none border-0 p-0" : "sm:max-w-3xl",
+		children: isMobile ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex h-full flex-col overflow-hidden",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogHeader, {
+					className: "shrink-0 border-b border-border/70 px-4 py-4",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { children: "Rolled Out Cohorts" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogDescription, { children: [
+						rolloutPercentage,
+						"% rollout currently targets",
+						" ",
+						rolloutCohorts.length,
+						" of ",
+						NUMERIC_COHORT_SIZE,
+						" numeric cohorts. The selected set stays stable for this bundle as you expand or shrink rollout.",
+						hasTargetCohorts ? " Target Cohorts are added on top of this numeric rollout." : ""
+					] })]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "flex-1 overflow-y-auto px-4 py-4",
 					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-						className: "grid grid-cols-4 gap-2 sm:grid-cols-6 lg:grid-cols-8",
-						children: rolloutCohorts.map((cohortValue) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
-							variant: "outline",
-							className: "justify-center font-mono",
-							children: cohortValue
-						}, cohortValue))
+						className: "flex flex-col gap-4",
+						children: dialogBody
 					})
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogFooter, {
+					className: "shrink-0 border-t border-border/70 px-4 py-3",
+					showCloseButton: true
 				})
-			})] }),
-			hasTargetCohorts ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
-				className: "p-4 pb-3",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
-					className: "text-sm",
-					children: "Target Cohorts"
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "These cohorts are also included, even if they are outside the numeric rollout." })]
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, {
-				className: "p-4 pt-0",
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-					className: "flex flex-wrap gap-2 rounded-lg border bg-muted/20 p-3",
-					children: normalizedTargetCohorts.map((cohort) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
-						variant: "secondary",
-						className: "font-mono",
-						children: cohort
-					}, cohort))
-				})
-			})] }) : null,
+			]
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { children: "Rolled Out Cohorts" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogDescription, { children: [
+				rolloutPercentage,
+				"% rollout currently targets",
+				" ",
+				rolloutCohorts.length,
+				" of ",
+				NUMERIC_COHORT_SIZE,
+				" numeric cohorts. The selected set stays stable for this bundle as you expand or shrink rollout.",
+				hasTargetCohorts ? " Target Cohorts are added on top of this numeric rollout." : ""
+			] })] }),
+			dialogBody,
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogFooter, { showCloseButton: true })
-		]
+		] })
 	})] });
 }
 var MIN_ROLLOUT_COHORT_COUNT = 10;
@@ -1532,6 +1615,53 @@ function BundleEditorForm({ bundle, onClose, onBusyChange }) {
 		]
 	});
 }
+function HashValueDisplay({ value, maxLength = 12, className }) {
+	const isTruncated = value.length > maxLength;
+	const truncated = isTruncated ? value.slice(0, maxLength) : value;
+	const copyValue = async () => {
+		try {
+			await navigator.clipboard.writeText(value);
+			toast.success("Copied to clipboard", { description: value });
+		} catch {
+			toast.error("Failed to copy value");
+		}
+	};
+	const handleClick = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		copyValue();
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			event.stopPropagation();
+			copyValue();
+		}
+	};
+	const content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		translate: "no",
+		className: cn("font-mono text-xs tabular-nums whitespace-nowrap", className),
+		children: truncated
+	});
+	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)("button", {
+			type: "button",
+			translate: "no",
+			className: cn("ring-ring/30 bg-muted/40 border-border/70 inline-flex min-w-0 max-w-full cursor-pointer items-center rounded-md border px-1.5 py-0.5 align-top shadow-xs outline-none transition-[background-color,border-color,transform,box-shadow]", "hover:bg-muted/70 active:scale-[0.98] active:bg-muted/85 focus-visible:ring-[2px]", "touch-manipulation select-none", !isTruncated && "cursor-copy"),
+			onClick: handleClick,
+			onKeyDown: handleKeyDown,
+			children: content
+		})
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipContent, {
+		hidden: !isTruncated,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			translate: "no",
+			className: "break-all font-mono text-xs tabular-nums",
+			children: value
+		})
+	})] });
+}
 var normalizeGitUrl = (gitUrl) => {
 	const trimmedGitUrl = gitUrl.trim();
 	if (trimmedGitUrl.startsWith("git@")) {
@@ -1556,71 +1686,115 @@ var getCommitUrl = (gitUrl, commitHash) => {
 	} catch {}
 	return `${normalizedGitUrl}/commit/${commitHash}`;
 };
+function Row({ label, value }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-1.5 sm:flex-row sm:items-start sm:justify-between sm:gap-4",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: "text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "min-w-0 text-left text-sm sm:text-right",
+			children: value
+		})]
+	});
+}
 function BundleMetadata({ bundle }) {
 	const { data: configData, isFetched } = useConfigQuery();
-	const hasMetadata = bundle.targetAppVersion || bundle.fingerprintHash || bundle.gitCommitHash || bundle.fileHash;
+	const patchBaseBundleId = getPatchBaseBundleId(bundle);
+	const hbcPatchFileHash = getPatchFileHash(bundle);
+	const hbcPatchBaseFileHash = getPatchBaseFileHash(bundle);
+	const hasMetadata = bundle.targetAppVersion || bundle.fingerprintHash || bundle.gitCommitHash || bundle.fileHash || patchBaseBundleId || hbcPatchBaseFileHash || hbcPatchFileHash;
 	const gitCommitUrl = bundle.gitCommitHash && isFetched ? getCommitUrl(configData?.console.gitUrl, bundle.gitCommitHash) : null;
 	if (!hasMetadata) return null;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
 		className: "text-sm font-medium",
 		children: "Metadata"
 	}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
-		className: "space-y-3 text-sm",
+		className: "flex flex-col gap-3 text-sm",
 		children: [
-			bundle.targetAppVersion && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-					className: "text-muted-foreground",
-					children: "App Version"
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			bundle.targetAppVersion ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, {
+				label: "App Version",
+				value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					translate: "no",
 					className: "font-mono",
 					children: bundle.targetAppVersion
-				})]
-			}),
-			bundle.fingerprintHash && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-					className: "text-muted-foreground",
-					children: "Fingerprint"
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-					className: "font-mono text-xs",
-					children: [bundle.fingerprintHash.slice(0, 16), "..."]
-				})]
-			}),
-			bundle.gitCommitHash && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-					className: "text-muted-foreground",
-					children: "Git Commit"
-				}), gitCommitUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", {
-					href: gitCommitUrl,
-					target: "_blank",
-					rel: "noopener noreferrer",
-					className: "flex items-center gap-1 text-primary hover:underline font-mono text-xs",
-					children: [bundle.gitCommitHash.slice(0, 8), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExternalLink, { className: "h-3 w-3" })]
-				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-					className: "font-mono text-xs",
-					children: bundle.gitCommitHash.slice(0, 8)
-				})]
-			}),
-			bundle.fileHash && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-					className: "text-muted-foreground",
-					children: "File Hash"
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-					className: "font-mono text-xs",
-					children: [bundle.fileHash.slice(0, 16), "..."]
-				})]
-			})
+				})
+			}) : null,
+			bundle.fingerprintHash ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, {
+				label: "Fingerprint",
+				value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HashValueDisplay, {
+					value: bundle.fingerprintHash,
+					maxLength: 16
+				})
+			}) : null,
+			bundle.gitCommitHash ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, {
+				label: "Git Commit",
+				value: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex items-center justify-start gap-1 sm:justify-end",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HashValueDisplay, {
+						value: bundle.gitCommitHash,
+						maxLength: 12,
+						className: gitCommitUrl ? "text-primary" : void 0
+					}), gitCommitUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+						href: gitCommitUrl,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						className: "shrink-0 text-primary hover:underline",
+						"aria-label": "Open git commit",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExternalLink, {
+							"aria-hidden": "true",
+							className: "h-3 w-3"
+						})
+					}) : null]
+				})
+			}) : null,
+			bundle.fileHash ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, {
+				label: "Bundle Hash",
+				value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HashValueDisplay, {
+					value: bundle.fileHash,
+					maxLength: 16
+				})
+			}) : null,
+			patchBaseBundleId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, {
+				label: "Patch Base",
+				value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleIdDisplay, {
+					bundleId: patchBaseBundleId,
+					maxLength: 18,
+					fullOnMobile: true
+				})
+			}) : null,
+			hbcPatchBaseFileHash ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, {
+				label: "Base Hash",
+				value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HashValueDisplay, {
+					value: hbcPatchBaseFileHash,
+					maxLength: 16
+				})
+			}) : null,
+			hbcPatchFileHash ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, {
+				label: "Patch Hash",
+				value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HashValueDisplay, {
+					value: hbcPatchFileHash,
+					maxLength: 16
+				})
+			}) : null
 		]
 	})] });
 }
 function BundleEditorSheet({ bundleId, bundle, loading = false, open, onOpenChange }) {
 	const [isSaving, setIsSaving] = (0, import_react.useState)(false);
+	const isMobile = useIsMobile();
 	(0, import_react.useEffect)(() => {
 		if (!open) setIsSaving(false);
 	}, [open]);
+	(0, import_react.useEffect)(() => {
+		if (typeof window === "undefined") return;
+		const refreshThemeChrome = () => {
+			window.dispatchEvent(new Event("hot-updater:refresh-theme-chrome"));
+		};
+		refreshThemeChrome();
+		const timeoutId = window.setTimeout(refreshThemeChrome, 180);
+		return () => window.clearTimeout(timeoutId);
+	}, [open]);
 	const handleOpenChange = (nextOpen) => {
 		if (!nextOpen && isSaving) return;
 		if (!nextOpen) setIsSaving(false);
@@ -1630,11 +1804,70 @@ function BundleEditorSheet({ bundleId, bundle, loading = false, open, onOpenChan
 		setIsSaving(false);
 		onOpenChange(false);
 	};
+	const headerContent = bundle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleBasicInfo, { bundle }) : loading ? bundleId ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+		translate: "no",
+		className: "font-mono text-xs",
+		children: [
+			"Loading ",
+			bundleId,
+			"…"
+		]
+	}) : "Loading bundle details…" : bundleId ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+		translate: "no",
+		className: "font-mono text-xs",
+		children: ["Bundle not found: ", bundleId]
+	}) : "Bundle details unavailable";
+	const bodyContent = bundle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-6 px-4 pb-4 sm:px-6 sm:pb-6",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleEditorForm, {
+			bundle,
+			onClose: closeSheet,
+			onBusyChange: setIsSaving
+		}, bundle.id), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleMetadata, { bundle })]
+	}) : loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-4 px-4 pb-4 sm:px-6 sm:pb-6",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-10 w-full" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-28 w-full" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-10 w-full" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-10 w-full" })
+		]
+	}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "px-4 pb-4 text-sm text-muted-foreground sm:px-6 sm:pb-6",
+		children: "The requested bundle could not be loaded."
+	});
+	if (isMobile) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog$1, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContent, {
+			className: "top-0 left-0 h-dvh max-w-none translate-x-0 translate-y-0 rounded-none border-0 p-0",
+			showCloseButton: !isSaving,
+			onEscapeKeyDown: (event) => {
+				if (isSaving) event.preventDefault();
+			},
+			onInteractOutside: (event) => {
+				if (isSaving) event.preventDefault();
+			},
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex h-full flex-col overflow-hidden",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogHeader, {
+					className: "shrink-0 border-b border-border/70 px-4 py-4 sm:px-6",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { children: bundle ? "Bundle Detail" : "Bundle Details" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescription, {
+						asChild: true,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: headerContent })
+					})]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "flex-1 overflow-y-auto",
+					children: bodyContent
+				})]
+			})
+		})
+	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sheet, {
 		open,
 		onOpenChange: handleOpenChange,
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SheetContent, {
-			className: "w-[600px] sm:max-w-[600px] overflow-y-auto",
+			className: "w-[600px] overflow-y-auto sm:max-w-[600px]",
 			showCloseButton: !isSaving,
 			onEscapeKeyDown: (event) => {
 				if (isSaving) event.preventDefault();
@@ -1642,34 +1875,63 @@ function BundleEditorSheet({ bundleId, bundle, loading = false, open, onOpenChan
 			onInteractOutside: (event) => {
 				if (isSaving) event.preventDefault();
 			},
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SheetHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetTitle, { children: bundle ? "Edit Bundle" : "Bundle Details" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetDescription, { children: bundle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleBasicInfo, { bundle }) : loading ? bundleId ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-				className: "font-mono text-xs",
-				children: ["Loading ", bundleId]
-			}) : "Loading bundle details" : bundleId ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-				className: "font-mono text-xs",
-				children: ["Bundle not found: ", bundleId]
-			}) : "Bundle details unavailable" })] }), bundle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "px-6 pb-6 space-y-6",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleEditorForm, {
-					bundle,
-					onClose: closeSheet,
-					onBusyChange: setIsSaving
-				}, bundle.id), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleMetadata, { bundle })]
-			}) : loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "px-6 pb-6 space-y-4",
-				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-10 w-full" }),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-28 w-full" }),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-10 w-full" }),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-10 w-full" })
-				]
-			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: "px-6 pb-6 text-sm text-muted-foreground",
-				children: "The requested bundle could not be loaded."
-			})]
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SheetHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetTitle, { children: bundle ? "Bundle Detail" : "Bundle Details" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SheetDescription, { children: headerContent })] }), bodyContent]
 		})
 	});
 }
+var channelColors = {
+	production: "bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20",
+	dev: "bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20",
+	staging: "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 border-yellow-500/20"
+};
+function ChannelBadge({ channel, className }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+		variant: "outline",
+		className: cn(channelColors[channel.toLowerCase()] || "bg-gray-500/10 text-gray-700 dark:text-gray-400 border-gray-500/20", className),
+		children: channel
+	});
+}
+function EnabledStatusIcon({ enabled, className, falseIcon = "x", colorMode = "semantic" }) {
+	const iconColorClassName = colorMode === "inherit" ? "text-current" : void 0;
+	if (enabled) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: cn("h-4 w-4", iconColorClassName ?? "text-green-600 dark:text-green-400", className) });
+	if (falseIcon === "minus") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Minus, { className: cn("h-4 w-4", iconColorClassName ?? "text-muted-foreground", className) });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, { className: cn("h-4 w-4", iconColorClassName ?? "text-red-600 dark:text-red-400", className) });
+}
+function RolloutPercentageBadge({ percentage, className }) {
+	const isPartialRollout = percentage < 100;
+	const formattedPercentage = percentage.toFixed(1);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Badge, {
+		variant: isPartialRollout ? "secondary" : "default",
+		className: cn("gap-1", className),
+		children: [
+			isPartialRollout && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TriangleAlert, { className: "h-3 w-3" }),
+			formattedPercentage,
+			"%"
+		]
+	});
+}
+import_dayjs_min.default.extend(import_relativeTime.default);
+function TimestampDisplay({ uuid, format = "relative" }) {
+	const date = (0, import_dayjs_min.default)(extractTimestampFromUUIDv7(uuid));
+	if (format === "relative") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: "text-sm text-muted-foreground",
+		children: date.fromNow()
+	});
+	if (format === "absolute") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: "text-sm text-muted-foreground",
+		children: date.format("YYYY-MM-DD HH:mm:ss")
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: "text-sm",
+			children: date.fromNow()
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: "text-xs text-muted-foreground",
+			children: date.format("YYYY-MM-DD HH:mm:ss")
+		})]
+	});
+}
 function Table({ className, ...props }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 		"data-slot": "table-container",
@@ -1716,80 +1978,230 @@ function TableCell({ className, ...props }) {
 		...props
 	});
 }
-function BundleIdDisplay({ bundleId, maxLength = 12 }) {
-	const truncated = bundleId.length > maxLength ? bundleId.slice(-maxLength) : bundleId;
-	if (bundleId.length <= maxLength) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-		className: "font-mono text-xs",
-		children: bundleId
-	});
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipProvider, { children: /* @__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", {
-			className: "font-mono text-xs cursor-help",
-			children: truncated
+function BundleChildrenPanel({ panelId, bundle, bundles, loading, onDetailClick }) {
+	const isMobile = useIsMobile();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		id: panelId,
+		className: "border-t bg-muted/10 p-3 sm:p-4",
+		"aria-live": "polite",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-4",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center justify-between gap-3",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex min-w-0 items-start gap-2 text-sm sm:items-center",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "text-muted-foreground",
+						children: "Base bundle"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleIdDisplay, {
+						bundleId: bundle.id,
+						maxLength: 18,
+						fullOnMobile: true
+					})]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Badge, {
+					variant: "outline",
+					children: [
+						bundles.length,
+						" ",
+						bundles.length === 1 ? "patch" : "patches"
+					]
+				})]
+			}), loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-10 w-full" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-10 w-full" })]
+			}) : bundles.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "text-xs font-semibold uppercase text-muted-foreground/70",
+					children: "Patch bundles from this base"
+				}), isMobile ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "flex flex-col gap-2",
+					children: bundles.map((childBundle) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "rounded-md border bg-background p-3",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "flex flex-col gap-3",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: "space-y-1",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+										className: "text-[11px] font-medium uppercase text-muted-foreground/70",
+										children: "Patch Bundle"
+									}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleIdDisplay, {
+										bundleId: childBundle.id,
+										maxLength: 18,
+										fullOnMobile: true
+									})]
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: "space-y-1",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+										className: "text-[11px] font-medium uppercase text-muted-foreground/70",
+										children: "Relation"
+									}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+										className: "flex flex-col items-start gap-1 text-sm",
+										children: [
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleIdDisplay, {
+												bundleId: bundle.id,
+												maxLength: 12,
+												fullOnMobile: true
+											}),
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowRight, { className: "h-4 w-4 rotate-90 text-muted-foreground" }),
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleIdDisplay, {
+												bundleId: childBundle.id,
+												maxLength: 12,
+												fullOnMobile: true
+											})
+										]
+									})]
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: "flex items-center justify-between gap-3",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+										className: "space-y-1",
+										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+											className: "text-[11px] font-medium uppercase text-muted-foreground/70",
+											children: "Artifact"
+										}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+											variant: "secondary",
+											children: "bsdiff"
+										})]
+									}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+										className: "space-y-1 text-right",
+										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+											className: "text-[11px] font-medium uppercase text-muted-foreground/70",
+											children: "Created"
+										}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+											className: "text-xs tabular-nums text-foreground",
+											children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimestampDisplay, { uuid: childBundle.id })
+										})]
+									})]
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+									type: "button",
+									variant: "outline",
+									size: "sm",
+									className: "w-full",
+									onClick: () => onDetailClick(childBundle),
+									children: "Detail"
+								})
+							]
+						})
+					}, childBundle.id))
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "overflow-x-auto rounded-md border bg-background",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Table, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TableRow, {
+						className: "hover:bg-transparent",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, { children: "Patch Bundle" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, { children: "Relation" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, { children: "Artifact" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, { children: "Created" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, {
+								className: "w-[96px] text-right",
+								children: "Detail"
+							})
+						]
+					}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableBody, { children: bundles.map((childBundle) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TableRow, { children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleIdDisplay, {
+							bundleId: childBundle.id,
+							maxLength: 18,
+							fullOnMobile: true
+						}) }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "flex min-w-[280px] flex-col items-start gap-1 sm:flex-row sm:items-center sm:gap-2",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleIdDisplay, {
+									bundleId: bundle.id,
+									maxLength: 12,
+									fullOnMobile: true
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowRight, { className: "h-4 w-4 shrink-0 rotate-90 text-muted-foreground sm:rotate-0" }),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleIdDisplay, {
+									bundleId: childBundle.id,
+									maxLength: 12,
+									fullOnMobile: true
+								})
+							]
+						}) }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+							variant: "secondary",
+							children: "bsdiff"
+						}) }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
+							className: "tabular-nums",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimestampDisplay, { uuid: childBundle.id })
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
+							className: "text-right",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+								type: "button",
+								variant: "outline",
+								size: "sm",
+								onClick: () => onDetailClick(childBundle),
+								children: "Detail"
+							})
+						})
+					] }, childBundle.id)) })] })
+				})]
+			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "text-xs font-semibold uppercase text-muted-foreground/70",
+					children: "Patch bundles from this base"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "rounded-md border bg-background p-3 text-sm text-muted-foreground",
+					children: "No direct patch bundles."
+				})]
+			})]
 		})
-	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-		className: "font-mono text-xs",
-		children: bundleId
-	}) })] }) });
-}
-var channelColors = {
-	production: "bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20",
-	dev: "bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20",
-	staging: "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 border-yellow-500/20"
-};
-function ChannelBadge({ channel, className }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
-		variant: "outline",
-		className: cn(channelColors[channel.toLowerCase()] || "bg-gray-500/10 text-gray-700 dark:text-gray-400 border-gray-500/20", className),
-		children: channel
-	});
-}
-function EnabledStatusIcon({ enabled, className, falseIcon = "x" }) {
-	if (enabled) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: cn("h-4 w-4 text-green-600 dark:text-green-400", className) });
-	if (falseIcon === "minus") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Minus, { className: cn("h-4 w-4 text-muted-foreground", className) });
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, { className: cn("h-4 w-4 text-red-600 dark:text-red-400", className) });
-}
-function RolloutPercentageBadge({ percentage, className }) {
-	const isPartialRollout = percentage < 100;
-	const formattedPercentage = percentage.toFixed(1);
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Badge, {
-		variant: isPartialRollout ? "secondary" : "default",
-		className: cn("gap-1", className),
-		children: [
-			isPartialRollout && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TriangleAlert, { className: "h-3 w-3" }),
-			formattedPercentage,
-			"%"
-		]
 	});
 }
-import_dayjs_min.default.extend(import_relativeTime.default);
-function TimestampDisplay({ uuid, format = "relative" }) {
-	const date = (0, import_dayjs_min.default)(extractTimestampFromUUIDv7(uuid));
-	if (format === "relative") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-		className: "text-sm text-muted-foreground",
-		children: date.fromNow()
-	});
-	if (format === "absolute") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-		className: "text-sm text-muted-foreground",
-		children: date.format("YYYY-MM-DD HH:mm:ss")
-	});
+var columnHelper = createColumnHelper();
+function BundleIdCell({ bundle, expandedBundleId, onDetailClick, onToggleExpand }) {
+	const isExpanded = bundle.id === expandedBundleId;
+	const panelId = `bundle-lineage-panel-${bundle.id}`;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-			className: "text-sm",
-			children: date.fromNow()
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-			className: "text-xs text-muted-foreground",
-			children: date.format("YYYY-MM-DD HH:mm:ss")
+		className: "flex min-w-[240px] items-center gap-3",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon",
+			className: "size-8 shrink-0 touch-manipulation",
+			"aria-label": isExpanded ? "Hide Lineage" : "Show Lineage",
+			"aria-controls": panelId,
+			"aria-expanded": isExpanded,
+			onClick: (event) => {
+				event.stopPropagation();
+				onToggleExpand(bundle);
+			},
+			children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, { "aria-hidden": "true" })
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: cn("flex min-w-0 flex-col items-start rounded-sm text-left transition-colors", "focus-visible:ring-ring/30 focus-visible:ring-[2px] outline-none", "text-muted-foreground hover:text-foreground"),
+			"aria-label": `Open details for bundle ${bundle.id}`,
+			onClick: (event) => {
+				event.stopPropagation();
+				onDetailClick(bundle);
+			},
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "min-w-0 text-foreground",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleIdDisplay, {
+					bundleId: bundle.id,
+					fullOnMobile: true
+				})
+			})
 		})]
 	});
 }
-var columnHelper = createColumnHelper();
-var bundleColumns = [
+var createBundleColumns = ({ expandedBundleId, patchCountsByBundleId, onDetailClick, onToggleExpand }) => [
 	columnHelper.accessor("id", {
 		header: "Bundle ID",
-		cell: (info) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleIdDisplay, { bundleId: info.getValue() })
+		cell: (info) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleIdCell, {
+			bundle: info.row.original,
+			expandedBundleId,
+			onDetailClick,
+			onToggleExpand
+		})
 	}),
 	columnHelper.accessor("channel", {
 		header: "Channel",
@@ -1805,27 +2217,45 @@ var bundleColumns = [
 			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: info.getValue() === "ios" ? "iOS" : "Android" })]
 		})
 	}),
+	columnHelper.display({
+		id: "patches",
+		header: "Patches",
+		cell: (info) => {
+			const count = patchCountsByBundleId[info.row.original.id];
+			if (count === void 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-sm text-muted-foreground",
+				children: "Checking"
+			});
+			if (count === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-sm text-muted-foreground",
+				children: "-"
+			});
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Badge, {
+				variant: "secondary",
+				children: [
+					count,
+					" ",
+					count === 1 ? "patch" : "patches"
+				]
+			});
+		}
+	}),
 	columnHelper.display({
 		id: "target",
 		header: "Target",
 		cell: (info) => {
 			const row = info.row.original;
-			if (row.fingerprintHash) 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.jsxs)("div", {
-					className: "flex items-center gap-2 cursor-help",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FingerprintPattern, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-						className: "font-mono text-xs",
-						children: row.fingerprintHash.slice(0, 8)
-					})]
-				})
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-				className: "font-mono text-xs",
-				children: row.fingerprintHash
-			}) })] });
+			if (row.fingerprintHash) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-[220px] items-start gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FingerprintPattern, { className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HashValueDisplay, {
+					value: row.fingerprintHash,
+					maxLength: 12
+				})]
+			});
 			if (row.targetAppVersion) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Package, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					translate: "no",
 					className: "text-sm",
 					children: row.targetAppVersion
 				})]
@@ -1866,8 +2296,29 @@ var bundleColumns = [
 		cell: (info) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimestampDisplay, { uuid: info.getValue() })
 	})
 ];
-function BundlesTable({ bundles, pagination, selectedBundleId, onRowClick }) {
+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"),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EnabledStatusIcon, {
+			enabled,
+			falseIcon,
+			colorMode: "inherit",
+			className: "h-3.5 w-3.5"
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: enabled ? trueLabel : falseLabel })]
+	});
+}
+function BundlesTable({ bundles, pagination, expandedBundleId, selectedBundleId, onExpandedBundleChange, onDetailClick }) {
 	const { setFilters } = useFilterParams();
+	const isMobile = useIsMobile();
+	const cursorPagination = pagination;
+	const { data: patchCountsByBundleId = {} } = useBundleChildCountsQuery(bundles.map((bundle) => bundle.id));
+	const { data: childBundles = [], isLoading: isChildBundlesLoading } = useBundleChildrenQuery(expandedBundleId ?? "");
+	const bundleColumns = createBundleColumns({
+		expandedBundleId,
+		patchCountsByBundleId,
+		onDetailClick,
+		onToggleExpand: (bundle) => onExpandedBundleChange(expandedBundleId === bundle.id ? void 0 : bundle.id)
+	});
 	const table = useReactTable({
 		data: bundles,
 		columns: bundleColumns,
@@ -1878,7 +2329,7 @@ function BundlesTable({ bundles, pagination, selectedBundleId, onRowClick }) {
 	const currentPage = pagination?.currentPage ?? 1;
 	const totalPages = pagination?.totalPages ?? 0;
 	const handlePreviousPage = () => {
-		const previousCursor = pagination?.previousCursor ?? bundles[0]?.id;
+		const previousCursor = cursorPagination?.previousCursor ?? bundles[0]?.id;
 		if (!previousCursor) return;
 		setFilters({
 			page: Math.max(1, currentPage - 1),
@@ -1887,7 +2338,7 @@ function BundlesTable({ bundles, pagination, selectedBundleId, onRowClick }) {
 		});
 	};
 	const handleNextPage = () => {
-		const nextCursor = pagination?.nextCursor ?? bundles.at(-1)?.id;
+		const nextCursor = cursorPagination?.nextCursor ?? bundles.at(-1)?.id;
 		if (!nextCursor) return;
 		setFilters({
 			page: currentPage + 1,
@@ -1898,35 +2349,223 @@ function BundlesTable({ bundles, pagination, selectedBundleId, onRowClick }) {
 	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: "space-y-4",
+		className: "flex flex-col gap-4",
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-			className: "rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Table, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHeader, {
+			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",
+												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]
+												})]
+											})
+										]
+									}),
+									/* @__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.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, {
+								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.jsx)(TableRow, {
-					className: "hover:bg-transparent border-b border-border/60",
+					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) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableRow, {
-				"data-state": row.original.id === selectedBundleId ? "selected" : void 0,
-				onClick: () => onRowClick(row.original),
-				className: "cursor-pointer hover:bg-muted/30 transition-colors data-[state=selected]:bg-muted",
-				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))
-			}, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
+			}), /* @__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 items-center justify-between px-2",
+			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 text-muted-foreground font-medium",
+				className: "text-xs font-medium text-muted-foreground",
 				children: [
 					"Showing ",
 					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
@@ -1942,10 +2581,10 @@ function BundlesTable({ bundles, pagination, selectedBundleId, onRowClick }) {
 					" entries"
 				]
 			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-3",
+				className: "flex flex-wrap items-center gap-3 sm:justify-end",
 				children: [
 					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: "text-xs text-muted-foreground font-medium",
+						className: "text-xs font-medium text-muted-foreground",
 						children: [
 							"Page ",
 							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
@@ -1967,16 +2606,16 @@ function BundlesTable({ bundles, pagination, selectedBundleId, onRowClick }) {
 						size: "sm",
 						onClick: handlePreviousPage,
 						disabled: !hasPreviousPage,
-						className: "h-8 px-3 text-xs",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronLeft, { className: "h-3.5 w-3.5 mr-1" }), "Previous"]
+						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 px-3 text-xs",
-						children: ["Next", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, { className: "h-3.5 w-3.5 ml-1" })]
+						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" })]
 					})
 				]
 			})]
@@ -1988,11 +2627,11 @@ function FilterToolbar() {
 	const { data: channels = [] } = useChannelsQuery();
 	const hasActiveFilters = filters.channel || filters.platform;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", {
-		className: "flex h-12 shrink-0 items-center gap-2 border-b px-4 bg-card/50 backdrop-blur-sm sticky top-0 z-10",
+		className: "sticky top-0 z-10 flex shrink-0 flex-wrap items-center gap-2 border-b bg-background px-3 py-3 sm:h-12 sm:flex-nowrap sm:bg-card/70 sm:px-4 sm:py-0 sm:backdrop-blur-sm",
 		children: [
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarTrigger, { className: "-ml-1" }),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-1.5 text-muted-foreground ml-2",
+				className: "ml-1 flex items-center gap-1.5 text-muted-foreground sm:ml-2",
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Funnel, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 					className: "text-xs font-medium",
 					children: "Filters"
@@ -2002,7 +2641,7 @@ function FilterToolbar() {
 				value: filters.platform || "all",
 				onValueChange: (value) => setFilters({ platform: value === "all" ? void 0 : value }),
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
-					className: "w-[140px] h-8 text-xs",
+					className: "h-8 w-[calc(50%-0.25rem)] min-w-[132px] text-xs sm:w-[140px]",
 					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, { placeholder: "All Platforms" })
 				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectContent, { children: [
 					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
@@ -2023,7 +2662,7 @@ function FilterToolbar() {
 				value: filters.channel || "all",
 				onValueChange: (value) => setFilters({ channel: value === "all" ? void 0 : value }),
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
-					className: "w-[140px] h-8 text-xs",
+					className: "h-8 w-[calc(50%-0.25rem)] min-w-[132px] text-xs sm:w-[140px]",
 					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, { placeholder: "All Channels" })
 				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectContent, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
 					value: "all",
@@ -2037,7 +2676,7 @@ function FilterToolbar() {
 				variant: "ghost",
 				size: "sm",
 				onClick: resetFilters,
-				className: "h-8 px-2 text-xs text-muted-foreground hover:text-foreground",
+				className: "h-8 px-2 text-xs text-muted-foreground hover:text-foreground sm:ml-auto",
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, { className: "h-3.5 w-3.5 mr-1" }), "Clear"]
 			})
 		]
@@ -2045,6 +2684,7 @@ function FilterToolbar() {
 }
 function BundlesPage() {
 	const { filters, bundleId, setBundleId } = useFilterParams();
+	const [expandedBundleId, setExpandedBundleId] = (0, import_react.useState)();
 	const activeBundleId = bundleId ?? "";
 	const { data: bundlesData, isLoading } = useBundlesQuery({
 		channel: filters.channel,
@@ -2060,10 +2700,13 @@ function BundlesPage() {
 	const { data: selectedBundleFromQuery, isPending: isSelectedBundlePending } = useBundleQuery(activeBundleId);
 	const selectedBundle = selectedBundleFromQuery ?? selectedBundleFromList;
 	const isSelectedBundleLoading = Boolean(activeBundleId) && !selectedBundle && isSelectedBundlePending;
+	(0, import_react.useEffect)(() => {
+		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",
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterToolbar, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-			className: "flex-1 p-6 space-y-4 bg-muted/5",
+			className: "flex flex-1 flex-col gap-4 bg-muted/5 p-3 sm:p-6",
 			children: [
 				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-12 w-full" }),
 				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-12 w-full" }),
@@ -2077,12 +2720,17 @@ function BundlesPage() {
 		children: [
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterToolbar, {}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: "flex-1 p-6 space-y-6 bg-muted/5",
+				className: "flex flex-1 flex-col gap-6 bg-muted/5 p-3 sm:p-6",
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundlesTable, {
 					bundles,
 					pagination,
+					expandedBundleId,
 					selectedBundleId: bundleId,
-					onRowClick: (bundle) => setBundleId(bundle.id)
+					onExpandedBundleChange: setExpandedBundleId,
+					onDetailClick: (bundle) => {
+						setExpandedBundleId(void 0);
+						setBundleId(bundle.id);
+					}
 				})
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleEditorSheet, {