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

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
@@ -40,27 +38,33 @@ Modern web-based management console for Hot Updater built with **TanStack Start*
 ## 📦 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,65 @@ 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
+plugins 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 checked-in [demo configuration](hot-updater.config.ts) seeds sample bundles
+and releases through `createDatabaseCoreApi(database.withoutLatency()).deploy`.
+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 {
   storage: mockStorage({}),
   database: mockDatabase({
     latency: { min: 500, max: 700 },
-    data: databaseData,
   }),
 };
 ```
 
+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 +173,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
+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 plugins
-3. **React Query** → `useBundlesQuery()` fetches and caches data
+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,7 +202,7 @@ 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
 

package/lib/index.d.mts

@@ -1,4 +1,5 @@
-import { ConfigInput, DatabasePlugin } from "@hot-updater/plugin-core";
+import { ConfigInput, ConfiguredDatabase } from "@hot-updater/plugin-core";
+import { AnyHotUpdaterPlugin } from "@hot-updater/server/plugins";
 //#region src/index.d.ts
 type ConsoleAuthProvider = "google" | "github";
 type ConsolePrincipal = Readonly<{
@@ -20,17 +21,18 @@ 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<Omit<Pick<ConfigInput, "console" | "database" | "storage">, "database"> & {
+  database: ConfiguredDatabase;
+  /**
+   * The plugins your server runs, such as `[insights(), apiKeys()]`. The
+   * console runs them over `database` to read Insights and manage API
+   * keys, and shows only the features of the plugins listed. A
+   * `standaloneRepository` database needs none: the console reads its
+   * server's plugins from the admin `/version`.
+   */
+  plugins?: readonly AnyHotUpdaterPlugin[];
 }>;
 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

@@ -69,14 +69,17 @@ const createConsoleModulesPlugin = (mode) => {
 			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\";",
+					"import { loadConfig, loadHotUpdaterPlugins } from \"@hot-updater/cli-tools\";",
 					"export default async () => {",
-					"  const config = await loadConfig(null);",
+					"  const [config, plugins] = await Promise.all([",
+					"    loadConfig(null),",
+					"    loadHotUpdaterPlugins(),",
+					"  ]);",
 					"  return {",
 					"    console: { gitUrl: config.console.gitUrl },",
 					"    database: config.database,",
-					"    signing: config.signing,",
 					"    storage: config.storage,",
+					"    ...(plugins === undefined ? {} : { plugins }),",
 					"  };",
 					"};"
 				].join("\n");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hot-updater/console",
   "type": "module",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.20",
   "files": [
     ".output",
     "lib",
@@ -42,7 +42,7 @@
     "@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-start": "^1.168.25",
     "@vitejs/plugin-react": "^6.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -58,10 +58,10 @@
     "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/plugin-core": "1.0.0-rc.17",
+    "@hot-updater/server": "1.0.0-rc.18",
+    "@hot-updater/core": "1.0.0-rc.15",
+    "@hot-updater/bsdiff": "1.0.0-rc.14"
   },
   "devDependencies": {
     "@tanstack/devtools-vite": "^0.6.0",
@@ -86,8 +86,8 @@
     "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.17",
+    "@hot-updater/mock": "1.0.0-rc.17"
   },
   "description": "React Native OTA solution for self-hosted",
   "license": "MIT",

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")}

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,82 @@
+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>{" "}
+                  {remote
+                    ? "where you create the server."
+                    : "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>
+  );
+}