@hot-updater/console 1.0.0-rc.4 → 1.0.0-rc.41

package/src/components/features/insights/InsightsOverview.tsx

@@ -1,9 +1,10 @@
-import { useQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
-import { ArrowUpRight, RotateCw, TriangleAlert } from "lucide-react";
+import { ListIcon, RotateCcw, RotateCw, TriangleAlert, X } from "lucide-react";
 import { useState } from "react";
-import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
 
+import { BundleIdDisplay } from "@/components/BundleIdDisplay";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
   Card,
@@ -13,380 +14,628 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart";
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import type { RecoveryInput, RecoveryReport } from "@/lib/insights-recovery";
-import { getRecoveryReportRpc } from "@/lib/insights-recovery-rpc";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { RecoveryInput } from "@/lib/insights-recovery";
+import type { HealthChart } from "@/lib/insights-search";
+import {
+  CRASH_MIN_ATTEMPTS,
+  CRASH_RATE_THRESHOLD,
+  crashRateOf,
+  DEFAULT_ADOPTION_RELEASES,
+  MAX_ADOPTION_RELEASES,
+  recommendsRollback,
+} from "@/lib/release-adoption";
+import type {
+  ComparedBundle,
+  ReleaseHealthState,
+} from "@/lib/release-adoption-api";
+import { cn } from "@/lib/utils";
 
+import {
+  ComparedBundlesChart,
+  formatDeployedAt,
+  useSeriesColors,
+} from "./ComparedBundlesChart";
 import { InsightsErrorAlert } from "./InsightsErrorAlert";
+import { InsightsInfo } from "./InsightsInfo";
+import { InsightsPeriodSelector } from "./InsightsPeriodSelector";
+import { RollbackButton } from "./RollbackButton";
 
-const dates = new Intl.DateTimeFormat("en", {
-  month: "short",
-  day: "numeric",
-  timeZone: "UTC",
-});
-const times = new Intl.DateTimeFormat("en", {
-  month: "short",
-  day: "numeric",
-  hour: "numeric",
-  timeZone: "UTC",
-});
-const colors = [
-  "var(--chart-2)",
-  "var(--foreground)",
-  "var(--chart-1)",
-  "var(--muted-foreground)",
-  "var(--chart-4)",
-];
-const dashes = [undefined, "6 3", "2 3"];
+const HOUR = 3_600_000;
+const DAY = 24 * HOUR;
+const percent = (rate: number) => `${(rate * 100).toFixed(1)}%`;
+const lengthOf = (durationMs: number) =>
+  durationMs > DAY ? `${durationMs / DAY} days` : `${durationMs / HOUR} hours`;
+const cadenceOf = (intervalMs: number) =>
+  intervalMs === HOUR
+    ? "Hourly"
+    : intervalMs === DAY
+      ? "Daily"
+      : `Every ${intervalMs / HOUR} hours`;
 
-export function ActivityChart({ report }: { readonly report: RecoveryReport }) {
-  const [metric, setMetric] = useState<"active" | "rollback">("active");
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const selected = report.series.find(
-    (series) => series.releaseId === selectedId,
+/** A bundle's crash numbers over the period, once both counts are read. */
+const crashesOf = ({ release, launched, recovered }: ComparedBundle) =>
+  launched === undefined || recovered === undefined
+    ? undefined
+    : {
+        crashes: recovered.total,
+        ...crashRateOf(launched.total, recovered.total),
+        recommended: recommendsRollback(
+          release,
+          launched.total,
+          recovered.total,
+        ),
+      };
+
+/** A line sample for the legend: solid or dashed, in the text color. */
+function LineSample({ dashed }: { readonly dashed?: boolean }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-3 w-6 shrink-0"
+      viewBox="0 0 24 12"
+      preserveAspectRatio="none"
+    >
+      <line
+        x1="0"
+        y1="6"
+        x2="24"
+        y2="6"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeDasharray={dashed ? "6 4" : undefined}
+      />
+    </svg>
   );
-  const config = Object.fromEntries(
-    report.series.map((series, index) => [
-      `bundle${index}`,
-      {
-        label: series.releaseId,
-        color: colors[index % colors.length],
-      },
-    ]),
+}
+
+/**
+ * Release health: how the newest bundles fare after their deployment, on
+ * one timeline, per interval. Adoption shows installations downloading each
+ * bundle (dashed) and launching it (solid), so the gap is the restarts still
+ * to come; Crashes shows them crashing back from it, and offers a rollback
+ * when a bundle crashes for too many of them.
+ */
+export function InsightsOverview({
+  input,
+  chart,
+  onChartChange,
+  health,
+  onReleasesChange,
+  onWindowChange,
+}: {
+  readonly input: RecoveryInput;
+  readonly chart: HealthChart;
+  readonly onChartChange: (chart: HealthChart) => void;
+  readonly health: ReleaseHealthState;
+  /** Chooses the bundles to compare; undefined returns to the default. */
+  readonly onReleasesChange: (releaseIds?: readonly string[]) => void;
+  readonly onWindowChange: (window: RecoveryInput["window"]) => void;
+}) {
+  const [active, setActive] = useState<string | null>(null);
+  const { period, candidates, releases } = health;
+  const ids = (releases ?? []).map(({ release }) => release.releaseId);
+  const colorOf = useSeriesColors(ids);
+  const addable = (candidates ?? []).filter(
+    (candidate) => !ids.includes(candidate.releaseId),
   );
-  const data = (report.series[0]?.points ?? []).map((point, pointIndex) => ({
-    startMs: point.startMs,
-    ...Object.fromEntries(
-      report.series.map((series, index) => [
-        `bundle${index}`,
-        metric === "active"
-          ? series.points[pointIndex].active
-          : series.points[pointIndex].recoveredInstallations,
-      ]),
-    ),
-  }));
-  const formatTick = (ms: number) =>
-    (report.intervalMs < 86_400_000 ? times : dates).format(ms);
-  const lastSpike = selected
-    ? [...selected.points].reverse().find((point) => point.spike)
-    : undefined;
-  const total =
-    metric === "active"
-      ? report.series.reduce(
-          (sum, series) => sum + series.activeInstallations,
-          0,
-        )
-      : report.series.filter((series) => series.recoveredInstallations > 0)
-          .length;
-  return (
-    <>
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div>
-          <p className="text-sm text-muted-foreground">
-            {metric === "active"
-              ? "Active installations"
-              : "Bundles with rollbacks"}
-          </p>
-          <p className="mt-1 text-4xl font-semibold tracking-tight tabular-nums">
-            {total.toLocaleString()}
+  const full = ids.length >= MAX_ADOPTION_RELEASES;
+  const wider =
+    period.durationMs < 7 * DAY
+      ? "7d"
+      : period.durationMs < 30 * DAY
+        ? "30d"
+        : null;
+  const reset = health.isDefault ? null : (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={() => onReleasesChange(undefined)}
+    >
+      <RotateCcw aria-hidden="true" data-icon="inline-start" />
+      Show the newest {DEFAULT_ADOPTION_RELEASES}
+    </Button>
+  );
+  // Adoption draws each bundle's launches solid and its downloads dashed;
+  // Crashes draws its crashes.
+  const seriesOf = (bundle: ComparedBundle) =>
+    chart === "adoption" ? bundle.launched : bundle.recovered;
+  const loaded = (releases ?? []).filter(
+    (bundle) =>
+      seriesOf(bundle) !== undefined &&
+      (chart !== "adoption" || bundle.downloaded !== undefined),
+  );
+  const failed =
+    (releases ?? []).find(({ error }) => error !== null)?.error ?? null;
+  const flagged = (releases ?? []).flatMap((bundle) => {
+    const crashes = crashesOf(bundle);
+    return crashes?.recommended ? [{ ...bundle, ...crashes }] : [];
+  });
+
+  const remove = (releaseId: string) => {
+    const rest = ids.filter((id) => id !== releaseId);
+    onReleasesChange(rest.length === 0 ? undefined : rest);
+  };
+
+  const heading =
+    chart === "adoption" ? (
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-1 text-sm font-medium">
+          Installations downloading and launching each bundle
+          <InsightsInfo label="About adoption">
+            Dashed: installations that downloaded the bundle. Solid:
+            installations that launched it. After a forced update the two lines
+            meet.
+          </InsightsInfo>
+        </div>
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground">
+          <p>
+            {cadenceOf(period.intervalMs)} · last {lengthOf(period.durationMs)}{" "}
+            · UTC
           </p>
+          <ul aria-label="Line styles" className="flex items-center gap-3">
+            <li className="flex items-center gap-1.5">
+              <LineSample dashed />
+              Downloaded
+            </li>
+            <li className="flex items-center gap-1.5">
+              <LineSample />
+              Launched
+            </li>
+          </ul>
         </div>
-        <ToggleGroup
-          aria-label="Activity metric"
-          value={[metric]}
-          onValueChange={(values) => {
-            if (values[0] === "active" || values[0] === "rollback")
-              setMetric(values[0]);
-          }}
-          spacing={0}
-          variant="outline"
-        >
-          <ToggleGroupItem className="h-11 lg:h-8" value="active">
-            Active
-          </ToggleGroupItem>
-          <ToggleGroupItem className="h-11 lg:h-8" value="rollback">
-            Rollback
-          </ToggleGroupItem>
-        </ToggleGroup>
       </div>
-      {report.series.length === 0 ? (
-        <div className="flex h-48 items-center justify-center text-center text-sm text-muted-foreground">
-          No bundle reports in this period. Try another channel or check again
-          after the app reports activity.
+    ) : (
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-1 text-sm font-medium">
+          Crashes after each deployment
+          <InsightsInfo label="About crashes">
+            Installations that crashed on a bundle and rolled back. Crash rate =
+            crashed ÷ (launched + crashed). A rollback is suggested at{" "}
+            {percent(CRASH_RATE_THRESHOLD)} once {CRASH_MIN_ATTEMPTS}{" "}
+            installations tried it.
+          </InsightsInfo>
         </div>
+        <p className="text-xs text-muted-foreground">
+          {cadenceOf(period.intervalMs)} · last {lengthOf(period.durationMs)} ·
+          UTC
+        </p>
+      </div>
+    );
+
+  const body = (() => {
+    if (releases === undefined) {
+      return health.error ? (
+        <InsightsErrorAlert
+          error={health.error}
+          fallbackTitle="Release health unavailable"
+        />
+      ) : (
+        <Skeleton aria-label="Loading release health" className="h-64" />
+      );
+    }
+    if (releases.length === 0) {
+      return (
+        <Empty className="min-h-64">
+          <EmptyHeader>
+            <EmptyTitle>No bundles deployed here yet</EmptyTitle>
+            <EmptyDescription>
+              Release health follows the bundle deployments of the selected
+              channel and health platform. Deploy one, or choose another in the
+              filters.
+            </EmptyDescription>
+          </EmptyHeader>
+          {reset ? <EmptyContent>{reset}</EmptyContent> : null}
+        </Empty>
+      );
+    }
+    if (loaded.length === 0) {
+      return failed ? (
+        <InsightsErrorAlert
+          error={failed}
+          fallbackTitle="Release health unavailable"
+        />
       ) : (
-        <>
-          <div>
-            <p className="mb-2 text-right text-xs text-muted-foreground">
-              {metric === "active"
-                ? "Installations"
-                : "Recovered installations per interval"}{" "}
-              · UTC
-            </p>
-            <ChartContainer
-              aria-label={`${metric === "active" ? "Active" : "Rollback"} trend for all reported bundle IDs`}
-              className="h-48 w-full aspect-auto sm:h-56"
-              config={config}
-            >
-              <LineChart
-                accessibilityLayer
-                data={data}
-                margin={{ left: -12, right: 12, top: 8 }}
+        <Skeleton aria-label="Loading release health" className="h-64" />
+      );
+    }
+    if (
+      loaded.every(
+        (bundle) =>
+          seriesOf(bundle)!.total === 0 &&
+          (chart !== "adoption" || bundle.downloaded!.total === 0),
+      )
+    ) {
+      return chart === "adoption" ? (
+        <Empty className="min-h-48">
+          <EmptyHeader>
+            <EmptyTitle>
+              No installation downloaded or launched these bundles in the last{" "}
+              {lengthOf(period.durationMs)}
+            </EmptyTitle>
+            <EmptyDescription>
+              {wider
+                ? "Choose a longer period, or refresh after apps download them."
+                : "Refresh after apps download them."}
+            </EmptyDescription>
+          </EmptyHeader>
+          {wider ? (
+            <EmptyContent>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onWindowChange(wider)}
               >
-                <CartesianGrid vertical={false} />
-                <XAxis
-                  axisLine={false}
-                  dataKey="startMs"
-                  minTickGap={40}
-                  tickFormatter={formatTick}
-                  tickLine={false}
-                />
-                <YAxis
-                  allowDecimals={false}
-                  axisLine={false}
-                  tickLine={false}
-                  width={48}
-                />
-                <ChartTooltip
-                  content={
-                    <ChartTooltipContent
-                      className="max-h-64 max-w-[calc(100vw-3rem)] overflow-auto"
-                      labelFormatter={(_, payload) =>
-                        `${times.format(payload[0]?.payload.startMs)} · UTC`
-                      }
-                    />
-                  }
-                />
-                {report.series.map((series, index) => (
-                  <Line
-                    key={series.releaseId}
-                    dataKey={`bundle${index}`}
-                    type="linear"
-                    stroke={`var(--color-bundle${index})`}
-                    strokeWidth={selectedId === series.releaseId ? 3 : 2}
-                    strokeOpacity={!selected || selected === series ? 1 : 0.4}
-                    strokeDasharray={
-                      dashes[Math.floor(index / colors.length) % dashes.length]
-                    }
-                    dot={{ r: 2 }}
-                    activeDot={{ r: 4 }}
-                    isAnimationActive={false}
-                  />
-                ))}
-              </LineChart>
-            </ChartContainer>
-          </div>
-          <div
-            aria-label="Reported bundles"
-            className="grid max-h-48 grid-cols-1 gap-1 overflow-y-auto sm:grid-cols-2"
-          >
-            {report.series.map((series, index) => (
-              <button
-                type="button"
-                key={series.releaseId}
-                aria-label={`Highlight bundle ${series.releaseId}`}
-                aria-pressed={selectedId === series.releaseId}
-                title={series.releaseId}
-                onClick={() =>
-                  setSelectedId(
-                    selectedId === series.releaseId ? null : series.releaseId,
-                  )
-                }
-                className="flex min-w-0 items-center gap-2 rounded-md px-2 py-2 text-left text-xs hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-muted"
+                Show {lengthOf(wider === "7d" ? 7 * DAY : 30 * DAY)}
+              </Button>
+            </EmptyContent>
+          ) : null}
+        </Empty>
+      ) : (
+        <Empty className="min-h-48">
+          <EmptyHeader>
+            <EmptyTitle>
+              No crashes in the last {lengthOf(period.durationMs)}
+            </EmptyTitle>
+            <EmptyDescription>
+              No launch of these bundles crashed and recovered.
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      );
+    }
+    return (
+      <ComparedBundlesChart
+        period={period}
+        lines={releases.map((bundle) => ({
+          release: bundle.release,
+          points: seriesOf(bundle)?.points,
+          ...(chart === "adoption"
+            ? { dashed: bundle.downloaded?.points }
+            : {}),
+          measuredAtMs: seriesOf(bundle)?.measuredAtMs,
+        }))}
+        colorOf={colorOf}
+        active={active}
+        names={
+          chart === "adoption"
+            ? { solid: "Launched", dashed: "Downloaded" }
+            : { solid: "Crashed" }
+        }
+        label={
+          chart === "adoption"
+            ? "Installations downloading (dashed) and launching (solid) each bundle per interval"
+            : "Crashes of each bundle per interval"
+        }
+      />
+    );
+  })();
+
+  return (
+    <section aria-label="Release health">
+      <Card className="min-w-0 overflow-hidden shadow-sm">
+        <CardHeader className="flex flex-col gap-4 p-6">
+          <div className="flex flex-wrap items-center justify-between gap-4">
+            <CardTitle>Release health</CardTitle>
+            <div className="flex items-center gap-2">
+              <InsightsPeriodSelector
+                window={input.window}
+                onWindowChange={onWindowChange}
+              />
+              <Button
+                aria-label="Refresh release health"
+                variant="ghost"
+                size="icon-lg"
+                disabled={health.isFetching}
+                onClick={health.refresh}
               >
-                <svg
+                <RotateCw
                   aria-hidden="true"
-                  width="20"
-                  height="8"
-                  className="shrink-0"
-                >
-                  <line
-                    x1="0"
-                    x2="20"
-                    y1="4"
-                    y2="4"
-                    stroke={colors[index % colors.length]}
-                    strokeWidth="2"
-                    strokeDasharray={
-                      dashes[Math.floor(index / colors.length) % dashes.length]
-                    }
-                  />
-                </svg>
-                <span className="min-w-0 truncate font-mono">
-                  {series.releaseId}
-                </span>
-                {series.points.some((point) => point.spike) ? (
-                  <TriangleAlert
-                    aria-label="Rollback spike"
-                    className="size-3 shrink-0"
-                  />
-                ) : null}
-                <span className="ml-auto tabular-nums">
-                  {(metric === "active"
-                    ? series.activeInstallations
-                    : series.recoveredInstallations
-                  ).toLocaleString()}
-                </span>
-              </button>
-            ))}
+                  className={cn(
+                    health.isFetching && "motion-safe:animate-spin",
+                  )}
+                />
+              </Button>
+            </div>
           </div>
-          {selected ? (
-            <div className="flex flex-wrap items-center justify-between gap-3 border-t pt-3">
-              <div className="min-w-0 flex-1">
-                <p className="break-all font-mono text-xs">
-                  {selected.releaseId}
-                </p>
-                <p className="mt-1 text-xs text-muted-foreground">
-                  Active {selected.activeInstallations.toLocaleString()} ·
-                  Rollback {selected.recoveredInstallations.toLocaleString()} in
-                  this period
-                </p>
-                {metric === "rollback" && lastSpike ? (
-                  <p className="mt-2 flex items-center gap-2 text-xs">
-                    <TriangleAlert
-                      className="size-3 shrink-0"
-                      aria-hidden="true"
-                    />
-                    Rollback spike on {dates.format(lastSpike.startMs)}. Review
-                    this bundle’s delivery settings.
-                  </p>
-                ) : null}
-              </div>
-              <Link
-                className={buttonVariants({ variant: "outline", size: "sm" })}
-                to="/"
-                search={{ releaseId: selected.releaseId }}
+        </CardHeader>
+        <CardContent
+          aria-busy={health.isFetching}
+          className="flex flex-col gap-5 px-6 pb-6"
+        >
+          <Tabs
+            value={chart}
+            onValueChange={(value) => onChartChange(value as HealthChart)}
+            className="gap-5"
+          >
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <TabsList
+                aria-label="Release health chart"
+                className="min-h-11 sm:min-h-9"
               >
-                Review bundle
-                <ArrowUpRight aria-hidden="true" />
-              </Link>
+                <TabsTrigger value="adoption" className="px-3">
+                  Adoption
+                </TabsTrigger>
+                <TabsTrigger value="crashes" className="px-3">
+                  Crashes
+                  {flagged.length > 0 ? (
+                    <>
+                      <TriangleAlert
+                        aria-hidden="true"
+                        className="text-destructive"
+                      />
+                      <span className="sr-only">, rollback recommended</span>
+                    </>
+                  ) : null}
+                </TabsTrigger>
+              </TabsList>
+              {reset}
             </div>
-          ) : null}
-          <details className="text-xs text-muted-foreground">
-            <summary className="cursor-pointer">View chart data</summary>
-            <div className="mt-2 max-h-64 overflow-auto">
-              <table className="w-full text-left">
-                <caption className="sr-only">
-                  {metric === "active"
-                    ? "Active installations"
-                    : "Recovered installations"}{" "}
-                  by bundle ID, UTC
-                </caption>
-                <thead>
-                  <tr>
-                    <th scope="col" className="pr-4">
-                      Date (UTC)
-                    </th>
-                    {report.series.map((series) => (
-                      <th
-                        scope="col"
-                        className="px-2 font-mono"
-                        key={series.releaseId}
-                      >
-                        {series.releaseId}
-                      </th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {data.map((point, i) => (
-                    <tr key={point.startMs}>
-                      <th
-                        scope="row"
-                        className="whitespace-nowrap pr-4 font-normal"
+            <TabsContent value="adoption" className="flex flex-col gap-4">
+              {heading}
+              {chart === "adoption" ? body : null}
+            </TabsContent>
+            <TabsContent value="crashes" className="flex flex-col gap-4">
+              {flagged.map((bundle) => (
+                <Alert key={bundle.release.releaseId} variant="destructive">
+                  <TriangleAlert aria-hidden="true" />
+                  <AlertTitle>
+                    Roll back{" "}
+                    <BundleIdDisplay
+                      bundleId={bundle.release.releaseId}
+                      className="text-sm"
+                    />
+                  </AlertTitle>
+                  <AlertDescription className="flex flex-col items-start gap-3">
+                    It crashed for {percent(bundle.rate)} of the installations
+                    that tried it ({bundle.crashes.toLocaleString()} of{" "}
+                    {bundle.attempts.toLocaleString()}), above{" "}
+                    {percent(CRASH_RATE_THRESHOLD)}.
+                    <RollbackButton
+                      release={bundle.release}
+                      rate={bundle.rate}
+                      crashes={bundle.crashes}
+                      attempts={bundle.attempts}
+                    />
+                  </AlertDescription>
+                </Alert>
+              ))}
+              {heading}
+              {chart === "crashes" ? body : null}
+            </TabsContent>
+          </Tabs>
+          {releases !== undefined && releases.length > 0 ? (
+            <>
+              {failed && loaded.length > 0 ? (
+                <InsightsErrorAlert
+                  error={failed}
+                  fallbackTitle="Some bundles could not be read"
+                />
+              ) : null}
+              <Table aria-label="Compared bundles">
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Bundle</TableHead>
+                    {chart === "adoption" ? (
+                      <>
+                        <TableHead className="text-right">Downloaded</TableHead>
+                        <TableHead className="text-right">Launched</TableHead>
+                      </>
+                    ) : (
+                      <>
+                        <TableHead className="text-right">Crashed</TableHead>
+                        <TableHead className="text-right">Crash rate</TableHead>
+                      </>
+                    )}
+                    <TableHead className="w-10">
+                      <span className="sr-only">Remove</span>
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {releases.map((bundle) => {
+                    const { release } = bundle;
+                    const crashes = crashesOf(bundle);
+                    return (
+                      <TableRow
+                        key={release.releaseId}
+                        data-state={
+                          active === release.releaseId ? "selected" : undefined
+                        }
+                        onMouseEnter={() => setActive(release.releaseId)}
+                        onMouseLeave={() => setActive(null)}
+                        onFocus={() => setActive(release.releaseId)}
+                        onBlur={() => setActive(null)}
                       >
-                        {times.format(point.startMs)}
-                      </th>
-                      {report.series.map((series) => (
-                        <td
-                          className="px-2 tabular-nums"
-                          key={series.releaseId}
+                        {/* The bundle cell takes the room left, and wraps in it. */}
+                        <TableCell className="w-full max-w-0 whitespace-normal">
+                          <div className="flex min-w-0 items-center gap-2 sm:gap-3">
+                            {/* Narrower on a phone, so a bundle's ID keeps more of the row. */}
+                            <svg
+                              aria-hidden="true"
+                              className="h-3 w-4 shrink-0 sm:w-6"
+                              viewBox="0 0 24 12"
+                              preserveAspectRatio="none"
+                            >
+                              <line
+                                x1="0"
+                                y1="6"
+                                x2="24"
+                                y2="6"
+                                stroke={colorOf(release.releaseId)}
+                                strokeWidth="3"
+                              />
+                            </svg>
+                            <div className="flex min-w-0 flex-col">
+                              <span className="flex min-w-0 items-center gap-2">
+                                <BundleIdDisplay
+                                  bundleId={release.releaseId}
+                                  className="min-w-0"
+                                />
+                                {release.enabled ? null : (
+                                  <Badge variant="outline">Disabled</Badge>
+                                )}
+                              </span>
+                              <span className="text-xs break-words text-muted-foreground">
+                                Deployed{" "}
+                                {formatDeployedAt(release.deployedAtMs)}
+                                {release.targetAppVersion
+                                  ? ` · ${release.targetAppVersion}`
+                                  : ""}
+                              </span>
+                            </div>
+                          </div>
+                        </TableCell>
+                        {chart === "adoption" ? (
+                          <>
+                            <TableCell className="text-right whitespace-nowrap tabular-nums">
+                              {bundle.downloaded?.total.toLocaleString() ?? "—"}
+                            </TableCell>
+                            <TableCell className="text-right font-medium whitespace-nowrap tabular-nums">
+                              {bundle.launched?.total.toLocaleString() ?? "—"}
+                            </TableCell>
+                          </>
+                        ) : (
+                          <>
+                            <TableCell className="text-right whitespace-nowrap tabular-nums">
+                              {crashes === undefined ? (
+                                "—"
+                              ) : crashes.crashes === 0 ? (
+                                <span className="text-muted-foreground">0</span>
+                              ) : (
+                                crashes.crashes.toLocaleString()
+                              )}
+                            </TableCell>
+                            <TableCell className="text-right whitespace-nowrap tabular-nums">
+                              {crashes === undefined ||
+                              crashes.attempts === 0 ? (
+                                "—"
+                              ) : crashes.recommended ? (
+                                <span className="inline-flex items-center gap-1 font-medium text-destructive">
+                                  <TriangleAlert
+                                    aria-hidden="true"
+                                    className="size-3.5"
+                                  />
+                                  {percent(crashes.rate)}
+                                  <span className="sr-only">
+                                    , rollback recommended
+                                  </span>
+                                </span>
+                              ) : (
+                                <span
+                                  className={cn(
+                                    crashes.attempts < CRASH_MIN_ATTEMPTS &&
+                                      "text-muted-foreground",
+                                  )}
+                                  title={
+                                    crashes.attempts < CRASH_MIN_ATTEMPTS
+                                      ? `Only ${crashes.attempts} installations tried it`
+                                      : undefined
+                                  }
+                                >
+                                  {percent(crashes.rate)}
+                                </span>
+                              )}
+                            </TableCell>
+                          </>
+                        )}
+                        <TableCell>
+                          <Button
+                            aria-label={`Remove ${release.releaseId}`}
+                            variant="ghost"
+                            size="icon-xs"
+                            onClick={() => remove(release.releaseId)}
+                          >
+                            <X aria-hidden="true" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+              {addable.length > 0 ? (
+                <Select
+                  items={Object.fromEntries(
+                    addable.map((candidate) => [
+                      candidate.releaseId,
+                      `${candidate.releaseId} · ${formatDeployedAt(candidate.deployedAtMs)}`,
+                    ]),
+                  )}
+                  value={null}
+                  disabled={full}
+                  onValueChange={(value) => {
+                    if (value !== null) onReleasesChange([...ids, value]);
+                  }}
+                >
+                  <SelectTrigger
+                    aria-label="Add a bundle"
+                    className="min-h-11 w-full sm:min-h-9 sm:w-80"
+                  >
+                    <SelectValue
+                      placeholder={
+                        full
+                          ? `Up to ${MAX_ADOPTION_RELEASES} bundles`
+                          : "Add a bundle"
+                      }
+                    />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      {addable.map((candidate) => (
+                        <SelectItem
+                          key={candidate.releaseId}
+                          value={candidate.releaseId}
                         >
-                          {(metric === "active"
-                            ? series.points[i].active
-                            : series.points[i].recoveredInstallations) ?? "—"}
-                        </td>
+                          <span className="flex min-w-0 flex-col gap-0.5">
+                            <BundleIdDisplay bundleId={candidate.releaseId} />{" "}
+                            <span className="text-xs text-muted-foreground">
+                              Deployed{" "}
+                              {formatDeployedAt(candidate.deployedAtMs)}
+                            </span>
+                          </span>
+                        </SelectItem>
                       ))}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </details>
-        </>
-      )}
-    </>
-  );
-}
-
-export function InsightsOverview({ input }: { readonly input: RecoveryInput }) {
-  const query = useQuery({
-    queryKey: ["rollout-activity", input],
-    queryFn: () => getRecoveryReportRpc({ data: input }),
-    staleTime: 30_000,
-  });
-  return (
-    <Card className="min-w-0 overflow-hidden shadow-sm">
-      <CardHeader className="flex-row items-center justify-between gap-4 px-4 pt-4 pb-2 sm:px-6 sm:pt-6">
-        <CardTitle className="text-sm font-medium">
-          Bundle activity ·{" "}
-          {input.window === "30d"
-            ? "30 days"
-            : input.window === "7d"
-              ? "7 days"
-              : "24 hours"}
-        </CardTitle>
-        <Button
-          aria-label="Refresh bundle activity"
-          variant="ghost"
-          size="icon-sm"
-          disabled={query.isFetching}
-          onClick={() => void query.refetch()}
-        >
-          <RotateCw aria-hidden="true" />
-        </Button>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4 px-4 pb-4 sm:px-6 sm:pb-6">
-        {query.isPending ? (
-          <Skeleton
-            aria-label="Loading bundle activity"
-            className="h-64 w-full"
-          />
-        ) : query.error ? (
-          <InsightsErrorAlert
-            error={query.error}
-            fallbackTitle="Bundle activity unavailable"
-          />
-        ) : query.data ? (
-          <ActivityChart key={JSON.stringify(input)} report={query.data} />
-        ) : null}
-      </CardContent>
-      {query.data && !query.error ? (
-        <CardFooter className="flex-col items-start gap-2 border-t bg-muted/15 px-4 py-3 text-xs text-muted-foreground sm:px-6">
-          <p>
-            Active follows each installation’s last reported ID in this period.
-            Rollbacks count installations recovered from each ID per interval.
-          </p>
-          {query.data.unattributedInstallations > 0 ? (
-            <p>
-              {query.data.unattributedInstallations.toLocaleString()} reporting
-              installations have no observed bundle ID and are excluded.
-            </p>
-          ) : null}
-          {query.data.truncated ? (
-            <p>
-              Partial history — only reports since{" "}
-              {times.format(query.data.sinceMs)} UTC are included. Choose a
-              shorter period to see more complete counts.
-            </p>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              ) : null}
+            </>
           ) : null}
+        </CardContent>
+        <CardFooter className="flex items-center justify-end border-t px-6 py-5">
+          <Link
+            className={buttonVariants({ variant: "outline", size: "sm" })}
+            to="/installations"
+          >
+            <ListIcon aria-hidden="true" />
+            Event history
+          </Link>
         </CardFooter>
-      ) : null}
-    </Card>
+      </Card>
+    </section>
   );
 }