@hot-updater/console 1.0.0-rc.8 → 1.0.0

package/src/components/AppSidebar.tsx

@@ -1,16 +1,9 @@
 import { Link, useRouterState } from "@tanstack/react-router";
-import {
-  ChartNoAxesCombined,
-  KeyRound,
-  LogOut,
-  Moon,
-  Package,
-  ShieldCheck,
-  Sun,
-} from "lucide-react";
-import { useState } from "react";
+import { LogOut, Moon, Package, Sun } from "lucide-react";
+import { type ReactElement, type ReactNode, useState } from "react";
 import { toast } from "sonner";
 
+import { useFeatureUi } from "@/components/features/FeatureSlots";
 import { HotUpdaterLogo } from "@/components/HotUpdaterLogo";
 import { useTheme } from "@/components/ThemeProvider";
 import {
@@ -24,28 +17,70 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  useSidebar,
 } from "@/components/ui/sidebar";
-import { useApiKeyCapabilityQuery } from "@/lib/api-keys-api";
+
+type NavigationItem = {
+  readonly label: string;
+  readonly icon: ReactNode;
+  readonly active: boolean;
+  readonly link: ReactElement;
+};
 
 export function AppSidebar({ canSignOut = false }: { canSignOut?: boolean }) {
+  const { setOpenMobile } = useSidebar();
+  const closeMobileSidebar = () => setOpenMobile(false);
   const [signingOut, setSigningOut] = useState(false);
-  const apiKeyCapability = useApiKeyCapabilityQuery();
+  const featureUi = useFeatureUi();
   const { theme, setTheme } = useTheme();
   const routerState = useRouterState();
   const currentPath = routerState.location.pathname;
 
-  const isBundlesActive = currentPath === "/";
-  const isInsightsActive =
-    currentPath === "/insights" ||
-    currentPath === "/insights/distribution" ||
-    currentPath === "/installations";
-  const isApiKeysActive = currentPath === "/api-keys";
-  const isSigningActive = currentPath === "/signing";
+  const navigation: readonly NavigationItem[] = [
+    {
+      label: "Bundles",
+      icon: <Package />,
+      active: currentPath === "/",
+      link: (
+        <Link
+          to="/"
+          onClick={closeMobileSidebar}
+          search={{
+            afterReleaseId: undefined,
+            beforeReleaseId: undefined,
+            channelId: undefined,
+            enabled: undefined,
+            releaseId: undefined,
+            platform: undefined,
+            bundleId: undefined,
+            scopeKey: undefined,
+          }}
+        />
+      ),
+    },
+    // Each feature that is on adds its item, as the feature registry lists it.
+    ...featureUi.flatMap(({ features, label, navigation }) =>
+      navigation === undefined
+        ? []
+        : [
+            {
+              label,
+              icon: navigation.icon,
+              active: navigation.paths.includes(currentPath),
+              link: navigation.link({ features, onClick: closeMobileSidebar }),
+            },
+          ],
+    ),
+  ];
 
   const signOut = async () => {
     setSigningOut(true);
     try {
-      const response = await fetch("/api/auth/sign-out", { method: "POST" });
+      const response = await fetch("/api/auth/sign-out", {
+        body: "{}",
+        headers: { "content-type": "application/json" },
+        method: "POST",
+      });
       if (!response.ok) throw new Error("Sign-out failed. Please try again.");
       window.location.reload();
     } catch {
@@ -59,6 +94,7 @@ export function AppSidebar({ canSignOut = false }: { canSignOut?: boolean }) {
       <SidebarHeader className="h-12 justify-center">
         <Link
           to="/"
+          onClick={closeMobileSidebar}
           search={{
             afterReleaseId: undefined,
             beforeReleaseId: undefined,
@@ -66,9 +102,8 @@ export function AppSidebar({ canSignOut = false }: { canSignOut?: boolean }) {
             enabled: undefined,
             releaseId: undefined,
             platform: undefined,
-            targetAppVersion: undefined,
             bundleId: undefined,
-            page: undefined,
+            scopeKey: undefined,
           }}
           className="flex items-center gap-3 p-1 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-2"
         >
@@ -89,63 +124,18 @@ export function AppSidebar({ canSignOut = false }: { canSignOut?: boolean }) {
           <SidebarGroupLabel>Navigation</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
-              <SidebarMenuItem>
-                <SidebarMenuButton
-                  isActive={isBundlesActive}
-                  render={
-                    <Link
-                      to="/"
-                      search={{
-                        afterReleaseId: undefined,
-                        beforeReleaseId: undefined,
-                        channelId: undefined,
-                        enabled: undefined,
-                        releaseId: undefined,
-                        platform: undefined,
-                        targetAppVersion: undefined,
-                        bundleId: undefined,
-                        page: undefined,
-                      }}
-                    />
-                  }
-                  tooltip="Bundles"
-                >
-                  <Package />
-                  <span>Bundles</span>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-              <SidebarMenuItem>
-                <SidebarMenuButton
-                  isActive={isInsightsActive}
-                  render={<Link to="/insights" />}
-                  tooltip="Insights"
-                >
-                  <ChartNoAxesCombined />
-                  <span>Insights</span>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-              {apiKeyCapability.data?.apiKeys ? (
-                <SidebarMenuItem>
+              {navigation.map((item) => (
+                <SidebarMenuItem key={item.label}>
                   <SidebarMenuButton
-                    isActive={isApiKeysActive}
-                    render={<Link to="/api-keys" />}
-                    tooltip="API keys"
+                    isActive={item.active}
+                    render={item.link}
+                    tooltip={item.label}
                   >
-                    <KeyRound />
-                    <span>API keys</span>
+                    {item.icon}
+                    <span>{item.label}</span>
                   </SidebarMenuButton>
                 </SidebarMenuItem>
-              ) : null}
-              <SidebarMenuItem>
-                <SidebarMenuButton
-                  isActive={isSigningActive}
-                  render={<Link to="/signing" />}
-                  tooltip="Bundle signing"
-                >
-                  <ShieldCheck />
-                  <span>Bundle signing</span>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
+              ))}
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
@@ -179,6 +169,15 @@ export function AppSidebar({ canSignOut = false }: { canSignOut?: boolean }) {
             </SidebarMenuButton>
           </SidebarMenuItem>
         </SidebarMenu>
+        {/* The Console's license asks a hosted service to keep this notice. */}
+        <a
+          href="https://hot-updater.dev"
+          target="_blank"
+          rel="noreferrer"
+          className="px-2 pb-1 text-[11px] text-sidebar-foreground/60 hover:text-sidebar-foreground group-data-[collapsible=icon]:hidden"
+        >
+          Powered by hot-updater
+        </a>
       </SidebarFooter>
     </Sidebar>
   );

package/src/components/ConsoleAccessPage.tsx

@@ -48,7 +48,11 @@ export function ConsoleAccessPage({
     setSigningOut(true);
     setError(null);
     try {
-      const response = await fetch("/api/auth/sign-out", { method: "POST" });
+      const response = await fetch("/api/auth/sign-out", {
+        body: "{}",
+        headers: { "content-type": "application/json" },
+        method: "POST",
+      });
       if (!response.ok) {
         throw new Error("Sign-out failed.");
       }

package/src/components/ConsoleFeatureUnavailable.tsx

@@ -0,0 +1,80 @@
+import { ArrowUpRight } from "lucide-react";
+
+import { NotFoundPage } from "@/components/NotFoundPage";
+import { buttonVariants } from "@/components/ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { consoleFeatures, unavailableReason } from "@/lib/console-features";
+import {
+  notFoundFeature,
+  useConsoleFeatures,
+} from "@/lib/console-features-api";
+
+export const CONSOLE_DEPLOYMENT_GUIDE_URL =
+  "https://hot-updater.dev/docs/guides/console-deployment";
+
+/**
+ * A feature route's not-found state: the plugin to add, or, for a feature a
+ * self-hosted server does not serve, the database config it needs.
+ */
+export function ConsoleFeatureUnavailable({
+  data,
+}: {
+  readonly data?: unknown;
+}) {
+  const feature = notFoundFeature(data);
+  const remote = useConsoleFeatures().data?.remote === true;
+  if (feature === undefined) return <NotFoundPage />;
+
+  const { label, plugin } = consoleFeatures[feature];
+  const pluginCall = <code className="font-mono">{`${plugin}()`}</code>;
+  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">{label}</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>
+            {unavailableReason(feature, { remote }) === "remote" ? (
+              <>
+                <EmptyTitle>Needs the server's database</EmptyTitle>
+                <EmptyDescription>
+                  This console reaches a self-hosted server through its admin
+                  API, which does not serve this page. Configure the console
+                  with the database the server uses.
+                </EmptyDescription>
+              </>
+            ) : (
+              <>
+                <EmptyTitle>{label} not installed</EmptyTitle>
+                <EmptyDescription>
+                  Add {pluginCall} to <code className="font-mono">plugins</code>{" "}
+                  where you create the server and in the console config.
+                </EmptyDescription>
+              </>
+            )}
+          </EmptyHeader>
+          <EmptyContent>
+            <a
+              className={buttonVariants({ variant: "outline" })}
+              href={CONSOLE_DEPLOYMENT_GUIDE_URL}
+              rel="noreferrer"
+              target="_blank"
+            >
+              Console setup guide
+              <ArrowUpRight aria-hidden="true" data-icon="inline-end" />
+            </a>
+          </EmptyContent>
+        </Empty>
+      </div>
+    </div>
+  );
+}

package/src/components/NotFoundPage.tsx

@@ -3,14 +3,14 @@ import { Link } from "@tanstack/react-router";
 import { buttonVariants } from "@/components/ui/button";
 
 const homeSearch = {
-  channel: undefined,
-  platform: undefined,
-  targetAppVersion: undefined,
-  page: undefined,
-  after: undefined,
-  before: undefined,
+  afterReleaseId: undefined,
+  beforeReleaseId: undefined,
   bundleId: undefined,
-  expandedBundleId: undefined,
+  channelId: undefined,
+  enabled: undefined,
+  platform: undefined,
+  releaseId: undefined,
+  scopeKey: undefined,
 } as const;
 
 export function NotFoundPage() {

package/src/components/features/FeatureSlots.tsx

@@ -0,0 +1,103 @@
+import type { ComponentType, ReactElement, ReactNode } from "react";
+
+import {
+  type ConsoleFeature,
+  type ConsoleFeatures,
+  consoleFeatures,
+} from "@/lib/console-features";
+import { useConsoleFeatures } from "@/lib/console-features-api";
+
+import { apiKeysFeatureUi } from "./api-keys/apiKeysFeatureUi";
+import { insightsFeatureUi } from "./insights/insightsFeatureUi";
+import { remoteConfigFeatureUi } from "./remote-config/remoteConfigFeatureUi";
+
+/** A release, as the Bundles page and the release editor hand it to slots. */
+export interface ReleaseSlotInput {
+  readonly releaseId: string;
+  readonly platform: "ios" | "android";
+  readonly channel: string;
+  /** The release runs the native build's built-in bundle, which nothing downloads. */
+  readonly builtIn?: boolean;
+}
+
+/**
+ * A column a feature adds to the Bundles page's release list. `Cell` renders
+ * one release, and gets the page's releases too, so a feature can read them
+ * all in one request that every cell shares.
+ */
+export interface ReleaseColumn {
+  readonly Cell: ComponentType<{
+    readonly releaseId: string;
+    readonly releases: readonly ReleaseSlotInput[];
+  }>;
+}
+
+/** A navigation item a feature adds below Bundles. */
+export interface FeatureNavigation {
+  readonly icon: ReactNode;
+  /** The pathnames where the item shows as active. */
+  readonly paths: readonly string[];
+  readonly link: (props: {
+    readonly features: ConsoleFeatures;
+    readonly onClick: () => void;
+  }) => ReactElement;
+}
+
+/** What a feature adds to the console's pages while it is on. */
+export interface ConsoleFeatureUi {
+  readonly navigation?: FeatureNavigation;
+  readonly releaseColumn?: ReleaseColumn;
+  /** A section of the release editor, above its settings. */
+  readonly releaseSection?: ComponentType<{
+    readonly release: ReleaseSlotInput;
+  }>;
+}
+
+/** What each feature adds, keyed like `consoleFeatures`. */
+export type ConsoleFeatureUiRegistry = {
+  readonly [F in ConsoleFeature]?: ConsoleFeatureUi;
+};
+
+const consoleFeatureUi: ConsoleFeatureUiRegistry = {
+  ...insightsFeatureUi,
+  ...apiKeysFeatureUi,
+  ...remoteConfigFeatureUi,
+};
+
+const featureIds = Object.keys(consoleFeatures) as ConsoleFeature[];
+
+/**
+ * What the features that are on add, in the registry's order, with each
+ * feature's label; nothing until the features load.
+ */
+export const useFeatureUi = (): readonly (ConsoleFeatureUi & {
+  readonly feature: ConsoleFeature;
+  readonly label: string;
+  readonly features: ConsoleFeatures;
+})[] => {
+  const features = useConsoleFeatures().data?.features;
+  if (features === undefined) return [];
+  return featureIds.flatMap((feature) => {
+    const ui = consoleFeatureUi[feature];
+    return ui !== undefined && features[feature]
+      ? [{ ...ui, feature, label: consoleFeatures[feature].label, features }]
+      : [];
+  });
+};
+
+/** The release list's feature columns, with their headers. */
+export const useReleaseColumns = () =>
+  useFeatureUi().flatMap(({ feature, label, releaseColumn }) =>
+    releaseColumn === undefined ? [] : [{ ...releaseColumn, feature, label }],
+  );
+
+/** The release editor's feature sections, for one release. */
+export function ReleaseSections({
+  release,
+}: {
+  readonly release: ReleaseSlotInput;
+}) {
+  return useFeatureUi().map(({ feature, releaseSection: Section }) =>
+    Section === undefined ? null : <Section key={feature} release={release} />,
+  );
+}

package/src/components/features/api-keys/apiKeysFeatureUi.tsx

@@ -0,0 +1,15 @@
+import { Link } from "@tanstack/react-router";
+import { KeyRound } from "lucide-react";
+
+import type { ConsoleFeatureUiRegistry } from "../FeatureSlots";
+
+/** What API key management adds: its navigation item. */
+export const apiKeysFeatureUi = {
+  apiKeys: {
+    navigation: {
+      icon: <KeyRound />,
+      paths: ["/api-keys"],
+      link: ({ onClick }) => <Link to="/api-keys" onClick={onClick} />,
+    },
+  },
+} satisfies ConsoleFeatureUiRegistry;

package/src/components/features/bundles/BundleMetadata.tsx

@@ -1,5 +1,5 @@
-import { getPatchBaseFileHash, getPatchFileHash } from "@hot-updater/core";
 import type { Bundle, ReleaseRow } from "@hot-updater/plugin-core";
+import { getPatchBaseFileHash, getPatchFileHash } from "@hot-updater/protocol";
 import { ExternalLink } from "lucide-react";
 
 import { HashValueDisplay } from "@/components/HashValueDisplay";
@@ -36,7 +36,7 @@ export function BundleMetadata({ bundle, release }: BundleMetadataProps) {
   const hasMetadata =
     target ||
     bundle?.gitCommitHash ||
-    bundle?.fileHash ||
+    bundle?.manifestFileHash ||
     hbcPatchBaseFileHash ||
     hbcPatchFileHash;
 
@@ -86,11 +86,14 @@ export function BundleMetadata({ bundle, release }: BundleMetadataProps) {
               }
             />
           ) : null}
-          {bundle?.fileHash ? (
+          {bundle?.manifestFileHash ? (
             <Row
-              label="Bundle hash"
+              label="Manifest hash"
               value={
-                <HashValueDisplay maxLength={16} value={bundle.fileHash} />
+                <HashValueDisplay
+                  maxLength={16}
+                  value={bundle.manifestFileHash}
+                />
               }
             />
           ) : null}

package/src/components/features/bundles/RolloutCohortsDialog.tsx

@@ -2,7 +2,7 @@ import {
   getNumericCohortRolloutPosition,
   NUMERIC_COHORT_SIZE,
   normalizeRolloutCohortCount,
-} from "@hot-updater/core";
+} from "@hot-updater/protocol";
 import { List } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";

package/src/components/features/channels/ChannelManagementDialog.tsx

@@ -1,4 +1,4 @@
-import { createUUIDv7, type ChannelRow } from "@hot-updater/plugin-core";
+import type { ChannelRow } from "@hot-updater/plugin-core";
 import { Loader2, Plus, Tag, Trash2 } from "lucide-react";
 import { type FormEvent, useState } from "react";
 import { toast } from "sonner";
@@ -28,6 +28,7 @@ import {
   useCreateChannelMutation,
   useDeleteChannelMutation,
 } from "@/lib/api";
+import { useDialogTarget } from "@/lib/use-dialog-target";
 
 interface ChannelManagementDialogProps {
   open: boolean;
@@ -42,6 +43,8 @@ export function ChannelManagementDialog({
   const [channelToDelete, setChannelToDelete] = useState<ChannelRow | null>(
     null,
   );
+  // Kept while the confirmation animates closed.
+  const shownChannelToDelete = useDialogTarget(channelToDelete);
   const { data: channels = [], isPending: isLoadingChannels } =
     useChannelsQuery();
   const createChannel = useCreateChannelMutation();
@@ -55,10 +58,7 @@ export function ChannelManagementDialog({
     }
 
     try {
-      const result = await createChannel.mutateAsync({
-        row: { id: createUUIDv7(), name: normalizedName },
-        onConflict: "returnExisting",
-      });
+      const result = await createChannel.mutateAsync({ name: normalizedName });
       setChannelName("");
       if (result.inserted) {
         toast.success(`Channel ${result.row.name} created`);
@@ -199,7 +199,9 @@ export function ChannelManagementDialog({
       >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete {channelToDelete?.name}?</AlertDialogTitle>
+            <AlertDialogTitle>
+              Delete {shownChannelToDelete?.name}?
+            </AlertDialogTitle>
             <AlertDialogDescription>
               Only empty channels can be removed. The server checks this when
               you delete it, and the channel can be created again later with a

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

@@ -36,13 +36,18 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import type { InsightsWindow } from "@/lib/insights-api";
+import {
+  DEFAULT_INSIGHTS_RETENTION,
+  type InsightsRetentionDays,
+  keepsTwelveMonths,
+} from "@/lib/insights-retention";
 import type { InsightsSearch } from "@/lib/insights-search";
-import type { AppUsageReport } from "@/lib/insights-usage";
+import type { AppUsageReport, UsageWindow } from "@/lib/insights-usage";
 
+import { EstimatedCount } from "./EstimatedCount";
 import { InsightsErrorAlert } from "./InsightsErrorAlert";
 import { InsightsInfo } from "./InsightsInfo";
-import { InsightsPeriodSelector } from "./InsightsPeriodSelector";
+import { UsagePeriodSelector } from "./InsightsPeriodSelector";
 import { ReportingDevicesSummary } from "./ReportingDevicesSummary";
 
 const dates = new Intl.DateTimeFormat("en", {
@@ -62,23 +67,42 @@ export function AppUsage({
   search,
   window,
   onWindowChange,
+  retention = DEFAULT_INSIGHTS_RETENTION,
 }: {
   readonly query: UseQueryResult<AppUsageReport>;
+  /** How long the server keeps Insights rows. */
+  readonly retention?: InsightsRetentionDays;
   readonly search: InsightsSearch;
-  readonly window: InsightsWindow;
-  readonly onWindowChange: (window: InsightsWindow) => void;
+  readonly window: UsageWindow;
+  readonly onWindowChange: (window: UsageWindow) => void;
 }) {
   const report = query.error ? undefined : query.data;
   const formatTime = (ms: number) =>
-    (window === "30d" ? dates : times).format(ms);
+    (window === "30d" || window === "12m" ? dates : times).format(ms);
+  const distributionPeriod = report
+    ? `since ${dates.format(report.distributionSinceMs)}, 00:00 UTC`
+    : "in the selected period";
+  const distributionTotals = report
+    ? {
+        versions: report.versions.reduce(
+          (sum, row) => sum + row.installations,
+          0,
+        ),
+        platforms: report.platforms.reduce(
+          (sum, row) => sum + row.installations,
+          0,
+        ),
+      }
+    : undefined;
   return (
     <div className="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(16rem,1fr)]">
       <Card aria-label="App usage" role="region" className="min-w-0 shadow-sm">
         <CardHeader className="flex-row flex-wrap items-center justify-between gap-4">
           <CardTitle>App usage</CardTitle>
-          <InsightsPeriodSelector
+          <UsagePeriodSelector
             window={window}
             onWindowChange={onWindowChange}
+            twelveMonths={keepsTwelveMonths(retention)}
           />
         </CardHeader>
         <CardContent className="flex flex-col gap-4">
@@ -183,7 +207,11 @@ export function AppUsage({
                       <TableRow key={point.startMs}>
                         <TableCell>{times.format(point.startMs)}</TableCell>
                         <TableCell className="text-right tabular-nums">
-                          {point.installations?.toLocaleString() ?? "Unknown"}
+                          {point.installations === null ? (
+                            "Unknown"
+                          ) : (
+                            <EstimatedCount value={point.installations} />
+                          )}
                         </TableCell>
                       </TableRow>
                     ))}
@@ -204,11 +232,9 @@ export function AppUsage({
             Distribution
           </CardTitle>
           <InsightsInfo label="How distribution is counted">
-            Each reporting installation is counted once, using the app version
-            and platform of its latest matching report in the selected period.
-            {report?.truncated
-              ? " Shares reflect only the available history."
-              : ""}
+            Each installation counts once, by its latest report{" "}
+            {distributionPeriod}.
+            {report?.truncated ? " Some history is missing." : ""}
           </InsightsInfo>
         </CardHeader>
         <CardContent className="flex-1">
@@ -259,7 +285,8 @@ export function AppUsage({
                               : "Android"
                             : row.name;
                         const share =
-                          (row.installations / report.activeInstallations) *
+                          (row.installations /
+                            (distributionTotals?.[dimension] ?? 1)) *
                           100;
                         return (
                           <div

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

@@ -0,0 +1,36 @@
+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 (the CLI's `generateMinBundleId`, and the iOS and
+ * Android fallbacks), or the nil UUID when iOS can't read its build time. A
+ * deployed bundle's ID is a random UUIDv7, so it 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;
+
+/**
+ * Whether a reported bundle is one a native build shipped: the report's
+ * `minBundleId`, or, from an SDK that reports none, an ID in the built-in
+ * shape.
+ */
+export const isBuiltinBundle = (
+  bundleId: string | null | undefined,
+  minBundleId: string | undefined,
+): boolean =>
+  bundleId !== null &&
+  bundleId !== undefined &&
+  (bundleId === minBundleId || BUILTIN_BUNDLE_ID.test(bundleId));
+
+/** Marks a bundle ID as the bundle its native build shipped. */
+export function BuiltinBundleBadge() {
+  return (
+    <Badge
+      className="shrink-0 font-sans font-normal"
+      title="The bundle the native build shipped"
+      variant="secondary"
+    >
+      Built-in bundle
+    </Badge>
+  );
+}