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

package/lib/vite-internal.mjs

@@ -9,12 +9,18 @@ const virtualAuthModuleId = "virtual:hot-updater-console/auth";
 const virtualConfigModuleId = "virtual:hot-updater-console/config";
 const virtualPackageRouterModuleId = "virtual:hot-updater-console/package-router";
 const virtualRouteTreeModuleId = "virtual:hot-updater-console/route-tree";
+const virtualPackageStartModuleId = "virtual:hot-updater-console/package-start";
+const virtualRequestGuardModuleId = "virtual:hot-updater-console/request-guard";
 const resolvedVirtualAuthModuleId = `\0${virtualAuthModuleId}`;
 const resolvedVirtualConfigModuleId = `\0${virtualConfigModuleId}`;
 const resolvedVirtualPackageRouterModuleId = `\0${virtualPackageRouterModuleId}`;
+const resolvedVirtualPackageStartModuleId = `\0${virtualPackageStartModuleId}`;
+const resolvedVirtualRequestGuardModuleId = `\0${virtualRequestGuardModuleId}`;
 const packageRoot = path.resolve(import.meta.dirname, "..");
 const packagePublicDirectory = path.join(packageRoot, "public");
 const packageRouterFile = path.join(packageRoot, "src/router.tsx");
+const packageStartFile = path.join(packageRoot, "src/start.ts");
+const localConsoleGuardFile = path.join(packageRoot, "src/lib/server/local-console.ts");
 const packageRoutesDirectory = path.join(packageRoot, "src/routes");
 const packageSourceDirectory = path.join(packageRoot, "src");
 const localRouteTreeFile = path.join(packageSourceDirectory, "routeTree.gen.ts");
@@ -40,6 +46,7 @@ const createConsoleModulesPlugin = (mode) => {
 				authFile = resolveFromRoot(root, mode.options.auth ?? "console.auth.ts");
 				configFile = resolveFromRoot(root, mode.options.config ?? "console.config.ts");
 				writeFileIfChanged(path.join(cacheDirectory, "router.ts"), [`export { getRouter } from ${JSON.stringify(virtualPackageRouterModuleId)};`, ""].join("\n"));
+				writeFileIfChanged(path.join(cacheDirectory, "start.ts"), [`export { startInstance } from ${JSON.stringify(virtualPackageStartModuleId)};`, ""].join("\n"));
 			}
 			return {
 				assetsInclude: ["**/*.node"],
@@ -63,10 +70,32 @@ const createConsoleModulesPlugin = (mode) => {
 			if (id === virtualAuthModuleId) return resolvedVirtualAuthModuleId;
 			if (id === virtualConfigModuleId) return resolvedVirtualConfigModuleId;
 			if (id === virtualPackageRouterModuleId) return resolvedVirtualPackageRouterModuleId;
+			if (id === virtualPackageStartModuleId) return resolvedVirtualPackageStartModuleId;
+			if (id === virtualRequestGuardModuleId) return resolvedVirtualRequestGuardModuleId;
 			if (id === virtualRouteTreeModuleId) return generatedRouteTreeFile;
 		},
 		load(id) {
 			if (id === resolvedVirtualPackageRouterModuleId) return `export { getRouter } from ${JSON.stringify(toImportPath(packageRouterFile))};`;
+			if (id === resolvedVirtualPackageStartModuleId) return `export { startInstance } from ${JSON.stringify(toImportPath(packageStartFile))};`;
+			if (id === resolvedVirtualRequestGuardModuleId) {
+				if (mode.type === "hosted") return "export default undefined;";
+				return [
+					`import { guardLocalConsoleRequest, LOCAL_CONSOLE_SESSION_ENV, LOCAL_CONSOLE_SESSION_PARAM } from ${JSON.stringify(toImportPath(localConsoleGuardFile))};`,
+					"let session = process.env[LOCAL_CONSOLE_SESSION_ENV] || undefined;",
+					"if (session === undefined && import.meta.env.DEV) {",
+					"  const bytes = crypto.getRandomValues(new Uint8Array(32));",
+					"  session = btoa(String.fromCharCode(...bytes)).replaceAll(\"+\", \"-\").replaceAll(\"/\", \"_\").replaceAll(\"=\", \"\");",
+					"  console.info(`Open the console at /?${LOCAL_CONSOLE_SESSION_PARAM}=${session}`);",
+					"}",
+					"const port = process.env.NITRO_PORT || process.env.PORT || undefined;",
+					"export default (request) =>",
+					"  guardLocalConsoleRequest(request, {",
+					"    session,",
+					"    port: import.meta.env.DEV ? undefined : port,",
+					"    checkHost: !import.meta.env.DEV,",
+					"  });"
+				].join("\n");
+			}
 			if (id === resolvedVirtualConfigModuleId) {
 				if (mode.type === "local") return [
 					"import { loadConfig } from \"@hot-updater/cli-tools\";",
@@ -86,7 +115,9 @@ const createConsoleModulesPlugin = (mode) => {
 					"    database: config.database,",
 					"    storage: config.storage,",
 					"    plugins: config.plugins,",
-					"    console: { gitUrl: config.console.gitUrl },",
+					"    console: {",
+					"      gitUrl: config.console.gitUrl,",
+					"    },",
 					"  };",
 					"};"
 				].join("\n");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hot-updater/console",
   "type": "module",
-  "version": "1.1.4",
+  "version": "1.2.0-rc.1",
   "files": [
     ".output",
     "lib",
@@ -57,11 +57,12 @@
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
+    "uqr": "^0.1.3",
     "verkit": "0.4.0",
-    "@hot-updater/bsdiff": "1.1.4",
-    "@hot-updater/plugin-core": "1.1.4",
-    "@hot-updater/protocol": "1.1.4",
-    "@hot-updater/server": "1.1.4"
+    "@hot-updater/bsdiff": "1.2.0-rc.1",
+    "@hot-updater/protocol": "1.2.0-rc.1",
+    "@hot-updater/plugin-core": "1.2.0-rc.1",
+    "@hot-updater/server": "1.2.0-rc.1"
   },
   "devDependencies": {
     "@tanstack/devtools-vite": "^0.6.0",
@@ -86,8 +87,8 @@
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "4.1.4",
     "web-vitals": "^5.1.0",
-    "@hot-updater/cli-tools": "1.1.4",
-    "@hot-updater/mock": "1.1.4"
+    "@hot-updater/cli-tools": "1.2.0-rc.1",
+    "@hot-updater/mock": "1.2.0-rc.1"
   },
   "description": "React Native OTA solution for self-hosted",
   "license": "SEE LICENSE IN LICENSE",

package/src/components/AppSidebar.tsx

@@ -1,5 +1,5 @@
 import { Link, useRouterState } from "@tanstack/react-router";
-import { LogOut, Moon, Package, Sun } from "lucide-react";
+import { LogOut, HardDrive, Moon, Package, Sun } from "lucide-react";
 import { type ReactElement, type ReactNode, useState } from "react";
 import { toast } from "sonner";
 
@@ -58,6 +58,17 @@ export function AppSidebar({ canSignOut = false }: { canSignOut?: boolean }) {
         />
       ),
     },
+    {
+      label: "Native builds",
+      icon: <HardDrive />,
+      // A build's page keeps its list's item active.
+      active:
+        currentPath === "/native-builds" ||
+        currentPath.startsWith("/native-builds/"),
+      link: (
+        <Link to="/native-builds" onClick={closeMobileSidebar} search={{}} />
+      ),
+    },
     // Each feature that is on adds its item, as the feature registry lists it.
     ...featureUi.flatMap(({ features, label, navigation }) =>
       navigation === undefined

package/src/components/ConsoleAccessPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { HotUpdaterLogo } from "@/components/HotUpdaterLogo";
 import { Button } from "@/components/ui/button";
@@ -15,6 +15,40 @@ const providerLabel: Record<ConsoleAuthProvider, string> = {
   google: "Google",
 };
 
+/** A path on this console, or the root for anything that could leave it. */
+const consolePath = (target: string) =>
+  target.startsWith("/") && !/^\/[/\\]/.test(target) ? target : "/";
+
+/**
+ * Where sign-in returns to: the page that asked for it, as a path on this
+ * console, so a link to a build lands on that build. A page a route sent
+ * here names its own target in `returnTo`, relative to the page, as the
+ * native build download does: sign-in returns there instead, when it is on
+ * this console's origin. Anything that could leave the console, such as
+ * `//host` or `/\host`, returns to the page, or to the root.
+ */
+export const signInCallbackURL = (location: {
+  readonly href: string;
+  readonly pathname: string;
+  readonly search: string;
+}): string => {
+  const page = consolePath(`${location.pathname}${location.search}`);
+  const returnTo = new URLSearchParams(location.search).get("returnTo");
+  if (returnTo === null) return page;
+  try {
+    const target = new URL(returnTo, location.href);
+    return target.origin === new URL(location.href).origin
+      ? consolePath(`${target.pathname}${target.search}`)
+      : page;
+  } catch {
+    return page;
+  }
+};
+
+/** Whether sign-in returns to a native build's download. */
+const returnsToDownload = (callbackURL: string) =>
+  /\/api\/native-builds\/[^/]+\/download$/.test(callbackURL);
+
 export function ConsoleAccessPage({
   access,
   providers,
@@ -22,6 +56,13 @@ export function ConsoleAccessPage({
   const [pendingProvider, setPendingProvider] =
     useState<ConsoleAuthProvider | null>(null);
   const [signingOut, setSigningOut] = useState(false);
+  // Read after the page mounts: the server renders it without a location.
+  const [downloadAfterSignIn, setDownloadAfterSignIn] = useState(false);
+  useEffect(() => {
+    setDownloadAfterSignIn(
+      returnsToDownload(signInCallbackURL(window.location)),
+    );
+  }, []);
   const [error, setError] = useState<string | null>(null);
 
   const signIn = async (provider: ConsoleAuthProvider) => {
@@ -29,7 +70,10 @@ export function ConsoleAccessPage({
     setError(null);
     try {
       const response = await fetch("/api/auth/sign-in/social", {
-        body: JSON.stringify({ callbackURL: "/", provider }),
+        body: JSON.stringify({
+          callbackURL: signInCallbackURL(window.location),
+          provider,
+        }),
         headers: { "content-type": "application/json" },
         method: "POST",
       });
@@ -71,7 +115,9 @@ export function ConsoleAccessPage({
           <div>
             <h1 className="text-lg font-semibold">Hot Updater Console</h1>
             <p className="text-muted-foreground text-sm">
-              Sign in to manage OTA bundles.
+              {downloadAfterSignIn
+                ? "Sign in to download the build. It starts once you're in."
+                : "Sign in to manage OTA bundles."}
             </p>
           </div>
         </div>

package/src/components/QrCode.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from "react";
+
+import { qrCodePath } from "@/lib/qr-code";
+import { cn } from "@/lib/utils";
+
+/**
+ * A QR code of `value`, drawn as one SVG path with the standard four-module
+ * quiet zone. Phone cameras read dark modules on a light ground, so the code
+ * keeps its own two colors in both themes instead of the theme's tokens.
+ */
+export function QrCode({
+  value,
+  label,
+  className,
+}: {
+  readonly value: string;
+  /** What scanning opens, for screen readers. */
+  readonly label: string;
+  readonly className?: string;
+}) {
+  const { size, path } = useMemo(() => qrCodePath(value), [value]);
+
+  return (
+    <svg
+      aria-label={label}
+      className={cn("aspect-square rounded-md", className)}
+      role="img"
+      shapeRendering="crispEdges"
+      viewBox={`0 0 ${size} ${size}`}
+    >
+      <rect fill="#fff" height={size} width={size} />
+      <path d={path} fill="#000" />
+    </svg>
+  );
+}

package/src/components/SchemaMigrationRequired.tsx

@@ -0,0 +1,139 @@
+import { ArrowUpRight, Copy, RotateCw } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import type { SchemaMigrationStatus } from "@/lib/schema-migration";
+
+export const DOCTOR_COMMAND = "npx hot-updater doctor";
+
+export const DOCTOR_GUIDE_URL = "https://hot-updater.dev/docs/guides/doctor";
+
+/**
+ * What the console shows instead of a page while the schema fence refuses
+ * its database: the settings a migration writes, and doctor, which names the
+ * command that runs it. Every page reads through the fence, so one notice
+ * stands for all.
+ */
+export function SchemaMigrationRequired({
+  status,
+  onRetry,
+}: {
+  readonly status: SchemaMigrationStatus;
+  readonly onRetry: () => Promise<void>;
+}) {
+  const [checking, setChecking] = useState(false);
+  const command = DOCTOR_COMMAND;
+  const configFile = (
+    <code className="font-mono whitespace-nowrap">hot-updater.config.ts</code>
+  );
+  const copyCommand = async () => {
+    try {
+      await navigator.clipboard.writeText(command);
+      toast.success("Command copied");
+    } catch {
+      toast.error("Could not copy the command");
+    }
+  };
+  const checkAgain = async () => {
+    setChecking(true);
+    try {
+      await onRetry();
+    } finally {
+      setChecking(false);
+    }
+  };
+  return (
+    <div className="flex h-svh min-h-0 flex-col">
+      <header className="sticky top-0 z-10 flex shrink-0 items-center gap-3 border-b bg-background px-3 py-3 sm:min-h-12 sm:bg-card/70 sm:px-4 sm:backdrop-blur-sm">
+        <SidebarTrigger className="-ml-1" />
+        <h1 className="text-sm font-medium">Database migration</h1>
+      </header>
+      <div className="flex min-h-0 min-w-0 flex-1 overflow-y-auto bg-muted/5 p-3 sm:p-6">
+        <Empty>
+          <EmptyHeader>
+            {status.migratable ? (
+              <>
+                <EmptyTitle>The database needs a migration</EmptyTitle>
+                <EmptyDescription>
+                  Its schema is older than this console's, so the console stops
+                  before reading it. Run this where {configFile} names the
+                  database: it names the command that migrates it. Then check
+                  again.
+                </EmptyDescription>
+              </>
+            ) : (
+              <>
+                <EmptyTitle>The database's schema doesn't match</EmptyTitle>
+                <EmptyDescription>
+                  A newer Hot Updater migrated it, or it uses a layout this
+                  console can't migrate, so the console stops before reading it.
+                  Run this where {configFile} names the database to see what it
+                  needs.
+                </EmptyDescription>
+              </>
+            )}
+          </EmptyHeader>
+          <EmptyContent>
+            <div className="flex w-full items-center gap-2 rounded-md border bg-muted/40 py-1 pr-1 pl-3">
+              <code className="min-w-0 flex-1 overflow-x-auto text-left font-mono text-xs whitespace-nowrap">
+                {command}
+              </code>
+              <Button
+                aria-label="Copy command"
+                onClick={copyCommand}
+                size="icon-sm"
+                variant="ghost"
+              >
+                <Copy aria-hidden="true" />
+              </Button>
+            </div>
+            {status.settings.length > 0 ? (
+              <ul className="w-full space-y-1 text-left text-xs text-muted-foreground">
+                {status.settings.map(({ key, expected, found }) => (
+                  <li key={key} className="flex justify-between gap-3">
+                    <code className="font-mono">{key}</code>
+                    <span className="tabular-nums">
+                      {found ?? "missing"} → {expected}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+            <div className="flex flex-wrap justify-center gap-2">
+              <Button
+                disabled={checking}
+                onClick={checkAgain}
+                variant="outline"
+              >
+                <RotateCw
+                  aria-hidden="true"
+                  className={checking ? "motion-safe:animate-spin" : undefined}
+                  data-icon="inline-start"
+                />
+                {checking ? "Checking…" : "Check again"}
+              </Button>
+              <a
+                className={buttonVariants({ variant: "ghost" })}
+                href={DOCTOR_GUIDE_URL}
+                rel="noreferrer"
+                target="_blank"
+              >
+                Doctor guide
+                <ArrowUpRight aria-hidden="true" data-icon="inline-end" />
+              </a>
+            </div>
+          </EmptyContent>
+        </Empty>
+      </div>
+    </div>
+  );
+}

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

@@ -2,11 +2,13 @@ import { Badge } from "@/components/ui/badge";
 
 /**
  * A built-in bundle's ID: every native build makes it from its build time with
- * the random bits zeroed, or the nil UUID in a debug build. A deployed
- * bundle's ID is a random UUIDv7, so it never has this shape.
+ * zero random bits, and builds an earlier `hot-updater native-build` made, in
+ * the field still, have a node of a platform byte (`01` iOS, `02` Android) and
+ * random bits; or the nil UUID in a debug build. A deployed bundle's ID is a
+ * random UUIDv7, so it practically never has this shape.
  */
 const BUILTIN_BUNDLE_ID =
-  /^(?:[0-9a-f]{8}-[0-9a-f]{4}-7000-8000-000000000000|00000000-0000-0000-0000-000000000000)$/iu;
+  /^(?:[0-9a-f]{8}-[0-9a-f]{4}-7000-8000-(?:000000000000|0[12][0-9a-f]{10})|00000000-0000-0000-0000-000000000000)$/iu;
 
 /**
  * Whether a reported bundle is one a native build shipped: the report's

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

@@ -0,0 +1,163 @@
+import { Link } from "@tanstack/react-router";
+import { ArrowUpRight, CircleCheck, History } from "lucide-react";
+
+import { TimestampDisplay } from "@/components/TimestampDisplay";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  nativeBuildArtifacts,
+  nativeBuildTarget,
+  platformLabel,
+} from "@/lib/native-builds";
+import type { NativeBuildDetail } from "@/lib/server/nativeBuilds";
+
+import { CommitLink } from "./CommitLink";
+import { ShortHash } from "./ShortHash";
+import { isSubmitted, StoreSubmissionBadge } from "./StoreSubmission";
+
+function Row({
+  label,
+  children,
+}: {
+  readonly label: string;
+  readonly children: React.ReactNode;
+}) {
+  return (
+    <div className="grid gap-1 sm:grid-cols-[10rem_minmax(0,1fr)] sm:gap-4">
+      <dt className="text-xs font-medium text-muted-foreground">{label}</dt>
+      <dd className="min-w-0 text-sm">{children}</dd>
+    </div>
+  );
+}
+
+/** Whether new deploys patch from this build, or from a newer one of its scope. */
+function BaselineStatus({ detail }: { readonly detail: NativeBuildDetail }) {
+  const { build, newestInScope } = detail;
+  if (newestInScope === null) return null;
+  if (newestInScope.id === build.id) {
+    return (
+      <div className="flex items-start gap-2 rounded-md border bg-muted/40 p-3 text-xs">
+        <CircleCheck
+          aria-hidden="true"
+          className="mt-0.5 size-3.5 shrink-0 text-muted-foreground"
+        />
+        <p>
+          <span className="font-medium">Current baseline.</span> New deploys to
+          this scope add a patch from this build's bundle.
+        </p>
+      </div>
+    );
+  }
+  return (
+    <div className="flex items-start gap-2 rounded-md border bg-muted/40 p-3 text-xs">
+      <History
+        aria-hidden="true"
+        className="mt-0.5 size-3.5 shrink-0 text-muted-foreground"
+      />
+      <p>
+        <span className="font-medium">Superseded</span> by{" "}
+        <Link
+          className="inline-flex items-center gap-0.5 font-medium underline underline-offset-4"
+          params={{ buildId: newestInScope.id }}
+          to="/native-builds/$buildId"
+        >
+          {platformLabel(newestInScope.platform)}{" "}
+          {nativeBuildArtifacts[newestInScope.artifact_kind].label} ·{" "}
+          <TimestampDisplay uuid={newestInScope.id} />
+          <ArrowUpRight aria-hidden="true" className="size-3" />
+        </Link>
+        . New deploys patch from that build, so this one gets no new patches.
+      </p>
+    </div>
+  );
+}
+
+/**
+ * The build's built-in bundle: the bundle every install runs until its
+ * first OTA, and the base that OTA's patch starts from.
+ */
+export function BuiltInBundleCard({
+  detail,
+}: {
+  readonly detail: NativeBuildDetail;
+}) {
+  const { build, builtInBundle, channel } = detail;
+  const target = nativeBuildTarget(build);
+  const childCount = builtInBundle?.childCount ?? 0;
+
+  return (
+    <Card className="overflow-hidden shadow-sm">
+      <CardHeader className="border-b px-4 py-3">
+        <CardTitle className="text-sm">
+          <h2>Built-in bundle</h2>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4 p-4 sm:p-6">
+        <dl className="flex flex-col gap-3">
+          <Row label="Bundle ID">
+            <span className="break-all font-mono text-xs" translate="no">
+              {build.min_bundle_id}
+            </span>
+          </Row>
+          <Row label="OTAs patching from it">
+            <span className="tabular-nums">
+              {childCount === 1 ? "1 bundle" : `${childCount} bundles`}
+            </span>
+          </Row>
+          <Row label="Scope">
+            <span className="flex flex-wrap items-center gap-1.5">
+              <Link
+                aria-label={`Show the builds that embed ${channel}`}
+                search={{ channel }}
+                to="/native-builds"
+              >
+                <Badge translate="no" variant="outline">
+                  {channel}
+                </Badge>
+              </Link>
+              <span className="text-xs">{platformLabel(build.platform)}</span>
+              <span className="text-xs text-muted-foreground">
+                · {target.label}
+              </span>
+              {build.fingerprint_hash === null ? (
+                <span className="font-mono text-xs" translate="no">
+                  {target.value}
+                </span>
+              ) : (
+                <ShortHash
+                  label="fingerprint"
+                  length={12}
+                  value={build.fingerprint_hash}
+                />
+              )}
+            </span>
+          </Row>
+          {!build.build_number ? null : (
+            <Row label="Build number">
+              <span className="font-mono text-xs tabular-nums" translate="no">
+                {build.build_number}
+              </span>
+            </Row>
+          )}
+          {isSubmitted(build) ? (
+            <Row label="Store">
+              <StoreSubmissionBadge build={build} withTime />
+            </Row>
+          ) : null}
+          <Row label="Commit">
+            <CommitLink hash={build.git_commit_hash} />
+          </Row>
+          <Row label="Created">
+            <TimestampDisplay format="both" uuid={build.id} />
+          </Row>
+        </dl>
+        <BaselineStatus detail={detail} />
+        <p className="text-xs text-muted-foreground">
+          A store or test install of this build runs this bundle until its first
+          OTA. That OTA downloads as a patch from this bundle when one exists,
+          and as the full bundle otherwise.
+        </p>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { useConfigQuery } from "@/lib/api";
+import { getCommitUrl } from "@/lib/git";
+
+import { ShortHash } from "./ShortHash";
+
+/**
+ * A build's commit as git shows it, its first 7 characters: a link to the
+ * commit when `console.gitUrl` is set, else a button that copies the full
+ * SHA. The full SHA shows on hover either way.
+ */
+export function CommitLink({ hash }: { readonly hash: string | null }) {
+  const config = useConfigQuery();
+  if (hash === null) return <span className="text-muted-foreground">—</span>;
+  const url = getCommitUrl(config.data?.console.gitUrl, hash);
+  return url === null ? (
+    <ShortHash label="commit" length={7} value={hash} />
+  ) : (
+    <a
+      className="font-mono text-xs whitespace-nowrap underline-offset-4 hover:underline"
+      href={url}
+      onClick={(event) => event.stopPropagation()}
+      rel="noreferrer"
+      target="_blank"
+      title={hash}
+      translate="no"
+    >
+      {hash.slice(0, 7)}
+    </a>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { Copy } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+
+/** A command or link on one line, with a button that copies it. */
+export function CopyableText({
+  label,
+  value,
+  wrap = false,
+}: {
+  /** What the copy button copies, such as "the install command". */
+  readonly label: string;
+  readonly value: string;
+  /** Whether a long value wraps instead of scrolling, so all of it shows. */
+  readonly wrap?: boolean;
+}) {
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      toast.success("Copied to clipboard");
+    } catch {
+      toast.error(`Could not copy ${label}`);
+    }
+  };
+  return (
+    <div className="flex w-full min-w-0 items-center gap-2 rounded-md border bg-muted/40 py-1 pr-1 pl-3">
+      <code
+        className={
+          wrap
+            ? "min-w-0 flex-1 text-left font-mono text-xs break-all whitespace-pre-wrap"
+            : "min-w-0 flex-1 overflow-x-auto text-left font-mono text-xs whitespace-nowrap"
+        }
+      >
+        {value}
+      </code>
+      <Button
+        aria-label={`Copy ${label}`}
+        className="size-11 sm:size-7"
+        onClick={() => void copy()}
+        size="icon-sm"
+        variant="ghost"
+      >
+        <Copy aria-hidden="true" />
+      </Button>
+    </div>
+  );
+}