@hot-updater/console 1.0.0-rc.9 → 1.0.0

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

@@ -1,8 +1,10 @@
 import { Link } from "@tanstack/react-router";
-import { ArrowUpRight, ListIcon, 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,
@@ -12,432 +14,628 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart";
-import { ScrollArea } from "@/components/ui/scroll-area";
+  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 {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import type { RecoveryInput, RecoveryReport } from "@/lib/insights-recovery";
+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,
-  );
-  const config = Object.fromEntries(
-    report.series.map((series, index) => [
-      `bundle${index}`,
-      {
-        label: series.releaseId,
-        color: colors[index % colors.length],
-      },
-    ]),
-  );
-  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;
+/** 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 (
-    <Tabs
-      value={metric}
-      onValueChange={(value) => {
-        if (value === "active" || value === "rollback") setMetric(value);
-      }}
-      className="gap-6"
+    <svg
+      aria-hidden="true"
+      className="h-3 w-6 shrink-0"
+      viewBox="0 0 24 12"
+      preserveAspectRatio="none"
     >
-      <TabsList
-        aria-label="Activity metric"
-        variant="line"
-        className="min-h-11 sm:min-h-9"
-      >
-        <TabsTrigger className="min-w-24 px-4" value="active">
-          Active
-        </TabsTrigger>
-        <TabsTrigger className="min-w-24 px-4" value="rollback">
-          Rollback
-        </TabsTrigger>
-      </TabsList>
-      <TabsContent value={metric} className="flex flex-col gap-4">
-        <div className="flex items-baseline gap-3">
-          <p className="text-4xl font-semibold tracking-tight tabular-nums">
-            {total.toLocaleString()}
-          </p>
-          <p className="text-sm text-muted-foreground">
-            {metric === "active"
-              ? "Active installations"
-              : "Bundles with rollbacks"}
-          </p>
-        </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>
-        ) : (
-          <>
-            <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-56 w-full aspect-auto sm:h-64"
-                config={config}
-              >
-                <LineChart
-                  accessibilityLayer
-                  data={data}
-                  margin={{ left: -12, right: 12, top: 8 }}
-                >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                    tick={{ fill: "var(--muted-foreground)" }}
-                    axisLine={false}
-                    dataKey="startMs"
-                    minTickGap={40}
-                    tickFormatter={formatTick}
-                    tickLine={false}
-                  />
-                  <YAxis
-                    tick={{ fill: "var(--muted-foreground)" }}
-                    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>
-            <ScrollArea
-              aria-label="Reported bundles"
-              className="min-w-0 [&_[data-slot=scroll-area-viewport]]:max-h-48"
-            >
-              <div
-                className={cn(
-                  "grid grid-cols-1 gap-1 pr-3",
-                  report.series.length > 1 && "xl: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"
-                  >
-                    <svg
-                      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>
-                ))}
-              </div>
-            </ScrollArea>
-            {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 }}
-                >
-                  Review bundle
-                  <ArrowUpRight aria-hidden="true" />
-                </Link>
-              </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"
-                        >
-                          {times.format(point.startMs)}
-                        </th>
-                        {report.series.map((series) => (
-                          <td
-                            className="px-2 tabular-nums"
-                            key={series.releaseId}
-                          >
-                            {(metric === "active"
-                              ? series.points[i].active
-                              : series.points[i].recoveredInstallations) ?? "—"}
-                          </td>
-                        ))}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </details>
-          </>
-        )}
-      </TabsContent>
-    </Tabs>
+      <line
+        x1="0"
+        y1="6"
+        x2="24"
+        y2="6"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeDasharray={dashed ? "6 4" : undefined}
+      />
+    </svg>
   );
 }
 
+/**
+ * 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,
-  query,
-  onRefresh,
 }: {
   readonly input: RecoveryInput;
-  readonly query: {
-    readonly data: RecoveryReport | undefined;
-    readonly error: Error | null;
-    readonly isPending: boolean;
-    readonly isFetching: boolean;
-  };
-  readonly onRefresh: () => void;
+  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;
 }) {
-  return (
-    <Card
-      aria-label="Bundle activity"
-      className="min-w-0 overflow-hidden shadow-sm"
-      role="region"
+  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 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)}
     >
-      <CardHeader className="flex-row flex-wrap items-center justify-between gap-4 p-6">
-        <CardTitle>Bundle activity</CardTitle>
-        <div className="flex w-full items-center justify-between gap-4 sm:w-auto">
-          <InsightsPeriodSelector
-            window={input.window}
-            onWindowChange={onWindowChange}
-          />
-          <Button
-            aria-label="Refresh bundle activity"
-            className="size-11 sm:size-9"
-            variant="ghost"
-            size="icon-lg"
-            disabled={query.isFetching}
-            onClick={onRefresh}
-          >
-            <RotateCw aria-hidden="true" />
-          </Button>
+      <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>
-      </CardHeader>
-      <CardContent className="px-6 pb-6">
-        {query.isPending ? (
-          <Skeleton
-            aria-label="Loading bundle activity"
-            className="h-80 w-full"
-          />
-        ) : query.error ? (
-          <InsightsErrorAlert
-            error={query.error}
-            fallbackTitle="Bundle activity unavailable"
-          />
-        ) : query.data ? (
-          <ActivityChart key={JSON.stringify(input)} report={query.data} />
-        ) : null}
-      </CardContent>
-      <CardFooter className="flex-wrap items-center justify-between gap-4 border-t px-6 py-5">
-        <div className="flex min-w-0 basis-64 flex-1 flex-col gap-2 text-xs text-muted-foreground">
-          {query.data && !query.error ? (
+        <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>
+      </div>
+    ) : (
+      <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"
+        />
+      ) : (
+        <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)}
+              >
+                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}
+              >
+                <RotateCw
+                  aria-hidden="true"
+                  className={cn(
+                    health.isFetching && "motion-safe:animate-spin",
+                  )}
+                />
+              </Button>
+            </div>
+          </div>
+        </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"
+              >
+                <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>
+            <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 ? (
             <>
-              <p>
-                Active follows each installation’s last reported ID in this
-                period. Rollbacks count recovered installations per interval.
-              </p>
-              {query.data.unattributedInstallations > 0 ? (
-                <p>
-                  {query.data.unattributedInstallations.toLocaleString()}{" "}
-                  reporting installations have no observed bundle ID and are
-                  excluded.
-                </p>
+              {failed && loaded.length > 0 ? (
+                <InsightsErrorAlert
+                  error={failed}
+                  fallbackTitle="Some bundles could not be read"
+                />
               ) : 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>
+              <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)}
+                      >
+                        {/* 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}
+                        >
+                          <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>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
               ) : null}
             </>
-          ) : (
-            <p>Browse individual reports in the event log.</p>
-          )}
-        </div>
-        <Link
-          className={cn(
-            buttonVariants({
-              className: "h-11 px-4 sm:h-9",
-              size: "lg",
-              variant: "outline",
-            }),
-          )}
-          to="/installations"
-        >
-          <ListIcon aria-hidden="true" data-icon="inline-start" />
-          All events
-        </Link>
-      </CardFooter>
-    </Card>
+          ) : 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>
+      </Card>
+    </section>
   );
 }