@hot-updater/console 1.1.4 → 1.2.0-rc.1

package/src/components/features/native-builds/ReleaseNativeBuildLink.tsx

@@ -0,0 +1,101 @@
+import type { Bundle, ReleaseRow } from "@hot-updater/plugin-core";
+import { Link } from "@tanstack/react-router";
+import { ArrowUpRight } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useReleaseNativeBuildQuery } from "@/lib/api";
+import {
+  nativeBuildArtifacts,
+  platformLabel,
+  releaseNativeBuildScope,
+} from "@/lib/native-builds";
+
+/**
+ * The native build a release's bundle reaches, and whether that bundle has
+ * a patch from its built-in bundle: the newest build of the release's
+ * scope, one read. A release of an app version range targets many builds,
+ * so it shows none and reads nothing.
+ */
+export function ReleaseNativeBuildLink({
+  release,
+  channel,
+  bundle,
+}: {
+  readonly release: Pick<
+    ReleaseRow,
+    "platform" | "fingerprint_hash" | "target_app_version" | "bundle_id"
+  >;
+  readonly channel: string;
+  /** The release's bundle with its patches, once loaded. */
+  readonly bundle: Pick<Bundle, "patches"> | null | undefined;
+}) {
+  const input =
+    release.bundle_id === null
+      ? null
+      : {
+          platform: release.platform,
+          channel,
+          fingerprintHash: release.fingerprint_hash,
+          targetAppVersion: release.target_app_version,
+        };
+  const scoped = input !== null && releaseNativeBuildScope(input) !== null;
+  const query = useReleaseNativeBuildQuery(scoped ? input : null);
+  if (!scoped) return null;
+
+  const build = query.data;
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <span className="font-medium text-muted-foreground">Native build</span>
+      {query.isPending ? (
+        <Skeleton className="h-4 w-40" />
+      ) : build ? (
+        <>
+          <Link
+            className="inline-flex flex-wrap items-center gap-x-1 gap-y-0.5 text-xs text-foreground underline-offset-4 hover:underline"
+            params={{ buildId: build.id }}
+            to="/native-builds/$buildId"
+          >
+            {platformLabel(build.platform)}{" "}
+            {nativeBuildArtifacts[build.artifact_kind].label} ·{" "}
+            <span className="font-mono" translate="no">
+              {build.min_bundle_id}
+            </span>
+            <ArrowUpRight aria-hidden="true" className="size-3" />
+          </Link>
+          {bundle ? (
+            <Badge variant="secondary">
+              {(bundle.patches ?? []).some(
+                ({ baseBundleId }) => baseBundleId === build.min_bundle_id,
+              )
+                ? "Patches from it"
+                : "No patch from it"}
+            </Badge>
+          ) : null}
+        </>
+      ) : query.isError ? (
+        <span className="text-xs text-muted-foreground">
+          Couldn't load the scope's native build.{" "}
+          <button
+            className="underline underline-offset-4"
+            onClick={() => void query.refetch()}
+            type="button"
+          >
+            Retry
+          </button>
+        </span>
+      ) : (
+        <span className="text-xs text-muted-foreground">
+          None tracked for this scope ·{" "}
+          <Link
+            className="underline-offset-4 hover:text-foreground hover:underline"
+            search={{ channel }}
+            to="/native-builds"
+          >
+            This channel's builds
+          </Link>
+        </span>
+      )}
+    </div>
+  );
+}

package/src/components/features/native-builds/ServedNowCard.tsx

@@ -0,0 +1,214 @@
+import { NUMERIC_COHORT_SIZE } from "@hot-updater/protocol";
+import { Link } from "@tanstack/react-router";
+import { ArrowUpRight, PackageOpen } from "lucide-react";
+
+import { RolloutPercentageBadge } from "@/components/RolloutPercentageBadge";
+import { TimestampDisplay } from "@/components/TimestampDisplay";
+import { Badge } from "@/components/ui/badge";
+import { buttonVariants } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { formatByteSize } from "@/lib/native-builds";
+import type { NativeBuildDetail } from "@/lib/server/nativeBuilds";
+
+/** How the first OTA to a bundle downloads on this build. */
+export type FirstDownload =
+  | { readonly kind: "patch"; readonly byteSize: number }
+  | { readonly kind: "full" }
+  /** The patches page on screen doesn't reach back to the bundle. */
+  | { readonly kind: "unknown" };
+
+/**
+ * How an install of the build downloads `bundleId` as its first OTA: as the
+ * patch from the built-in bundle when one exists, else the full bundle. The
+ * newest page of patches decides it for every bundle down to the page's
+ * oldest; an older bundle is unknown only when the page is full.
+ */
+export const firstDownloadOf = (
+  patches: NativeBuildDetail["patches"],
+  bundleId: string,
+): FirstDownload => {
+  const patch = patches.data.find((row) => row.bundleId === bundleId);
+  if (patch !== undefined) return { kind: "patch", byteSize: patch.byteSize };
+  const oldest = patches.data.at(-1)?.bundleId;
+  return patches.next !== undefined && oldest !== undefined && bundleId < oldest
+    ? { kind: "unknown" }
+    : { kind: "full" };
+};
+
+function FirstDownloadCell({ download }: { readonly download: FirstDownload }) {
+  switch (download.kind) {
+    case "patch":
+      return (
+        <span className="text-xs">
+          Patch{" "}
+          <span className="text-muted-foreground tabular-nums">
+            ({formatByteSize(download.byteSize)})
+          </span>
+        </span>
+      );
+    case "full":
+      return <span className="text-xs text-muted-foreground">Full bundle</span>;
+    case "unknown":
+      return (
+        <a
+          className="text-xs underline-offset-4 hover:underline"
+          href="#patches"
+        >
+          See patches
+        </a>
+      );
+  }
+}
+
+/**
+ * What the update check offers an install of the build now: its scope's
+ * catalog at the build's app version, down to the built-in bundle, newest
+ * first. It is the catalog of now, not the history.
+ */
+export function ServedNowCard({
+  detail,
+}: {
+  readonly detail: NativeBuildDetail;
+}) {
+  const { servedNow, patches, catalogScopeKey } = detail;
+  const scopeLink = (
+    <Link
+      className="inline-flex items-center gap-0.5 underline-offset-4 hover:underline"
+      search={{ scopeKey: catalogScopeKey }}
+      to="/"
+    >
+      All releases in this scope
+      <ArrowUpRight aria-hidden="true" className="size-3" />
+    </Link>
+  );
+
+  return (
+    <Card className="overflow-hidden shadow-sm">
+      <CardHeader className="border-b px-4 py-3">
+        <CardTitle className="text-sm">
+          <h2>Served now</h2>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        {servedNow.length === 0 ? (
+          <Empty className="py-10">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <PackageOpen />
+              </EmptyMedia>
+              <EmptyTitle>No OTA for this build yet</EmptyTitle>
+              <EmptyDescription>
+                No release in this build's scope is newer than its built-in
+                bundle. Deploy one with{" "}
+                <code className="font-mono">hot-updater deploy</code>, and it
+                shows here.
+              </EmptyDescription>
+            </EmptyHeader>
+            <EmptyContent>
+              <Link
+                className={buttonVariants({
+                  className: "min-h-11 sm:min-h-8",
+                  variant: "outline",
+                })}
+                search={{ scopeKey: catalogScopeKey }}
+                to="/"
+              >
+                All releases in this scope
+              </Link>
+            </EmptyContent>
+          </Empty>
+        ) : (
+          <>
+            <Table aria-label="Served now" className="table-fixed">
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Bundle</TableHead>
+                  <TableHead className="hidden w-40 md:table-cell">
+                    Rollout
+                  </TableHead>
+                  <TableHead className="hidden w-32 sm:table-cell">
+                    Created
+                  </TableHead>
+                  <TableHead className="w-32">First OTA download</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {servedNow.map((release) => {
+                  const bundleId = release.bundleId!;
+                  const percentage =
+                    (release.rolloutCohortCount / NUMERIC_COHORT_SIZE) * 100;
+                  return (
+                    <TableRow key={release.releaseId}>
+                      <TableCell className="py-3 whitespace-normal">
+                        <div className="flex min-w-0 flex-col gap-1">
+                          <Link
+                            className="font-mono text-xs [overflow-wrap:anywhere] underline-offset-4 hover:underline"
+                            search={{ releaseId: release.releaseId }}
+                            title={bundleId}
+                            to="/"
+                            translate="no"
+                          >
+                            {bundleId}
+                          </Link>
+                          {release.message ? (
+                            <span className="text-xs text-muted-foreground">
+                              {release.message}
+                            </span>
+                          ) : null}
+                        </div>
+                      </TableCell>
+                      <TableCell className="hidden md:table-cell">
+                        <div className="flex flex-wrap gap-1">
+                          {release.targetCohorts.length > 0 ? (
+                            <Badge variant="secondary">
+                              {release.targetCohorts.length === 1
+                                ? "1 cohort"
+                                : `${release.targetCohorts.length} cohorts`}
+                            </Badge>
+                          ) : (
+                            <RolloutPercentageBadge percentage={percentage} />
+                          )}
+                          {release.shouldForceUpdate ? (
+                            <Badge variant="outline">Forced</Badge>
+                          ) : null}
+                        </div>
+                      </TableCell>
+                      <TableCell className="hidden sm:table-cell">
+                        <TimestampDisplay uuid={bundleId} />
+                      </TableCell>
+                      <TableCell>
+                        <FirstDownloadCell
+                          download={firstDownloadOf(patches, bundleId)}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+            <p className="border-t px-4 py-3 text-xs text-muted-foreground">
+              What the update check serves an install of this build now, newest
+              first: not the history. {scopeLink}
+            </p>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/features/native-builds/ShortHash.tsx

@@ -0,0 +1,41 @@
+import { toast } from "sonner";
+
+/**
+ * A hash shortened to its prefix, as git shows a commit: never cut in the
+ * middle, the full value on hover, and copied on click.
+ */
+export function ShortHash({
+  value,
+  length,
+  label,
+}: {
+  readonly value: string;
+  /** How many leading characters show, such as 7 for a commit. */
+  readonly length: number;
+  /** What the value is, for the copy button, such as "commit". */
+  readonly label: string;
+}) {
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      toast.success("Copied to clipboard", { description: value });
+    } catch {
+      toast.error(`Could not copy the ${label}`);
+    }
+  };
+  return (
+    <button
+      aria-label={`Copy the ${label} ${value}`}
+      className="cursor-copy rounded-sm font-mono text-xs whitespace-nowrap tabular-nums underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+      onClick={(event) => {
+        event.stopPropagation();
+        void copy();
+      }}
+      title={value}
+      translate="no"
+      type="button"
+    >
+      {value.slice(0, length)}
+    </button>
+  );
+}

package/src/components/features/native-builds/StoreSubmission.tsx

@@ -0,0 +1,73 @@
+import type { NativeBuildRow } from "@hot-updater/plugin-core";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { Send } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+
+dayjs.extend(relativeTime);
+
+/** Each store track's name as the stores call it. */
+export const storeTrackLabels = {
+  testflight: "TestFlight",
+  "play-internal": "Play internal",
+} as const satisfies Record<
+  NonNullable<NativeBuildRow["submitted_to"]>,
+  string
+>;
+
+type Submitted = NativeBuildRow & {
+  readonly submitted_to: NonNullable<NativeBuildRow["submitted_to"]>;
+};
+
+/** Whether a store took the build, as its row records. */
+export const isSubmitted = (build: NativeBuildRow): build is Submitted =>
+  build.submitted_to !== null && build.submitted_to !== undefined;
+
+/** When the submission was recorded: relative, with the exact time on hover. */
+function SubmittedAt({ ms }: { readonly ms: number | null }) {
+  if (ms === null) return null;
+  const date = dayjs(ms);
+  return (
+    <time
+      className="text-xs text-muted-foreground"
+      dateTime={date.toISOString()}
+      title={date.format("YYYY-MM-DD HH:mm:ss")}
+    >
+      {date.fromNow()}
+    </time>
+  );
+}
+
+/**
+ * The store track a build went to, with the store's label of it, such as
+ * "TestFlight 1.7.0 (66)": none for a build no store took.
+ */
+export function StoreSubmissionBadge({
+  build,
+  withTime = false,
+}: {
+  readonly build: NativeBuildRow;
+  /** Whether to show when it was submitted beside the badge. */
+  readonly withTime?: boolean;
+}) {
+  if (!isSubmitted(build)) return null;
+  return (
+    <span className="inline-flex flex-wrap items-center gap-1.5">
+      <Badge
+        className="gap-1"
+        title={`Submitted to ${storeTrackLabels[build.submitted_to]}`}
+        variant="secondary"
+      >
+        <Send aria-hidden="true" className="size-3" />
+        {storeTrackLabels[build.submitted_to]}
+        {build.submitted_version ? (
+          <span className="font-mono tabular-nums" translate="no">
+            {build.submitted_version}
+          </span>
+        ) : null}
+      </Badge>
+      {withTime ? <SubmittedAt ms={build.submitted_at_ms} /> : null}
+    </span>
+  );
+}

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

@@ -18,6 +18,7 @@ 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 { ReleaseNativeBuildLink } from "@/components/features/native-builds/ReleaseNativeBuildLink";
 import { InfoTooltip } from "@/components/InfoTooltip";
 import { PlatformIcon } from "@/components/PlatformIcon";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -386,6 +387,13 @@ export function ReleaseEditorSheet({
                     {channelName}
                   </span>
                 </div>
+                {channelName ? (
+                  <ReleaseNativeBuildLink
+                    bundle={bundle}
+                    channel={channelName}
+                    release={release}
+                  />
+                ) : null}
                 <div className="flex flex-wrap items-center gap-2">
                   <span className="font-medium text-muted-foreground">
                     Platform

package/src/lib/api-rpc.ts

@@ -5,10 +5,12 @@ import {
   type ReleasePolicyPatch,
   rowToBundle,
 } from "@hot-updater/plugin-core";
+import { assertCanonicalChannelName } from "@hot-updater/protocol";
 import { createServerFn } from "@tanstack/react-start";
 
 import { consoleAccess } from "./console-access";
 import { DEFAULT_PAGE_LIMIT } from "./constants";
+import { channelIdOf, releaseNativeBuildScope } from "./native-builds";
 import { withPublicBundleMutationErrors } from "./public-bundle-error";
 import { listReleases, readReleaseFilter } from "./server/listReleases";
 import { addReleaseReachability } from "./server/releaseReachability";
@@ -242,3 +244,99 @@ export const getBundleChildCounts = createServerFn({ method: "GET" })
       throw error;
     }
   });
+
+/** A channel name the list filters by, as its channel ID. */
+const channelIdFilter = (channel: unknown) => {
+  if (channel === undefined) return {};
+  if (typeof channel !== "string") throw new Error("channel must be a name.");
+  assertCanonicalChannelName(channel);
+  return { channelId: channelIdOf(channel) };
+};
+
+export const getNativeBuilds = createServerFn({ method: "GET" })
+  .middleware([consoleAccess])
+  .validator(
+    (
+      input:
+        | { before?: string; after?: string; channel?: string; limit?: number }
+        | undefined,
+    ) => ({
+      ...(input?.before === undefined ? {} : { before: input.before }),
+      ...(input?.after === undefined ? {} : { after: input.after }),
+      ...channelIdFilter(input?.channel),
+      limit: pageLimit(input?.limit),
+    }),
+  )
+  .handler(async ({ data }) => {
+    const [{ core }, { listNativeBuilds }] = await Promise.all([
+      prepare(),
+      import("./server/nativeBuilds"),
+    ]);
+    return listNativeBuilds(core, data);
+  });
+
+/** A native build's page: the build, its built-in bundle, what it is served, and its patches. */
+export const getNativeBuildDetail = createServerFn({ method: "GET" })
+  .middleware([consoleAccess])
+  .validator((input: { id: string }) => input)
+  .handler(async ({ data }) => {
+    const [{ core }, { getNativeBuildDetail: readNativeBuildDetail }] =
+      await Promise.all([prepare(), import("./server/nativeBuilds")]);
+    return readNativeBuildDetail(core, data.id);
+  });
+
+/** One page of the patches from a native build's built-in bundle. */
+export const getNativeBuildPatches = createServerFn({ method: "GET" })
+  .middleware([consoleAccess])
+  .validator(
+    (input: { minBundleId: string; before?: string; after?: string }) => ({
+      minBundleId: input.minBundleId,
+      ...(input.before === undefined ? {} : { before: input.before }),
+      ...(input.after === undefined ? {} : { after: input.after }),
+    }),
+  )
+  .handler(async ({ data: { minBundleId, ...page } }) => {
+    const [{ core }, { listNativeBuildPatches, NATIVE_BUILD_PATCH_PAGE_SIZE }] =
+      await Promise.all([prepare(), import("./server/nativeBuilds")]);
+    return listNativeBuildPatches(core, minBundleId, {
+      ...page,
+      limit: NATIVE_BUILD_PATCH_PAGE_SIZE,
+    });
+  });
+
+/**
+ * The newest native build of a release's scope, which its patches start
+ * from: one read. A release of an app version range has no one build, and
+ * reads nothing.
+ */
+export const getReleaseNativeBuild = createServerFn({ method: "GET" })
+  .middleware([consoleAccess])
+  .validator(
+    (input: {
+      platform: "ios" | "android";
+      channel: string;
+      fingerprintHash: string | null;
+      targetAppVersion: string | null;
+    }) => input,
+  )
+  .handler(async ({ data }) => {
+    const scope = releaseNativeBuildScope(data);
+    if (scope === null) return null;
+    return (await prepare()).core.findNativeBuild(scope);
+  });
+
+/**
+ * The URL a phone downloads a build from without the console's sign-in, or
+ * null when the storage gives none: the storage's download URL, resolved
+ * again each time it is read, since it may expire.
+ */
+export const getNativeBuildDownloadUrl = createServerFn({ method: "GET" })
+  .middleware([consoleAccess])
+  .validator((input: { id: string }) => input)
+  .handler(async ({ data }) => {
+    const [deps, { resolveNativeBuildDownloadUrl }] = await Promise.all([
+      prepare(),
+      import("./server/nativeBuilds"),
+    ]);
+    return { url: await resolveNativeBuildDownloadUrl(data.id, deps) };
+  });