@hot-updater/console 0.36.6 → 1.0.0-rc.0

package/.output/server/_ssr/analytics-DtMTn8fn.mjs

@@ -0,0 +1,858 @@
+import { i as __toESM } from "../_runtime.mjs";
+import { A as ComboboxList$1, C as ComboboxItemIndicator, D as ComboboxPopup, E as ComboboxItem$1, M as ComboboxInput$1, N as ComboboxTrigger$1, O as ComboboxPositioner, T as ComboboxEmpty$1, U as ToggleGroup, W as Toggle, at as require_react, it as require_jsx_runtime, j as ComboboxClear$1, k as ComboboxPortal, w as ComboboxRoot } from "../_libs/@base-ui/react+[...].mjs";
+import { n as useAnalyticsCapability } from "./AnalyticsCapabilityContext-ui4DX8GO.mjs";
+import { M as ChevronDown, N as Check, P as ChartNoAxesCombined, l as Search, t as X } from "../_libs/lucide-react.mjs";
+import { t as cva } from "../_libs/class-variance-authority+clsx.mjs";
+import { C as cn, _ as Skeleton, g as SidebarTrigger, t as Button$1 } from "./createSsrRpc-9P0S0lJ3.mjs";
+import { m as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
+import { i as useActiveInstallationQuery, o as useAnalyticsOverviewQuery } from "./analytics-api-Cg1M5v_H.mjs";
+import { a as FieldLabel, i as FieldGroup, t as Field } from "./field-DRIXKjZG.mjs";
+import { c as useBundleEventAnalyticsQuery, i as InputGroupInput, n as InputGroupAddon, r as InputGroupButton, t as InputGroup } from "./api-BTSv1tZb.mjs";
+import { a as Card, c as CardFooter, l as CardHeader, o as CardContent, s as CardDescription, u as CardTitle } from "./alert-Dim3MGY5.mjs";
+import { a as CartesianGrid, i as Area, n as YAxis, r as XAxis, t as AreaChart } from "../_libs/recharts+[...].mjs";
+import { a as ChartTooltipContent, i as ChartTooltip, n as BundleActivityChart, r as ChartContainer, t as AnalyticsErrorAlert } from "./BundleActivityChart-BiB9ZORH.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/analytics-DtMTn8fn.js
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+var toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1 rounded-md text-xs font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline: "border border-input bg-transparent hover:bg-muted"
+		},
+		size: {
+			default: "h-7 min-w-7 px-2 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+			sm: "h-6 min-w-6 rounded-[min(var(--radius-md),8px)] px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			lg: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+var ToggleGroupContext = import_react.createContext({
+	size: "default",
+	variant: "default",
+	spacing: 2,
+	orientation: "horizontal"
+});
+function ToggleGroup$1({ className, variant, size, spacing = 2, orientation = "horizontal", children, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroup, {
+		"data-slot": "toggle-group",
+		"data-variant": variant,
+		"data-size": size,
+		"data-spacing": spacing,
+		"data-orientation": orientation,
+		style: { "--gap": spacing },
+		className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[size=sm]:rounded-[min(var(--radius-md),8px)] data-vertical:flex-col data-vertical:items-stretch", className),
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupContext.Provider, {
+			value: {
+				variant,
+				size,
+				spacing,
+				orientation
+			},
+			children
+		})
+	});
+}
+function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
+	const context = import_react.useContext(ToggleGroupContext);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toggle, {
+		"data-slot": "toggle-group-item",
+		"data-variant": context.variant || variant,
+		"data-size": context.size || size,
+		"data-spacing": context.spacing,
+		className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
+			variant: context.variant || variant,
+			size: context.size || size
+		}), className),
+		...props,
+		children
+	});
+}
+var windows = [
+	{
+		value: "24h",
+		label: "24 hours",
+		shortLabel: "24h"
+	},
+	{
+		value: "7d",
+		label: "7 days",
+		shortLabel: "7d"
+	},
+	{
+		value: "30d",
+		label: "30 days",
+		shortLabel: "30d"
+	}
+];
+function AnalyticsControls({ onInstallationSearch, onWindowChange, window }) {
+	const [draft, setDraft] = (0, import_react.useState)("");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", {
+		"aria-label": "Analytics controls",
+		className: "rounded-xl border bg-background px-4 py-3",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", {
+			"aria-label": "Filter analytics",
+			className: "min-w-0",
+			onSubmit: (event) => {
+				event.preventDefault();
+				const query = draft.trim();
+				if (query) onInstallationSearch(query);
+			},
+			role: "search",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FieldGroup, {
+				className: "gap-3 md:grid md:grid-cols-[auto_minmax(18rem,1fr)] md:items-end",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, { children: "Reporting period" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroup$1, {
+						"aria-label": "Reporting period",
+						className: "w-full lg:w-fit",
+						onValueChange: (value) => {
+							if (value[0]) onWindowChange(value[0]);
+						},
+						spacing: 0,
+						size: "lg",
+						value: [window],
+						variant: "outline",
+						children: windows.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupItem, {
+							"aria-label": item.label,
+							className: "flex-1 md:flex-none",
+							value: item.value,
+							children: item.shortLabel
+						}, item.value))
+					})]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+						htmlFor: "installation-history-search",
+						children: "Installation history"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex min-w-0 flex-col gap-2 sm:flex-row",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputGroup, {
+							className: "h-8 flex-1",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupAddon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Search, { "aria-hidden": "true" }) }),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupInput, {
+									"aria-label": "User or install ID",
+									id: "installation-history-search",
+									maxLength: 1024,
+									onChange: (event) => setDraft(event.target.value),
+									placeholder: "User ID or install ID",
+									type: "search",
+									value: draft
+								}),
+								draft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupAddon, {
+									align: "inline-end",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupButton, {
+										"aria-label": "Clear installation search",
+										onClick: () => setDraft(""),
+										size: "icon-xs",
+										children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, { "aria-hidden": "true" })
+									})
+								})
+							]
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+							className: "w-full sm:w-auto",
+							size: "lg",
+							type: "submit",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Search, {
+								"aria-hidden": "true",
+								"data-icon": "inline-start"
+							}), "Search"]
+						})]
+					})]
+				})]
+			})
+		})
+	});
+}
+var dayFormatter = new Intl.DateTimeFormat("en", {
+	day: "numeric",
+	month: "short",
+	timeZone: "UTC"
+});
+var hourFormatter = new Intl.DateTimeFormat("en", {
+	day: "numeric",
+	hour: "numeric",
+	month: "short",
+	timeZone: "UTC"
+});
+var formatBucket = (bucketStartMs, window) => (window === "24h" ? hourFormatter : dayFormatter).format(new Date(bucketStartMs));
+var chartConfig = { installations: {
+	label: "Active installations",
+	color: "var(--chart-2)"
+} };
+function ActivityChart({ series, window }) {
+	const chartData = series.map((point) => ({
+		bucketStartMs: point.bucketStartMs,
+		installations: point.value
+	}));
+	const hasReports = series.some(({ value }) => value > 0);
+	const bucketName = window === "24h" ? "hour" : "day";
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex min-w-0 flex-col gap-3",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
+					className: "text-sm font-medium",
+					children: "Activity over time"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+					className: "text-xs text-muted-foreground",
+					children: ["Unique active installations per ", bucketName]
+				})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-xs text-muted-foreground",
+					children: "UTC"
+				})]
+			}),
+			!hasReports && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-sm text-muted-foreground",
+				children: "No installations reported during this period."
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartContainer, {
+				"aria-label": `Active installations per ${bucketName}`,
+				className: "h-64 w-full aspect-auto",
+				config: chartConfig,
+				role: "img",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AreaChart, {
+					accessibilityLayer: true,
+					data: chartData,
+					margin: {
+						left: -16,
+						right: 4,
+						top: 8
+					},
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartesianGrid, { vertical: false }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(XAxis, {
+							axisLine: false,
+							dataKey: "bucketStartMs",
+							minTickGap: 28,
+							tickFormatter: (value) => formatBucket(value, window),
+							tickLine: false
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(YAxis, {
+							allowDecimals: false,
+							axisLine: false,
+							tickLine: false,
+							width: 32
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltipContent, { labelFormatter: (_, payload) => {
+							const bucket = payload[0]?.payload.bucketStartMs;
+							return typeof bucket === "number" ? formatBucket(bucket, window) : "";
+						} }) }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Area, {
+							dataKey: "installations",
+							fill: "var(--color-installations)",
+							fillOpacity: .12,
+							isAnimationActive: false,
+							stroke: "var(--color-installations)",
+							strokeWidth: 2,
+							type: "monotone"
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+				className: "text-xs leading-relaxed text-muted-foreground",
+				children: [
+					"Each point counts an installation once in that ",
+					bucketName,
+					". The total above counts it once across the whole period, so the points do not add up to the total."
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "sr-only",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", {
+					"aria-label": `Exact active installations per ${bucketName}`,
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("caption", { children: [
+							"Unique installations that reported an update status in each UTC",
+							` ${bucketName}`,
+							"."
+						] }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("th", {
+							scope: "col",
+							children: ["UTC ", bucketName]
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+							scope: "col",
+							children: "Active installations"
+						})] }) }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: chartData.map((point) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+							scope: "row",
+							children: formatBucket(point.bucketStartMs, window)
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: point.installations })] }, point.bucketStartMs)) })
+					]
+				})
+			})
+		]
+	});
+}
+var Combobox$1 = ComboboxRoot;
+function ComboboxTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ComboboxTrigger$1, {
+		"data-slot": "combobox-trigger",
+		className: cn("[&_svg:not([class*='size-'])]:size-3.5", className),
+		...props,
+		children: [children, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { className: "text-muted-foreground size-3.5 pointer-events-none" })]
+	});
+}
+function ComboboxClear({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxClear$1, {
+		"data-slot": "combobox-clear",
+		render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupButton, {
+			variant: "ghost",
+			size: "icon-xs"
+		}),
+		className: cn(className),
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, { className: "pointer-events-none" })
+	});
+}
+function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputGroup, {
+		className: cn("w-auto", className),
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxInput$1, {
+				render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupInput, { disabled }),
+				...props
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputGroupAddon, {
+				align: "inline-end",
+				children: [showTrigger && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxTrigger, { render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupButton, {
+					size: "icon-xs",
+					variant: "ghost",
+					"data-slot": "input-group-button",
+					className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
+					disabled
+				}) }), showClear && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxClear, { disabled })]
+			}),
+			children
+		]
+	});
+}
+function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxPositioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		anchor,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxPopup, {
+			"data-slot": "combobox-content",
+			"data-chips": !!anchor,
+			className: cn("bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/20 dark:bg-popover max-h-72 min-w-32 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-7 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none dark group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)", className),
+			...props
+		})
+	}) });
+}
+function ComboboxList({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxList$1, {
+		"data-slot": "combobox-list",
+		className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain", className),
+		...props
+	});
+}
+function ComboboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ComboboxItem$1, {
+		"data-slot": "combobox-item",
+		className: cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		...props,
+		children: [children, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxItemIndicator, {
+			render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center" }),
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: "pointer-events-none" })
+		})]
+	});
+}
+function ComboboxEmpty({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxEmpty$1, {
+		"data-slot": "combobox-empty",
+		className: cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-xs/relaxed group-data-empty/combobox-content:flex", className),
+		...props
+	});
+}
+function BundleSelector({ bundleId, bundles, onBundleChange }) {
+	const selectedBundle = bundles.find((bundle) => bundle.bundleId === bundleId) ?? null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, {
+		className: "w-full min-w-0 sm:max-w-md",
+		"data-disabled": !bundles.length,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+			htmlFor: "analytics-bundle-selector",
+			children: "Bundle to inspect"
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Combobox$1, {
+			autoHighlight: true,
+			disabled: !bundles.length,
+			filter: (bundle, query) => {
+				const normalizedQuery = query.trim().toLowerCase();
+				return bundle.bundleId.toLowerCase().includes(normalizedQuery) || bundle.description.toLowerCase().includes(normalizedQuery);
+			},
+			isItemEqualToValue: (bundle, value) => bundle.bundleId === value.bundleId,
+			items: bundles,
+			itemToStringLabel: (bundle) => bundle.bundleId,
+			onValueChange: (bundle) => {
+				if (bundle) onBundleChange(bundle.bundleId);
+			},
+			value: selectedBundle,
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxTrigger, {
+				"aria-label": "Bundle to inspect",
+				id: "analytics-bundle-selector",
+				render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+					className: "h-auto min-h-12 w-full min-w-0 justify-between px-3 py-2 text-left",
+					size: "lg",
+					variant: "outline"
+				}),
+				children: selectedBundle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "flex min-w-0 flex-1 flex-col items-start gap-1",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
+						className: "max-w-full truncate text-xs/4",
+						children: selectedBundle.bundleId
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "max-w-full truncate text-xs/4 text-muted-foreground",
+						children: selectedBundle.description
+					})]
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "truncate text-muted-foreground",
+					children: "No bundles available"
+				})
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ComboboxContent, {
+				className: "min-w-(--anchor-width)",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxInput, {
+						"aria-label": "Search bundles",
+						placeholder: "Search by bundle ID or description",
+						showClear: true,
+						showTrigger: false
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxEmpty, { children: "No bundles found." }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxList, { children: (bundle) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxItem, {
+						className: "min-h-12 px-3 py-2",
+						value: bundle,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+							className: "flex min-w-0 flex-col gap-1 pr-5",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
+								className: "max-w-72 truncate text-xs/4",
+								children: bundle.bundleId
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "truncate text-xs/4 text-muted-foreground",
+								children: bundle.description
+							})]
+						})
+					}, bundle.bundleId) })
+				]
+			})]
+		})]
+	});
+}
+function UpdateOutcomes({ bundleSelector, configuredPercentage, latestBundleInstallations, reportingInstallations, state, window }) {
+	const latestBundleShare = reportingInstallations === 0 ? 0 : latestBundleInstallations / reportingInstallations * 100;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
+		className: "min-w-0 overflow-hidden shadow-sm",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
+			className: "gap-4 space-y-0 lg:flex-row lg:items-start lg:justify-between",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-0 flex-col gap-1.5",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
+					className: "text-sm font-medium",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+						id: "bundle-detail-heading",
+						children: "Selected bundle activity"
+					})
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "Select a bundle to inspect its latest presence, applies, and recoveries during this period." })]
+			}), bundleSelector]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, {
+			className: "pt-10",
+			children: state.status === "idle" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-sm text-muted-foreground",
+				children: "No active bundle is available."
+			}) : state.status === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				"aria-label": "Loading update outcomes",
+				className: "flex flex-col gap-4",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "grid grid-cols-2 gap-4 lg:grid-cols-4",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-14 w-full" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-14 w-full" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-14 w-full" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-14 w-full" })
+					]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-32 w-full" })]
+			}) : state.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnalyticsErrorAlert, {
+				error: state.error,
+				fallbackTitle: "Bundle movement unavailable"
+			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-0 flex-col gap-5",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dl", {
+					className: "grid sm:grid-cols-2 lg:grid-cols-4 lg:divide-x lg:divide-border/70",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "border-b pb-4 sm:pr-4 lg:border-b-0",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+									className: "text-xs text-muted-foreground",
+									children: "Latest bundle share"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dd", {
+									className: "mt-1 text-2xl font-semibold tracking-tight tabular-nums",
+									children: [Math.round(latestBundleShare), "%"]
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dd", {
+									className: "mt-1 text-xs text-muted-foreground tabular-nums",
+									children: [
+										latestBundleInstallations.toLocaleString(),
+										" of",
+										" ",
+										reportingInstallations.toLocaleString(),
+										" reporting installs"
+									]
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "border-b py-4 sm:pl-4 lg:border-b-0 lg:py-0 lg:pr-4",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+									className: "text-xs text-muted-foreground",
+									children: "Newly applied"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+									className: "mt-1 text-2xl font-semibold tracking-tight tabular-nums",
+									children: state.data.summary.installed.toLocaleString()
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+									className: "mt-1 text-xs text-muted-foreground",
+									children: "Distinct installations"
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "border-b py-4 sm:pr-4 lg:border-b-0 lg:py-0 lg:pl-4",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+									className: "text-xs text-muted-foreground",
+									children: "Recovered away"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+									className: "mt-1 text-2xl font-semibold tracking-tight tabular-nums",
+									children: state.data.summary.recovered.toLocaleString()
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+									className: "mt-1 text-xs text-muted-foreground",
+									children: "Distinct installations"
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "pt-4 sm:pl-4 lg:py-0",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+									className: "text-xs text-muted-foreground",
+									children: "Configured rollout"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+									className: "mt-1 text-2xl font-semibold tracking-tight tabular-nums",
+									children: configuredPercentage === null ? "—" : `${configuredPercentage}%`
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+									className: "mt-1 text-xs text-muted-foreground",
+									children: "Eligibility setting"
+								})
+							]
+						})
+					]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleActivityChart, {
+					installed: state.data.series.installed,
+					recovered: state.data.series.recovered,
+					window
+				})]
+			})
+		})]
+	});
+}
+var asOfFormatter = new Intl.DateTimeFormat("en", {
+	dateStyle: "medium",
+	timeStyle: "short",
+	timeZone: "UTC"
+});
+var activityWindowCopy = {
+	"24h": {
+		label: "Daily active installations",
+		period: "last 24 hours"
+	},
+	"7d": {
+		label: "Weekly active installations",
+		period: "last 7 days"
+	},
+	"30d": {
+		label: "Monthly active installations",
+		period: "last 30 days"
+	}
+};
+function LoadingCard({ children, className, label }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
+		"aria-label": label,
+		className: cn("min-w-0", className),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-3 w-4/5" })] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, { children })]
+	});
+}
+function AnalyticsOverview(props) {
+	if (props.status === "loading") return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		"aria-label": "Loading reporting analytics",
+		className: "flex min-w-0 flex-col gap-8",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LoadingCard, {
+			label: "Loading installation activity",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-10 w-24" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "mt-5 h-64 w-full" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "mt-5 grid gap-4 border-t pt-5 sm:grid-cols-3",
+					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" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-10 w-full" })
+					]
+				})
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingCard, {
+			label: "Loading bundle detail",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-4",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-10 w-full max-w-md" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "grid grid-cols-2 gap-4 lg:grid-cols-4",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-14 w-full" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-14 w-full" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-14 w-full" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-14 w-full" })
+						]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-32 w-full" })
+				]
+			})
+		})]
+	});
+	if (props.status === "error") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnalyticsErrorAlert, {
+		error: props.error,
+		fallbackTitle: "Reporting analytics unavailable"
+	});
+	const { active, bundleId, bundles, catalog, onBundleChange, outcomes } = props;
+	const activityCopy = activityWindowCopy[active.window];
+	const selectedBundleId = outcomes.status === "idle" ? null : outcomes.bundleId;
+	const latestBundleInstallations = active.bundles.find(({ bundleId }) => bundleId === selectedBundleId)?.installations ?? 0;
+	const configuredPercentage = catalog.configuredRollouts.find(({ bundleId }) => bundleId === selectedBundleId)?.configuredPercentage ?? null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex min-w-0 flex-col gap-8",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", {
+			"aria-label": "Installation activity",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
+				className: "min-w-0 overflow-hidden shadow-sm",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
+						className: "pb-4",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
+							className: "text-sm font-medium",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: activityCopy.label })
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardDescription, { children: [
+							"Unique app installations that reported an update status in the",
+							" ",
+							activityCopy.period,
+							"."
+						] })]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
+						className: "flex flex-col gap-5",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+								className: "text-xs font-medium text-muted-foreground",
+								children: "Active installations"
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "flex items-end gap-2",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "text-4xl font-semibold tracking-tight tabular-nums",
+									children: active.activeInstallations.toLocaleString()
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+									className: "pb-1 text-xs text-muted-foreground",
+									children: ["unique in ", activityCopy.period]
+								})]
+							})]
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: "border-t pt-5",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActivityChart, {
+								series: active.series,
+								window: active.window
+							})
+						})]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardFooter, {
+						className: "border-t bg-muted/15 p-0",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dl", {
+							className: "grid w-full sm:grid-cols-3 sm:divide-x sm:divide-border/70",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: "flex flex-col gap-1 px-5 py-4",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+										className: "text-xs text-muted-foreground",
+										children: "Reported bundles"
+									}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+										className: "text-lg font-semibold tabular-nums",
+										children: active.bundles.length.toLocaleString()
+									})]
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: "flex flex-col gap-1 border-t px-5 py-4 sm:border-t-0",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+										className: "text-xs text-muted-foreground",
+										children: "Reporting window"
+									}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+										className: "text-sm font-medium",
+										children: activityCopy.period
+									})]
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: "flex flex-col gap-1 border-t px-5 py-4 sm:border-t-0",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+										className: "text-xs text-muted-foreground",
+										children: "As of"
+									}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dd", {
+										className: "text-xs font-medium tabular-nums",
+										children: [asOfFormatter.format(new Date(active.asOfMs)), " UTC"]
+									})]
+								})
+							]
+						})
+					})
+				]
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", {
+			"aria-labelledby": "bundle-detail-heading",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UpdateOutcomes, {
+				bundleSelector: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BundleSelector, {
+					bundleId,
+					bundles,
+					onBundleChange
+				}),
+				configuredPercentage,
+				latestBundleInstallations,
+				reportingInstallations: active.activeInstallations,
+				state: outcomes,
+				window: active.window
+			})
+		})]
+	});
+}
+function AnalyticsPage() {
+	const capability = useAnalyticsCapability();
+	const navigate = useNavigate();
+	const [window, setWindow] = (0, import_react.useState)("30d");
+	const [selectedBundleId, setSelectedBundleId] = (0, import_react.useState)("");
+	const catalog = useAnalyticsOverviewQuery(capability);
+	const active = useActiveInstallationQuery(capability, { window });
+	const configuredById = new Map(catalog.data?.configuredRollouts.map((rollout) => [rollout.bundleId, rollout]) ?? []);
+	const bundleIds = new Set([...active.data?.bundles.map(({ bundleId }) => bundleId) ?? [], ...catalog.data?.configuredRollouts.map(({ bundleId }) => bundleId) ?? []]);
+	const bundleOptions = [...bundleIds].map((bundleId) => {
+		const configured = configuredById.get(bundleId);
+		const appVersion = configured?.bundle.targetAppVersion ?? "all versions";
+		return {
+			bundleId,
+			description: configured ? `${configured.bundle.platform === "ios" ? "iOS" : "Android"} · ${configured.bundle.channel} · ${appVersion}` : "Metadata unavailable"
+		};
+	});
+	const bundleId = bundleIds.has(selectedBundleId) ? selectedBundleId : bundleOptions[0]?.bundleId ?? "";
+	const outcomes = useBundleEventAnalyticsQuery({
+		bundleId,
+		window,
+		limit: 1,
+		offset: 0
+	}, capability.status === "supported" && bundleId.length > 0);
+	const outcomeState = !bundleId ? { status: "idle" } : outcomes.isLoading ? {
+		status: "loading",
+		bundleId
+	} : outcomes.error ? {
+		status: "error",
+		bundleId,
+		error: outcomes.error
+	} : outcomes.data ? {
+		status: "success",
+		bundleId,
+		data: outcomes.data
+	} : {
+		status: "loading",
+		bundleId
+	};
+	const analyticsError = active.error ?? catalog.error;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex h-svh min-h-0 flex-col",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", {
+			className: "sticky top-0 z-10 flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 border-b bg-background px-3 py-3 sm:min-h-12 sm:flex-nowrap sm:bg-card/70 sm:px-4 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",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartNoAxesCombined, {
+						"aria-hidden": "true",
+						className: "size-3.5 text-muted-foreground"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
+						className: "text-sm font-medium",
+						children: "Analytics"
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "basis-full pl-9 text-xs text-muted-foreground sm:basis-auto sm:pl-0",
+					children: "Bundle adoption and movement over time."
+				})
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "min-h-0 min-w-0 flex-1 overflow-y-auto bg-muted/5 p-3 sm:p-6",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mx-auto flex w-full max-w-6xl flex-col gap-6",
+				children: [
+					capability.status === "supported" && capability.mode === "bounded" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+						className: "text-xs text-muted-foreground",
+						children: [
+							"This database scans up to",
+							" ",
+							capability.maxMatchingRows.toLocaleString(),
+							" matching analytics records per query."
+						]
+					}) : null,
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnalyticsControls, {
+						onInstallationSearch: (query) => {
+							navigate({
+								to: "/installations",
+								search: {
+									query,
+									installId: void 0,
+									searchOffset: 0,
+									historyOffset: 0
+								}
+							});
+						},
+						onWindowChange: setWindow,
+						window
+					}),
+					active.isLoading || catalog.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnalyticsOverview, { status: "loading" }) : analyticsError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnalyticsOverview, {
+						status: "error",
+						error: analyticsError
+					}) : active.data && catalog.data ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnalyticsOverview, {
+						active: active.data,
+						bundleId,
+						bundles: bundleOptions,
+						catalog: catalog.data,
+						onBundleChange: setSelectedBundleId,
+						outcomes: outcomeState,
+						status: "success"
+					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnalyticsOverview, { status: "loading" })
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { AnalyticsPage as component };