@hot-updater/console 1.0.0-rc.2 → 1.0.0-rc.21

package/.output/server/_ssr/insights-BfBO0RFr.mjs

@@ -0,0 +1,1238 @@
+import { i as __toESM } from "../_runtime.mjs";
+import { C as ScrollAreaRoot, S as ScrollAreaViewport, _ as ComboboxInput$1, b as ScrollAreaThumb, c as ComboboxItemIndicator, d as ComboboxItem$1, f as ComboboxPopup, g as ComboboxClear$1, h as ComboboxList$1, l as ComboboxRoot, m as ComboboxPortal, mt as require_react, p as ComboboxPositioner, pt as require_jsx_runtime, u as ComboboxEmpty$1, v as ComboboxTrigger$1, x as ScrollAreaScrollbar, y as ScrollAreaCorner } from "../_libs/@base-ui/react+[...].mjs";
+import { F as Check, M as ChevronRight, P as ChevronDown, R as ArrowRight, b as List, l as RotateCw, t as X } from "../_libs/lucide-react.mjs";
+import { D as buttonVariants, O as cn, S as Skeleton, n as Input, r as Separator$1, t as Button$1 } from "./sidebar-DKbx2ach.mjs";
+import { h as Link } from "../_libs/@tanstack/react-router+[...].mjs";
+import { r as useQuery } from "../_libs/tanstack__react-query.mjs";
+import { a as EmptyTitle, i as EmptyHeader, r as EmptyDescription, t as Empty } from "./empty-DcBTAooP.mjs";
+import { a as CardHeader, i as CardFooter, n as CardContent, o as CardTitle, r as CardDescription, t as Card } from "./card-CPAEKx0w.mjs";
+import { a as Badge, i as AlertTitle, l as FieldGroup, o as Field, r as AlertDescription, t as Alert, u as FieldLabel } from "./field-QCDBVpXA.mjs";
+import { a as TableHeader, i as TableHead, n as TableBody, o as TableRow, r as TableCell, t as Table } from "./table-NGWV8B-S.mjs";
+import { a as failureReasonLabel, c as patchFallbackRate, i as failureRate, o as failureStageLabel, r as failureDetailParts, s as formatRate, t as checkFailureRate } from "./insights-failures-BBGMhuUr.mjs";
+import { n as usageMetrics } from "./insights-usage-cbw9n2Fq.mjs";
+import { n as getRecoveryReportRpc } from "./insights-recovery-rpc-CcgYyUHk.mjs";
+import { c as useInsightsRetention, l as useUpdateFailuresQuery, n as formatDays, r as keepsTwelveMonths, t as DEFAULT_INSIGHTS_RETENTION } from "./insights-api-CDn-QQHU.mjs";
+import { t as InsightsInfo } from "./InsightsInfo-Do7QSaFR.mjs";
+import { t as Route } from "./insights-DsAU3-TB.mjs";
+import { i as useChannelsQuery } from "./api-BEiVs0H7.mjs";
+import { a as SelectItem, i as SelectGroup, n as Select$1, o as SelectTrigger, r as SelectContent, s as SelectValue, t as PlatformIcon } from "./select-CUlInmjk.mjs";
+import { i as InputGroupInput, n as InputGroupAddon, r as InputGroupButton, t as InputGroup } from "./input-group-hCk2nUoU.mjs";
+import { n as getAppUsageReportRpc, t as Progress$1 } from "./insights-usage-rpc-D-JYachy.mjs";
+import { a as UsagePeriodSelector, n as InsightsPageHeader, r as InsightsPeriodSelector, t as InsightsErrorAlert } from "./InsightsPageHeader-DSUWUWRc.mjs";
+import { a as CartesianGrid, c as ResponsiveContainer, i as Line, n as YAxis, o as Tooltip, r as XAxis, t as LineChart } from "../_libs/recharts+[...].mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/insights-BfBO0RFr.js
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+var THEMES = {
+	light: "",
+	dark: ".dark"
+};
+var INITIAL_DIMENSION = {
+	width: 320,
+	height: 200
+};
+var ChartContext = import_react.createContext(null);
+function useChart() {
+	const context = import_react.useContext(ChartContext);
+	if (!context) throw new Error("useChart must be used within a <ChartContainer />");
+	return context;
+}
+function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
+	const uniqueId = import_react.useId();
+	const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartContext.Provider, {
+		value: { config },
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			"data-slot": "chart",
+			"data-chart": chartId,
+			className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
+			...props,
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartStyle, {
+				id: chartId,
+				config
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResponsiveContainer, {
+				initialDimension,
+				children
+			})]
+		})
+	});
+}
+var ChartStyle = ({ id, config }) => {
+	const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
+	if (!colorConfig.length) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: Object.entries(THEMES).map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+		const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	}).join("\n")}
+}
+`).join("\n") } });
+};
+var ChartTooltip = Tooltip;
+function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
+	const { config } = useChart();
+	const tooltipLabel = import_react.useMemo(() => {
+		if (hideLabel || !payload?.length) return null;
+		const [item] = payload;
+		const itemConfig = getPayloadConfigFromPayload(config, item, `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`);
+		const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
+		if (labelFormatter) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: cn("font-medium", labelClassName),
+			children: labelFormatter(value, payload)
+		});
+		if (!value) return null;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: cn("font-medium", labelClassName),
+			children: value
+		});
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey
+	]);
+	if (!active || !payload?.length) return null;
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: cn("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs/relaxed shadow-xl", className),
+		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "grid gap-1.5",
+			children: payload.filter((item) => item.type !== "none").map((item, index) => {
+				const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey ?? item.name ?? item.dataKey ?? "value"}`);
+				const indicatorColor = color ?? item.payload?.fill ?? item.color;
+				return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+					children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+							"h-2.5 w-2.5": indicator === "dot",
+							"w-1": indicator === "line",
+							"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+							"my-0.5": nestLabel && indicator === "dashed"
+						}),
+						style: {
+							"--color-bg": indicatorColor,
+							"--color-border": indicatorColor
+						}
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: cn("flex flex-1 justify-between gap-2 leading-none", nestLabel ? "items-end" : "items-center"),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "grid gap-1.5",
+							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "text-muted-foreground",
+								children: itemConfig?.label ?? item.name
+							})]
+						}), item.value != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "font-mono font-medium text-foreground tabular-nums",
+							children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)
+						})]
+					})] })
+				}, index);
+			})
+		})]
+	});
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+	if (typeof payload !== "object" || payload === null) return;
+	const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+	let configLabelKey = key;
+	if (key in payload && typeof payload[key] === "string") configLabelKey = payload[key];
+	else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") configLabelKey = payloadPayload[key];
+	return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+function ScrollArea$1({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ScrollAreaRoot, {
+		"data-slot": "scroll-area",
+		className: cn("relative", className),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaViewport, {
+				"data-slot": "scroll-area-viewport",
+				className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+				children
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollBar, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaCorner, {})
+		]
+	});
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaScrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		"data-orientation": orientation,
+		orientation,
+		className: cn("flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent", className),
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaThumb, {
+			"data-slot": "scroll-area-thumb",
+			className: "relative flex-1 rounded-full bg-border"
+		})
+	});
+}
+/**
+* A unique count the server estimates from a HyperLogLog sketch, typically
+* within about 3% of the true count. It shows as approximate, as analytics
+* consoles mark estimates, and says so to screen readers. Zero is exact: no
+* report reached the sketch.
+*/
+function EstimatedCount({ value }) {
+	if (value === 0) return "0";
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+		title: "Estimated",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				"aria-hidden": "true",
+				className: "mr-1 text-muted-foreground",
+				children: "≈"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "sr-only",
+				children: "Estimated "
+			}),
+			value.toLocaleString()
+		]
+	});
+}
+function ReportingDevicesSummary({ window, count, isPending, partial, retention = DEFAULT_INSIGHTS_RETENTION }) {
+	const metric = usageMetrics[window];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		"aria-label": `${metric.label} over ${metric.period}`,
+		role: "region",
+		className: "flex items-center gap-3",
+		children: [isPending ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, {
+			"aria-label": "Loading active users",
+			className: "h-9 w-12"
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			className: "text-4xl font-semibold tracking-tight tabular-nums",
+			children: count === void 0 ? "—" : partial ? `≥${count.toLocaleString()}` : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EstimatedCount, { value: count })
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-1 text-sm text-muted-foreground",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: metric.label }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InsightsInfo, {
+				label: `How ${metric.label} is counted`,
+				children: [
+					"Unique app installations that reported activity in the last",
+					" ",
+					metric.period,
+					", including no-change reports. Filtered by platform, channel, and app version. The chart counts unique reporting installations per ",
+					metric.interval,
+					". Unique counts are estimates, typically within about 3%. On DynamoDB and Firestore the server updates totals in batches: when the Console cannot write to the database, totals can leave out up to a minute of the latest reports. Hourly counts are kept for ",
+					formatDays(retention.rawDays),
+					" and daily counts for ",
+					formatDays(retention.dailyDays),
+					", so 12 months counts whole UTC days.",
+					partial ? " Only part of the history is available; the total is a lower bound." : ""
+				]
+			})]
+		})]
+	});
+}
+var dates$1 = new Intl.DateTimeFormat("en", {
+	month: "short",
+	day: "numeric",
+	timeZone: "UTC"
+});
+var times = new Intl.DateTimeFormat("en", {
+	month: "short",
+	day: "numeric",
+	hour: "numeric",
+	timeZone: "UTC"
+});
+function AppUsage({ query, search, window, onWindowChange, retention = DEFAULT_INSIGHTS_RETENTION }) {
+	const report = query.error ? void 0 : query.data;
+	const formatTime = (ms) => (window === "30d" || window === "12m" ? dates$1 : times).format(ms);
+	const distributionPeriod = report ? `since ${dates$1.format(report.distributionSinceMs)}, 00:00 UTC` : "in the selected period";
+	const distributionTotals = report ? {
+		versions: report.versions.reduce((sum, row) => sum + row.installations, 0),
+		platforms: report.platforms.reduce((sum, row) => sum + row.installations, 0)
+	} : void 0;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "grid min-w-0 gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(16rem,1fr)]",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
+			"aria-label": "App usage",
+			role: "region",
+			className: "min-w-0 shadow-sm",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
+				className: "flex-row flex-wrap items-center justify-between gap-4",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, { children: "App usage" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsagePeriodSelector, {
+					window,
+					onWindowChange,
+					twelveMonths: keepsTwelveMonths(retention)
+				})]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
+				className: "flex flex-col gap-4",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReportingDevicesSummary, {
+					window,
+					count: report?.activeInstallations,
+					isPending: query.isPending,
+					partial: report?.truncated ?? false,
+					retention
+				}), query.isPending ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, {
+					"aria-label": "Loading app usage",
+					className: "h-48"
+				}) : query.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col items-start gap-4",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsightsErrorAlert, {
+						error: query.error,
+						fallbackTitle: "App usage unavailable"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+						variant: "outline",
+						onClick: () => void query.refetch(),
+						children: "Retry app usage"
+					})]
+				}) : report?.activeInstallations === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, {
+					className: "h-48",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(EmptyHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyTitle, { children: "No activity reported" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyDescription, { children: "Try another period, platform, channel, or app version." })] })
+				}) : report ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "mb-2 text-right text-xs text-muted-foreground",
+					children: "Reporting installations · UTC"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartContainer, {
+					"aria-label": "Active users per interval",
+					className: "h-48 w-full aspect-auto",
+					config: { installations: {
+						label: "Active users",
+						color: "var(--chart-2)"
+					} },
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LineChart, {
+						accessibilityLayer: true,
+						data: report.points,
+						margin: {
+							right: 8,
+							top: 8
+						},
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartesianGrid, { vertical: false }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(XAxis, {
+								dataKey: "startMs",
+								tick: { fill: "var(--muted-foreground)" },
+								tickFormatter: formatTime,
+								axisLine: false,
+								tickLine: false,
+								minTickGap: 45
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(YAxis, {
+								tick: { fill: "var(--muted-foreground)" },
+								allowDecimals: false,
+								axisLine: false,
+								tickLine: false,
+								width: "auto"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltipContent, { labelFormatter: (_, payload) => `${times.format(payload[0]?.payload.startMs)} · UTC` }) }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Line, {
+								dataKey: "installations",
+								type: "linear",
+								stroke: "var(--color-installations)",
+								strokeWidth: 2,
+								dot: { r: 2 },
+								activeDot: { r: 4 },
+								isAnimationActive: false
+							})
+						]
+					})
+				})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", {
+					className: "text-xs text-muted-foreground",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", {
+						className: "cursor-pointer py-2",
+						children: "View usage data"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Table, {
+						"aria-label": "App usage by interval",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TableRow, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, { children: "Interval · UTC" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, {
+							className: "text-right",
+							children: "Active users"
+						})] }) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableBody, { children: report.points.map((point) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TableRow, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, { children: times.format(point.startMs) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
+							className: "text-right tabular-nums",
+							children: point.installations === null ? "Unknown" : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EstimatedCount, { value: point.installations })
+						})] }, point.startMs)) })]
+					})]
+				})] }) : null]
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
+			"aria-label": "Usage distribution",
+			role: "region",
+			className: "flex min-w-0 flex-col shadow-sm",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
+					className: "flex-row items-center justify-between gap-3",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
+						className: "flex min-h-9 items-center",
+						children: "Distribution"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InsightsInfo, {
+						label: "How distribution is counted",
+						children: [
+							"Each reporting installation is counted once, using the app version and platform of its latest matching report ",
+							distributionPeriod,
+							". Latest reports are counted by UTC day.",
+							report?.truncated ? " Shares reflect only the available history." : ""
+						]
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, {
+					className: "flex-1",
+					children: query.isPending ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, {
+						"aria-label": "Loading distribution",
+						className: "h-48"
+					}) : query.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsightsErrorAlert, {
+						error: query.error,
+						fallbackTitle: "Distribution unavailable"
+					}) : !report?.activeInstallations ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, {
+						className: "h-40",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(EmptyHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyTitle, { children: "No reporting installations" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyDescription, { children: "Try a different filter or period." })] })
+					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "flex flex-col gap-6",
+						children: ["versions", "platforms"].map((dimension) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+							"aria-label": dimension === "versions" ? "App version distribution" : "Platform distribution",
+							className: "flex flex-col gap-4",
+							children: [
+								dimension === "platforms" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Separator$1, {}) : null,
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", {
+									className: "flex items-center gap-2 text-sm font-medium text-muted-foreground",
+									children: [dimension === "versions" ? "App versions" : "Platforms", dimension === "versions" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+										variant: "secondary",
+										children: report.versions.length
+									}) : null]
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollArea$1, {
+									className: "min-w-0 [&_[data-slot=scroll-area-viewport]]:max-h-40",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dl", {
+										className: "flex flex-col gap-4 pr-4",
+										children: report[dimension].map((row) => {
+											const name = dimension === "platforms" ? row.name === "ios" ? "iOS" : "Android" : row.name;
+											const share = row.installations / (distributionTotals?.[dimension] ?? 1) * 100;
+											return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+												className: "group relative flex min-h-11 flex-col gap-2 rounded-sm focus-within:ring-2 focus-within:ring-ring sm:min-h-0",
+												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+													className: "flex min-w-0 items-baseline justify-between gap-3",
+													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dt", {
+														className: "flex min-w-0 items-center gap-2 text-sm",
+														title: name,
+														children: [dimension === "platforms" && (row.name === "ios" || row.name === "android") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlatformIcon, {
+															platform: row.name,
+															className: "size-4 shrink-0"
+														}) : null, dimension === "versions" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+															to: "/insights/distribution",
+															search: {
+																...search,
+																version: row.name
+															},
+															"aria-label": `View bundles for app version ${row.name}`,
+															className: "flex min-w-0 items-center gap-1 after:absolute after:inset-0 group-hover:underline",
+															children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+																className: "truncate",
+																children: name
+															}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, {
+																"aria-hidden": "true",
+																className: "size-3 shrink-0 text-muted-foreground"
+															})]
+														}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+															className: "truncate",
+															children: name
+														})]
+													}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dd", {
+														className: "flex shrink-0 gap-3 text-sm tabular-nums",
+														children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: row.installations.toLocaleString() }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+															className: "min-w-10 text-right text-muted-foreground",
+															children: [share.toFixed(1), "%"]
+														})]
+													})]
+												}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Progress$1, {
+													"aria-label": `${name} share`,
+													"aria-valuetext": `${row.installations} installations, ${share.toFixed(1)}%`,
+													value: share
+												})]
+											}, row.name);
+										})
+									})
+								})
+							]
+						}, dimension))
+					})
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardFooter, {
+					className: "border-t pt-4",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+						to: "/insights/distribution",
+						search,
+						className: buttonVariants({
+							variant: "outline",
+							className: "h-11 w-full sm:h-9"
+						}),
+						children: ["View distribution", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowRight, {
+							"aria-hidden": "true",
+							"data-icon": "inline-end"
+						})]
+					})
+				})
+			]
+		})]
+	});
+}
+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, {
+		"aria-label": "Clear selection",
+		"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 InsightsControls({ onFiltersChange, scope, releaseScope, appVersions }) {
+	const [platform, setPlatform] = (0, import_react.useState)(scope.platform);
+	const [channel, setChannel] = (0, import_react.useState)(scope.channel);
+	const [appVersion, setAppVersion] = (0, import_react.useState)(scope.appVersion ?? "");
+	const [releasePlatform, setReleasePlatform] = (0, import_react.useState)(releaseScope.platform);
+	const [releaseId, setReleaseId] = (0, import_react.useState)(releaseScope.releaseId ?? "");
+	const versions = [...new Set([...appVersions, ...appVersion ? [appVersion] : []])];
+	const channelsQuery = useChannelsQuery();
+	const channels = channelsQuery.data?.map((item) => item.name) ?? [];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
+		className: "shadow-sm",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
+			className: "gap-1 border-b px-5 py-4",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, { children: "Filters" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "Channel applies to all reports. Other filters affect the report named in their label." })]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, {
+			className: "px-5 py-4",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", {
+				"aria-label": "Insights filters",
+				onSubmit: (event) => {
+					event.preventDefault();
+					onFiltersChange({
+						scope: {
+							platform,
+							channel,
+							...appVersion ? { appVersion } : {}
+						},
+						releaseScope: {
+							platform: releasePlatform,
+							channel,
+							...releaseId.trim() ? { releaseId: releaseId.trim() } : {}
+						}
+					});
+				},
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FieldGroup, {
+					className: "grid grid-cols-1 items-end gap-4 sm:grid-cols-2 xl:grid-cols-[minmax(12rem,1.25fr)_9rem_minmax(10rem,1fr)_9rem_minmax(12rem,1fr)_auto]",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+								htmlFor: "insights-channel",
+								children: "Channel"
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Combobox$1, {
+								items: channels,
+								value: channel,
+								onValueChange: (value) => {
+									if (value !== null) setChannel(value);
+								},
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxInput, {
+									className: "h-11 w-full sm:h-9 [&_input]:h-full",
+									id: "insights-channel",
+									placeholder: "Search channels…",
+									maxLength: 1024
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ComboboxContent, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxEmpty, { children: channelsQuery.isPending ? "Loading channels…" : channelsQuery.isError ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: "flex flex-col items-center gap-2 p-2",
+									children: ["Couldn't load channels.", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+										onClick: () => void channelsQuery.refetch(),
+										size: "sm",
+										variant: "outline",
+										children: "Retry channels"
+									})]
+								}) : "No channels found." }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxList, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComboboxItem, {
+									className: "min-h-11 pr-8 sm:min-h-8",
+									value: item,
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+										className: "truncate",
+										children: item
+									})
+								}, item) })] })]
+							})]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+							htmlFor: "insights-platform",
+							children: "Usage platform"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+							items: {
+								all: "All platforms",
+								ios: "iOS",
+								android: "Android"
+							},
+							value: platform,
+							onValueChange: (value) => {
+								if (value === "all" || value === "ios" || value === "android") setPlatform(value);
+							},
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
+								id: "insights-platform",
+								className: "min-h-11 w-full sm:min-h-9",
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectValue, { children: [platform !== "all" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlatformIcon, {
+									platform,
+									className: "size-3.5"
+								}) : null, platform === "all" ? "All platforms" : platform === "ios" ? "iOS" : "Android"] })
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectGroup, { children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+									value: "all",
+									children: "All platforms"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectItem, {
+									value: "ios",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlatformIcon, {
+										platform: "ios",
+										className: "size-3.5"
+									}), "iOS"]
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectItem, {
+									value: "android",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlatformIcon, {
+										platform: "android",
+										className: "size-3.5"
+									}), "Android"]
+								})
+							] }) })]
+						})] }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+								htmlFor: "insights-app-version",
+								children: "App version"
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+								items: Object.fromEntries([["all", "All versions"], ...versions.map((version) => [`version:${version}`, version])]),
+								value: appVersion ? `version:${appVersion}` : "all",
+								onValueChange: (value) => {
+									if (value !== null) setAppVersion(value === "all" ? "" : value.slice(8));
+								},
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
+									id: "insights-app-version",
+									className: "min-h-11 w-full sm:min-h-9",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, {})
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectGroup, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+									value: "all",
+									children: "All versions"
+								}), versions.map((version) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+									value: `version:${version}`,
+									children: version
+								}, version))] }) })]
+							})]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+							htmlFor: "insights-release-platform",
+							children: "Health platform"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+							items: {
+								ios: "iOS",
+								android: "Android"
+							},
+							value: releasePlatform,
+							onValueChange: (value) => {
+								if (value === "ios" || value === "android") setReleasePlatform(value);
+							},
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
+								id: "insights-release-platform",
+								className: "min-h-11 w-full sm:min-h-9",
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectValue, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlatformIcon, {
+									platform: releasePlatform,
+									className: "size-3.5"
+								}), releasePlatform === "ios" ? "iOS" : "Android"] })
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectGroup, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectItem, {
+								value: "ios",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlatformIcon, {
+									platform: "ios",
+									className: "size-3.5"
+								}), "iOS"]
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectItem, {
+								value: "android",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlatformIcon, {
+									platform: "android",
+									className: "size-3.5"
+								}), "Android"]
+							})] }) })]
+						})] }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FieldLabel, {
+								htmlFor: "insights-release-id",
+								children: [
+									"Release ID",
+									" ",
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+										className: "text-muted-foreground",
+										children: "(optional)"
+									})
+								]
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+								autoComplete: "off",
+								className: "h-11 sm:h-9",
+								id: "insights-release-id",
+								maxLength: 1024,
+								name: "releaseId",
+								placeholder: "All releases…",
+								value: releaseId,
+								onChange: (event) => setReleaseId(event.target.value)
+							})]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+							className: "h-11 w-full sm:h-9",
+							size: "lg",
+							type: "submit",
+							variant: "outline",
+							children: "Apply filters"
+						})
+					]
+				})
+			})
+		})]
+	});
+}
+var dates = new Intl.DateTimeFormat("en", {
+	month: "short",
+	day: "numeric",
+	timeZone: "UTC"
+});
+var rate = (report) => {
+	const attempts = report.activeDays + report.failedLaunches;
+	return attempts === 0 ? "—" : `${(report.failedLaunches / attempts * 100).toFixed(2)}%`;
+};
+function ReleaseHealth({ report }) {
+	const attempts = report.activeDays + report.failedLaunches;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-8",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dl", {
+			className: "grid grid-cols-2 gap-5 lg:grid-cols-4",
+			children: [
+				["Active installations", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EstimatedCount, { value: report.activeInstallations })],
+				["Active days", report.activeDays.toLocaleString()],
+				["Failed launches", report.failedLaunches.toLocaleString()],
+				["Crash rate", attempts === 0 ? "— / No launch reports" : rate(report)]
+			].map(([label, value]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dt", {
+					className: "flex items-center gap-1 text-sm text-muted-foreground",
+					children: [label, label === "Active installations" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsightsInfo, {
+						label: "About active installations",
+						children: "Distinct installations that reported in this scope and period, or that launched this release, estimated: typically within about 3%."
+					}) : label === "Active days" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsightsInfo, {
+						label: "About active days",
+						children: "Each installation counts once for each UTC day it launched, and once more on a day an update applies or recovers. The chart shows each day's daily active installations."
+					}) : label === "Crash rate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsightsInfo, {
+						label: "About crash rate",
+						children: "Reported OTA launch failures divided by active days plus failed launches for the same scope and period."
+					}) : null]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+					className: "text-3xl font-semibold tracking-tight tabular-nums",
+					children: value
+				})]
+			}, label))
+		}), report.points.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "flex h-56 items-center justify-center text-sm text-muted-foreground",
+			children: "No launch reports in this period."
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartContainer, {
+			"aria-label": "Daily active installations and failed launches",
+			className: "h-64 w-full aspect-auto",
+			config: {
+				dailyActiveInstallations: {
+					label: "Daily active installations",
+					color: "var(--chart-2)"
+				},
+				failedLaunches: {
+					label: "Failed launches",
+					color: "var(--chart-1)"
+				}
+			},
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LineChart, {
+				data: report.points,
+				margin: {
+					left: -12,
+					right: 12
+				},
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartesianGrid, { vertical: false }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(XAxis, {
+						axisLine: false,
+						dataKey: "startMs",
+						tickFormatter: (value) => dates.format(value),
+						tickLine: false
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(YAxis, {
+						allowDecimals: false,
+						axisLine: false,
+						tickLine: false
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltipContent, { labelFormatter: (_, payload) => `${dates.format(payload[0]?.payload.startMs)} · UTC` }) }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Line, {
+						dataKey: "dailyActiveInstallations",
+						stroke: "var(--color-dailyActiveInstallations)",
+						strokeWidth: 2,
+						isAnimationActive: false
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Line, {
+						dataKey: "failedLaunches",
+						stroke: "var(--color-failedLaunches)",
+						strokeWidth: 2,
+						isAnimationActive: false
+					})
+				]
+			})
+		})]
+	});
+}
+function InsightsOverview({ input, onWindowChange, query, onRefresh }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", {
+		"aria-label": "Release health",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
+			className: "min-w-0 overflow-hidden shadow-sm",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardHeader, {
+					className: "flex flex-col gap-4 p-6",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex flex-wrap items-center justify-between gap-4",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, { children: "Release health" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsightsPeriodSelector, {
+								window: input.window,
+								onWindowChange
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+								"aria-label": "Refresh release health",
+								variant: "ghost",
+								size: "icon-lg",
+								disabled: query.isFetching,
+								onClick: onRefresh,
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RotateCw, { "aria-hidden": "true" })
+							})]
+						})]
+					})
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, {
+					className: "px-6 pb-6",
+					children: query.isPending ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, {
+						"aria-label": "Loading release health",
+						className: "h-80"
+					}) : query.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsightsErrorAlert, {
+						error: query.error,
+						fallbackTitle: "Release health unavailable"
+					}) : query.data ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReleaseHealth, { report: query.data }) : null
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardFooter, {
+					className: "flex items-center justify-between border-t px-6 py-5",
+					children: [query.data?.coverage.kind === "partial" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "text-xs text-muted-foreground",
+						children: "Partial"
+					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+						className: buttonVariants({
+							variant: "outline",
+							size: "sm"
+						}),
+						to: "/installations",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(List, { "aria-hidden": "true" }), "Event history"]
+					})]
+				})
+			]
+		})
+	});
+}
+var share = (events, total) => total === 0 ? "—" : `${(events / total * 100).toFixed(1)}%`;
+function Metric({ label, info, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dt", {
+			className: "flex items-center gap-1 text-sm text-muted-foreground",
+			children: [label, info ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsightsInfo, {
+				label: `About ${label.toLowerCase()}`,
+				children: info
+			}) : null]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+			className: "text-3xl font-semibold tracking-tight tabular-nums",
+			children
+		})]
+	});
+}
+/** One stage and reason, and what else its clients knew, most first. */
+function FailureRow({ failure, total }) {
+	const label = `${failureStageLabel(failure.stage)} · ${failureReasonLabel(failure.reason)}`;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TableRow, {
+		className: "[&>td]:px-4 [&>td]:py-3 [&>td]:align-top sm:[&>td]:px-6",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
+				className: "whitespace-normal",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", {
+					className: "group/failure",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("summary", {
+						className: "flex cursor-pointer list-none items-center gap-1 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/30 [&::-webkit-details-marker]:hidden",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "font-medium",
+							children: label
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, {
+							"aria-hidden": "true",
+							className: "size-3 text-muted-foreground group-open/failure:rotate-180"
+						})]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+						"aria-label": `${label} details`,
+						className: "mt-2 flex flex-col gap-1 text-xs text-muted-foreground",
+						children: failure.details.map((detail) => {
+							const parts = failureDetailParts(detail);
+							return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+								className: "flex justify-between gap-4",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "wrap-anywhere",
+									children: parts.length === 0 ? "No details reported" : parts.join(" · ")
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "tabular-nums",
+									children: detail.events.toLocaleString()
+								})]
+							}, JSON.stringify(detail));
+						})
+					})]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
+				className: "text-right tabular-nums",
+				children: failure.events.toLocaleString()
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
+				className: "text-right tabular-nums text-muted-foreground",
+				children: share(failure.events, total)
+			})
+		]
+	});
+}
+function Recoveries({ recoveries }) {
+	const known = recoveries.byExitReason.reduce((sum, { events }) => sum + events, 0);
+	const unreported = Math.max(0, recoveries.failedLaunches - known);
+	const reasons = [...recoveries.byExitReason.map(({ exitReason, events }) => ({
+		name: exitReason,
+		code: true,
+		events
+	})), ...unreported > 0 ? [{
+		name: "Not reported",
+		code: false,
+		events: unreported
+	}] : []];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+		"aria-labelledby": "recoveries-by-exit-reason",
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", {
+			className: "flex items-center gap-1 text-sm font-medium",
+			id: "recoveries-by-exit-reason",
+			children: ["Recoveries by exit reason", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsightsInfo, {
+				label: "About exit reasons",
+				children: "Why the crashed process exited, as Android 11 and later report it: a crash, an ANR, or the system or the user closing the app. iOS and older Android report none."
+			})]
+		}), reasons.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			className: "text-sm text-muted-foreground",
+			children: "No recoveries in this period."
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+			className: "flex flex-col gap-1 text-sm",
+			children: reasons.map(({ name, code, events }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+				className: "flex justify-between gap-4",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: code ? "font-mono text-xs" : void 0,
+					children: name
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "tabular-nums",
+					children: [events.toLocaleString(), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "ml-2 text-muted-foreground",
+						children: share(events, recoveries.failedLaunches)
+					})]
+				})]
+			}, name))
+		})]
+	});
+}
+function FailuresReport({ report }) {
+	const breakdown = report.breakdown ?? [];
+	const total = breakdown.reduce((sum, { events }) => sum + events, 0);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-8",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dl", {
+				className: "grid grid-cols-2 gap-5 lg:grid-cols-4",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+						label: "Failed updates",
+						children: report.failedUpdates.toLocaleString()
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+						label: "Attempt failure rate",
+						info: "The failure rate of update attempts: failed download and install reports divided by those plus download reports.",
+						children: formatRate(failureRate(report))
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+						label: "Failed installations",
+						info: "Distinct installations with a failed download or install, estimated: typically within about 3%. A client reports each failure at most once a UTC day.",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EstimatedCount, { value: report.failedInstallations })
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+						label: "Patch fallback rate",
+						info: "Of the downloads that tried a patch, the share that fell back to the changed files or the full archive.",
+						children: formatRate(patchFallbackRate(report))
+					}),
+					report.checks ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+						label: "Failed checks",
+						children: report.checks.failures.toLocaleString()
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+						label: "Check failure rate",
+						info: "Installations whose update check failed, divided by the channel's active installations; both estimated. A check the device could not send while offline is not reported.",
+						children: formatRate(checkFailureRate(report.checks))
+					})] }) : null
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+				"aria-labelledby": "failures-by-stage",
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
+					className: "text-sm font-medium",
+					id: "failures-by-stage",
+					children: "Failures by stage and reason"
+				}), breakdown.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "text-sm text-muted-foreground",
+					children: "No update failures in this period."
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Table, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TableRow, {
+					className: "[&>th]:px-4 sm:[&>th]:px-6",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, { children: "Stage · reason" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, {
+							className: "w-24 text-right",
+							children: "Reports"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHead, {
+							className: "w-24 text-right",
+							children: "Share"
+						})
+					]
+				}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableBody, { children: breakdown.map((failure) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FailureRow, {
+					failure,
+					total
+				}, `${failure.stage} ${failure.reason}`)) })] })]
+			}),
+			report.recoveries ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Recoveries, { recoveries: report.recoveries }) : null
+		]
+	});
+}
+/**
+* Update failures for Release health's scope and period: counts, rates, the
+* stage and reason breakdown with what else the clients knew, and why
+* crashed processes exited.
+*/
+function UpdateFailures({ query, onRefresh }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", {
+		"aria-label": "Update failures",
+		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: "flex flex-col gap-1.5 p-6",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex flex-wrap items-center justify-between gap-4",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, { children: "Update failures" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+							"aria-label": "Refresh update failures",
+							variant: "ghost",
+							size: "icon-lg",
+							disabled: query.isFetching,
+							onClick: onRefresh,
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RotateCw, { "aria-hidden": "true" })
+						})]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "Checks, downloads, and installs that failed, for Release health's scope and period." })]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, {
+					className: "px-6 pb-6",
+					children: query.isPending ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, {
+						"aria-label": "Loading update failures",
+						className: "h-64"
+					}) : query.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsightsErrorAlert, {
+						error: query.error,
+						fallbackTitle: "Update failures unavailable"
+					}) : query.data ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FailuresReport, { report: query.data }) : null
+				}),
+				query.data?.coverage.kind === "partial" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardFooter, {
+					className: "border-t px-6 py-5",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "text-xs text-muted-foreground",
+						children: "Partial"
+					})
+				}) : null
+			]
+		})
+	});
+}
+function InsightsPage() {
+	const search = Route.useSearch();
+	const navigate = Route.useNavigate();
+	const retention = useInsightsRetention();
+	const usageWindow = search.window ?? "24h";
+	const bundleWindow = search.bundleWindow ?? "7d";
+	const channel = search.channel ?? search.healthChannel ?? "production";
+	const scope = {
+		platform: search.platform ?? "all",
+		channel,
+		appVersion: search.appVersion
+	};
+	const setUsageWindow = (window) => void navigate({ search: {
+		...search,
+		window
+	} });
+	const input = {
+		...scope,
+		window: usageWindow
+	};
+	const bundleInput = {
+		platform: search.healthPlatform ?? "ios",
+		channel,
+		window: bundleWindow,
+		...search.releaseId === void 0 ? {} : { releaseId: search.releaseId }
+	};
+	const query = useQuery({
+		queryKey: [
+			"insights",
+			"app-usage",
+			input
+		],
+		queryFn: () => getAppUsageReportRpc({ data: input }),
+		staleTime: 3e4
+	});
+	const bundleQuery = useQuery({
+		queryKey: [
+			"insights",
+			"recovery",
+			bundleInput
+		],
+		queryFn: () => getRecoveryReportRpc({ data: bundleInput }),
+		staleTime: 3e4
+	});
+	const failuresQuery = useUpdateFailuresQuery(bundleInput);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex h-svh min-h-0 flex-col",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsightsPageHeader, {
+			view: "overview",
+			overviewSearch: search
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "min-h-0 min-w-0 flex-1 overflow-y-auto bg-muted/5 px-4 py-6 sm:p-8",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mx-auto flex w-full max-w-6xl flex-col gap-6",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsightsControls, {
+						scope,
+						releaseScope: bundleInput,
+						appVersions: query.data?.appVersions ?? [],
+						onFiltersChange: ({ scope, releaseScope }) => void navigate({ search: {
+							...search,
+							...scope,
+							appVersion: scope.appVersion,
+							healthPlatform: releaseScope.platform,
+							healthChannel: void 0,
+							releaseId: releaseScope.releaseId
+						} })
+					}, JSON.stringify({
+						scope,
+						bundleInput
+					})),
+					query.data?.truncated && !query.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertTitle, { children: "Partial history" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDescription, { children: [
+						"Only reports since",
+						" ",
+						new Date(query.data.sinceMs).toLocaleString("en", { timeZone: "UTC" }),
+						" ",
+						"UTC are available. The active-user count is a lower bound. Choose a shorter period for a more complete view."
+					] })] }) : null,
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppUsage, {
+						query,
+						search: {
+							...scope,
+							window: usageWindow,
+							bundleWindow
+						},
+						window: usageWindow,
+						onWindowChange: setUsageWindow,
+						retention
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsightsOverview, {
+						input: bundleInput,
+						query: bundleQuery,
+						onWindowChange: (window) => void navigate({ search: {
+							...search,
+							bundleWindow: window
+						} }),
+						onRefresh: () => void bundleQuery.refetch()
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(UpdateFailures, {
+						query: failuresQuery,
+						onRefresh: () => void failuresQuery.refetch()
+					})
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { InsightsPage as component };