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

package/.output/server/_ssr/InsightsRolloutCard-DHB2iM4t.mjs

@@ -0,0 +1,693 @@
+import { i as __toESM } from "../_runtime.mjs";
+import { c as createServerFn } from "./createServerFn-B2hcXoPM.mjs";
+import { C as SelectRoot, J as require_react, S as SelectTrigger$1, _ as SelectPopup, b as SelectIcon, c as ToggleGroup, d as SelectScrollUpArrow, f as SelectScrollDownArrow, g as SelectList, h as SelectItem$1, l as Toggle, m as SelectItemIndicator, p as SelectItemText, q as require_jsx_runtime, u as SelectGroup$1, v as SelectPositioner, x as SelectValue$1, y as SelectPortal } from "../_libs/@base-ui/react+[...].mjs";
+import { A as ChevronUp, I as ArrowUpRight, N as ChevronDown, P as Check, n as TriangleAlert, u as RotateCcw } from "../_libs/lucide-react.mjs";
+import { t as cva } from "../_libs/class-variance-authority+clsx.mjs";
+import { C as cn, S as buttonVariants, _ as Skeleton, t as Button$1, w as createSsrRpc } from "./createSsrRpc-4rr4IJh3.mjs";
+import { m as Link } from "../_libs/@tanstack/react-router+[...].mjs";
+import { n as useQuery } from "../_libs/tanstack__react-query.mjs";
+import { c as CardDescription, d as CardTitle, i as AlertTitle, l as CardFooter, o as Card, r as AlertDescription, s as CardContent, t as Alert, u as CardHeader } from "./card-gGh8F6kQ.mjs";
+import { a as InsightsErrorAlert, s as useInsightsTimeFormat } from "./InsightsErrorAlert-DzDVdfgW.mjs";
+import { t as readRecoveryInput } from "./insights-recovery-DSFM-YTL.mjs";
+import { a as CartesianGrid, i as Line, l as ResponsiveContainer, n as YAxis, o as ReferenceLine, r as XAxis, s as Tooltip, t as LineChart } from "../_libs/recharts+[...].mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/InsightsRolloutCard-DHB2iM4t.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 Empty({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "empty",
+		className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance", className),
+		...props
+	});
+}
+function EmptyHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "empty-header",
+		className: cn("flex max-w-sm flex-col items-center gap-1", className),
+		...props
+	});
+}
+var emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function EmptyMedia({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "empty-icon",
+		"data-variant": variant,
+		className: cn(emptyMediaVariants({
+			variant,
+			className
+		})),
+		...props
+	});
+}
+function EmptyTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "empty-title",
+		className: cn("text-sm font-medium tracking-tight", className),
+		...props
+	});
+}
+function EmptyDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "empty-description",
+		className: cn("text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		...props
+	});
+}
+var Select$1 = SelectRoot;
+function SelectGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectGroup$1, {
+		"data-slot": "select-group",
+		className: cn("scroll-my-1 p-1", className),
+		...props
+	});
+}
+function SelectValue({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue$1, {
+		"data-slot": "select-value",
+		className: cn("flex flex-1 text-left", className),
+		...props
+	});
+}
+function SelectTrigger({ className, size = "default", children, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectTrigger$1, {
+		"data-slot": "select-trigger",
+		"data-size": size,
+		className: cn("flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-input/20 px-2 py-1.5 text-xs/relaxed whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", className),
+		...props,
+		children: [children, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectIcon, { render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })]
+	});
+}
+function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectPositioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		alignItemWithTrigger,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectPopup, {
+			"data-slot": "select-content",
+			"data-align-trigger": alignItemWithTrigger,
+			className: cn("dark relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props,
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectScrollUpButton, {}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectList, { children }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectScrollDownButton, {})
+			]
+		})
+	}) });
+}
+function SelectItem({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectItem$1, {
+		"data-slot": "select-item",
+		className: cn("relative flex min-h-7 w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItemText, {
+			className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
+			children
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItemIndicator, {
+			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 SelectScrollUpButton({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectScrollUpArrow, {
+		"data-slot": "select-scroll-up-button",
+		className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5", className),
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronUp, {})
+	});
+}
+function SelectScrollDownButton({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectScrollDownArrow, {
+		"data-slot": "select-scroll-down-button",
+		className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5", className),
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, {})
+	});
+}
+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 getRecoveryReportRpc = createServerFn({ method: "GET" }).validator(readRecoveryInput).handler(createSsrRpc("69cd8e2488b082eb2a22e7058be56ad6566f338c471c62557fa6beed5dc1352a"));
+var percent = (rate) => rate === null ? "No reports" : `${rate.toFixed(1)}%`;
+function RolloutChart({ report, inSheet = false }) {
+	const [selectedId, setSelectedId] = (0, import_react.useState)(null);
+	const [selectedTime, setSelectedTime] = (0, import_react.useState)(null);
+	const [metric, setMetric] = (0, import_react.useState)(() => report.series.some(({ points }) => points.some(({ spike }) => spike)) ? "recovery" : "adoption");
+	const formatter = useInsightsTimeFormat();
+	const series = report.series.find(({ releaseId }) => releaseId === selectedId) ?? report.series[0];
+	if (!series) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(EmptyHeader, { children: [
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyMedia, {
+			variant: "icon",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RotateCcw, { "aria-hidden": "true" })
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyTitle, { children: "No rollout activity yet" }),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyDescription, { children: "Try a different time window or check again after this deployment reports adoption or recovery." })
+	] }) });
+	const point = series.points.find(({ startMs }) => startMs === selectedTime) ?? [...series.points].reverse().find(({ spike }) => spike) ?? [...series.points].reverse().find((item) => (metric === "adoption" ? item.adoptionShare : item.rate) !== null) ?? [...series.points].reverse().find(({ rate }) => rate !== null);
+	const markerMs = series.firstAdoptedAtMs === null ? null : Math.floor(series.firstAdoptedAtMs / report.intervalMs) * report.intervalMs;
+	const spikeCount = report.series.filter(({ points }) => points.some(({ spike }) => spike)).length;
+	const plotted = metric === "adoption" ? [...report.series.filter((item) => item !== series), series] : [series];
+	const chartConfig = Object.fromEntries(plotted.map((item, index) => [`series${index}`, {
+		label: `ID ${item.releaseId}`,
+		color: item.releaseId === series.releaseId ? "var(--primary)" : "var(--muted-foreground)"
+	}]));
+	const chartData = series.points.map((item, pointIndex) => ({
+		startMs: item.startMs,
+		...Object.fromEntries(plotted.map((deployment, index) => [`series${index}`, metric === "adoption" ? deployment.points[pointIndex].adoptionShare : deployment.points[pointIndex].rate]))
+	}));
+	const selectedValue = metric === "adoption" ? point.adoptionShare : point.rate;
+	const tickTime = (value) => new Intl.DateTimeFormat("en", {
+		timeZone: formatter.resolvedOptions().timeZone,
+		...report.intervalMs < 216e5 ? {
+			hour: "2-digit",
+			minute: "2-digit"
+		} : {
+			month: "short",
+			day: "numeric"
+		}
+	}).format(value);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex min-w-0 flex-col gap-4",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToggleGroup$1, {
+				"aria-label": "Rollout metric",
+				variant: "outline",
+				spacing: 0,
+				value: [metric],
+				onValueChange: (values) => {
+					const next = values[0];
+					if (next === "adoption" || next === "recovery") {
+						setSelectedTime(point.startMs);
+						setMetric(next);
+					}
+				},
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupItem, {
+					value: "adoption",
+					children: "New adoption"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupItem, {
+					value: "recovery",
+					children: "Recovery rate"
+				})]
+			}),
+			!inSheet ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-0 flex-col gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+					value: series.releaseId,
+					onValueChange: (value) => {
+						setSelectedId(value);
+						setSelectedTime(null);
+					},
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
+						"aria-label": "Deployment ID",
+						className: "w-full min-w-0",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, {})
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectGroup, { children: report.series.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectItem, {
+						value: item.releaseId,
+						children: [item.points.some(({ spike }) => spike) ? "Review · " : "ID · ", item.releaseId]
+					}, item.releaseId)) }) })]
+				}), spikeCount > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+					className: "text-xs text-muted-foreground",
+					children: [spikeCount, " deployments have recovery spikes. Select an ID to review its trend."]
+				}) : null]
+			}) : null,
+			metric === "adoption" && !inSheet ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-xs text-muted-foreground",
+				children: "The highlighted line is the selected ID. Other IDs appear in gray; select a point to compare adoption and recovery."
+			}) : null,
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartContainer, {
+				config: chartConfig,
+				className: "h-56 w-full",
+				"aria-label": `${metric === "adoption" ? "New adoption share" : "Recovery rate"} for ID ${series.releaseId}`,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LineChart, {
+					accessibilityLayer: true,
+					data: chartData,
+					margin: {
+						top: 24,
+						left: -20,
+						right: 16
+					},
+					onClick: (state) => {
+						const index = Number(state.activeIndex);
+						if (state.activeIndex != null && series.points[index]) setSelectedTime(series.points[index].startMs);
+					},
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartesianGrid, { vertical: false }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(XAxis, {
+							tick: { fill: "var(--muted-foreground)" },
+							dataKey: "startMs",
+							tickFormatter: tickTime,
+							tickLine: false,
+							axisLine: false,
+							minTickGap: 48
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(YAxis, {
+							tick: { fill: "var(--muted-foreground)" },
+							domain: [0, 100],
+							tickFormatter: (value) => `${value}%`,
+							tickLine: false,
+							axisLine: false,
+							ticks: [
+								0,
+								25,
+								50,
+								75,
+								100
+							]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltipContent, {
+							labelFormatter: (_, payload) => formatter.format(Number(payload[0]?.payload.startMs)),
+							formatter: (value, name) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+								className: "max-w-64 break-all font-medium tabular-nums",
+								children: [
+									name,
+									": ",
+									Number(value).toFixed(1),
+									"%"
+								]
+							})
+						}) }),
+						markerMs !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReferenceLine, {
+							x: markerMs,
+							stroke: "var(--muted-foreground)",
+							strokeDasharray: "4 4",
+							label: {
+								value: "First adoption",
+								position: "insideTopLeft",
+								fill: "var(--muted-foreground)",
+								fontSize: 11
+							}
+						}) : null,
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReferenceLine, {
+							x: point.startMs,
+							stroke: "var(--border)"
+						}),
+						plotted.map((deployment, seriesIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Line, {
+							name: `ID ${deployment.releaseId}`,
+							dataKey: `series${seriesIndex}`,
+							type: "linear",
+							stroke: `var(--color-series${seriesIndex})`,
+							strokeWidth: 2,
+							connectNulls: false,
+							isAnimationActive: false,
+							dot: ({ cx, cy, index }) => {
+								const p = deployment.points[index];
+								const value = metric === "adoption" ? p?.adoptionShare : p?.rate;
+								if (!p || value === null) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {}, index);
+								return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+									role: "button",
+									tabIndex: 0,
+									"aria-label": `Inspect ID ${deployment.releaseId}, ${formatter.format(p.startMs)}: ${percent(value)} ${metric === "adoption" ? "new adoption" : "recovered"}`,
+									className: "cursor-pointer focus-visible:stroke-foreground focus-visible:stroke-2",
+									onClick: (event) => {
+										event.stopPropagation();
+										setSelectedId(deployment.releaseId);
+										setSelectedTime(p.startMs);
+									},
+									onKeyDown: (event) => {
+										if (event.key === "Enter" || event.key === " ") {
+											event.preventDefault();
+											event.stopPropagation();
+											setSelectedId(deployment.releaseId);
+											setSelectedTime(p.startMs);
+										}
+									},
+									cx,
+									cy,
+									r: metric === "recovery" && p.spike ? 5 : 3,
+									fill: metric === "recovery" && p.spike ? "var(--destructive)" : `var(--color-series${seriesIndex})`
+								}, index);
+							}
+						}, deployment.releaseId))
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-end justify-between gap-4",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "text-xs text-muted-foreground",
+						children: metric === "adoption" ? "New adoption share in selected interval" : "Recovered in selected interval"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+						className: "mt-1 text-4xl font-semibold tracking-tight tabular-nums",
+						children: [selectedValue === null ? "—" : selectedValue.toFixed(1), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "ml-1 text-lg font-medium text-muted-foreground",
+							children: "%"
+						})]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "mt-1 text-xs text-muted-foreground",
+						children: metric === "adoption" ? `${point.adopted.toLocaleString()} adoption reports · ${percent(point.rate)} recovered` : `${point.recovered.toLocaleString()} recovered / ${(point.adopted + point.recovered).toLocaleString()} adoption + recovery reports`
+					})
+				] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+						variant: "outline",
+						"aria-label": "Previous interval",
+						disabled: point === series.points[0],
+						onClick: () => setSelectedTime(point.startMs - report.intervalMs),
+						children: "Previous"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+						variant: "outline",
+						"aria-label": "Next interval",
+						disabled: point === series.points.at(-1),
+						onClick: () => setSelectedTime(point.startMs + report.intervalMs),
+						children: "Next"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+				className: "text-xs text-muted-foreground",
+				children: [
+					formatter.format(Math.max(point.startMs, report.sinceMs)),
+					" –",
+					" ",
+					formatter.format(Math.min(point.startMs + report.intervalMs, report.beforeReceivedAtMs))
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center justify-between gap-3 rounded-lg border p-3",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "text-xs text-muted-foreground",
+						children: "ID"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "mt-1 break-all font-mono text-xs",
+						translate: "no",
+						children: series.releaseId
+					})]
+				}), !inSheet ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+					to: "/",
+					search: { releaseId: series.releaseId },
+					className: buttonVariants({ variant: "outline" }),
+					children: ["Review deployment", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowUpRight, {
+						"aria-hidden": "true",
+						"data-icon": "inline-end"
+					})]
+				}) : null]
+			}),
+			point.spike ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, {
+				variant: "destructive",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TriangleAlert, { "aria-hidden": "true" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertTitle, { children: "Consider rolling back this deployment" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDescription, { children: [
+						"Recovery rose to ",
+						percent(point.rate),
+						" after adoption began. Review rollout and Enabled settings before deciding to roll back."
+					] })
+				]
+			}) : null,
+			markerMs !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+				className: "text-xs text-muted-foreground",
+				children: [
+					"First adoption observed in this window:",
+					" ",
+					formatter.format(series.firstAdoptedAtMs),
+					"."
+				]
+			}) : null
+		]
+	});
+}
+function InsightsRolloutCard({ input, inSheet = false }) {
+	const [sheetWindow, setSheetWindow] = (0, import_react.useState)(input.window);
+	const queryInput = inSheet ? {
+		...input,
+		window: sheetWindow
+	} : input;
+	const query = useQuery({
+		queryKey: [
+			"insights",
+			"recovery",
+			queryInput
+		],
+		queryFn: () => getRecoveryReportRpc({ data: queryInput }),
+		staleTime: 3e4,
+		refetchOnWindowFocus: true
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
+		className: "min-w-0 overflow-hidden shadow-sm",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, { children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, { children: "Rollout activity" }),
+				inSheet ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+					value: sheetWindow,
+					onValueChange: (value) => {
+						if (value === "24h" || value === "7d" || value === "30d") setSheetWindow(value);
+					},
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
+						"aria-label": "Rollout time window",
+						className: "w-full",
+						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: "24h",
+							children: "Last 24 hours"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+							value: "7d",
+							children: "Last 7 days"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+							value: "30d",
+							children: "Last 30 days"
+						})
+					] }) })]
+				}) : null,
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "See new deployments take over and spot recovery spikes. Select a point to inspect its ID and interval." })
+			] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, {
+				className: "flex flex-col gap-4",
+				children: query.isPending ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, {
+					"aria-label": "Loading rollout activity",
+					className: "h-80 w-full"
+				}) : query.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsightsErrorAlert, {
+					error: query.error,
+					fallbackTitle: "Rollout activity unavailable"
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [query.data.truncated ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, { children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TriangleAlert, { "aria-hidden": "true" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertTitle, { children: "Partial history" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDescription, { children: "Only complete intervals from the latest 50,000 reports are shown. Choose a shorter window to see more detail." })
+				] }) : null, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RolloutChart, {
+					report: query.data,
+					inSheet
+				}, `${queryInput.platform}:${queryInput.channel}:${queryInput.window}:${queryInput.releaseId ?? ""}`)] })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardFooter, {
+				className: "flex flex-col items-start gap-3",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "text-xs text-muted-foreground",
+						children: "New adoption shows each ID’s share of adoption reports in this platform and channel. Recovery is recovered ÷ (adopted + recovered). Only reports with an ID are included. Reports are not unique devices; gaps mean no reports."
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", {
+						className: "text-xs text-muted-foreground",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", {
+							className: "cursor-pointer",
+							children: "When a spike needs review"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+							className: "mt-2",
+							children: "At least 10 reports, 3 recoveries, a recovery rate of 10% or more, and a rise of 10 percentage points from the previous observed interval (0% at first adoption)."
+						})]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+						variant: "outline",
+						disabled: query.isFetching,
+						onClick: () => void query.refetch(),
+						children: "Refresh rollout activity"
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { SelectItem as a, ToggleGroup$1 as c, SelectGroup as i, ToggleGroupItem as l, Select$1 as n, SelectTrigger as o, SelectContent as r, SelectValue as s, InsightsRolloutCard as t };