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

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

@@ -0,0 +1,319 @@
+import { ChevronDown, RotateCw } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  checkFailureRate,
+  failureDetailParts,
+  failureRate,
+  failureReasonLabel,
+  failureStageLabel,
+  formatRate,
+  type InsightsFailureBreakdown,
+  patchFallbackRate,
+  type UpdateFailuresReport,
+} from "@/lib/insights-failures";
+
+import { EstimatedCount } from "./EstimatedCount";
+import { InsightsErrorAlert } from "./InsightsErrorAlert";
+import { InsightsInfo } from "./InsightsInfo";
+
+const share = (events: number, total: number) =>
+  total === 0 ? "—" : `${((events / total) * 100).toFixed(1)}%`;
+
+function Metric({
+  label,
+  info,
+  children,
+}: {
+  readonly label: string;
+  readonly info?: ReactNode;
+  readonly children: ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-1">
+      <dt className="flex items-center gap-1 text-sm text-muted-foreground">
+        {label}
+        {info ? (
+          <InsightsInfo label={`About ${label.toLowerCase()}`}>
+            {info}
+          </InsightsInfo>
+        ) : null}
+      </dt>
+      <dd className="text-3xl font-semibold tracking-tight tabular-nums">
+        {children}
+      </dd>
+    </div>
+  );
+}
+
+/** One stage and reason, and what else its clients knew, most first. */
+function FailureRow({
+  failure,
+  total,
+}: {
+  readonly failure: InsightsFailureBreakdown;
+  readonly total: number;
+}) {
+  const label = `${failureStageLabel(failure.stage)} · ${failureReasonLabel(failure.reason)}`;
+  return (
+    <TableRow className="[&>td]:px-4 [&>td]:py-3 [&>td]:align-top sm:[&>td]:px-6">
+      <TableCell className="whitespace-normal">
+        <details className="group/failure">
+          <summary className="flex cursor-pointer list-none items-center gap-1 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/30 [&::-webkit-details-marker]:hidden">
+            <span className="font-medium">{label}</span>
+            <ChevronDown
+              aria-hidden="true"
+              className="size-3 text-muted-foreground group-open/failure:rotate-180"
+            />
+          </summary>
+          <ul
+            aria-label={`${label} details`}
+            className="mt-2 flex flex-col gap-1 text-xs text-muted-foreground"
+          >
+            {failure.details.map((detail) => {
+              const parts = failureDetailParts(detail);
+              return (
+                <li
+                  key={JSON.stringify(detail)}
+                  className="flex justify-between gap-4"
+                >
+                  <span className="wrap-anywhere">
+                    {parts.length === 0
+                      ? "No details reported"
+                      : parts.join(" · ")}
+                  </span>
+                  <span className="tabular-nums">
+                    {detail.events.toLocaleString()}
+                  </span>
+                </li>
+              );
+            })}
+          </ul>
+        </details>
+      </TableCell>
+      <TableCell className="text-right tabular-nums">
+        {failure.events.toLocaleString()}
+      </TableCell>
+      <TableCell className="text-right tabular-nums text-muted-foreground">
+        {share(failure.events, total)}
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function Recoveries({
+  recoveries,
+}: {
+  readonly recoveries: NonNullable<UpdateFailuresReport["recoveries"]>;
+}) {
+  const known = recoveries.byExitReason.reduce(
+    (sum, { events }) => sum + events,
+    0,
+  );
+  const unreported = Math.max(0, recoveries.failedLaunches - known);
+  const reasons = [
+    ...recoveries.byExitReason.map(({ exitReason, events }) => ({
+      name: exitReason,
+      code: true,
+      events,
+    })),
+    ...(unreported > 0
+      ? [{ name: "Not reported", code: false, events: unreported }]
+      : []),
+  ];
+  return (
+    <section
+      aria-labelledby="recoveries-by-exit-reason"
+      className="flex flex-col gap-2"
+    >
+      <h3
+        className="flex items-center gap-1 text-sm font-medium"
+        id="recoveries-by-exit-reason"
+      >
+        Recoveries by exit reason
+        <InsightsInfo label="About exit reasons">
+          Why the crashed process exited, as Android 11 and later report it: a
+          crash, an ANR, or the system or the user closing the app. iOS and
+          older Android report none.
+        </InsightsInfo>
+      </h3>
+      {reasons.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          No recoveries in this period.
+        </p>
+      ) : (
+        <ul className="flex flex-col gap-1 text-sm">
+          {reasons.map(({ name, code, events }) => (
+            <li key={name} className="flex justify-between gap-4">
+              <span className={code ? "font-mono text-xs" : undefined}>
+                {name}
+              </span>
+              <span className="tabular-nums">
+                {events.toLocaleString()}
+                <span className="ml-2 text-muted-foreground">
+                  {share(events, recoveries.failedLaunches)}
+                </span>
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+function FailuresReport({ report }: { readonly report: UpdateFailuresReport }) {
+  const breakdown = report.breakdown ?? [];
+  const total = breakdown.reduce((sum, { events }) => sum + events, 0);
+  return (
+    <div className="flex flex-col gap-8">
+      <dl className="grid grid-cols-2 gap-5 lg:grid-cols-4">
+        <Metric label="Failed updates">
+          {report.failedUpdates.toLocaleString()}
+        </Metric>
+        <Metric
+          label="Attempt failure rate"
+          info="The failure rate of update attempts: failed download and install reports divided by those plus download reports."
+        >
+          {formatRate(failureRate(report))}
+        </Metric>
+        <Metric
+          label="Failed installations"
+          info="Distinct installations with a failed download or install, estimated: typically within about 3%. A client reports each failure at most once a UTC day."
+        >
+          <EstimatedCount value={report.failedInstallations} />
+        </Metric>
+        <Metric
+          label="Patch fallback rate"
+          info="Of the downloads that tried a patch, the share that fell back to the changed files or the full archive."
+        >
+          {formatRate(patchFallbackRate(report))}
+        </Metric>
+        {report.checks ? (
+          <>
+            <Metric label="Failed checks">
+              {report.checks.failures.toLocaleString()}
+            </Metric>
+            <Metric
+              label="Check failure rate"
+              info="Installations whose update check failed, divided by the channel's active installations; both estimated. A check the device could not send while offline is not reported."
+            >
+              {formatRate(checkFailureRate(report.checks))}
+            </Metric>
+          </>
+        ) : null}
+      </dl>
+      <section
+        aria-labelledby="failures-by-stage"
+        className="flex flex-col gap-2"
+      >
+        <h3 className="text-sm font-medium" id="failures-by-stage">
+          Failures by stage and reason
+        </h3>
+        {breakdown.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            No update failures in this period.
+          </p>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow className="[&>th]:px-4 sm:[&>th]:px-6">
+                <TableHead>Stage · reason</TableHead>
+                <TableHead className="w-24 text-right">Reports</TableHead>
+                <TableHead className="w-24 text-right">Share</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {breakdown.map((failure) => (
+                <FailureRow
+                  key={`${failure.stage} ${failure.reason}`}
+                  failure={failure}
+                  total={total}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </section>
+      {report.recoveries ? <Recoveries recoveries={report.recoveries} /> : null}
+    </div>
+  );
+}
+
+/**
+ * Update failures for Release health's scope and period: counts, rates, the
+ * stage and reason breakdown with what else the clients knew, and why
+ * crashed processes exited.
+ */
+export function UpdateFailures({
+  query,
+  onRefresh,
+}: {
+  readonly query: {
+    readonly data: UpdateFailuresReport | undefined;
+    readonly error: Error | null;
+    readonly isPending: boolean;
+    readonly isFetching: boolean;
+  };
+  readonly onRefresh: () => void;
+}) {
+  return (
+    <section aria-label="Update failures">
+      <Card className="min-w-0 overflow-hidden shadow-sm">
+        <CardHeader className="flex flex-col gap-1.5 p-6">
+          <div className="flex flex-wrap items-center justify-between gap-4">
+            <CardTitle>Update failures</CardTitle>
+            <Button
+              aria-label="Refresh update failures"
+              variant="ghost"
+              size="icon-lg"
+              disabled={query.isFetching}
+              onClick={onRefresh}
+            >
+              <RotateCw aria-hidden="true" />
+            </Button>
+          </div>
+          <CardDescription>
+            Checks, downloads, and installs that failed, for Release health's
+            scope and period.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="px-6 pb-6">
+          {query.isPending ? (
+            <Skeleton aria-label="Loading update failures" className="h-64" />
+          ) : query.error ? (
+            <InsightsErrorAlert
+              error={query.error}
+              fallbackTitle="Update failures unavailable"
+            />
+          ) : query.data ? (
+            <FailuresReport report={query.data} />
+          ) : null}
+        </CardContent>
+        {query.data?.coverage.kind === "partial" ? (
+          <CardFooter className="border-t px-6 py-5">
+            <span className="text-xs text-muted-foreground">Partial</span>
+          </CardFooter>
+        ) : null}
+      </Card>
+    </section>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { Link } from "@tanstack/react-router";
+import { ChartNoAxesCombined } from "lucide-react";
+
+import type { ConsoleFeatureUiRegistry } from "../FeatureSlots";
+import {
+  BundleInsightsSummary,
+  ReleaseFailuresSection,
+  releaseActivityColumn,
+} from "./ReleaseActivity";
+
+/**
+ * What the Insights features add: their navigation item, release activity on
+ * the Bundles page and in the release editor, and a release's download
+ * failures in the release editor, which a self-hosted server serves too.
+ */
+export const insightsFeatureUi = {
+  insights: {
+    navigation: {
+      icon: <ChartNoAxesCombined />,
+      paths: ["/insights", "/insights/distribution", "/installations"],
+      // A self-hosted server's admin API serves events, not the overview.
+      link: ({ features, onClick }) =>
+        features.insightsAnalytics ? (
+          <Link to="/insights" onClick={onClick} />
+        ) : (
+          <Link to="/installations" onClick={onClick} />
+        ),
+    },
+    releaseSection: ({ release }) => <ReleaseFailuresSection input={release} />,
+  },
+  insightsAnalytics: {
+    releaseColumn: releaseActivityColumn,
+    releaseSection: ({ release }) => <BundleInsightsSummary input={release} />,
+  },
+} satisfies ConsoleFeatureUiRegistry;

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

@@ -1,14 +1,14 @@
-import {
-  getPatchBaseBundleId,
-  INVALID_COHORT_ERROR_MESSAGE,
-  isValidCohort,
-  normalizeCohortValue,
-} from "@hot-updater/core";
 import type {
   ChannelRow,
   ReleasePolicyPatch,
   ReleaseRow,
 } from "@hot-updater/plugin-core";
+import {
+  getPatchBaseBundleId,
+  INVALID_COHORT_ERROR_MESSAGE,
+  isValidCohort,
+  normalizeCohortValue,
+} from "@hot-updater/protocol";
 import { AlertTriangle, Download, Plus, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
@@ -17,6 +17,7 @@ import { normalizeRange } from "verkit";
 import { BundleIdDisplay } from "@/components/BundleIdDisplay";
 import { BundleMetadata } from "@/components/features/bundles/BundleMetadata";
 import { RolloutCohortsDialog } from "@/components/features/bundles/RolloutCohortsDialog";
+import { ReleaseSections } from "@/components/features/FeatureSlots";
 import { PlatformIcon } from "@/components/PlatformIcon";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
@@ -203,11 +204,14 @@ function RolloutPercentageInput({
 export function ReleaseEditorSheet({
   channels,
   onOpenChange,
+  onShowScope,
   open,
   releaseId,
 }: {
   channels: readonly ChannelRow[];
   onOpenChange: (open: boolean) => void;
+  /** Lists the bundles of this release's catalog scope: its channel, platform, and target kind. */
+  onShowScope?: (scopeKey: string) => void;
   open: boolean;
   releaseId: string;
 }) {
@@ -408,6 +412,15 @@ export function ReleaseEditorSheet({
 
             {release && draft ? (
               <div className="flex flex-col gap-6 px-4 pb-4 sm:px-6 sm:pb-6">
+                {channelName ? (
+                  <ReleaseSections
+                    release={{
+                      platform: release.platform,
+                      channel: channelName,
+                      releaseId: release.id,
+                    }}
+                  />
+                ) : null}
                 <section
                   aria-labelledby="delivery-settings-heading"
                   className="flex flex-col gap-4"
@@ -614,7 +627,7 @@ export function ReleaseEditorSheet({
                       variant="outline"
                     >
                       <Download data-icon="inline-start" />
-                      Download bundle
+                      Download manifest
                     </Button>
                   ) : null}
                   <Button
@@ -688,6 +701,16 @@ export function ReleaseEditorSheet({
                       <dd className="mt-1 break-all font-mono text-foreground">
                         {release.scope_key}
                       </dd>
+                      {onShowScope ? (
+                        <Button
+                          className="mt-1 h-auto px-0 text-xs"
+                          onClick={() => onShowScope(release.scope_key)}
+                          size="sm"
+                          variant="link"
+                        >
+                          Show bundles for this target
+                        </Button>
+                      ) : null}
                     </div>
                   </dl>
                   {diagnostics.isError ? (

package/src/components/ui/card.tsx

@@ -19,7 +19,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-header"
-      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      className={cn("flex flex-col gap-1.5 p-6", className)}
       {...props}
     />
   );

package/src/components/ui/empty.tsx

@@ -0,0 +1,101 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn("flex max-w-sm flex-col items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-sm font-medium tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-xs/relaxed text-balance",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+};

package/src/components/ui/scroll-area.tsx

@@ -0,0 +1,52 @@
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+
+import { cn } from "@/lib/utils";
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: ScrollAreaPrimitive.Root.Props) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };

package/src/components/ui/sidebar.tsx

@@ -9,6 +9,13 @@ import * as React from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
   Tooltip,
@@ -220,44 +227,30 @@ function Sidebar({
   }
 
   if (isMobile) {
-    if (!openMobile) {
-      return null;
-    }
-
     return (
-      <div
-        data-sidebar="sidebar"
-        data-slot="sidebar"
-        data-mobile="true"
-        className="fixed inset-0 z-50 md:hidden"
-        {...props}
-      >
-        <button
-          type="button"
-          aria-label="Close sidebar"
-          className="absolute inset-0 bg-sidebar/55 supports-backdrop-filter:backdrop-blur-sm"
-          onClick={() => setOpenMobile(false)}
-        />
-        <dialog
-          open
-          aria-modal="true"
-          aria-label="Sidebar"
-          className={cn(
-            "bg-sidebar text-sidebar-foreground absolute inset-y-0 z-10 flex w-(--sidebar-width) flex-col shadow-lg",
-            side === "left" ? "left-0" : "right-0",
-          )}
+      <Sheet open={openMobile} onOpenChange={setOpenMobile}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) max-w-[calc(100vw-2rem)] p-0"
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
             } as React.CSSProperties
           }
+          side={side}
+          {...props}
         >
-          <div className="pointer-events-none absolute inset-x-0 top-full h-32 bg-sidebar" />
-          <div className="flex h-full w-full flex-col overflow-y-auto bg-sidebar">
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Console navigation.</SheetDescription>
+          </SheetHeader>
+          <div className="flex size-full min-h-0 flex-col pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]">
             {children}
           </div>
-        </dialog>
-      </div>
+        </SheetContent>
+      </Sheet>
     );
   }