@hot-updater/console 1.1.3 → 1.1.4

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

@@ -1,9 +1,17 @@
 import { Link } from "@tanstack/react-router";
-import { ListIcon, RotateCcw, RotateCw, TriangleAlert, X } from "lucide-react";
+import {
+  CircleOff,
+  ListIcon,
+  RotateCcw,
+  RotateCw,
+  TriangleAlert,
+  X,
+} from "lucide-react";
 import { useState } from "react";
 
 import { BundleIdDisplay } from "@/components/BundleIdDisplay";
 import { InfoTooltip } from "@/components/InfoTooltip";
+import { PlatformIcon } from "@/components/PlatformIcon";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button, buttonVariants } from "@/components/ui/button";
@@ -21,14 +29,6 @@ import {
   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,
@@ -39,13 +39,12 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import type { RecoveryInput } from "@/lib/insights-recovery";
+import type { ReleaseHealthInput } 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";
@@ -62,6 +61,8 @@ import {
 } from "./ComparedBundlesChart";
 import { InsightsErrorAlert } from "./InsightsErrorAlert";
 import { InsightsPeriodSelector } from "./InsightsPeriodSelector";
+import { InsightsScope, platformLabel } from "./InsightsScope";
+import { ReleaseCombobox } from "./ReleaseCombobox";
 import { RollbackButton } from "./RollbackButton";
 
 const HOUR = 3_600_000;
@@ -113,7 +114,7 @@ function LineSample({ dashed }: { readonly dashed?: boolean }) {
 }
 
 /**
- * Release health: how the newest bundles fare after their deployment, on
+ * Release health: how the live 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
@@ -126,22 +127,22 @@ export function InsightsOverview({
   health,
   onReleasesChange,
   onWindowChange,
+  onShowAllPlatforms,
 }: {
-  readonly input: RecoveryInput;
+  readonly input: ReleaseHealthInput;
   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;
+  readonly onWindowChange: (window: ReleaseHealthInput["window"]) => void;
+  /** Widens the platform filter, offered when one platform has no bundles. */
+  readonly onShowAllPlatforms?: () => 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 full = ids.length >= MAX_ADOPTION_RELEASES;
   const wider =
     period.durationMs < 7 * DAY
@@ -156,7 +157,7 @@ export function InsightsOverview({
       onClick={() => onReleasesChange(undefined)}
     >
       <RotateCcw aria-hidden="true" data-icon="inline-start" />
-      Show the newest {DEFAULT_ADOPTION_RELEASES}
+      Show live bundles
     </Button>
   );
   // Adoption draws each bundle's launches solid and its downloads dashed;
@@ -241,14 +242,28 @@ export function InsightsOverview({
       return (
         <Empty className="min-h-64">
           <EmptyHeader>
-            <EmptyTitle>No bundles deployed here yet</EmptyTitle>
+            <EmptyTitle>
+              No bundles deployed to {input.channel} ·{" "}
+              {platformLabel(input.platform)}
+            </EmptyTitle>
             <EmptyDescription>
-              Release health follows the bundle deployments of the selected
-              channel and health platform. Deploy one, or choose another in the
-              filters.
+              Deploy one, or choose another channel or platform in the filters.
             </EmptyDescription>
           </EmptyHeader>
-          {reset ? <EmptyContent>{reset}</EmptyContent> : null}
+          {reset || (input.platform !== "all" && onShowAllPlatforms) ? (
+            <EmptyContent className="flex-row flex-wrap justify-center">
+              {input.platform !== "all" && onShowAllPlatforms ? (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={onShowAllPlatforms}
+                >
+                  Show all platforms
+                </Button>
+              ) : null}
+              {reset}
+            </EmptyContent>
+          ) : null}
         </Empty>
       );
     }
@@ -339,7 +354,14 @@ export function InsightsOverview({
       <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 min-w-0 flex-col gap-1">
+              <CardTitle>Release health</CardTitle>
+              <InsightsScope
+                channel={input.channel}
+                platform={input.platform}
+                narrower={input.releaseId ? [`Release ${input.releaseId}`] : []}
+              />
+            </div>
             <div className="flex items-center gap-2">
               <InsightsPeriodSelector
                 window={input.window}
@@ -419,6 +441,13 @@ export function InsightsOverview({
                       rate={bundle.rate}
                       crashes={bundle.crashes}
                       attempts={bundle.attempts}
+                      // The live bundles no longer include it once it is
+                      // disabled: keep comparing the same ones.
+                      onRolledBack={
+                        health.isDefault
+                          ? () => onReleasesChange(ids)
+                          : undefined
+                      }
                     />
                   </AlertDescription>
                 </Alert>
@@ -500,11 +529,33 @@ export function InsightsOverview({
                                 )}
                               </span>
                               <span className="text-xs break-words text-muted-foreground">
+                                <PlatformIcon
+                                  platform={release.platform}
+                                  className="mr-1 inline size-3 align-[-1px]"
+                                />
+                                <span className="sr-only">
+                                  {platformLabel(release.platform)}{" "}
+                                </span>
                                 Deployed{" "}
                                 {formatDeployedAt(release.deployedAtMs)}
                                 {release.targetAppVersion
                                   ? ` · ${release.targetAppVersion}`
                                   : ""}
+                                {release.enabled && !release.live ? (
+                                  <>
+                                    {" · "}
+                                    <span
+                                      className="inline-flex items-center gap-1 align-middle"
+                                      title="No device gets this bundle with the current delivery settings."
+                                    >
+                                      <CircleOff
+                                        aria-hidden="true"
+                                        className="size-3"
+                                      />
+                                      Unreachable
+                                    </span>
+                                  </>
+                                ) : null}
                               </span>
                             </div>
                           </div>
@@ -577,51 +628,22 @@ export function InsightsOverview({
                   })}
                 </TableBody>
               </Table>
-              {addable.length > 0 ? (
-                <Select
-                  items={Object.fromEntries(
-                    addable.map((candidate) => [
-                      candidate.releaseId,
-                      `${candidate.releaseId} · ${formatDeployedAt(candidate.deployedAtMs)}`,
-                    ]),
-                  )}
-                  value={null}
+              {(candidates ?? []).length > 0 ? (
+                <ReleaseCombobox
+                  scope={{ channel: input.channel, platform: input.platform }}
+                  candidates={candidates ?? []}
+                  excluded={ids}
                   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>
+                  label="Add a bundle"
+                  placeholder={
+                    full
+                      ? `Up to ${MAX_ADOPTION_RELEASES} bundles`
+                      : "Add a bundle by ID or app version…"
+                  }
+                  onPick={(release) =>
+                    onReleasesChange([...ids, release.releaseId])
+                  }
+                />
               ) : null}
             </>
           ) : null}

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

@@ -0,0 +1,39 @@
+import { Fragment } from "react";
+
+import { PlatformIcon } from "@/components/PlatformIcon";
+import type { HealthPlatform } from "@/lib/release-adoption";
+
+export const platformLabel = (platform: HealthPlatform) =>
+  platform === "all" ? "All platforms" : platform === "ios" ? "iOS" : "Android";
+
+/** What a report reads, as the filters set it: its channel, platform, and any narrower filter. */
+export function InsightsScope({
+  channel,
+  platform,
+  narrower = [],
+}: {
+  readonly channel: string;
+  readonly platform: HealthPlatform;
+  readonly narrower?: readonly string[];
+}) {
+  return (
+    <p className="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs text-muted-foreground">
+      <span className="max-w-full truncate font-medium text-foreground">
+        {channel}
+      </span>
+      <span aria-hidden="true">·</span>
+      <span className="inline-flex items-center gap-1">
+        {platform === "all" ? null : (
+          <PlatformIcon platform={platform} className="size-3" />
+        )}
+        {platformLabel(platform)}
+      </span>
+      {narrower.map((filter) => (
+        <Fragment key={filter}>
+          <span aria-hidden="true">·</span>
+          <span className="max-w-full truncate">{filter}</span>
+        </Fragment>
+      ))}
+    </p>
+  );
+}

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

@@ -140,8 +140,8 @@ export function BundleMovementSummary({
           className="min-w-0 rounded-sm hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           to="/insights"
           search={{
-            healthPlatform: input.platform,
-            healthChannel: input.channel,
+            platform: input.platform,
+            channel: input.channel,
             releaseId: input.releaseId,
             bundleWindow: adoptionWindow(input.releaseId),
           }}
@@ -241,8 +241,8 @@ export function BundleInsightsSummary({
           className={buttonVariants({ variant: "outline", size: "sm" })}
           to="/insights"
           search={{
-            healthPlatform: input.platform,
-            healthChannel: input.channel,
+            platform: input.platform,
+            channel: input.channel,
             releaseId: input.releaseId,
             bundleWindow: adoptionWindow(input.releaseId),
             healthChart: "adoption",

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

@@ -0,0 +1,196 @@
+import { isUUIDv7 } from "@hot-updater/protocol";
+import { useQuery } from "@tanstack/react-query";
+import { CircleOff } from "lucide-react";
+import { type ReactNode, useState } from "react";
+
+import { BundleIdDisplay } from "@/components/BundleIdDisplay";
+import { PlatformIcon } from "@/components/PlatformIcon";
+import { Badge } from "@/components/ui/badge";
+import {
+  Combobox,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+} from "@/components/ui/combobox";
+import type {
+  AdoptionRelease,
+  AdoptionReleasesInput,
+} from "@/lib/release-adoption";
+import { getAdoptionReleaseRpc } from "@/lib/release-adoption-rpc";
+
+import { formatDeployedAt } from "./ComparedBundlesChart";
+import { platformLabel } from "./InsightsScope";
+
+type ReleaseGroup = {
+  readonly value: string;
+  readonly items: readonly AdoptionRelease[];
+};
+
+/** Whether a bundle deployment matches what was typed: its IDs or target app version. */
+const matches = (release: AdoptionRelease, typed: string) =>
+  typed === "" ||
+  release.releaseId.includes(typed) ||
+  release.bundleId.toLowerCase().includes(typed) ||
+  (release.targetAppVersion ?? "").toLowerCase().includes(typed);
+
+/** A bundle deployment as a picker names it: ID, platform, deployment, target, and state. */
+export function ReleaseOption({
+  release,
+}: {
+  readonly release: AdoptionRelease;
+}) {
+  return (
+    <span className="flex min-w-0 flex-col gap-0.5">
+      <span className="flex min-w-0 items-center gap-1.5">
+        <PlatformIcon platform={release.platform} className="size-3 shrink-0" />
+        <span className="sr-only">{platformLabel(release.platform)}</span>
+        <BundleIdDisplay bundleId={release.releaseId} className="min-w-0" />
+      </span>
+      <span className="text-xs text-muted-foreground">
+        Deployed {formatDeployedAt(release.deployedAtMs)}
+        {release.targetAppVersion ? ` · ${release.targetAppVersion}` : ""}
+        {release.enabled ? null : (
+          <>
+            {" · "}
+            <Badge variant="outline">Disabled</Badge>
+          </>
+        )}
+        {release.enabled && !release.live ? (
+          <>
+            {" · "}
+            <span className="inline-flex items-center gap-1 align-middle">
+              <CircleOff aria-hidden="true" className="size-3" />
+              Unreachable
+            </span>
+          </>
+        ) : null}
+      </span>
+    </span>
+  );
+}
+
+/**
+ * Picks one of a channel's bundle deployments: live ones first, searchable
+ * by ID or target app version. A full release ID the list leaves out is
+ * looked up in the scope, with the read Release health uses for it.
+ */
+export function ReleaseCombobox({
+  scope,
+  candidates,
+  excluded = [],
+  onPick,
+  disabled = false,
+  label,
+  placeholder,
+  trigger,
+}: {
+  readonly scope: AdoptionReleasesInput;
+  readonly candidates: readonly AdoptionRelease[];
+  readonly excluded?: readonly string[];
+  readonly onPick: (release: AdoptionRelease) => void;
+  readonly disabled?: boolean;
+  /** The input's accessible name. */
+  readonly label: string;
+  readonly placeholder: string;
+  /** A button that opens the list; the search input then sits in the list. */
+  readonly trigger?: ReactNode;
+}) {
+  const [query, setQuery] = useState("");
+  const typed = query.trim().toLowerCase();
+  const offered = candidates.filter(
+    (release) =>
+      !excluded.includes(release.releaseId) && matches(release, typed),
+  );
+  const lookupId =
+    offered.length === 0 &&
+    isUUIDv7(typed) &&
+    !candidates.some((release) => release.releaseId === typed)
+      ? typed
+      : undefined;
+  const lookup = useQuery({
+    queryKey: ["insights", "adoption-release", scope, lookupId, false],
+    queryFn: () =>
+      getAdoptionReleaseRpc({ data: { ...scope, releaseId: lookupId! } }),
+    enabled: lookupId !== undefined,
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+  const found =
+    lookupId !== undefined &&
+    lookup.data?.release &&
+    !excluded.includes(lookup.data.release.releaseId)
+      ? [lookup.data.release]
+      : [];
+  const groups: ReleaseGroup[] = [
+    { value: "Live", items: offered.filter((release) => release.live) },
+    { value: "Not live", items: offered.filter((release) => !release.live) },
+    { value: "Found", items: found },
+  ].filter((group) => group.items.length > 0);
+  const input = (
+    <ComboboxInput
+      aria-label={label}
+      className={
+        trigger
+          ? undefined
+          : "h-11 w-full sm:h-9 sm:w-96 [&_input]:h-full [&_input]:text-base sm:[&_input]:text-xs"
+      }
+      disabled={disabled}
+      placeholder={placeholder}
+      showTrigger={!trigger}
+      maxLength={1024}
+    />
+  );
+
+  return (
+    <Combobox
+      items={groups}
+      filter={null}
+      value={null}
+      inputValue={query}
+      onInputValueChange={setQuery}
+      itemToStringLabel={(release: AdoptionRelease) => release.releaseId}
+      onValueChange={(release: AdoptionRelease | null) => {
+        if (release === null) return;
+        setQuery("");
+        onPick(release);
+      }}
+      disabled={disabled}
+    >
+      {trigger ?? input}
+      <ComboboxContent className={trigger ? "w-96" : undefined}>
+        {trigger ? input : null}
+        <ComboboxEmpty>
+          {lookupId === undefined
+            ? "No matching bundles."
+            : lookup.isPending
+              ? "Looking up the release…"
+              : lookup.isError
+                ? "Couldn't look up the release."
+                : `No bundle with this ID in ${scope.channel} · ${platformLabel(scope.platform)}.`}
+        </ComboboxEmpty>
+        <ComboboxList>
+          {(group: ReleaseGroup) => (
+            <ComboboxGroup key={group.value} items={group.items}>
+              <ComboboxLabel>{group.value}</ComboboxLabel>
+              <ComboboxCollection>
+                {(release: AdoptionRelease) => (
+                  <ComboboxItem
+                    className="min-h-11 pr-8 sm:min-h-8"
+                    key={release.releaseId}
+                    value={release}
+                  >
+                    <ReleaseOption release={release} />
+                  </ComboboxItem>
+                )}
+              </ComboboxCollection>
+            </ComboboxGroup>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}

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

@@ -33,11 +33,14 @@ export function RollbackButton({
   rate,
   crashes,
   attempts,
+  onRolledBack,
 }: {
   readonly release: AdoptionRelease;
   readonly rate: number;
   readonly crashes: number;
   readonly attempts: number;
+  /** Runs once the release is disabled, before the bundle list reloads. */
+  readonly onRolledBack?: () => void;
 }) {
   const [open, setOpen] = useState(false);
   const [error, setError] = useState("");
@@ -56,6 +59,7 @@ export function RollbackButton({
     try {
       await preflight.mutateAsync(input);
       await update.mutateAsync(input);
+      onRolledBack?.();
       await queryClient.invalidateQueries({
         queryKey: ["insights", "adoption-releases"],
       });

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

@@ -324,10 +324,13 @@ function FailuresReport({
  */
 export function UpdateFailures({
   errors,
+  scope,
   query,
   onRefresh,
 }: {
   readonly errors?: ReactNode;
+  /** What the report reads, under its title. */
+  readonly scope?: ReactNode;
   readonly query: {
     readonly data: UpdateFailuresReport | undefined;
     readonly error: Error | null;
@@ -341,7 +344,10 @@ export function UpdateFailures({
       <Card className="min-w-0 overflow-hidden shadow-sm">
         <CardHeader className="flex flex-col gap-1.5 p-4 sm:p-6">
           <div className="flex flex-wrap items-center justify-between gap-4">
-            <CardTitle>Update failures</CardTitle>
+            <div className="flex min-w-0 flex-col gap-1">
+              <CardTitle>Update failures</CardTitle>
+              {scope}
+            </div>
             <Button
               aria-label="Refresh update failures"
               variant="ghost"

package/src/lib/insights-failures-rpc.ts

@@ -14,10 +14,12 @@ export const getUpdateFailuresRpc = createServerFn({ method: "GET" })
         import("./server/updateFailures"),
         import("./server/runtime.server"),
       ]);
-    const { runtime } = await prepareConfig();
+    const { runtime, core } = await prepareConfig();
     return getUpdateFailuresReport(
       await requireFeature(runtime, "insights"),
       data,
+      Date.now(),
+      core,
     );
   });
 

package/src/lib/insights-failures.ts

@@ -10,7 +10,8 @@ import type { InsightsEventRow } from "./insights-view";
 export type { InsightsFailureBreakdown };
 
 export type UpdateFailuresInput = {
-  readonly platform: "ios" | "android";
+  /** One platform's failures, or both platforms' together. */
+  readonly platform: "all" | "ios" | "android";
   readonly channel: string;
   /** A release's failures; the channel's without it. */
   readonly releaseId?: string;
@@ -34,7 +35,9 @@ export function readUpdateFailuresInput(
 ): UpdateFailuresInput {
   if (
     !input ||
-    (input.platform !== "ios" && input.platform !== "android") ||
+    (input.platform !== "all" &&
+      input.platform !== "ios" &&
+      input.platform !== "android") ||
     typeof input.channel !== "string" ||
     !input.channel.trim() ||
     input.channel.length > 1_024 ||

package/src/lib/insights-recovery.ts

@@ -8,6 +8,11 @@ export type RecoveryInput = {
   readonly releaseId?: string;
 };
 
+/** The Insights page's Release health and Update failures scope: one platform or both. */
+export type ReleaseHealthInput = Omit<RecoveryInput, "platform"> & {
+  readonly platform: "all" | "ios" | "android";
+};
+
 export const recoveryWindows = {
   "24h": { durationMs: 86_400_000, intervalMs: 3_600_000 },
   "7d": { durationMs: 7 * 86_400_000, intervalMs: 6 * 3_600_000 },

package/src/lib/insights-search.ts

@@ -17,42 +17,38 @@ const readHealthChart = (value: unknown): HealthChart | undefined =>
 const readUsageWindow = (value: unknown): UsageWindow | undefined =>
   value === "12m" ? value : readWindow(value);
 
+/** The channel Insights reads when none is chosen: the SDK's and the CLI's default. */
+export const DEFAULT_INSIGHTS_CHANNEL = "production";
+
 export type InsightsSearch = {
+  /** Every report's platform; both when omitted. */
   platform?: AppUsageScope["platform"];
+  /** Every report's channel; production when omitted. */
   channel?: string;
   appVersion?: string;
   window?: UsageWindow;
   bundleWindow?: InsightsWindow;
-  healthPlatform?: "ios" | "android";
-  healthChannel?: string;
   releaseId?: string;
   healthChart?: HealthChart;
   /**
    * Release health's compared bundles, comma-separated release IDs; omitted,
-   * the focused release and the one before it, or the newest two.
+   * the focused release and the one before it, or the live ones.
    */
   bundles?: string;
 };
 
+const readPlatform = (value: unknown) =>
+  value === "all" || value === "ios" || value === "android" ? value : undefined;
+
 export function validateInsightsSearch(
   search: Record<string, unknown>,
 ): InsightsSearch {
   return {
-    platform:
-      search.platform === "all" ||
-      search.platform === "ios" ||
-      search.platform === "android"
-        ? search.platform
-        : undefined,
+    platform: readPlatform(search.platform),
     channel: readText(search.channel),
     appVersion: readText(search.appVersion),
     window: readUsageWindow(search.window),
     bundleWindow: readWindow(search.bundleWindow),
-    healthPlatform:
-      search.healthPlatform === "ios" || search.healthPlatform === "android"
-        ? search.healthPlatform
-        : undefined,
-    healthChannel: readText(search.healthChannel),
     releaseId: readText(search.releaseId),
     healthChart: readHealthChart(search.healthChart),
     bundles: readText(search.bundles),