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

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

@@ -1,203 +1,392 @@
+import { useQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
-import { ArrowUpRight } from "lucide-react";
+import { ArrowUpRight, RotateCw, TriangleAlert } from "lucide-react";
+import { useState } from "react";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
 
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
   Card,
   CardContent,
-  CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
 import { Skeleton } from "@/components/ui/skeleton";
-import type { ReportingInstallations } from "@/lib/insights-api";
-import { outcomeLabels } from "@/lib/insights-view";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import type { RecoveryInput, RecoveryReport } from "@/lib/insights-recovery";
+import { getRecoveryReportRpc } from "@/lib/insights-recovery-rpc";
 
-import { EventTimestamp, useInsightsTimeFormat } from "./EventDetails";
-import type { InsightsReportSelection } from "./InsightsBundleReports";
 import { InsightsErrorAlert } from "./InsightsErrorAlert";
 
-type InsightsOverviewProps =
-  | { readonly status: "loading" }
-  | { readonly status: "error"; readonly error: Error }
-  | {
-      readonly status: "success";
-      readonly active: ReportingInstallations;
-      readonly onOutcomeSelect: (selection: InsightsReportSelection) => void;
-    };
-
-const windowCopy = {
-  "24h": "the last 24 hours",
-  "7d": "the last 7 days",
-  "30d": "the last 30 days",
-} as const;
-
-export function InsightsOverview(props: InsightsOverviewProps) {
-  const dateTimeFormat = useInsightsTimeFormat();
-
-  if (props.status === "loading") {
-    return (
-      <Card aria-label="Loading reporting installations" className="shadow-sm">
-        <CardHeader className="px-4 pt-4 pb-2 sm:px-6 sm:pt-6">
-          <Skeleton className="h-4 w-40" />
-          <Skeleton className="h-3 w-full max-w-md" />
-        </CardHeader>
-        <CardContent className="px-4 pb-6 sm:px-6">
-          <Skeleton className="h-12 w-28" />
-        </CardContent>
-        <CardFooter className="border-t px-4 py-3 sm:px-6">
-          <Skeleton className="h-8 w-full max-w-sm" />
-        </CardFooter>
-      </Card>
-    );
-  }
-
-  if (props.status === "error") {
-    return (
-      <InsightsErrorAlert
-        error={props.error}
-        fallbackTitle="Reporting installations unavailable"
-      />
-    );
-  }
-
-  const { active } = props;
-  const bundle = active.bundle;
+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"];
 
+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;
   return (
-    <section
-      aria-labelledby="reporting-installations-heading"
-      className="flex flex-col gap-4"
-    >
-      <Card className="min-w-0 overflow-hidden shadow-sm">
-        <CardHeader className="gap-2 px-4 pt-4 pb-2 sm:px-6 sm:pt-6">
-          <CardTitle className="text-sm font-medium">
-            <h2 id="reporting-installations-heading">
-              Reporting installations
-            </h2>
-          </CardTitle>
-          <CardDescription>
-            {active.platform === "ios" ? "iOS" : "Android"} · {active.channel} ·{" "}
-            {windowCopy[active.window]}. Installations are counted by their last
-            report received.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="px-4 pt-2 pb-5 sm:px-6 sm:pb-6">
-          <p className="text-4xl font-semibold tracking-tight tabular-nums sm:text-5xl">
-            {active.reportingInstallations.count.toLocaleString()}
+    <>
+      <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>
-        </CardContent>
-        <CardFooter className="flex flex-wrap items-center justify-between gap-3 border-t bg-muted/15 px-4 py-3 sm:px-6">
-          <dl className="min-w-0 text-xs">
-            <dt className="text-muted-foreground">Measured at</dt>
-            <dd className="font-medium tabular-nums">
-              <EventTimestamp
-                formatter={dateTimeFormat}
-                touch
-                value={active.reportingInstallations.measuredAtMs}
-              />
-            </dd>
-          </dl>
-          <Link
-            className={buttonVariants({
-              className: "h-11 px-3 lg:h-8",
-              variant: "outline",
-            })}
-            to="/installations"
-          >
-            View events
-            <ArrowUpRight aria-hidden="true" data-icon="inline-end" />
-          </Link>
-        </CardFooter>
-      </Card>
-      {bundle ? (
-        <Card className="min-w-0 overflow-hidden shadow-sm">
-          <CardHeader>
-            <CardTitle>Selected bundle</CardTitle>
-            <CardDescription className="break-all">
-              {bundle.bundleId}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <dl className="flex flex-col gap-5">
-              <div className="flex flex-wrap items-center justify-between gap-3">
-                <div>
-                  <dt className="text-sm">Selected bundle installations</dt>
-                  <dd className="mt-1 text-2xl font-semibold tabular-nums">
-                    {bundle.reportingInstallations.count.toLocaleString()}
-                  </dd>
-                </div>
-                <div className="text-xs text-muted-foreground">
-                  Measured at{" "}
-                  <EventTimestamp
-                    formatter={dateTimeFormat}
-                    touch
-                    value={bundle.reportingInstallations.measuredAtMs}
+          <p className="mt-1 text-4xl font-semibold tracking-tight tabular-nums">
+            {total.toLocaleString()}
+          </p>
+        </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>
+      ) : (
+        <>
+          <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 }}
+              >
+                <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}
                   />
-                </div>
-              </div>
-              {(
-                [
-                  ["applied", bundle.appliedReports],
-                  ["recovered", bundle.recoveredReports],
-                  ["adopted", bundle.adoptedReports],
-                ] as const
-              ).map(([outcome, measurement]) => (
-                <div
-                  className="flex flex-wrap items-center justify-between gap-3"
-                  key={outcome}
+                ))}
+              </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"
+              >
+                <svg
+                  aria-hidden="true"
+                  width="20"
+                  height="8"
+                  className="shrink-0"
                 >
-                  <div>
-                    <dt className="text-sm">{outcomeLabels[outcome]}</dt>
-                    <dd className="mt-1 text-2xl font-semibold tabular-nums">
-                      {measurement.count.toLocaleString()}
-                    </dd>
-                    <div className="mt-1 text-xs text-muted-foreground">
-                      Measured at{" "}
-                      <EventTimestamp
-                        formatter={dateTimeFormat}
-                        touch
-                        value={measurement.measuredAtMs}
-                      />
-                    </div>
-                  </div>
-                  <Button
-                    className="h-11 lg:h-8"
-                    variant="outline"
-                    onClick={() =>
-                      props.onOutcomeSelect({
-                        bundle: {
-                          platform: active.platform,
-                          channel: active.channel,
-                          bundleId: bundle.bundleId,
-                          outcome,
-                        },
-                        sinceMs: active.sinceMs,
-                        beforeReceivedAtMs: active.beforeReceivedAtMs,
-                      })
+                  <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]
                     }
-                  >
-                    View {outcome} reports
-                    <ArrowUpRight aria-hidden="true" data-icon="inline-end" />
-                  </Button>
-                </div>
-              ))}
-            </dl>
-          </CardContent>
-          <CardFooter>
-            <p className="text-xs text-muted-foreground">
-              Installation counts are independent live measurements. Outcome
-              counts are accepted reports, not unique devices or update
-              attempts. Recovery reports identify the bundle recovered from.
+                  />
+                </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>
+          {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>
+        </>
+      )}
+    </>
+  );
+}
+
+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>
-          </CardFooter>
-        </Card>
+          ) : null}
+        </CardFooter>
       ) : null}
-      <p className="text-xs text-muted-foreground">
-        Offline installations, opt-outs, and reports that did not reach the
-        server are absent.
-      </p>
-    </section>
+    </Card>
   );
 }

package/src/components/features/releases/ReleaseEditorSheet.tsx

@@ -15,6 +15,7 @@ import { toast } from "sonner";
 import { normalizeRange } from "verkit";
 
 import { BundleIdDisplay } from "@/components/BundleIdDisplay";
+import { BundleInsightsSummary } from "@/components/features/bundles/BundleInsightsSummary";
 import { BundleMetadata } from "@/components/features/bundles/BundleMetadata";
 import { RolloutCohortsDialog } from "@/components/features/bundles/RolloutCohortsDialog";
 import { PlatformIcon } from "@/components/PlatformIcon";
@@ -408,6 +409,15 @@ export function ReleaseEditorSheet({
 
             {release && draft ? (
               <div className="flex flex-col gap-6 px-4 pb-4 sm:px-6 sm:pb-6">
+                {channelName ? (
+                  <BundleInsightsSummary
+                    input={{
+                      platform: release.platform,
+                      channel: channelName,
+                      releaseId: release.id,
+                    }}
+                  />
+                ) : null}
                 <section
                   aria-labelledby="delivery-settings-heading"
                   className="flex flex-col gap-4"