@hot-updater/console 1.0.0-rc.2 → 1.0.0-rc.21

package/README.md

@@ -1,4 +1,4 @@
-# Hot Updater Console (v2)
+# Hot Updater Console
 
 Modern web-based management console for Hot Updater built with **TanStack Start** and **shadcn/ui**.
 
@@ -6,11 +6,11 @@ Modern web-based management console for Hot Updater built with **TanStack Start*
 
 - **Bundle Management** - View, filter, and manage OTA update bundles
 - **Real-time Filtering** - Filter by platform (iOS/Android) and channel
-- **Bundle Editor** - Edit bundle configurations with intuitive forms
+- **Release Editor** - Edit delivery policy, rollout, and target cohorts
 - **Rollout Control** - Adjust rollout percentage with visual slider
 - **Rollout Statistics** - View deployment metrics and success rates
-- **Channel Promotion** - Copy or move bundles between channels
-- **Emergency Rollback** - One-click disable and rollback
+- **Channel Promotion** - Copy or move releases between channels
+- **Rollback** - Disable a release and save; devices reconsider it on their next update check
 - **Dark Mode** - Full dark mode support with system preference detection
 - **Responsive Design** - Works seamlessly on desktop, tablet, and mobile
 
@@ -21,13 +21,11 @@ Modern web-based management console for Hot Updater built with **TanStack Start*
 - **TanStack Start** - Full-stack React framework with SSR
 - **TanStack Router** - File-based routing with type safety
 - **TanStack Query** - Data fetching and caching
-- **TanStack Form** - Form state management and validation
-- **TanStack Table** - Powerful table with sorting and pagination
 - **React 19** - Latest React features
 
 ### UI Components
 
-- **shadcn/ui** - High-quality accessible components (Radix Mira style)
+- **shadcn/ui** - High-quality accessible components built on Base UI
 - **Tailwind CSS v4** - Utility-first CSS with oklch color system
 - **Lucide React** - Beautiful icon library
 - **Sonner** - Toast notifications
@@ -35,32 +33,38 @@ Modern web-based management console for Hot Updater built with **TanStack Start*
 ### Backend
 
 - **TanStack Start Server Functions** - Type-safe server endpoints
-- **Hot Updater Integration** - Storage and database plugin integration
+- **Hot Updater Integration** - Storage and database adapter integration
 
 ## 📦 Installation
 
 ```bash
-# Install dependencies (from monorepo root)
+# Install and build workspace dependencies (from monorepo root)
 pnpm install
+pnpm -w build
 ```
 
 ## 🏃‍♂️ Development
 
 ```bash
-# Start development server
-pnpm dev
+# Run these commands from the monorepo root
+# Start the local development server
+pnpm --dir packages/console dev
 
-# Build for production
-pnpm build
-
-# Preview production build
-pnpm preview
+# Build and preview the local console package
+pnpm --dir packages/console build
+pnpm --dir packages/console preview
 
 # Type checking
-pnpm test:type
+pnpm --dir packages/console test:type
 ```
 
-The console will be available at `http://localhost:3000`.
+The development server is available at `http://localhost:3000`.
+
+This package's Vite configuration uses the local console adapter, which grants
+management access without sign-in in both development and built output. Keep
+this build and preview local. For production hosting, follow the
+[Console deployment guide](https://hot-updater.dev/docs/guides/console-deployment)
+and configure its hosted template with a `ConsoleAuthAdapter`.
 
 ## 📁 Project Structure
 
@@ -68,26 +72,27 @@ The console will be available at `http://localhost:3000`.
 src/
 ├── routes/
 │   ├── __root.tsx              # Root layout with providers
-│   ├── index.tsx               # Bundle list page
-│   └── api/                    # API routes (future)
+│   ├── index.tsx               # Bundle/release list page
+│   ├── -releases-search.ts     # URL filter validation
+│   └── api/                    # Authentication and bundle downloads
 ├── components/
 │   ├── ui/                     # shadcn components
 │   ├── features/
-│   │   └── bundles/            # Bundle-related components
+│   │   ├── bundles/            # Bundle metadata and rollout details
+│   │   └── releases/           # Release policy editor
 │   ├── PlatformIcon.tsx        # iOS/Android icons
 │   ├── BundleIdDisplay.tsx     # Truncated bundle ID with tooltip
 │   ├── RolloutPercentageBadge.tsx
 │   ├── TimestampDisplay.tsx    # UUIDv7 timestamp formatting
 │   ├── ChannelBadge.tsx
 │   └── EnabledStatusIcon.tsx
-├── hooks/
-│   └── useFilterParams.ts      # URL-based filter state
 ├── lib/
 │   ├── api.ts                  # React Query hooks
+│   ├── api-rpc.ts              # TanStack Start server functions
 │   ├── constants.ts            # Shared constants
 │   ├── utils.ts                # Utility functions
 │   └── server/
-│       ├── api.server.ts       # Server functions
+│       ├── auth.server.ts      # Management access checks
 │       └── config.server.ts    # Hot Updater config loader
 └── styles.css                  # Global styles & theme variables
 ```
@@ -96,64 +101,68 @@ src/
 
 ### 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
+- **BundlesPage** - Release-backed list with server-side pagination (20 per page)
+- **BundleFilterToolbar** - Platform, channel, and enabled-state filters
+- Both live in `src/routes/index.tsx`.
 
-### Bundle Editor Sheet
+### Release Editor Sheet
 
-- **BundleEditorSheet** - Right-side slide-out panel
-- **BundleEditorForm** - TanStack Form with validation
+- **ReleaseEditorSheet** - Slide-out editor for release policy, rollout, and promotion
 - **BundleMetadata** - Read-only bundle information display
+- Saving preflights the policy, then updates it with the expected release revision.
+- To roll back a release, turn off **Enabled** and select **Save changes**.
+  On the next update check, devices select a previous eligible release or the
+  built-in app when none remains; the app still controls applying the result.
 
 ### Dialogs
 
-- **PromoteChannelDialog** - Channel promotion with copy/move toggle
-- **DeleteBundleDialog** - Confirmation dialog with bundle details
-- **EmergencyRollbackButton** - One-click disable + 0% rollout
+- **ReleaseEditorSheet** contains promotion and release-deletion dialogs.
+- **RolloutCohortsDialog** displays rollout and targeted cohorts.
+- **ChannelManagementDialog** creates and deletes channels.
 
 ## 🔌 API Integration
 
-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
-- `getBundles(filters)` - List bundles with pagination
-- `getBundle(bundleId)` - Get single bundle details
-- `updateBundle(bundleId, data)` - Update bundle configuration
-- `createBundle(bundle)` - Create new bundle
-- `deleteBundle(bundleId)` - Delete bundle
+The console integrates with the configured Hot Updater storage and database
+adapters through TanStack Start server functions in `src/lib/api-rpc.ts`.
+Functions with input take a `{ data: input }` argument:
+
+- `getConfig()` and `getChannels()` load configuration and channels.
+- `getReleases({ data: { filter, limit, beforeReleaseId, afterReleaseId } })`
+  lists releases using the supported `ReleaseFilter` shapes.
+- `getRelease({ data: { releaseId } })` reads a release.
+- `preflightRelease({ data: { releaseId, expectedRevision, patch } })` validates
+  a `ReleasePolicyPatch`; `updateRelease` takes the same input to save it.
+- `deleteRelease({ data: { releaseId, expectedRevision } })` deletes a release.
+- `promoteRelease({ data: { releaseId, expectedRevision, targetChannel, action } })`
+  copies or moves a release; `action` is `"copy"` or `"move"`.
+- `getBundles({ data: { platform, limit, after, before } })` lists bundle artifacts;
+  `getBundle({ data: { bundleId } })` reads one and
+  `deleteBundle({ data: { bundleId } })` deletes one.
+
+Use one pagination cursor at a time.
 
 ## 🎯 Configuration
 
-Configure Hot Updater in `hot-updater.config.ts`:
+The console reads `database`, `storage`, and `plugins` from
+[hot-updater.config.ts](hot-updater.config.ts), as the CLI does, and runs the
+plugins over the database as the server does. The checked-in
+[demo database](demoDatabase.ts) seeds sample bundles, releases, and Insights
+events through `assembleServer` from `@hot-updater/cli-tools`, over
+`database.withoutLatency()`. For an empty local mock console, use this
+`hot-updater.config.ts`:
 
 ```typescript
-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));
-}
+import { mockDatabase, mockStorage } from "@hot-updater/mock";
 
 export default {
+  database: mockDatabase({ latency: { min: 500, max: 700 } }),
   storage: mockStorage({}),
-  database: mockDatabase({
-    latency: { min: 500, max: 700 },
-    data: databaseData,
-  }),
 };
 ```
 
+Add `plugins`, such as `[insights(), apiKeys()]`, to show their pages. Mock
+data is held in memory and resets when the configuration is reloaded.
+
 ## 🌈 Theming
 
 The console uses Tailwind CSS v4 with oklch color space for accessible colors. Theme variables are defined in `src/styles.css`:
@@ -167,23 +176,23 @@ The console uses Tailwind CSS v4 with oklch color space for accessible colors. T
 - Full TypeScript strict mode
 - Type-safe server functions with TanStack Start
 - Type-safe routing with TanStack Router
-- Type-safe forms with TanStack Form
+- Typed release-policy drafts and revision-aware mutations
 
 ## 📊 Data Flow
 
-1. **URL State** → `useFilterParams()` hook manages filter state in URL
-2. **Server Functions** → TanStack Start server functions call the configured storage and database plugins
-3. **React Query** → `useBundlesQuery()` fetches and caches data
+1. **URL State** → `Route.useSearch()` and `-releases-search.ts` manage release filters
+2. **Server Functions** → TanStack Start server functions call the configured storage and database adapters
+3. **React Query** → `useReleasesQuery()` and `useBundleQuery()` fetch and cache data
 4. **UI Components** → Display data with shadcn components
-5. **Mutations** → `useUpdateBundleMutation()` updates data with optimistic updates
-6. **Cache Invalidation** → React Query automatically refreshes affected queries
+5. **Mutations** → `usePreflightReleaseMutation()` validates changes before `useUpdateReleaseMutation()` saves them
+6. **Cache Invalidation** → Successful updates invalidate release, catalog, and channel queries
 
 ## 🚦 Development Guidelines
 
 - **Server-only code** must use `.server.ts` extension
 - **Client-side constants** live in `src/lib/constants.ts`
 - **shadcn components** are customizable in `src/components/ui/`
-- **Form validation** uses TanStack Form validators
+- **Release validation** checks the draft locally and preflights changes on the server
 - **Toast notifications** use Sonner for success/error feedback
 
 ## 🐛 Troubleshooting
@@ -196,12 +205,13 @@ The console uses Tailwind CSS v4 with oklch color space for accessible colors. T
 ### Development Server
 
 - Default port is 3000
-- Change port: `pnpm dev --port 3001`
+- Change port: `pnpm --dir packages/console dev --port 3001`
 
 ### Hot Updater Config
 
-- Ensure `hot-updater.config.ts` is at package root
-- Verify the storage and database plugins are correctly initialized
+- Ensure `hot-updater.config.ts` is at the package root and sets `database`
+  and `storage`
+- Verify its storage and database adapters are correctly initialized
 
 ## 📝 License
 

package/lib/index.d.mts

@@ -1,4 +1,4 @@
-import { ConfigInput, DatabasePlugin } from "@hot-updater/plugin-core";
+import { AnyHotUpdaterPlugin, ConfiguredDatabase, StorageAdapter } from "@hot-updater/plugin-core";
 //#region src/index.d.ts
 type ConsoleAuthProvider = "google" | "github";
 type ConsolePrincipal = Readonly<{
@@ -20,17 +20,29 @@ type ConsoleAuthAdapter = Readonly<{
   getAccess(request: Request): Promise<ConsoleAccess>;
   getProviders(request: Request): Promise<readonly ConsoleAuthProvider[]>;
 }>;
-type ConsoleSigningConfig = Readonly<{
-  enabled: boolean;
-  provider?: string;
-}>;
-type HotUpdaterConsoleConfig = Readonly<Omit<Pick<ConfigInput, "console" | "database" | "signing" | "storage">, "database"> & {
-  database: DatabasePlugin;
-}>;
-type ResolvedHotUpdaterConsoleConfig = Readonly<Omit<HotUpdaterConsoleConfig, "signing"> & {
-  signing?: ConsoleSigningConfig;
+type HotUpdaterConsoleConfig = Readonly<{
+  /**
+   * The database your server runs on, such as `dynamoDB(...)`, or
+   * `standaloneRepository(...)`, which reaches a self-hosted server through
+   * its admin API.
+   */
+  database: ConfiguredDatabase;
+  /** The storage your server lists; the console reads bundle files with it. */
+  storage: StorageAdapter;
+  /**
+   * The plugins your server runs, such as the `plugins` a managed provider
+   * package exports or `[insights(), apiKeys()]`. The console runs them over
+   * `database` as the server does, and shows only the built-in features of
+   * the plugins listed. With `standaloneRepository`, they run on the server,
+   * and the console shows the features its admin API serves.
+   */
+  plugins?: readonly AnyHotUpdaterPlugin[];
+  console?: {
+    /** The Git repository whose commits the console links bundles to. */
+    gitUrl?: string;
+  };
 }>;
 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 };
+export { ConsoleAccess, ConsoleAuthAdapter, ConsoleAuthProvider, ConsolePrincipal, HotUpdaterConsoleConfig, HotUpdaterConsoleConfigSource, defineConsoleConfig };

package/lib/vite-internal.mjs

@@ -38,7 +38,7 @@ const createConsoleModulesPlugin = (mode) => {
 				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");
+				configFile = resolveFromRoot(root, mode.options.config ?? "console.config.ts");
 				writeFileIfChanged(path.join(cacheDirectory, "router.ts"), [`export { getRouter } from ${JSON.stringify(virtualPackageRouterModuleId)};`, ""].join("\n"));
 			}
 			return {
@@ -72,11 +72,21 @@ const createConsoleModulesPlugin = (mode) => {
 					"import { loadConfig } from \"@hot-updater/cli-tools\";",
 					"export default async () => {",
 					"  const config = await loadConfig(null);",
+					"  if (config.database === undefined) {",
+					"    throw new Error(",
+					"      \"Set database in hot-updater.config.ts: the database your server runs on, such as d1Database(...), or standaloneRepository({ baseUrl }) to reach a self-hosted server through its admin API.\",",
+					"    );",
+					"  }",
+					"  if (config.storage === undefined) {",
+					"    throw new Error(",
+					"      \"Set storage in hot-updater.config.ts: where your server stores bundles, which the console reads, such as r2Storage(...).\",",
+					"    );",
+					"  }",
 					"  return {",
-					"    console: { gitUrl: config.console.gitUrl },",
 					"    database: config.database,",
-					"    signing: config.signing,",
 					"    storage: config.storage,",
+					"    plugins: config.plugins,",
+					"    console: { gitUrl: config.console.gitUrl },",
 					"  };",
 					"};"
 				].join("\n");

package/lib/vite.d.mts

@@ -1,7 +1,9 @@
 import { PluginOption } from "vite";
 //#region src/vite.d.ts
 interface HotUpdaterConsolePluginOptions {
+  /** The console's auth module, `console.auth.ts` by default. */
   readonly auth?: string;
+  /** The module whose default export is `defineConsoleConfig(...)`, `console.config.ts` by default. */
   readonly config?: string;
 }
 declare const hotUpdaterConsole: (options?: HotUpdaterConsolePluginOptions) => PluginOption[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hot-updater/console",
   "type": "module",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.21",
   "files": [
     ".output",
     "lib",
@@ -38,11 +38,11 @@
     "@fontsource-variable/inter": "^5.2.8",
     "@tailwindcss/vite": "^4.2.1",
     "@tanstack/react-devtools": "^0.10.0",
-    "@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-query": "^5.104.0",
+    "@tanstack/react-router": "^1.170.41",
+    "@tanstack/react-router-devtools": "^1.167.2",
+    "@tanstack/react-router-ssr-query": "^1.167.3",
+    "@tanstack/react-start": "^1.168.60",
     "@vitejs/plugin-react": "^6.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -58,16 +58,16 @@
     "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "verkit": "0.4.0",
-    "@hot-updater/bsdiff": "1.0.0-rc.0",
-    "@hot-updater/server": "1.0.0-rc.2",
-    "@hot-updater/plugin-core": "1.0.0-rc.2",
-    "@hot-updater/core": "1.0.0-rc.0"
+    "@hot-updater/bsdiff": "1.0.0-rc.21",
+    "@hot-updater/protocol": "1.0.0-rc.21",
+    "@hot-updater/server": "1.0.0-rc.21",
+    "@hot-updater/plugin-core": "1.0.0-rc.21"
   },
   "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",
+    "@tanstack/router-plugin": "^1.168.42",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^25.5.0",
@@ -86,11 +86,11 @@
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "4.1.4",
     "web-vitals": "^5.1.0",
-    "@hot-updater/cli-tools": "1.0.0-rc.2",
-    "@hot-updater/mock": "1.0.0-rc.2"
+    "@hot-updater/cli-tools": "1.0.0-rc.21",
+    "@hot-updater/mock": "1.0.0-rc.21"
   },
   "description": "React Native OTA solution for self-hosted",
-  "license": "MIT",
+  "license": "SEE LICENSE IN LICENSE",
   "repository": {
     "type": "git",
     "url": "https://github.com/gronxb/hot-updater"

package/src/components/AppSidebar.tsx

@@ -1,13 +1,9 @@
 import { Link, useRouterState } from "@tanstack/react-router";
-import {
-  ChartNoAxesCombined,
-  KeyRound,
-  Moon,
-  Package,
-  ShieldCheck,
-  Sun,
-} from "lucide-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 {
@@ -21,26 +17,84 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  useSidebar,
 } from "@/components/ui/sidebar";
-import { useApiKeyCapabilityQuery } from "@/lib/api-keys-api";
 
-export function AppSidebar() {
-  const apiKeyCapability = useApiKeyCapabilityQuery();
+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 featureUi = useFeatureUi();
   const { theme, setTheme } = useTheme();
   const routerState = useRouterState();
   const currentPath = routerState.location.pathname;
 
-  const isBundlesActive = currentPath === "/";
-  const isInsightsActive =
-    currentPath === "/insights" || 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", {
+        body: "{}",
+        headers: { "content-type": "application/json" },
+        method: "POST",
+      });
+      if (!response.ok) throw new Error("Sign-out failed. Please try again.");
+      window.location.reload();
+    } catch {
+      setSigningOut(false);
+      toast.error("Sign-out failed. Please try again.");
+    }
+  };
 
   return (
     <Sidebar collapsible="icon">
       <SidebarHeader className="h-12 justify-center">
         <Link
           to="/"
+          onClick={closeMobileSidebar}
           search={{
             afterReleaseId: undefined,
             beforeReleaseId: undefined,
@@ -48,9 +102,8 @@ export function AppSidebar() {
             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"
         >
@@ -71,63 +124,18 @@ export function AppSidebar() {
           <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>
@@ -135,6 +143,18 @@ export function AppSidebar() {
 
       <SidebarFooter>
         <SidebarMenu>
+          {canSignOut ? (
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                disabled={signingOut}
+                onClick={() => void signOut()}
+                tooltip="Sign out"
+              >
+                <LogOut />
+                <span>{signingOut ? "Signing out…" : "Sign out"}</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ) : null}
           <SidebarMenuItem>
             <SidebarMenuButton
               onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
@@ -149,6 +169,15 @@ export function AppSidebar() {
             </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>
   );