@hot-updater/console 0.36.6 → 1.0.0-rc.0

package/README.md

@@ -17,6 +17,7 @@ Modern web-based management console for Hot Updater built with **TanStack Start*
 ## 🛠️ Tech Stack
 
 ### Frontend
+
 - **TanStack Start** - Full-stack React framework with SSR
 - **TanStack Router** - File-based routing with type safety
 - **TanStack Query** - Data fetching and caching
@@ -25,14 +26,16 @@ Modern web-based management console for Hot Updater built with **TanStack Start*
 - **React 19** - Latest React features
 
 ### UI Components
+
 - **shadcn/ui** - High-quality accessible components (Radix Mira style)
 - **Tailwind CSS v4** - Utility-first CSS with oklch color system
 - **Lucide React** - Beautiful icon library
 - **Sonner** - Toast notifications
 
 ### Backend
+
 - **TanStack Start Server Functions** - Type-safe server endpoints
-- **Hot Updater Plugins** - Storage and database plugin integration
+- **Hot Updater Integration** - Storage and database plugin integration
 
 ## 📦 Installation
 
@@ -92,23 +95,26 @@ src/
 ## 🎨 Key Components
 
 ### Bundle List Page
+
 - **FilterToolbar** - Platform and channel filters with reset button
 - **BundlesTable** - Server-side paginated table (20 per page)
 - **BundleTableColumns** - Column definitions with custom cell renderers
 
 ### Bundle Editor Sheet
+
 - **BundleEditorSheet** - Right-side slide-out panel
 - **BundleEditorForm** - TanStack Form with validation
 - **BundleMetadata** - Read-only bundle information display
 
 ### Dialogs
+
 - **PromoteChannelDialog** - Channel promotion with copy/move toggle
 - **DeleteBundleDialog** - Confirmation dialog with bundle details
 - **EmergencyRollbackButton** - One-click disable + 0% rollout
 
 ## 🔌 API Integration
 
-The console integrates with Hot Updater's plugin system through TanStack Start server functions:
+The console integrates with the configured Hot Updater storage and database plugins through TanStack Start server functions:
 
 - `getConfig()` - Load console configuration
 - `getChannels()` - List available channels
@@ -123,15 +129,27 @@ The console integrates with Hot Updater's plugin system through TanStack Start s
 Configure Hot Updater in `hot-updater.config.ts`:
 
 ```typescript
-import { mockDatabase, mockStorage } from "@hot-updater/mock";
+import {
+  createMockDatabaseData,
+  mockDatabase,
+  mockStorage,
+} from "@hot-updater/mock";
+import { bundleToRow, type Bundle } from "@hot-updater/plugin-core";
+
+const bundles: Bundle[] = [
+  // ... your bundles
+];
+
+const databaseData = createMockDatabaseData();
+for (const bundle of bundles) {
+  databaseData.bundles.set(bundle.id, bundleToRow(bundle));
+}
 
 export default {
   storage: mockStorage({}),
   database: mockDatabase({
     latency: { min: 500, max: 700 },
-    initialBundles: [
-      // ... your bundles
-    ],
+    data: databaseData,
   }),
 };
 ```
@@ -154,7 +172,7 @@ The console uses Tailwind CSS v4 with oklch color space for accessible colors. T
 ## 📊 Data Flow
 
 1. **URL State** → `useFilterParams()` hook manages filter state in URL
-2. **Server Functions** → TanStack Start server functions call Hot Updater plugins
+2. **Server Functions** → TanStack Start server functions call the configured storage and database plugins
 3. **React Query** → `useBundlesQuery()` fetches and caches data
 4. **UI Components** → Display data with shadcn components
 5. **Mutations** → `useUpdateBundleMutation()` updates data with optimistic updates
@@ -171,16 +189,19 @@ The console uses Tailwind CSS v4 with oklch color space for accessible colors. T
 ## 🐛 Troubleshooting
 
 ### Build Errors
+
 - Ensure `.server.ts` files are not imported on the client
 - Check that native modules (`.node`) are excluded from bundling
 
 ### Development Server
+
 - Default port is 3000
 - Change port: `pnpm dev --port 3001`
 
 ### Hot Updater Config
+
 - Ensure `hot-updater.config.ts` is at package root
-- Verify storage and database plugins are correctly initialized
+- Verify the storage and database plugins are correctly initialized
 
 ## 📝 License
 

package/lib/index.d.mts

@@ -0,0 +1,36 @@
+import { ConfigInput } from "@hot-updater/plugin-core";
+
+//#region src/index.d.ts
+type ConsoleAuthProvider = "google" | "github";
+type ConsolePrincipal = Readonly<{
+  email: string;
+  name?: string | null;
+  image?: string | null;
+}>;
+type ConsoleAccess = {
+  status: "unauthenticated";
+} | {
+  status: "forbidden";
+  principal: ConsolePrincipal;
+} | {
+  status: "authorized";
+  principal: ConsolePrincipal;
+};
+type ConsoleAuthAdapter = Readonly<{
+  handle(request: Request): Promise<Response>;
+  getAccess(request: Request): Promise<ConsoleAccess>;
+  getProviders(request: Request): Promise<readonly ConsoleAuthProvider[]>;
+}>;
+type ConsoleSigningConfig = Readonly<{
+  enabled: boolean;
+  provider?: string;
+  publicKeyPath?: string;
+}>;
+type HotUpdaterConsoleConfig = Readonly<Pick<ConfigInput, "console" | "database" | "signing" | "storage">>;
+type ResolvedHotUpdaterConsoleConfig = Readonly<Omit<HotUpdaterConsoleConfig, "signing"> & {
+  signing?: ConsoleSigningConfig;
+}>;
+type HotUpdaterConsoleConfigSource = HotUpdaterConsoleConfig | ((request: Request) => HotUpdaterConsoleConfig | Promise<HotUpdaterConsoleConfig>);
+declare const defineConsoleConfig: <const TConfig extends HotUpdaterConsoleConfigSource>(config: TConfig) => TConfig;
+//#endregion
+export { ConsoleAccess, ConsoleAuthAdapter, ConsoleAuthProvider, ConsolePrincipal, ConsoleSigningConfig, HotUpdaterConsoleConfig, HotUpdaterConsoleConfigSource, ResolvedHotUpdaterConsoleConfig, defineConsoleConfig };

package/lib/index.mjs

@@ -0,0 +1,4 @@
+//#region src/index.ts
+const defineConsoleConfig = (config) => config;
+//#endregion
+export { defineConsoleConfig };

package/lib/vite-internal.mjs

@@ -0,0 +1,127 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import tailwindcss from "@tailwindcss/vite";
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import viteReact from "@vitejs/plugin-react";
+import { nitro } from "nitro/vite";
+//#region src/vite-internal.ts
+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 resolvedVirtualAuthModuleId = `\0${virtualAuthModuleId}`;
+const resolvedVirtualConfigModuleId = `\0${virtualConfigModuleId}`;
+const resolvedVirtualPackageRouterModuleId = `\0${virtualPackageRouterModuleId}`;
+const packageRoot = path.resolve(import.meta.dirname, "..");
+const packagePublicDirectory = path.join(packageRoot, "public");
+const packageRouterFile = path.join(packageRoot, "src/router.tsx");
+const packageRoutesDirectory = path.join(packageRoot, "src/routes");
+const packageSourceDirectory = path.join(packageRoot, "src");
+const localRouteTreeFile = path.join(packageSourceDirectory, "routeTree.gen.ts");
+const resolveFromRoot = (root, file) => path.isAbsolute(file) ? file : path.resolve(root, file);
+const toImportPath = (file) => file.split(path.sep).join("/");
+const writeFileIfChanged = (file, contents) => {
+	if (existsSync(file) && readFileSync(file, "utf8") === contents) return;
+	mkdirSync(path.dirname(file), { recursive: true });
+	writeFileSync(file, contents);
+};
+const createConsoleModulesPlugin = (mode) => {
+	let authFile = "";
+	let configFile = "";
+	let generatedRouteTreeFile = localRouteTreeFile;
+	return {
+		name: `hot-updater-console:${mode.type}-modules`,
+		enforce: "pre",
+		config(userConfig, configEnvironment) {
+			const root = path.resolve(process.cwd(), userConfig.root ?? ".");
+			if (mode.type === "hosted") {
+				const cacheDirectory = path.join(root, ".hot-updater/console");
+				generatedRouteTreeFile = path.join(cacheDirectory, "routeTree.gen.ts");
+				authFile = resolveFromRoot(root, mode.options.auth ?? "console.auth.ts");
+				configFile = resolveFromRoot(root, mode.options.config ?? "hot-updater.config.ts");
+				writeFileIfChanged(path.join(cacheDirectory, "router.ts"), [`export { getRouter } from ${JSON.stringify(virtualPackageRouterModuleId)};`, ""].join("\n"));
+			}
+			return {
+				assetsInclude: ["**/*.node"],
+				oxc: { jsx: { development: configEnvironment.command === "serve" } },
+				resolve: {
+					alias: [{
+						find: /^@\//,
+						replacement: `${toImportPath(packageSourceDirectory)}/`
+					}],
+					dedupe: [
+						"react",
+						"react-dom",
+						"@tanstack/react-query",
+						"@tanstack/react-router",
+						"@tanstack/react-start"
+					]
+				}
+			};
+		},
+		resolveId(id) {
+			if (id === virtualAuthModuleId) return resolvedVirtualAuthModuleId;
+			if (id === virtualConfigModuleId) return resolvedVirtualConfigModuleId;
+			if (id === virtualPackageRouterModuleId) return resolvedVirtualPackageRouterModuleId;
+			if (id === virtualRouteTreeModuleId) return generatedRouteTreeFile;
+		},
+		load(id) {
+			if (id === resolvedVirtualPackageRouterModuleId) return `export { getRouter } from ${JSON.stringify(toImportPath(packageRouterFile))};`;
+			if (id === resolvedVirtualConfigModuleId) {
+				if (mode.type === "local") return [
+					"import { loadConfig } from \"@hot-updater/cli-tools\";",
+					"export default async () => {",
+					"  const config = await loadConfig(null);",
+					"  return {",
+					"    console: { gitUrl: config.console.gitUrl },",
+					"    database: config.database,",
+					"    signing: config.signing,",
+					"    storage: config.storage,",
+					"  };",
+					"};"
+				].join("\n");
+				this.addWatchFile(configFile);
+				return `export { default } from ${JSON.stringify(toImportPath(configFile))};`;
+			}
+			if (id === resolvedVirtualAuthModuleId) {
+				if (mode.type === "local") return [
+					"const principal = { email: \"local@hot-updater.dev\", name: \"Local Console\" };",
+					"export default {",
+					"  async handle() {",
+					"    return new Response(\"Not Found\", { status: 404 });",
+					"  },",
+					"  async getAccess() {",
+					"    return { status: \"authorized\", principal };",
+					"  },",
+					"  async getProviders() {",
+					"    return [];",
+					"  },",
+					"};"
+				].join("\n");
+				this.addWatchFile(authFile);
+				return `export { default } from ${JSON.stringify(toImportPath(authFile))};`;
+			}
+		}
+	};
+};
+const createHostedConsolePlugins = (options) => [
+	createConsoleModulesPlugin({
+		type: "hosted",
+		options
+	}),
+	nitro({ publicAssets: [{
+		dir: packagePublicDirectory,
+		maxAge: 3600 * 24
+	}] }),
+	tailwindcss(),
+	tanstackStart({
+		srcDirectory: ".hot-updater/console",
+		router: {
+			generatedRouteTree: "routeTree.gen.ts",
+			routesDirectory: packageRoutesDirectory
+		}
+	}),
+	viteReact()
+];
+//#endregion
+export { createHostedConsolePlugins };

package/lib/vite.d.mts

@@ -0,0 +1,10 @@
+import { PluginOption } from "vite";
+
+//#region src/vite.d.ts
+interface HotUpdaterConsolePluginOptions {
+  readonly auth?: string;
+  readonly config?: string;
+}
+declare const hotUpdaterConsole: (options?: HotUpdaterConsolePluginOptions) => PluginOption[];
+//#endregion
+export { HotUpdaterConsolePluginOptions, hotUpdaterConsole };

package/lib/vite.mjs

@@ -0,0 +1,5 @@
+import { createHostedConsolePlugins } from "./vite-internal.mjs";
+//#region src/vite.ts
+const hotUpdaterConsole = (options = {}) => createHostedConsolePlugins(options);
+//#endregion
+export { hotUpdaterConsole };

package/package.json

@@ -1,71 +1,93 @@
 {
   "name": "@hot-updater/console",
   "type": "module",
-  "version": "0.36.6",
+  "version": "1.0.0-rc.0",
   "files": [
     ".output",
+    "lib",
+    "public",
+    "src",
+    "!src/**/*.spec.ts",
+    "!src/**/*.spec.tsx",
     "package.json"
   ],
   "exports": {
+    ".": {
+      "types": "./lib/index.d.mts",
+      "import": "./lib/index.mjs"
+    },
+    "./vite": {
+      "types": "./lib/vite.d.mts",
+      "import": "./lib/vite.mjs"
+    },
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "@hot-updater/cli-tools": "*"
+    "@hot-updater/cli-tools": "*",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "^8.0.0"
   },
-  "dependencies": {
-    "@hot-updater/bsdiff": "0.36.6",
-    "@hot-updater/server": "0.36.6"
+  "peerDependenciesMeta": {
+    "@hot-updater/cli-tools": {
+      "optional": true
+    }
   },
-  "devDependencies": {
+  "dependencies": {
     "@base-ui/react": "^1.3.0",
     "@fontsource-variable/inter": "^5.2.8",
     "@tailwindcss/vite": "^4.2.1",
-    "@tanstack/devtools-vite": "^0.6.0",
     "@tanstack/react-devtools": "^0.10.0",
-    "@tanstack/react-form": "^1.28.5",
     "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-router": "^1.167.0",
     "@tanstack/react-router-devtools": "^1.166.7",
     "@tanstack/react-router-ssr-query": "^1.166.7",
     "@tanstack/react-start": "^1.166.11",
-    "@tanstack/react-table": "^8.21.3",
-    "@tanstack/router-plugin": "^1.166.9",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.3.2",
-    "@types/node": "^25.5.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react": "^6.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.20",
-    "jsdom": "^29.0.0",
-    "jszip": "^3.10.1",
     "lucide-react": "^0.577.0",
     "next-themes": "^0.4.6",
-    "nitro": "latest",
-    "radix-ui": "^1.4.3",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "nitro": "3.0.260610-beta",
     "react-grab": "^0.1.28",
+    "recharts": "3.8.0",
     "shadcn": "^4.0.8",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.1",
-    "tar": "^7.5.16",
-    "tslib": "^2.8.1",
     "tw-animate-css": "^1.4.0",
+    "verkit": "0.3.2",
+    "@hot-updater/bsdiff": "1.0.0-rc.0",
+    "@hot-updater/core": "1.0.0-rc.0",
+    "@hot-updater/server": "1.0.0-rc.0",
+    "@hot-updater/plugin-core": "1.0.0-rc.0"
+  },
+  "devDependencies": {
+    "@tanstack/devtools-vite": "^0.6.0",
+    "@tanstack/react-form": "^1.28.5",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/router-plugin": "^1.166.9",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.0",
     "@typescript/native": "npm:typescript@^7.0.2",
+    "jsdom": "^29.0.0",
+    "jszip": "^3.10.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tar": "^7.5.16",
+    "tsdown": "0.21.6",
+    "tslib": "^2.8.1",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "verkit": "0.3.2",
     "vite": "8.0.8",
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "4.1.4",
     "web-vitals": "^5.1.0",
-    "@hot-updater/core": "0.36.6",
-    "@hot-updater/mock": "0.36.6",
-    "@hot-updater/cli-tools": "0.36.6",
-    "@hot-updater/plugin-core": "0.36.6"
+    "@hot-updater/cli-tools": "1.0.0-rc.0",
+    "@hot-updater/mock": "1.0.0-rc.0"
   },
   "description": "React Native OTA solution for self-hosted",
   "license": "MIT",
@@ -102,7 +124,7 @@
   },
   "scripts": {
     "dev": "vite dev --port 3000",
-    "build": "vite build && node copy-assets.mjs",
+    "build": "NODE_ENV=production vite build && tsdown",
     "check": "oxfmt --write \"**/*.{ts,tsx}\" && oxlint --fix --fix-suggestions --fix-dangerously .",
     "format": "oxfmt --write \"**/*.{ts,tsx}\"",
     "preview": "vite preview",

package/public/logo.svg

@@ -0,0 +1 @@
+<svg id="hot-updater-layer" data-name="hot-updater-layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 447 652"><defs><linearGradient id="hot-updater-gradient" x1="223.54" y1="0.36" x2="223.54" y2="711.23" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff7f33"/><stop offset="0.4" stop-color="#f9602b"/><stop offset="0.76" stop-color="#f54c25"/><stop offset="1" stop-color="#f44523"/></linearGradient></defs><title>Hotupdater</title><path d="M150.25,8.58c16.28,31.85,42.09,116-68.18,212.22C75.46,226.57,70,233,63.72,239.62c-28.48,30-84.71,114.89-55.82,207,.69,2.18,1.31,4.37,1.91,6.57,5.25,19.33,38.08,121,155.56,157.25a5.14,5.14,0,0,0,6-7.39c-14.72-26.53-46.07-96.89-8.89-162.55,0,0,11.5,44.5,50.5,83.5,6,6,14.72,15.64,19.53,21.23,14.47,16.77,32.24,53.55,1.82,98.18a5.63,5.63,0,0,0,6.85,8.34c75.64-32.1,333.29-164.6,128.68-410.85a7,7,0,0,0-12.46,4.15c-1.77,39.31-14.84,129-96.18,148.06a31.08,31.08,0,0,1-24.3-4.16c-13.34-8.9-25.41-32.06.53-92.3a250.9,250.9,0,0,1,20.12-37.29C282.78,220.56,356.18,79.83,157.33.77A5.64,5.64,0,0,0,150.25,8.58Z" fill="url(#hot-updater-gradient)"/></svg>

package/public/manifest.json

@@ -0,0 +1,30 @@
+{
+  "short_name": "Hot Updater",
+  "name": "Hot Updater Console",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "favicon-16x16.png",
+      "type": "image/png",
+      "sizes": "16x16"
+    },
+    {
+      "src": "favicon-32x32.png",
+      "type": "image/png",
+      "sizes": "32x32"
+    },
+    {
+      "src": "apple-touch-icon.png",
+      "type": "image/png",
+      "sizes": "180x180"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#f97316",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/src/components/AppSidebar.tsx

@@ -0,0 +1,159 @@
+import { Link, useRouterState } from "@tanstack/react-router";
+import {
+  ChartNoAxesCombined,
+  KeyRound,
+  Moon,
+  Package,
+  ShieldCheck,
+  Sun,
+} from "lucide-react";
+
+import { useAnalyticsCapability } from "@/components/features/analytics/AnalyticsCapabilityContext";
+import { HotUpdaterLogo } from "@/components/HotUpdaterLogo";
+import { useTheme } from "@/components/ThemeProvider";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { useApiKeyCapabilityQuery } from "@/lib/api-keys-api";
+
+export function AppSidebar() {
+  const analyticsCapability = useAnalyticsCapability();
+  const apiKeyCapability = useApiKeyCapabilityQuery();
+  const { theme, setTheme } = useTheme();
+  const routerState = useRouterState();
+  const currentPath = routerState.location.pathname;
+
+  const isBundlesActive = currentPath === "/";
+  const isAnalyticsActive =
+    currentPath === "/analytics" || currentPath === "/installations";
+  const isApiKeysActive = currentPath === "/api-keys";
+  const isSigningActive = currentPath === "/signing";
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader className="h-12 justify-center">
+        <Link
+          to="/"
+          search={{
+            afterReleaseId: undefined,
+            beforeReleaseId: undefined,
+            channelId: undefined,
+            enabled: undefined,
+            releaseId: undefined,
+            platform: undefined,
+            targetAppVersion: undefined,
+            bundleId: undefined,
+            page: undefined,
+          }}
+          className="flex items-center gap-3 p-1 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-2"
+        >
+          <HotUpdaterLogo className="h-7 w-7 shrink-0" />
+          <div className="flex flex-col gap-0 group-data-[collapsible=icon]:hidden">
+            <span className="text-sm font-semibold tracking-tight text-sidebar-foreground leading-tight">
+              Hot Updater
+            </span>
+            <span className="text-[10px] text-sidebar-foreground/60 leading-tight">
+              Console
+            </span>
+          </div>
+        </Link>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <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>
+              {analyticsCapability.status === "supported" ? (
+                <SidebarMenuItem>
+                  <SidebarMenuButton
+                    isActive={isAnalyticsActive}
+                    render={<Link to="/analytics" />}
+                    tooltip="Analytics"
+                  >
+                    <ChartNoAxesCombined />
+                    <span>Analytics</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ) : null}
+              {apiKeyCapability.data?.apiKeys ? (
+                <SidebarMenuItem>
+                  <SidebarMenuButton
+                    isActive={isApiKeysActive}
+                    render={<Link to="/api-keys" />}
+                    tooltip="API keys"
+                  >
+                    <KeyRound />
+                    <span>API keys</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>
+      </SidebarContent>
+
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+              tooltip={theme === "dark" ? "Light mode" : "Dark mode"}
+            >
+              {theme === "dark" ? (
+                <Sun className="h-4 w-4" />
+              ) : (
+                <Moon className="h-4 w-4" />
+              )}
+              <span>{theme === "dark" ? "Light mode" : "Dark mode"}</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

package/src/components/BundleIdDisplay.tsx

@@ -0,0 +1,18 @@
+import { cn } from "@/lib/utils";
+
+interface BundleIdDisplayProps {
+  bundleId: string;
+  maxLength?: number;
+  className?: string;
+  fullOnMobile?: boolean;
+}
+export function BundleIdDisplay({ bundleId, className }: BundleIdDisplayProps) {
+  return (
+    <span
+      translate="no"
+      className={cn("break-all font-mono text-xs tabular-nums", className)}
+    >
+      {bundleId}
+    </span>
+  );
+}