fix(git): null-guard useSearchParams in RepoBrowser — typecheck green

`useSearchParams()` is typed ReadonlyURLSearchParams | null, so the five raw
searchParams.get()/.toString() reads were `tsc --noEmit` errors (TS18047). CI only
runs `next build` (which tolerated them), so the standalone typecheck had drifted
red unnoticed. Fall back to empty params in one place; `npm run typecheck` is clean.

.env.example

@@ -9,6 +9,10 @@ NEXT_PUBLIC_CLOUD_URL=https://cloud.hanzo.ai
 # Hanzo PaaS (platform.hanzo.ai) — DOKS cluster control plane for the Clusters module.
 NEXT_PUBLIC_PLATFORM_URL=https://platform.hanzo.ai
 
+# hanzo.app builder — target of the Templates gallery "Open in builder" deep-link
+# (fork a starter → customize by prompt in the builder). Default: production.
+NEXT_PUBLIC_APP_URL=https://hanzo.app
+
 # Hanzo IAM (OIDC authority). Canonical issuer is https://hanzo.id — tokens are
 # minted with iss=https://hanzo.id, which the cloud /v1 backend validates against.
 # iam.hanzo.ai is the legacy zone (iss=https://iam.hanzo.ai) and MUST NOT be used

.github/hero.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="640" viewBox="0 0 1280 640" role="img" aria-label="console2">
+<rect width="1280" height="640" fill="#0A0A0A"/>
+<svg x="96" y="215" width="210" height="210" viewBox="0 0 67 67"><path d="M22.21 67V44.6369H0V67H22.21Z" fill="#fff"/><path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill="#fff"/><path d="M22.21 0H0V22.3184H22.21V0Z" fill="#fff"/><path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="#fff"/><path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="#fff"/></svg>
+<text x="378" y="276" font-family="Inter,system-ui,-apple-system,sans-serif" font-size="78" font-weight="800" letter-spacing="-2" fill="#ffffff">console2</text>
+
+<rect x="378" y="338" width="806" height="3" rx="1.5" fill="#ffffff" opacity=".9"/>
+<text x="378" y="390" font-family="Inter,system-ui,sans-serif" font-size="24" font-weight="600" fill="#ffffff" opacity=".5">github.com/hanzoai</text>
+<text x="1184" y="390" text-anchor="end" font-family="Inter,system-ui,sans-serif" font-size="24" font-weight="600" fill="#ffffff" opacity=".5">hanzo.ai</text>
+</svg>

.github/workflows/build-image.yml

@@ -1,11 +1,21 @@
 name: Build Docker Image
-# Builds + pushes ghcr.io/hanzoai/console2 on the self-hosted ARC runner. ONE
-# brand-agnostic image serves every brand: console2 resolves the brand at RUNTIME
+# Builds + pushes ghcr.io/hanzoai/console on the self-hosted ARC runner. ONE
+# brand-agnostic image serves every brand: console resolves the brand at RUNTIME
 # from the request hostname (console.hanzo.ai → hanzo, console.lux.cloud → lux,
 # console.zoo.cloud → zoo; src/config/index.ts), and /v1 is same-origin per host.
 # So NO NEXT_PUBLIC_* are baked — baking them would pin the image to one brand.
 # Tags: SEMVER ONLY (no sha, no :latest) — a `v*` git tag publishes that exact
 # version; a main push publishes `v<package.json version>` (bump to release).
+#
+# Build muscle: RAW `docker buildx build` on the host builder — the canonical
+# hanzoai/ci pattern. We deliberately do NOT use docker/setup-buildx-action +
+# docker/build-push-action: that pair spins up an EPHEMERAL buildkit container
+# that cannot see the host's image cache, so it re-pulled `node:22-alpine` from
+# Docker Hub every run and tripped the unauthenticated 429 pull-rate limit (and
+# its build-summary artifact upload hit the Actions storage quota). The host
+# builder reuses the cached base layer instead — no re-pull, no artifact upload.
+# The Dockerfile uses the ECR Public Docker-library mirror for the Node base image
+# so a cold runner does not depend on Docker Hub's unauthenticated pull budget.
 on:
   push:
     branches: [main]
@@ -31,21 +41,39 @@ jobs:
           if [[ "$GITHUB_REF" == refs/tags/v* ]]; then
             echo "tag=${GITHUB_REF_NAME}" >> "$GITHUB_OUTPUT"
           else
-            echo "tag=v$(node -p "require('./package.json').version")" >> "$GITHUB_OUTPUT"
+            # node is NOT on the ARC runner PATH — resolve the version with grep/sed
+            # (a missing `node` silently produced the tag `:v` and a 404 deploy).
+            ver=$(grep -m1 '"version"' package.json | sed -E 's/.*"version"[[:space:]]*:[[:space:]]*"([^"]+)".*/\1/')
+            [ -n "$ver" ] || { echo "could not resolve version from package.json"; exit 1; }
+            echo "tag=v${ver}" >> "$GITHUB_OUTPUT"
           fi
-      - uses: docker/setup-buildx-action@v3
       - name: Log in to ghcr.io
         uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GH_PAT || secrets.GITHUB_TOKEN }}
-      - uses: docker/build-push-action@v6
-        with:
-          context: .
-          platforms: linux/amd64
-          push: true
-          provenance: false
-          sbom: false
-          tags: |
-            ghcr.io/hanzoai/console2:${{ steps.ver.outputs.tag }}
+      - name: Ensure base image (reuse host cache)
+        # No-op on a warm runner (the host builder reuses the cached base). Only a
+        # cold runner pulls. Use the same ECR Public Docker-library mirror as the
+        # Dockerfile to avoid Docker Hub's unauthenticated pull-rate limits.
+        run: |
+          set -u
+          base=public.ecr.aws/docker/library/node:24-alpine
+          if docker image inspect "$base" >/dev/null 2>&1; then
+            echo "base $base already cached on runner"; exit 0
+          fi
+          for i in 1 2 3 4 5; do
+            if docker pull "$base"; then exit 0; fi
+            echo "pull failed (attempt $i/5) — backing off"; sleep $((i * 30))
+          done
+          echo "could not pull $base after retries"; exit 1
+      - name: Build & push (host builder — reuses base cache, no artifact upload)
+        run: |
+          set -euo pipefail
+          docker buildx build \
+            --platform linux/amd64 \
+            --build-arg SOURCE_COMMIT=${{ github.sha }} \
+            --push \
+            -t ghcr.io/hanzoai/console:${{ steps.ver.outputs.tag }} \
+            -f Dockerfile .

.gitignore

@@ -1,4 +1,4 @@
-node_modules/
+node_modules
 .next/
 out/
 dist/
@@ -15,3 +15,11 @@ next-env.d.ts
 .vscode/
 .idea/
 *.log
+e2e/screenshots/
+e2e-shots/
+test-results/
+playwright-report/
+.claude/
+
+# blank-audit generated report
+e2e/blank-report.json

AGENTS.md

@@ -1,23 +0,0 @@
-# AGENTS — console2
-
-Read [LLM.md](./LLM.md) first; it is the canonical design doc. Highlights for
-agents working here:
-
-- **Stack:** Next.js 15 (app router) + @hanzo/gui (npm), consumed at runtime via
-  `transpilePackages` (the `@hanzogui/next-plugin` is broken on npm). Next 15
-  (not 14) because @hanzo/gui needs React 19. Pin patch versions; never lazily
-  major-bump.
-- **Gui style props:** the v5 config is `onlyShorthandStyleProps` — use
-  shorthands (`p`, `px`, `bg`, `items`, `justify`, `self`, `rounded`, `minH`),
-  never longhands (`padding`, `backgroundColor`, …). Keep `tsc` clean.
-- **One way:** all backend calls go through `src/lib/api` (never raw `fetch`);
-  all selects/inputs through `src/components/ui/Field.tsx`; all nav/routing
-  through the registry in `src/lib/products`.
-- **Extensibility:** add a cloud product by appending a `ProductModule` to
-  `src/lib/products/registry.tsx` and writing its module component — do not add
-  per-product routes or touch the shell.
-- **Auth:** Hanzo IAM (OIDC) via `@hanzo/iam-js-sdk`; session cookie minted by
-  the backend at `/v1/signin`. Never store credentials client-side.
-- **Boundaries:** frontend only. No DB. No Docker builds locally (CI/CD builds
-  images). No secrets in the repo — config is `NEXT_PUBLIC_*` only.
-- **Verify:** `npm run typecheck` and `npm run build` must pass. Show output.

AGENTS.md

@@ -0,0 +1 @@
+LLM.md

Dockerfile

@@ -1,32 +1,35 @@
 # console2 — Hanzo Cloud Console (Next.js 15 + @hanzo/gui). BSD-3-Clause.
 # NEXT_PUBLIC_* are inlined at build time (browser config), so they are build args.
-FROM node:22-alpine AS deps
+FROM public.ecr.aws/docker/library/node:24-alpine AS build
 WORKDIR /app
-COPY package.json package-lock.json* ./
-# npm install (not ci): @hanzo/gui pulls a react-native dep tree whose
-# platform/optional packages (e.g. react-native-worklets) resolve differently
-# across npm versions, so a lockfile generated by one npm fails `npm ci` under
-# another (EUSAGE "Missing: react-native-worklets@... from lock file"). install
-# reconciles the tree deterministically for the build platform.
-RUN npm install --no-audit --no-fund
-
-FROM node:22-alpine AS build
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
+# Exact commit for a deterministic Next build id (next.config.mjs generateBuildId).
+# The alpine image has no git binary, so CI passes the SHA as a build arg -> ENV,
+# baked into .next/BUILD_ID so every replica of this image shares ONE build id.
+ARG SOURCE_COMMIT=""
+ENV SOURCE_COMMIT=$SOURCE_COMMIT
+# Copy ALL source FIRST, then install — order matters under Kaniko --single-snapshot:
+# a `COPY` that FOLLOWS `RUN npm install` in the same stage drops the RUN's freshly
+# created node_modules (the 'next not found' cause — the install's own `test -f next`
+# passed, then `COPY . .` wiped node_modules before the build RUN). Putting COPY
+# before install means node_modules is created by the LAST RUNs and nothing clobbers
+# it. (Layer-cache for deps is moot here — the on-cluster build runs --cache=false.)
 COPY . .
 # public/ may be empty (git doesn't track empty dirs) — ensure it exists for the runner COPY.
 RUN mkdir -p public
+# npm install (not ci): @hanzo/gui pulls a react-native dep tree whose platform/
+# optional packages resolve differently across npm versions, so a lockfile generated
+# by one npm fails `npm ci` under another. install reconciles the tree for the
+# build platform; retry-hardened against registry throttling.
+RUN npm install --no-audit --no-fund --fetch-retries=5 --fetch-retry-mintimeout=20000 --fetch-timeout=120000
 # ONE brand-agnostic image: brand (IAM org/issuer/app + wordmark) is resolved at
 # RUNTIME from the request hostname (src/config/index.ts), and /v1 is same-origin
-# per host. Baking NEXT_PUBLIC_* here would inline a single brand and break that —
-# so nothing brand-specific is baked.
-# Next 15 + @hanzo/gui (large RN dep tree) overflows Node's default heap on the
-# build node → OOMKill (exit 137). Cap the heap generously, as every other Hanzo
-# Next build does (chat uses 4096).
+# per host. Baking NEXT_PUBLIC_* here would inline a single brand and break that.
+# Next 15 + @hanzo/gui (large RN dep tree) overflows Node's default heap → OOMKill
+# (exit 137); cap the heap generously (chat uses 4096).
 ENV NEXT_TELEMETRY_DISABLED=1 NODE_OPTIONS=--max-old-space-size=6144
 RUN npm run build
 
-FROM node:22-alpine AS runner
+FROM public.ecr.aws/docker/library/node:24-alpine AS runner
 WORKDIR /app
 ENV NODE_ENV=production NEXT_TELEMETRY_DISABLED=1 PORT=4000
 RUN addgroup -S app && adduser -S app -G app
@@ -35,6 +38,8 @@ COPY --from=build /app/public ./public
 COPY --from=build /app/node_modules ./node_modules
 COPY --from=build /app/package.json ./package.json
 COPY --from=build /app/next.config.mjs ./next.config.mjs
+# next.config.mjs imports this at load time (build AND standalone runtime); copy it or the server ERR_MODULE_NOT_FOUND-crashes on boot.
+COPY --from=build /app/src/config/build-id.mjs ./src/config/build-id.mjs
 USER app
 EXPOSE 4000
-CMD ["npm", "run", "start"]
+CMD ["node", "node_modules/next/dist/bin/next", "start", "-p", "4000"]

NOTICE

@@ -0,0 +1,41 @@
+Hanzo Cloud Console (console2)
+Copyright (c) Hanzo AI, Inc. Licensed BSD-3-Clause (see LICENSE).
+
+------------------------------------------------------------------------
+Third-party attribution
+------------------------------------------------------------------------
+
+Observe surface — Langfuse (MIT License)
+
+The console's Observe screens (Traces, Trace detail with the span-tree /
+latency-waterfall, Observations, Sessions, Scores, Score Configs, Datasets,
+Dataset Items, Dataset Runs / Experiments, and the observability Dashboards /
+Metrics) reproduce the SCREEN LAYOUT AND USER FLOWS of Langfuse's observability
+product.
+
+This is a clean-room reimplementation in our own code (React + @hanzo/gui),
+wired to the native Hanzo Cloud /v1/evals contract. No Langfuse source code is
+copied. Only the MIT-licensed layout/flow concepts inform the design; the
+Langfuse EE / commercial ("ee") code is neither used nor referenced.
+
+  Langfuse — https://github.com/langfuse/langfuse
+  Copyright (c) Langfuse GmbH
+  Licensed under the MIT License.
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

README.md

@@ -1,3 +1,5 @@
+<p align="center"><img src=".github/hero.svg" alt="console2" width="880"></p>
+
 # Hanzo Cloud Console
 
 Unified admin console for **Hanzo Cloud** and all Hanzo cloud products. Built on

app/(dashboard)/[...slug]/page.tsx

@@ -1,20 +1,20 @@
 'use client'
 
 import { use } from 'react'
-import { notFound } from 'next/navigation'
 
-import { matchRoute } from '~/lib/products/match'
+import { ProductRoute } from '~/components/ProductRoute'
 
 /**
  * Catch-all product route. Resolves the module + route from the registry and
- * renders its component. Adding a product anywhere in the registry makes its
- * routes live here — no per-product page files.
+ * renders its component via the shared `ProductRoute` (the ONE renderer, also used
+ * by the dashboard home for the static embed). Adding a product anywhere in the
+ * registry makes its routes live here — no per-product page files.
+ *
+ * `ProductRoute` applies the two honest gates (sub-page stub, admin "managed by
+ * Hanzo" notice), the external-product interstitial, and the per-route error
+ * boundary. See that component.
  */
 export default function ProductPage({ params }: { params: Promise<{ slug: string[] }> }) {
   const { slug } = use(params)
-  const matched = matchRoute(slug)
-  if (!matched) notFound()
-
-  const Component = matched.route.component
-  return <Component params={matched.params} />
+  return <ProductRoute slug={slug} />
 }

app/(dashboard)/error.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+/**
+ * Dashboard route error backstop (Next App Router).
+ *
+ * `ProductErrorBoundary` catches throws inside a resolved product module; this
+ * catches anything above it in the dashboard page tree (the resolver itself, a
+ * non-catch-all dashboard page). It renders in the layout's content slot, so the
+ * shell + nav stay mounted — never a white-screened "Application error". Next's
+ * `reset()` re-renders the segment; `notFound()`/`redirect()` are control flow and
+ * do not reach here.
+ */
+import { useEffect } from 'react'
+import { Button, Card, Text, XStack, YStack } from '@hanzo/gui'
+import { RefreshCw, TriangleAlert } from '@hanzogui/lucide-icons-2'
+
+import { isChunkLoadError, shouldReloadForChunk, CHUNK_RELOAD_AT_KEY } from '~/components/errors/boundary-logic'
+
+export default function DashboardError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const chunk = isChunkLoadError(error)
+
+  useEffect(() => {
+    console.error('[console] dashboard route error:', error)
+    // A chunk skew self-heals: reload ONCE per window to pull the fresh HTML +
+    // current chunks (same recovery the product boundary does), so a stale-deploy
+    // crash at the segment level auto-recovers instead of stranding a manual card.
+    if (!chunk || typeof window === 'undefined') return
+    try {
+      const raw = window.sessionStorage.getItem(CHUNK_RELOAD_AT_KEY)
+      const last = raw ? Number(raw) : null
+      if (shouldReloadForChunk(Date.now(), last)) {
+        window.sessionStorage.setItem(CHUNK_RELOAD_AT_KEY, String(Date.now()))
+        window.location.reload()
+      }
+    } catch {
+      /* sessionStorage blocked (private mode) — fall through to the manual card */
+    }
+  }, [error, chunk])
+
+  return (
+    <YStack p="$4">
+      <Card borderWidth={1} borderColor="$borderColor" p="$4" gap="$3" maxWidth={640} bg="$color1">
+        <XStack gap="$2" items="center">
+          <TriangleAlert size={16} />
+          <Text fontSize="$4" fontWeight="700">
+            {chunk ? 'Updating to the latest version' : 'This page hit an unexpected error'}
+          </Text>
+        </XStack>
+        <Text fontSize="$3" color="$color11">
+          {chunk
+            ? 'A newer version of the console just shipped. Reload to load the latest.'
+            : 'The rest of the console still works. Try again, or reload the page.'}
+        </Text>
+        <XStack gap="$2">
+          {!chunk ? (
+            <Button size="$2" icon={<RefreshCw size={14} />} onPress={() => reset()}>
+              Try again
+            </Button>
+          ) : null}
+          <Button
+            size="$2"
+            chromeless={!chunk}
+            icon={<RefreshCw size={14} />}
+            onPress={() => { if (typeof window !== 'undefined') window.location.reload() }}
+          >
+            Reload
+          </Button>
+        </XStack>
+      </Card>
+    </YStack>
+  )
+}

app/(dashboard)/layout.tsx

@@ -1,25 +1,58 @@
 import type { ReactNode } from 'react'
 
 import { AuthGate } from '~/components/AuthGate'
+import { WaitlistGate } from '~/components/WaitlistGate'
+import { OrgGate } from '~/components/OrgGate'
 import { DashboardShell } from '~/components/DashboardShell'
 import { PreferencesProvider } from '~/lib/products/preferences'
+import { ScopeProvider } from '~/lib/scope-context'
+import { ProjectDeepLink } from '~/components/ProjectDeepLink'
 import { ToastProvider } from '~/components/ui/Toast'
+import { OnboardingGate } from '~/components/onboarding/OnboardingGate'
 import { CommandPaletteProvider } from '~/components/CommandPalette'
 import { AppLauncherProvider } from '~/components/AppLauncher'
+import { DetailPaneProvider } from '~/components/DetailPane'
+import { FloatingChatProvider } from '~/components/FloatingChat'
 
 export default function DashboardLayout({ children }: { children: ReactNode }) {
   return (
     <AuthGate>
-      <PreferencesProvider>
-        <ToastProvider>
-          {/* AppLauncher wraps the palette so the palette can open the launcher. */}
-          <AppLauncherProvider>
-            <CommandPaletteProvider>
-              <DashboardShell>{children}</DashboardShell>
-            </CommandPaletteProvider>
-          </AppLauncherProvider>
-        </ToastProvider>
-      </PreferencesProvider>
+      {/* Signed in ≠ product access. WaitlistGate renders the product only when the
+          user is at the front of the waitlist (or the gate is off/open); otherwise it
+          shows the waitlist panel (position + run-a-node / invite move-up paths). It
+          fails open, so a waitlist blip never traps a signed-in user. */}
+      <WaitlistGate>
+        <OrgGate>
+          <ScopeProvider>
+            {/* Honor an inbound ?project=<iamProjectId> (opened from hanzo.app/chat):
+                select that project scope + open its Platform hub. Renders nothing. */}
+            <ProjectDeepLink />
+            <PreferencesProvider>
+              <ToastProvider>
+                {/* First-run onboarding takes over the whole surface for a user who
+                    hasn't finished it; otherwise it renders the console below. Placed
+                    ABOVE the launcher/palette/chat providers so those overlays never
+                    float over the wizard, but inside Preferences+Toast so the wizard
+                    can persist choices and report feedback. */}
+                <OnboardingGate>
+                  {/* AppLauncher wraps the palette so the palette can open the launcher. */}
+                  <AppLauncherProvider>
+                    <CommandPaletteProvider>
+                      {/* FloatingChat floats the assistant bubble over every page. */}
+                      <FloatingChatProvider>
+                        {/* DetailPane hosts the ONE right-side item detail/edit pane. */}
+                        <DetailPaneProvider>
+                          <DashboardShell>{children}</DashboardShell>
+                        </DetailPaneProvider>
+                      </FloatingChatProvider>
+                    </CommandPaletteProvider>
+                  </AppLauncherProvider>
+                </OnboardingGate>
+              </ToastProvider>
+            </PreferencesProvider>
+          </ScopeProvider>
+        </OrgGate>
+      </WaitlistGate>
     </AuthGate>
   )
 }

app/(dashboard)/page.tsx

@@ -1,36 +1,35 @@
 'use client'
 
 /**
- * Product catalog — the unified console home. Every Hanzo product, grouped by
- * the ten canonical categories, with its enablement state and Google Cloud
- * equivalent. `enabled` and `external` products open straight in (in-console or
- * a new tab); `soon` products link to their discover screen. Each card can be
- * pinned to the sidebar (persisted to the account). Rendered entirely from the
- * catalog registry.
+ * Product catalog — the unified console home. Every Hanzo product, grouped by the
+ * ten canonical categories, with its Google Cloud equivalent. Every product is
+ * open-for-all: each card opens straight into its native in-console surface and
+ * carries a "Learn more" affordance to its docs — there is no enablement gate and
+ * no external bounce. Each card can be pinned to the sidebar (persisted to the
+ * account). Rendered entirely from the catalog registry.
  */
-import { useRouter } from 'next/navigation'
-import { Button, Card, Text, XStack, YStack } from '@hanzo/gui'
-import { Star, Lock, ExternalLink, ArrowRight, Info } from '@hanzogui/lucide-icons-2'
+import { useEffect, useState } from 'react'
+import { useRouter, usePathname } from 'next/navigation'
+import { Button, Card, Spinner, Text, XStack, YStack } from '@hanzo/gui'
+import { Star, Lock, ArrowRight, BookOpen, KeyRound } from '@hanzogui/lucide-icons-2'
 
 import { config } from '~/config'
-import { catalogByCategory, type CatalogEntry } from '~/lib/products/registry'
+import { shellFor } from '~/lib/products/shell'
+import { visibleCatalogByCategory, categorySlug, type CatalogEntry } from '~/lib/products/registry'
+import { resolveView } from '~/lib/products/match'
+import { ProductRoute } from '~/components/ProductRoute'
 import { openProduct } from '~/lib/products/open'
 import { useFavorites } from '~/lib/products/favorites'
+import { useIsSuperAdmin } from '~/lib/auth/admin'
 import { PageHeader } from '~/components/ui/PageHeader'
+import { PrimaryButton } from '~/components/ui/PrimaryButton'
+import { FadeIn } from '~/components/ui/FadeIn'
+import { livingOverviewModule } from '~/components/products/overview/living/LivingOverviewModule'
+import { ResourceOverview } from '~/components/products/overview/ResourceOverview'
 
-const STATUS_LABEL = { enabled: 'Enabled', external: 'External', soon: 'Soon' } as const
-const STATUS_BG = { enabled: '$color5', external: '$color3', soon: '$color4' } as const
-
-function StatusBadge({ entry }: { entry: CatalogEntry }) {
-  return (
-    <XStack bg={STATUS_BG[entry.status]} px="$2" py="$1" rounded="$10" items="center" gap="$1">
-      {entry.admin ? <Lock size={11} opacity={0.6} /> : null}
-      <Text fontSize="$1" color={entry.status === 'enabled' ? '$color12' : '$color11'} fontWeight="600">
-        {STATUS_LABEL[entry.status]}
-      </Text>
-    </XStack>
-  )
-}
+// The home centerpiece is the reusable LivingOverview (count-up KPIs, live
+// sparklines, streaming activity) — the SAME component every product overview uses.
+const OverviewDashboard = livingOverviewModule('overview')
 
 function ProductCard({
   entry,
@@ -46,7 +45,6 @@ function ProductCard({
   onLearnMore: () => void
 }) {
   const Icon = entry.icon
-  const openable = entry.status === 'enabled' || entry.status === 'external'
   return (
     <Card borderWidth={1} borderColor="$borderColor" p="$4" gap="$3" width={272}>
       <XStack justify="space-between" items="flex-start">
@@ -64,14 +62,7 @@ function ProductCard({
           </YStack>
         </XStack>
         <XStack gap="$1" items="center">
-          <Button
-            size="$2"
-            chromeless
-            opacity={0.4}
-            icon={<Info size={15} />}
-            onPress={onLearnMore}
-            aria-label={`Learn about ${entry.label}`}
-          />
+          {entry.admin ? <Lock size={13} opacity={0.45} /> : null}
           <Button
             size="$2"
             chromeless
@@ -88,53 +79,149 @@ function ProductCard({
       </Text>
 
       <XStack justify="space-between" items="center">
-        <StatusBadge entry={entry} />
         <Button
           size="$2"
-          bg={openable ? '$color5' : 'transparent'}
+          chromeless
+          icon={<BookOpen size={14} />}
+          onPress={onLearnMore}
+          aria-label={`Learn more about ${entry.label}`}
+        >
+          Learn more
+        </Button>
+        <Button
+          size="$2"
+          bg="$color5"
           borderWidth={1}
           borderColor="$borderColor"
-          onPress={openable ? onOpen : onLearnMore}
-          iconAfter={entry.kind === 'external' ? <ExternalLink size={14} /> : <ArrowRight size={14} />}
+          onPress={onOpen}
+          iconAfter={<ArrowRight size={14} />}
         >
-          {openable ? 'Open' : 'Learn more'}
+          Open
         </Button>
       </XStack>
     </Card>
   )
 }
 
+/**
+ * Prominent, always-visible "Get API key" call-to-action at the top of the home.
+ * A cold customer must reach "New key" in one obvious click from landing — the
+ * api-keys page is otherwise buried in the collapsed Dev nav group. Routes to the
+ * real ApiKeysModule (`/api-keys`), where the `hk-` key is created/copied/rotated.
+ */
+function GetApiKeyCta({ onOpen }: { onOpen: () => void }) {
+  return (
+    <Card borderWidth={1} borderColor="$borderColor" bg="$color2" p="$4">
+      <XStack items="center" justify="space-between" gap="$4" flexWrap="wrap">
+        <XStack items="center" gap="$3" flex={1} minW={240}>
+          <YStack bg="$color5" rounded="$4" p="$2.5" items="center" justify="center">
+            <KeyRound size={20} />
+          </YStack>
+          <YStack flex={1} minW={180}>
+            <Text fontSize="$5" fontWeight="800">
+              Get your API key
+            </Text>
+            <Text fontSize="$3" color="$color11">
+              Call {config.brandName} models from your apps, SDKs, and CLI with a personal key.
+            </Text>
+          </YStack>
+        </XStack>
+        <PrimaryButton size="$4" iconAfter={<ArrowRight size={16} />} onPress={onOpen}>
+          Get API key
+        </PrimaryButton>
+      </XStack>
+    </Card>
+  )
+}
+
 export default function DashboardHome() {
   const router = useRouter()
+  const pathname = usePathname()
+  const [mounted, setMounted] = useState(false)
   const { toggle, isPinned } = useFavorites()
+  const showAdmin = useIsSuperAdmin()
   const push = (path: string) => router.push(path)
-  const groups = catalogByCategory()
+  const groups = visibleCatalogByCategory(showAdmin)
+
+  useEffect(() => setMounted(true), [])
+
+  // Product-shell face (billing.<brand> / sentry.<brand> / an override): the default
+  // route IS the face's home — redirect the catalog home there so people who only ever
+  // see billing.hanzo.ai land on billing, and sentry.hanzo.ai on Issues. ONE redirect
+  // for every face, driven by the shell descriptor.
+  const shellHome = shellFor(config.shell).home
+  useEffect(() => {
+    if (shellHome) router.replace(`/${shellHome}`)
+  }, [router, shellHome])
+
+  // One-binary STATIC embed: cloud serves THIS page's index.html for EVERY deep
+  // link (a static export can't pre-generate arbitrary product slugs), so a direct
+  // load / refresh — or a client nav that hard-falls-back — of /models, /chat,
+  // /tracker … would otherwise render the home instead of the module. Resolve the
+  // LIVE path client-side and hand any real product route to the shared
+  // ProductRoute. Gated on `mounted` so the first client render matches the
+  // server-exported home ("/") — no hydration mismatch; it then swaps to the
+  // resolved module. On a real Next server this page only renders for "/", so
+  // `segments` is empty and the home always shows; an unknown/non-product deep path
+  // (e.g. /category/*, /discover/*) resolves to notfound here and falls through to
+  // the home rather than a hard 404 in the embed.
+  const segments =
+    mounted && pathname ? pathname.replace(/^\/+|\/+$/g, '').split('/').filter(Boolean) : []
+  if (segments.length > 0 && resolveView(segments).kind !== 'notfound') {
+    return <ProductRoute slug={segments} />
+  }
+
+  if (shellHome) {
+    return (
+      <XStack flex={1} justify="center" items="center" p="$8">
+        <Spinner size="large" color="$color11" />
+      </XStack>
+    )
+  }
 
   return (
-    <>
-      <PageHeader
-        title={config.brandName}
-        subtitle={`See, enable, and manage every ${config.brandName} product from one place.`}
-      />
-      {groups.map((group) => (
-        <YStack key={group.category} gap="$3">
-          <Text fontSize="$5" fontWeight="800" color="$color12">
-            {group.category}
-          </Text>
-          <XStack flexWrap="wrap" gap="$3">
-            {group.entries.map((entry) => (
-              <ProductCard
-                key={entry.id}
-                entry={entry}
-                pinned={isPinned(entry.id)}
-                onOpen={() => openProduct(entry, push)}
-                onToggle={() => toggle(entry.id)}
-                onLearnMore={() => push(`/discover/${entry.id}`)}
-              />
-            ))}
-          </XStack>
-        </YStack>
-      ))}
-    </>
+    <YStack gap="$7">
+      <GetApiKeyCta onOpen={() => push('/api-keys')} />
+      <OverviewDashboard params={{}} />
+      <ResourceOverview />
+      <YStack gap="$4">
+        <PageHeader
+          title="Explore products"
+          subtitle={`Open and manage every ${config.brandName} product from one place.`}
+        />
+        {groups.map((group, i) => (
+        <FadeIn key={group.category} index={i} style={{ width: '100%' }}>
+          <YStack gap="$3">
+            <XStack
+              self="flex-start"
+              items="center"
+              gap="$2"
+              cursor="pointer"
+              hoverStyle={{ opacity: 0.75 }}
+              onPress={() => push(`/category/${categorySlug(group.category)}`)}
+              aria-label={`${group.category} overview`}
+            >
+              <Text fontSize="$5" fontWeight="800" color="$color12">
+                {group.category}
+              </Text>
+              <ArrowRight size={16} opacity={0.5} />
+            </XStack>
+            <XStack flexWrap="wrap" gap="$3">
+              {group.entries.map((entry) => (
+                <ProductCard
+                  key={entry.id}
+                  entry={entry}
+                  pinned={isPinned(entry.id)}
+                  onOpen={() => openProduct(entry, push)}
+                  onToggle={() => toggle(entry.id)}
+                  onLearnMore={() => push(`/discover/${entry.id}`)}
+                />
+              ))}
+            </XStack>
+          </YStack>
+        </FadeIn>
+        ))}
+      </YStack>
+    </YStack>
   )
 }

app/accept/page.tsx

@@ -0,0 +1,232 @@
+'use client'
+
+/**
+ * /accept — the invitee's landing page for a team invite (PUBLIC, no session).
+ *
+ * The org admin shares this link (email/OTP delivery isn't wired on this
+ * deployment). The invitee opens it, sees the org they've been invited to, sets a
+ * password (IAM hashes it server-side — never plaintext), then signs in and lands
+ * in that org with the role the admin assigned. Honest states throughout: an
+ * invalid/expired link, an already-accepted link, and IAM errors are all truthful,
+ * never a fake success.
+ */
+import { Suspense, useCallback, useEffect, useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { Button, Card, Input, Spinner, Text, XStack, YStack } from '@hanzo/gui'
+import { CheckCircle2, ArrowRight, ShieldAlert, UserPlus } from '@hanzogui/lucide-icons-2'
+
+import { MIN_PASSWORD } from '~/lib/server/onboarding'
+
+type Info =
+  | { phase: 'loading' }
+  | { phase: 'error'; message: string }
+  | { phase: 'accepted'; org: string }
+  | { phase: 'form'; org: string; email: string; displayName: string; role: string }
+
+function Center({ children }: { children: React.ReactNode }) {
+  return (
+    <YStack flex={1} minH="100vh" items="center" justify="center" p="$4">
+      {children}
+    </YStack>
+  )
+}
+
+function AcceptFlow() {
+  const router = useRouter()
+  const params = useSearchParams()
+  const token = params?.get('t') ?? ''
+
+  const [info, setInfo] = useState<Info>({ phase: 'loading' })
+  const [password, setPassword] = useState('')
+  const [name, setName] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [err, setErr] = useState<string | null>(null)
+  const [done, setDone] = useState<false | string>(false)
+
+  useEffect(() => {
+    if (!token) {
+      setInfo({ phase: 'error', message: 'This invitation link is missing its token.' })
+      return
+    }
+    let live = true
+    ;(async () => {
+      let res: Response
+      try {
+        res = await fetch(`/console/accept?t=${encodeURIComponent(token)}`, { credentials: 'include' })
+      } catch {
+        if (live) setInfo({ phase: 'error', message: 'Network error — please try again.' })
+        return
+      }
+      const j = (await res.json().catch(() => null)) as
+        | { org?: string; email?: string; displayName?: string; role?: string; accepted?: boolean; error?: string }
+        | null
+      if (!live) return
+      if (!res.ok || !j?.org) {
+        setInfo({ phase: 'error', message: j?.error || 'This invitation link is invalid or has expired.' })
+        return
+      }
+      if (j.accepted) {
+        setInfo({ phase: 'accepted', org: j.org })
+        return
+      }
+      setInfo({ phase: 'form', org: j.org, email: j.email || '', displayName: j.displayName || '', role: j.role || 'member' })
+      setName(j.displayName || '')
+    })()
+    return () => {
+      live = false
+    }
+  }, [token])
+
+  const submit = useCallback(async () => {
+    if (password.length < MIN_PASSWORD) {
+      setErr(`Use a password of at least ${MIN_PASSWORD} characters.`)
+      return
+    }
+    setBusy(true)
+    setErr(null)
+    let res: Response
+    try {
+      res = await fetch('/console/accept', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ t: token, password, displayName: name.trim() || undefined }),
+      })
+    } catch {
+      setErr('Network error — please try again.')
+      setBusy(false)
+      return
+    }
+    const j = (await res.json().catch(() => null)) as { ok?: boolean; org?: string; error?: string } | null
+    if (!res.ok || !j?.ok) {
+      setErr(j?.error || `Could not activate your account (HTTP ${res.status}).`)
+      setBusy(false)
+      return
+    }
+    setDone(j.org || (info.phase === 'form' ? info.org : ''))
+  }, [password, name, token, info])
+
+  if (done !== false) {
+    return (
+      <Center>
+        <Card p="$5" gap="$4" width={440} maxW="92vw" borderWidth={1} borderColor="$borderColor" bg="$color1" items="center">
+          <CheckCircle2 size={40} color="$green10" />
+          <YStack gap="$1" items="center">
+            <Text fontSize="$7" fontWeight="800">You're in</Text>
+            <Text fontSize="$3" color="$color11" text="center">
+              Your account for <Text color="$color12" fontWeight="700">{done}</Text> is ready. Sign in to continue.
+            </Text>
+          </YStack>
+          <Button
+            size="$4"
+            theme="light"
+            width="100%"
+            iconAfter={<ArrowRight size={16} />}
+            onPress={() => router.push('/signin')}
+          >
+            Sign in
+          </Button>
+        </Card>
+      </Center>
+    )
+  }
+
+  if (info.phase === 'loading') {
+    return (
+      <Center>
+        <Spinner size="large" color="$color11" />
+      </Center>
+    )
+  }
+
+  if (info.phase === 'error') {
+    return (
+      <Center>
+        <Card p="$5" gap="$3" width={440} maxW="92vw" borderWidth={1} borderColor="$borderColor" bg="$color1" items="center">
+          <ShieldAlert size={36} color="$red10" />
+          <Text fontSize="$6" fontWeight="800">Invitation unavailable</Text>
+          <Text fontSize="$3" color="$color11" text="center">{info.message}</Text>
+          <Button size="$3" onPress={() => router.push('/signin')}>Go to sign in</Button>
+        </Card>
+      </Center>
+    )
+  }
+
+  if (info.phase === 'accepted') {
+    return (
+      <Center>
+        <Card p="$5" gap="$3" width={440} maxW="92vw" borderWidth={1} borderColor="$borderColor" bg="$color1" items="center">
+          <CheckCircle2 size={36} color="$green10" />
+          <Text fontSize="$6" fontWeight="800">Already accepted</Text>
+          <Text fontSize="$3" color="$color11" text="center">
+            This invitation to <Text color="$color12" fontWeight="700">{info.org}</Text> was already used. Sign in to continue.
+          </Text>
+          <Button size="$4" theme="light" iconAfter={<ArrowRight size={16} />} onPress={() => router.push('/signin')}>
+            Sign in
+          </Button>
+        </Card>
+      </Center>
+    )
+  }
+
+  return (
+    <Center>
+      <Card p="$5" gap="$4" width={440} maxW="92vw" borderWidth={1} borderColor="$borderColor" bg="$color1">
+        <YStack gap="$2">
+          <XStack gap="$2" items="center">
+            <UserPlus size={20} />
+            <Text fontSize="$7" fontWeight="800">Join {info.org}</Text>
+          </XStack>
+          <Text fontSize="$3" color="$color11">
+            You've been invited to <Text color="$color12" fontWeight="700">{info.org}</Text> as a{' '}
+            <Text color="$color12" fontWeight="700">{info.role}</Text>. Set a password to activate{' '}
+            <Text color="$color12">{info.email}</Text> and sign in.
+          </Text>
+        </YStack>
+
+        <YStack gap="$2">
+          <Text fontSize="$2" color="$color11" fontWeight="600">Your name</Text>
+          <Input value={name} onChangeText={setName} placeholder="Your name" autoCapitalize="words" />
+        </YStack>
+
+        <YStack gap="$2">
+          <Text fontSize="$2" color="$color11" fontWeight="600">Password</Text>
+          <Input
+            value={password}
+            onChangeText={(v) => {
+              setPassword(v)
+              if (err) setErr(null)
+            }}
+            placeholder={`At least ${MIN_PASSWORD} characters`}
+            // secureTextEntry alone does not mask in this @hanzo/gui build; set the
+            // web input type explicitly (RNW passthrough) — same as SignInForm.
+            secureTextEntry
+            {...{ type: 'password' }}
+            autoComplete="new-password"
+            onSubmitEditing={() => void submit()}
+          />
+        </YStack>
+
+        {err ? <Text fontSize="$2" color="$red10">{err}</Text> : null}
+
+        <Button
+          size="$4"
+          theme="light"
+          disabled={busy || password.length < MIN_PASSWORD}
+          iconAfter={busy ? <Spinner color="$color1" /> : <ArrowRight size={16} />}
+          onPress={() => void submit()}
+        >
+          {busy ? 'Activating…' : 'Set password & join'}
+        </Button>
+      </Card>
+    </Center>
+  )
+}
+
+export default function AcceptPage() {
+  return (
+    <Suspense fallback={<Center><Spinner size="large" color="$color11" /></Center>}>
+      <AcceptFlow />
+    </Suspense>
+  )
+}

app/admin/aggregate/[...path]/route.ts

@@ -0,0 +1,115 @@
+/**
+ * Server-gated GLOBAL admin aggregate proxy — the cross-tenant business/platform
+ * reads (`/v1/admin/{overview,usage,orgs,audit,products,finance,compute,providers}`)
+ * AND the few GLOBAL-admin mutations that ride the same god-view gate
+ * (`POST /v1/admin/providers/{toggle,primary}` — flip shared-gateway provider
+ * routing that affects every org).
+ *
+ * The admin business board is an ALL-ORGS god view (`?org=all`) over IAM + commerce
+ * + o11y. So — unlike the per-tenant `/v1` proxy, which authorizes on the bearer
+ * `owner` claim and is safe for any authenticated user — this MUST be gated to a
+ * GLOBAL admin BEFORE anything is forwarded: a tenant customer (even one who is
+ * `isAdmin` of their own org) must NOT read another org's revenue/spend/customers,
+ * must NOT trigger the `org=all` aggregate at all, and must NOT flip a shared
+ * provider's enabled/primary state.
+ *
+ * Defense in depth (RED H1 — the cloud-side gate for `/v1/admin/*` is a separate
+ * backend contract we cannot see or test from this repo): `getAdminGate` enforces the
+ * SAME policy the IAM/KMS admin proxies use — a VERIFIED `@<brand.adminDomain>` email
+ * AND an IAM global-admin flag, fail-closed (→ 403) on any miss. Only then does the
+ * shared `forwardWithUserBearer` mint a short-lived user bearer and forward to
+ * cloud-api, applying the usual path-traversal + same-origin-CSRF hardening. On a
+ * mutating method (POST), that CSRF gate (Sec-Fetch-Site ≠ cross-site AND Origin/
+ * Referer host == Host, fail-closed 403 BEFORE resolving the user) means a
+ * cross-site page can never flip a provider on the victim admin's behalf. The
+ * browser holds no cloud credential and cannot reach this endpoint without passing
+ * the gate; the client-side `admin: true` nav gate + `AdminManagedNotice` is UI-only
+ * defense-in-depth, never the boundary.
+ *
+ * Least privilege: only the admin aggregate heads are reachable, NOT `iam`/`kms`
+ * (those keep their own gated proxies with their own tenant-scoping semantics) — this
+ * is not a general cloud-api tunnel. `allowAdminSurface` admits `v1/admin/<head>[/...]`
+ * (the exact forwarded upstream shape), so `providers` covers the GET list and the
+ * `providers/{toggle,primary}` POSTs and nothing else. `next.config.mjs` rewrites
+ * `/v1/admin/<head>[/...]` here for BOTH GET and POST (dropping the `/v1/` into the
+ * internal Next route path); this handler re-adds `v1/` for the upstream cloud call,
+ * and the client calls the clean same-origin `/v1/admin/*` form (unchanged).
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { cloudAudience } from '~/config'
+import { getAdminGate } from '~/lib/server/identity'
+import { forwardWithUserBearer } from '~/lib/server/bearer-proxy'
+import { allowAdminSurface } from '~/lib/server/admin-aggregate'
+
+export const runtime = 'nodejs'
+
+const trim = (s: string) => s.replace(/\/+$/, '')
+/** The unified cloud backend (hanzoai/cloud). In-cluster ClusterIP — public egress is CF-403'd.
+ *  `|| default` (not `??`) so an env reconciled to an EMPTY string still resolves the service. */
+const CLOUD_API_URL = trim(process.env.CLOUD_API_URL?.trim() || 'http://cloud-api.hanzo.svc.cluster.local:8000')
+
+const forbidden = () => NextResponse.json({ status: 'error', msg: 'forbidden' }, { status: 403 })
+
+type Ctx = { params: Promise<{ path: string[] }> }
+
+async function handle(req: NextRequest, ctx: Ctx): Promise<NextResponse> {
+  // AUTHORIZE FIRST — global-admin only, fail-closed. A non-global-admin (tenant
+  // customer, org-level isAdmin) gets a 403 and never triggers the org=all aggregate.
+  const gate = await getAdminGate(req)
+  if (!gate) return forbidden()
+
+  // The rewrite feeds the tail after `/v1/admin/` (e.g. `overview`, `audit`); rebuild
+  // the FULL cloud path, which is `/v1/admin/<head>` — cloud serves every admin route
+  // under `/v1/admin/*` (the beego `/v1/*` glob in hanzoai/ai + cloud's own
+  // `clients/admin` `app.Get("/v1/admin/…")`), and `forwardWithUserBearer` forwards to
+  // `target/path` VERBATIM (no `/v1` prepend), so the `v1/` MUST be part of the path
+  // here or the request lands on a non-existent bare `/admin/*` and 404s. The rewrite
+  // destination (`app/admin/aggregate/<head>`) is the internal Next route, not the
+  // upstream — it deliberately carries no `v1/`; this handler adds it.
+  // `forwardWithUserBearer` re-validates the exact forwarded path via `allow`
+  // (`allowAdminSurface`, keyed on the `v1/admin/<head>` shape) + `pathIsClean`.
+  const path = `v1/admin/${(await ctx.params).path.join('/')}`.replace(/\/+$/, '')
+  return forwardWithUserBearer(req, {
+    target: CLOUD_API_URL,
+    path,
+    allow: allowAdminSurface,
+    // Scope the minted user bearer to the brand's cloud audience (`<brand>-cloud`).
+    // The operator is a member of the reserved `admin` org, whose OWN app is
+    // `admin-console` — NOT in cloud's audience allowlist — so a default-audience
+    // bearer is rejected (anonymous → 403 on every /v1/admin/*). With the cloud
+    // audience, cloud validates the token and, seeing owner=admin + isAdmin=true,
+    // sets X-User-IsAdmin=true. Host-aware so a lux/zoo admin host scopes to its own
+    // brand cloud audience. (Tenant proxies are unchanged — they omit this.)
+    audience: cloudAudience(req.headers.get('host')),
+    // The AdminApi client unwraps the casibase `{status,msg,data}` envelope, so this
+    // proxy's own 401/404 must speak the same shape (an honest state, never a throw).
+    errorShape: 'casibase',
+    unauthorizedMessage: 'Sign in as an administrator.',
+  })
+}
+
+export async function GET(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+
+/**
+ * POST — the GLOBAL-admin mutations that ride the same god-view gate
+ * (`/v1/admin/providers/{toggle,primary}`). Identical path through `getAdminGate`
+ * (fail-closed 403) → `forwardWithUserBearer`, which applies the same-origin CSRF
+ * check to this mutating method BEFORE resolving the user, streams the JSON body
+ * through, and re-validates the path against `allowAdminSurface` (so a POST can only
+ * ever reach an allowed head — never `iam`/`kms`, never a traversal).
+ */
+export async function POST(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+
+/**
+ * PUT — the GLOBAL-admin enablement set (`PUT /v1/admin/enablement`, flip an item
+ * off|beta|ga + grant orgs). Same gate + same CSRF/traversal hardening as POST;
+ * `allowAdminSurface` admits only `v1/admin/enablement`, nothing else.
+ */
+export async function PUT(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}

app/admin/iam/[...path]/route.ts

@@ -0,0 +1,127 @@
+/**
+ * Server-gated GLOBAL IAM admin proxy — cross-tenant IAM ops (any org).
+ *
+ * The browser holds no IAM credential. It calls this SAME-ORIGIN route with just
+ * its session cookie; the handler enforces the GLOBAL admin gate (`getAdminGate`:
+ * verified @<adminDomain> email AND a global-admin flag), then the shared
+ * `forwardIam` applies the allow-list + tenant scoping (a global admin may act on
+ * any org) and forwards to IAM as the user. A CUSTOMER managing their OWN org uses
+ * `/org/iam` instead — this route is global-only.
+ *
+ * Least privilege: only an explicit allow-list of admin segments is reachable
+ * (GET reads / POST mutations); every owner the request references — including
+ * the mutation BODY owner — is validated by `forwardIam`.
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { getAdminGate } from '~/lib/server/identity'
+import { forwardIam } from '~/lib/server/iam-proxy'
+
+export const runtime = 'nodejs'
+
+/** Read segments — reachable via GET only. */
+const GET_SEGMENTS = new Set([
+  'get-organizations',
+  'get-organization',
+  'get-users',
+  'get-user',
+  'get-applications',
+  'get-application',
+  'get-providers',
+  'get-provider',
+  'get-roles',
+  'get-records',
+  // Waitlist approval queue (iam#104) — the Pending-Users board reads this. The
+  // /admin/iam gate is already global-admin-only, matching IAM's own
+  // GetPendingUsers auth (global admin or org admin). REUSED, not rebuilt.
+  'get-pending-users',
+])
+
+/**
+ * Mutation segments — reachable via POST only (JSON body forwarded).
+ *
+ * The org-metadata WRITES (`add-organization`/`update-organization`/`delete-organization`)
+ * are the DATA-DRIVEN white-label backbone: a tenant IS an org record, and its BRAND
+ * (logo / favicon / themeData) is a real writable IAM field on that record. This is
+ * how the Tenants board CREATES a tenant and WRITES its brand — no hardcoded brand map.
+ * These are safe on THIS proxy because the gate is already GLOBAL-ADMIN-ONLY and
+ * `forwardIam` pins the org NAME (`orgNameSegments` below) so the write is scoped
+ * (a non-global caller — who can't reach this route anyway — could never retarget
+ * another tenant's org via the id or the body `name`).
+ */
+const POST_SEGMENTS = new Set([
+  'add-user',
+  'update-user',
+  'delete-user',
+  'add-application',
+  'update-application',
+  'delete-application',
+  'add-provider',
+  'update-provider',
+  'delete-provider',
+  'add-role',
+  'update-role',
+  'delete-role',
+  'add-organization',
+  'update-organization',
+  'delete-organization',
+  // Waitlist approval actions (iam#104) — approve/reject a pending user. Body is
+  // `{id:"owner/name"}`; the global-admin gate + forwardIam's owner scoping apply.
+  'approve-user',
+  'reject-user',
+])
+
+/**
+ * Organization objects are owned by IAM's built-in `admin`, and the org
+ * list/get endpoints scope results to the caller's org server-side — so `admin`
+ * is an acceptable owner THERE (never for tenant data like users/roles). The
+ * org-metadata WRITES join it: they operate on the `admin`-owned org record.
+ */
+const ORG_ENDPOINTS = new Set([
+  'get-organizations',
+  'get-organization',
+  'add-organization',
+  'update-organization',
+  'delete-organization',
+])
+
+/**
+ * Segments carrying an org NAME to guard — a non-global admin can't read/write
+ * another org's settings via the `admin` metadata owner. (This route's gate is
+ * already global-only, so this is defense-in-depth: it keeps the org-name scoping
+ * identical to the `/org/iam` self-service proxy, one policy for both.)
+ */
+const ORG_NAME_SEGMENTS = new Set([
+  'get-organization',
+  'update-organization',
+  'delete-organization',
+])
+
+const forbidden = () => NextResponse.json({ error: 'forbidden' }, { status: 403 })
+
+async function handle(req: NextRequest, path: string[], method: 'GET' | 'POST'): Promise<NextResponse> {
+  const gate = await getAdminGate(req)
+  if (!gate) return forbidden()
+  return forwardIam(
+    req,
+    { user: gate.user, isSuperAdmin: gate.user.isSuperAdmin, orgScope: gate.orgScope },
+    {
+      segment: path.join('/'),
+      method,
+      allowed: method === 'GET' ? GET_SEGMENTS : POST_SEGMENTS,
+      orgMetaSegments: ORG_ENDPOINTS,
+      orgNameSegments: ORG_NAME_SEGMENTS,
+      // The gate is already global-only; global admins may write to any org.
+      requireAdminForWrite: false,
+    },
+  )
+}
+
+type Ctx = { params: Promise<{ path: string[] }> }
+
+export async function GET(req: NextRequest, ctx: Ctx) {
+  return handle(req, (await ctx.params).path, 'GET')
+}
+export async function POST(req: NextRequest, ctx: Ctx) {
+  return handle(req, (await ctx.params).path, 'POST')
+}

app/admin/kms/[...path]/route.ts

@@ -0,0 +1,144 @@
+/**
+ * Server-gated KMS admin proxy — the ONLY way the browser reaches Hanzo KMS.
+ *
+ * Same trust boundary as the IAM proxy: the browser sends only its session
+ * cookie, this handler enforces the brand-admin gate, then forwards to kmsd as
+ * the user (short-lived user-bound bearer) so KMS enforces org isolation from the
+ * verified `owner` claim (`canActOnOrg`). Secrets are scoped to the brand org by
+ * default; a global admin may target another org with `?org=`.
+ *
+ * Zero-knowledge discipline: this route NEVER logs a secret value or any request
+ * body, and never derives or stores key material — it is a faithful pass-through
+ * of kmsd's JSON + status code. One resource path (`/admin/kms/secrets`); the
+ * verb + query select the operation:
+ *   GET   ?path=&name=&env=   → reveal one value      → GET    .../secrets/<path>/<name>?env=
+ *   GET   ?prefix=&env=       → list metadata          → GET    .../secrets?prefix=&env=
+ *   POST  {path,name,env,value} → create/upsert        → POST   .../secrets
+ *   PATCH ?path=&name= {value,version,env} → rotate    → PATCH  .../secrets/<path>/<name>
+ *   DELETE ?path=&name=&env=  → delete                 → DELETE .../secrets/<path>/<name>?env=
+ *
+ * kmsd has no list endpoint yet — the list GET returns 404, which the KMS module
+ * renders as an honest "listing requires kmsd ≥ next release" state.
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { getAdminGate, adminBearer, kmsBaseUrl, type AdminGate } from '~/lib/server/identity'
+import { orgFor as policyOrgFor } from '~/lib/server/admin-policy'
+import { csrfRefusal } from '~/lib/server/bearer-proxy'
+import { fetchWithTimeout } from '~/lib/server/fetch-timeout'
+
+export const runtime = 'nodejs'
+
+const forbidden = () => NextResponse.json({ error: 'forbidden' }, { status: 403 })
+const notFound = () => NextResponse.json({ error: 'not found' }, { status: 404 })
+
+/** `<path>/<name>` for the kmsd route, each segment encoded, slashes preserved. */
+function secretRest(path: string, name: string): string {
+  return [...path.split('/').filter(Boolean), name].map(encodeURIComponent).join('/')
+}
+
+/** Org the operator acts on — the brand org, unless a SuperAdmin passes ?org=
+ *  (the pure `admin-policy` predicate, tested in admin-policy.test.ts). */
+function orgFor(gate: AdminGate, req: NextRequest): string {
+  return policyOrgFor(
+    { isSuperAdmin: gate.user.isSuperAdmin, orgScope: gate.orgScope },
+    req.nextUrl.searchParams.get('org'),
+  )
+}
+
+async function handle(req: NextRequest, segments: string[]): Promise<NextResponse> {
+  // CSRF: a cross-site page carrying the admin's auto-sent cookie must never be able
+  // to create / rotate / delete a KMS secret. Refuse a cross-origin MUTATION before
+  // the admin gate or any body read (safe GET reveals pass). Defense in depth on top
+  // of the session cookie's own SameSite attribute.
+  const csrf = csrfRefusal(req)
+  if (csrf) return csrf
+
+  const gate = await getAdminGate(req)
+  if (!gate) return forbidden()
+  if (segments.length !== 1 || segments[0] !== 'secrets') return notFound()
+
+  const org = orgFor(gate, req)
+  const base = `${kmsBaseUrl()}/v1/kms/orgs/${encodeURIComponent(org)}/secrets`
+  const q = req.nextUrl.searchParams
+  const name = q.get('name') ?? ''
+  const path = q.get('path') ?? ''
+  const env = q.get('env') ?? ''
+
+  let target: string
+  let body: string | undefined
+  if (req.method === 'GET') {
+    if (name) {
+      const params = new URLSearchParams()
+      if (env) params.set('env', env)
+      target = `${base}/${secretRest(path, name)}${params.toString() ? `?${params}` : ''}`
+    } else {
+      const params = new URLSearchParams()
+      const prefix = q.get('prefix')
+      if (prefix) params.set('prefix', prefix)
+      if (env) params.set('env', env)
+      target = `${base}${params.toString() ? `?${params}` : ''}`
+    }
+  } else if (req.method === 'POST') {
+    target = base
+    body = await req.text() // {path,name,env,value} — forwarded verbatim, never logged
+  } else if (req.method === 'PATCH') {
+    if (!name) return notFound()
+    target = `${base}/${secretRest(path, name)}`
+    body = await req.text() // {value,version,env} — forwarded verbatim, never logged
+  } else if (req.method === 'DELETE') {
+    if (!name) return notFound()
+    const params = new URLSearchParams()
+    if (env) params.set('env', env)
+    target = `${base}/${secretRest(path, name)}${params.toString() ? `?${params}` : ''}`
+  } else {
+    return notFound()
+  }
+
+  let bearer: string
+  try {
+    bearer = await adminBearer(gate.user)
+  } catch (e) {
+    return NextResponse.json(
+      { message: `Could not authorize the request: ${e instanceof Error ? e.message : String(e)}` },
+      { status: 502 },
+    )
+  }
+
+  const headers: Record<string, string> = { Authorization: `Bearer ${bearer}`, Accept: 'application/json' }
+  const init: RequestInit = { method: req.method, headers, cache: 'no-store' }
+  if (body !== undefined) {
+    headers['Content-Type'] = 'application/json'
+    init.body = body
+  }
+
+  try {
+    const res = await fetchWithTimeout(target, init)
+    const text = await res.text()
+    return new NextResponse(text, {
+      status: res.status,
+      headers: { 'Content-Type': res.headers.get('content-type') ?? 'application/json' },
+    })
+  } catch (e) {
+    // Surface only the transport failure — never the request body/value.
+    return NextResponse.json(
+      { message: `KMS unreachable: ${e instanceof Error ? e.message : String(e)}` },
+      { status: 502 },
+    )
+  }
+}
+
+type Ctx = { params: Promise<{ path: string[] }> }
+
+export async function GET(req: NextRequest, ctx: Ctx) {
+  return handle(req, (await ctx.params).path)
+}
+export async function POST(req: NextRequest, ctx: Ctx) {
+  return handle(req, (await ctx.params).path)
+}
+export async function PATCH(req: NextRequest, ctx: Ctx) {
+  return handle(req, (await ctx.params).path)
+}
+export async function DELETE(req: NextRequest, ctx: Ctx) {
+  return handle(req, (await ctx.params).path)
+}

app/admin/saas/route.ts

@@ -0,0 +1,81 @@
+/**
+ * Server-gated GLOBAL-admin proxy for the commerce SaaS-operations god-view
+ * (`GET /v1/metrics/saas`) — the cross-tenant revenue / subscription / customer
+ * snapshot computed IN commerce (the money system of record). This is the exact
+ * console→commerce pattern commerce's own `api/costs` gate documents: the console's
+ * OWN global-admin gate runs FIRST, then it forwards with the `COMMERCE_SERVICE_TOKEN`
+ * and NO user identity — commerce's `RequirePlatformAdmin` admits that trusted M2M
+ * token (Admin bit, empty Subject) for the fleet god-view.
+ *
+ * Gated fail-closed BEFORE any cross-tenant row is read: `getAdminGate` requires a
+ * VERIFIED `@<brand.adminDomain>` email AND an IAM global-admin flag (the SAME gate
+ * the IAM/KMS/aggregate admin proxies use), → 403 on any miss. A tenant customer —
+ * even one who is `isAdmin` of their OWN org — can never read another org's revenue.
+ * The client-side `admin: true` nav gate + module `OperatorAccessRequired` are
+ * UI-only defense-in-depth; this server gate is the boundary.
+ *
+ * The path is FIXED (`/v1/metrics/saas`) — there is no client-controlled path
+ * segment, so no traversal surface. Only the allow-listed `window`/`limit` query
+ * params are forwarded (validated here), never the raw query string. The commerce
+ * SERVICE token comes from server-only env (never `NEXT_PUBLIC_`, never the browser
+ * bundle); unset → honest 501 (the board shows "not configured", never a fabricated
+ * MRR). The commerce raw JSON is wrapped in the casibase `{status,msg,data}`
+ * envelope the admin client (`originGet`) unwraps.
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { getAdminGate } from '~/lib/server/identity'
+import { commerceBaseUrl, commerceServiceToken } from '~/lib/server/billing-proxy'
+import { fetchWithTimeout } from '~/lib/server/fetch-timeout'
+
+export const runtime = 'nodejs'
+
+/** The commerce SaaS god-view — the internal `/v1` bundle path (cloud/costs siblings
+ *  live here too), reached directly at the in-cluster commerce address. */
+const METRICS_PATH = '/v1/metrics/saas'
+
+/** The windows commerce accepts; anything else is dropped (commerce defaults 30d). */
+const WINDOWS = new Set(['7d', '30d', '90d', 'mtd', 'all'])
+
+const NO_STORE = 'no-store, must-revalidate'
+const envelope = (msg: string, status: number) =>
+  NextResponse.json({ status: 'error', msg, data: null }, { status, headers: { 'Cache-Control': NO_STORE } })
+
+export async function GET(req: NextRequest): Promise<NextResponse> {
+  // AUTHORIZE FIRST — global-admin only, fail-closed. A non-global-admin never
+  // triggers the cross-tenant commerce walk.
+  const gate = await getAdminGate(req)
+  if (!gate) return envelope('forbidden', 403)
+
+  const token = commerceServiceToken()
+  if (!token) return envelope('SaaS metrics are not configured (COMMERCE_TOKEN missing).', 501)
+
+  // Forward ONLY the allow-listed, validated params — never the raw query string.
+  const q = new URLSearchParams()
+  const window = (req.nextUrl.searchParams.get('window') ?? '').trim()
+  if (WINDOWS.has(window)) q.set('window', window)
+  const limit = Number(req.nextUrl.searchParams.get('limit'))
+  if (Number.isInteger(limit) && limit > 0 && limit <= 200) q.set('limit', String(limit))
+
+  const url = `${commerceBaseUrl()}${METRICS_PATH}${q.toString() ? `?${q}` : ''}`
+  try {
+    const res = await fetchWithTimeout(url, {
+      method: 'GET',
+      headers: { Authorization: `Bearer ${token}`, Accept: 'application/json' },
+      cache: 'no-store',
+      signal: req.signal,
+    })
+    if (!res.ok) {
+      // Forward commerce's status class as an honest error; the board shows the
+      // failure state (never a fabricated snapshot).
+      return envelope(`SaaS metrics upstream returned ${res.status}.`, res.status === 403 ? 403 : 502)
+    }
+    const data = await res.json()
+    return NextResponse.json({ status: 'ok', msg: '', data }, { headers: { 'Cache-Control': NO_STORE } })
+  } catch (e) {
+    // Redact the exception (it carries the internal commerce host/port) — log
+    // server-side only; return a generic client message.
+    console.error('saas-metrics proxy: upstream unreachable:', commerceBaseUrl(), e instanceof Error ? e.message : String(e))
+    return envelope('SaaS metrics upstream is unavailable.', 502)
+  }
+}

app/ai/[...path]/route.ts

@@ -1,20 +1,25 @@
 /**
  * Keyless AI proxy — the ONE path the console uses to reach the model gateway.
  *
- * `/v1/chat/completions` (and friends) REQUIRE an `Authorization: Bearer` token;
- * a browser session cookie alone is rejected. Rather than ship the user's durable
- * `hk-` key to the browser, the console calls its OWN origin (`/ai/v1/...`) with
- * just the session cookie; this server handler resolves the user, mints a
- * SHORT-LIVED, user-bound IAM token (issue-user-token, cached until just before
- * expiry), and forwards to the gateway with that token. No key in the browser, no
- * rotation on a chat turn, and every call is billed to the user's own org.
+ * `/v1/chat/completions` (and friends) REQUIRE an `Authorization: Bearer` token; a
+ * browser session cookie alone is rejected. Rather than ship the user's durable
+ * `hk-` key to the browser, the console calls its OWN origin at the canonical, prefix-free
+ * `/v1/<aihead>` (the /v1-first law); `next.config.mjs` dispatches those heads to THIS `/ai`
+ * proxy (re-rooting the upstream at `v1/` — invisible to the client). `forwardWithUserBearer`
+ * resolves the user, mints a SHORT-LIVED, user-bound IAM token (shared per-user cache in
+ * identity.ts), and forwards to the gateway with that token. No key in the browser, and
+ * every call is billed to the user's own org. The response STREAMS through, so
+ * `chat/completions` SSE (and the multi-model TTFT measurement) is preserved.
  *
- * Least privilege: only the read/inference AI endpoints are proxied; anything
- * else 404s, so this is not a general gateway tunnel.
+ * Least privilege: only the read/inference AI endpoints are proxied (the ALLOWED
+ * allow-list); anything else 404s, so this is not a general gateway tunnel. The RAG
+ * retrieval switch (`X-Retrieval`/`X-Retrieval-Store`) is the ONE client-header
+ * passthrough (allow-listed in `ai-proxy`).
  */
-import { type NextRequest, NextResponse } from 'next/server'
+import { type NextRequest } from 'next/server'
 
-import { resolveUser, issueUserToken, type SessionUser } from '~/lib/server/identity'
+import { forwardWithUserBearer } from '~/lib/server/bearer-proxy'
+import { retrievalHeaders } from '~/lib/server/ai-proxy'
 
 export const runtime = 'nodejs'
 
@@ -25,90 +30,115 @@ const AI_GATEWAY_URL = trim(process.env.AI_GATEWAY_URL ?? 'https://api.hanzo.ai'
 /** The exact `/v1/<...>` endpoints the console is allowed to reach. */
 const ALLOWED = new Set([
   'v1/models',
+  'v1/pricing/models', // the rich model+provider catalog (context, pricing, specs, tier) for Models/Providers pages
+  'v1/plans', // the subscription tiers + entitlements (rpm/tpm/quota) for the catalog plan badges
   'v1/chat',
   'v1/chat/completions',
   'v1/embeddings',
   'v1/rerank',
+  'v1/audio/speech', // text-to-speech (JSON in → audio bytes out) for the Playground Audio tab
+  'v1/images/generations', // text-to-image (JSON in → image url/b64 out) for the Playground Image tab
+  'v1/videos/generations', // text-to-video CREATE — async: JSON in → a queued job object out (Sora-style)
+  'v1/ai/connections', // AI Login Manager (ai#79/#80): GET list + POST link a BYO provider key (KMS-sealed server-side)
+  'v1/training/clients', // Interactive Training: GET list clients + POST create a LoRA training client (engine plane)
+  'v1/get-router-policy', // Router: the caller's org policy (org-admin gated upstream, self-scoped)
+  'v1/update-router-policy', // Router: upsert the caller's OWN org policy (org-admin gated upstream)
+  'v1/router/stats', // Router: the caller org's routing observability aggregate (RequirePrincipal upstream, self-scoped)
+  'v1/get-training-contribution', // Router: the caller org's training opt-in flag (org-admin gated upstream)
+  'v1/update-training-contribution', // Router: set the caller org's training opt-in flag (org-admin gated upstream)
 ])
 
-// ── Short-lived user-token cache ─────────────────────────────────────────────
-// issue-user-token is an IAM round-trip; cache the JWT per user until ~60s before
-// it expires so a chat session reuses one token instead of issuing per turn.
-type CachedToken = { token: string; expMs: number }
-const tokenCache = new Map<string, CachedToken>()
-const SKEW_MS = 60_000
-const FALLBACK_TTL_MS = 5 * 60_000
+/**
+ * Async video poll/download sub-paths: GET `/v1/videos/{id}` and
+ * `/v1/videos/{id}/content`. Video generation is async (create returns a job id
+ * immediately; the client polls the job and then downloads the finished MP4), so
+ * the Playground must reach these two dynamic paths in addition to the exact
+ * CREATE above. The job id is an opaque `video_<uuid>`; the charset is kept
+ * conservative and the pattern is anchored to `v1/videos/`, so this stays a
+ * narrow allow-list (the create POST is still only the exact
+ * `v1/videos/generations`), never a general gateway tunnel. Method is enforced
+ * by the backend (these are GET-only there).
+ */
+const VIDEO_JOB_PATH = /^v1\/videos\/[A-Za-z0-9._-]+(?:\/content)?$/
 
-async function tokenFor(user: SessionUser): Promise<string> {
-  const hit = tokenCache.get(user.id)
-  if (hit && hit.expMs > Date.now()) return hit.token
-  const { accessToken, expiresIn } = await issueUserToken(user)
-  const ttl = expiresIn > 0 ? expiresIn * 1000 : FALLBACK_TTL_MS
-  tokenCache.set(user.id, { token: accessToken, expMs: Date.now() + ttl - SKEW_MS })
-  return accessToken
-}
+/**
+ * Per-provider AI-connection sub-path: `/v1/ai/connections/<provider>` — the
+ * disconnect (the AI router maps POST here to the delete). Anchored to the
+ * connections head with a conservative provider charset, so it stays a narrow
+ * allow-list, never a general tunnel.
+ */
+const AI_CONNECTION_PATH = /^v1\/ai\/connections\/[A-Za-z0-9_-]+$/
 
-async function forward(req: NextRequest, path: string[]): Promise<NextResponse> {
-  const rel = path.join('/')
-  if (!ALLOWED.has(rel)) {
-    return NextResponse.json({ error: { message: 'Not found', type: 'not_found' } }, { status: 404 })
-  }
+/**
+ * Provider-login OAuth start (ai#85): `/v1/ai/connections/<provider>/authorize`.
+ * GET returns the provider consent URL (`?format=json` → `{ authorizeUrl }`) that
+ * the console redirects the browser to; the OAuth callback is handled server-side
+ * by the backend (KMS-sealed), never through this proxy. Anchored to the
+ * connections head with a conservative provider charset — a narrow allow-list, not
+ * a general tunnel.
+ */
+const AI_CONNECTION_AUTHORIZE_PATH = /^v1\/ai\/connections\/[A-Za-z0-9_-]+\/authorize$/
 
-  const user = await resolveUser(req)
-  if (!user) {
-    return NextResponse.json(
-      { error: { message: 'Sign in to use AI.', type: 'auth_error', code: 'unauthenticated' } },
-      { status: 401 },
-    )
-  }
+/**
+ * Import a connected account's usage: `/v1/ai/connections/<provider>/usage`. GET only —
+ * the org's key is unsealed SERVER-SIDE and the provider's usage/cost API is called there;
+ * the browser only reads the normalized ProviderUsage. Anchored to the connections head
+ * with a conservative provider charset — a narrow allow-list, not a general tunnel.
+ */
+const AI_CONNECTION_USAGE_PATH = /^v1\/ai\/connections\/[A-Za-z0-9_-]+\/usage$/
 
-  let token: string
-  try {
-    token = await tokenFor(user)
-  } catch (e) {
-    return NextResponse.json(
-      { error: { message: `Could not authorize the request: ${e instanceof Error ? e.message : String(e)}`, type: 'auth_error' } },
-      { status: 502 },
-    )
-  }
+/**
+ * Interactive-training per-client sub-path: `/v1/training/clients/<id>` and its four
+ * drive actions — `/forward_backward`, `/optim_step`, `/sample`, `/save_weights`. GET
+ * reads a client, DELETE drops it, POST drives the actions. Anchored to the clients
+ * head with a conservative id charset (opaque `client_<...>`) and an exact action set,
+ * so it stays a narrow allow-list, never a general tunnel. The bare `v1/training/clients`
+ * (list/create) is the exact entry above.
+ */
+const TRAINING_CLIENT_PATH = /^v1\/training\/clients\/[A-Za-z0-9._-]+(?:\/(?:forward_backward|optim_step|sample|save_weights))?$/
 
-  const url = `${AI_GATEWAY_URL}/${rel}${req.nextUrl.search}`
-  const init: RequestInit = {
-    method: req.method,
-    headers: {
-      Authorization: `Bearer ${token}`,
-      'Content-Type': 'application/json',
-      Accept: 'application/json',
-      // The gateway derives org/user from the JWT; pass the resolved org too so a
-      // pooled-org backend scopes correctly either way (it strips client headers).
-      'X-Org-Id': user.owner,
-    },
-    cache: 'no-store',
-  }
-  if (req.method !== 'GET' && req.method !== 'HEAD') {
-    init.body = await req.text()
-  }
-
-  try {
-    const res = await fetch(url, init)
-    const text = await res.text()
-    return new NextResponse(text, {
-      status: res.status,
-      headers: { 'Content-Type': res.headers.get('content-type') ?? 'application/json' },
-    })
-  } catch (e) {
-    return NextResponse.json(
-      { error: { message: `AI gateway unreachable: ${e instanceof Error ? e.message : String(e)}`, type: 'upstream_error' } },
-      { status: 502 },
-    )
-  }
+/** Whether a resolved `/v1/<...>` path is reachable through this proxy. */
+function isAllowedAiPath(p: string): boolean {
+  return (
+    ALLOWED.has(p) ||
+    VIDEO_JOB_PATH.test(p) ||
+    AI_CONNECTION_PATH.test(p) ||
+    AI_CONNECTION_AUTHORIZE_PATH.test(p) ||
+    AI_CONNECTION_USAGE_PATH.test(p) ||
+    TRAINING_CLIENT_PATH.test(p)
+  )
 }
 
 type Ctx = { params: Promise<{ path: string[] }> }
 
+function handle(req: NextRequest, ctx: Ctx) {
+  return (async () => {
+    // The client builds a clean `/v1/<aihead>` and `next.config.mjs` dispatches it here
+    // WITHOUT a nested version (destination `/ai/<aihead>`), so the catch-all captures the
+    // sub-path after `/ai/`. Re-root the upstream at `v1/` — the exact path `isAllowedAiPath`
+    // and the gateway see (`v1/chat/completions`, `v1/images/generations`, `v1/ai/connections`).
+    const path = `v1/${(await ctx.params).path.join('/')}`
+    return forwardWithUserBearer(req, {
+      target: AI_GATEWAY_URL,
+      path,
+      allow: isAllowedAiPath,
+      // Forward the RAG retrieval switch when present; the store's org owner is still
+      // resolved server-side from the session (the bearer), never the browser.
+      extraHeaders: retrievalHeaders((h) => req.headers.get(h)),
+      errorShape: 'openai',
+      unauthorizedMessage: 'Sign in to use AI.',
+    })
+  })()
+}
+
 export async function GET(req: NextRequest, ctx: Ctx) {
-  return forward(req, (await ctx.params).path)
+  return handle(req, ctx)
 }
 export async function POST(req: NextRequest, ctx: Ctx) {
-  return forward(req, (await ctx.params).path)
+  return handle(req, ctx)
+}
+// DELETE drops an interactive-training client (`/v1/training/clients/<id>`); the
+// same-origin CSRF guard in the bearer proxy gates it like every mutating verb.
+export async function DELETE(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
 }

app/auth/callback/page.tsx

@@ -1,9 +1,13 @@
 'use client'
 
 /**
- * IAM OAuth callback. IAM redirects here with `?code&state`; we exchange them
- * for a backend session (`/v1/signin`) and land on the dashboard. On failure we
- * surface the error and offer a retry.
+ * IAM OAuth callback. IAM redirects here with `?code&state`; we exchange them for a
+ * backend session and land on the dashboard. On an ADMIN host the code was minted for
+ * the PUBLIC `admin-console` client via PKCE, so we hand `completeSignIn` the verifier
+ * `startAdminSignin` stashed for this browser — it then redeems the code through the
+ * console's OWN BFF (`/auth/signin`, no secret). Tenant hosts carry no verifier and keep
+ * the cloud-backend `/v1/iam/signin` exchange. On failure we surface the error and offer
+ * a retry.
  */
 import { Suspense, useEffect, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
@@ -12,9 +16,11 @@ import { Button, Text, YStack } from '@hanzo/gui'
 import { ApiError } from '~/lib/api'
 import { Loader } from '~/components/ui/Loader'
 import { useSession } from '~/lib/auth/session'
+import { takeReturnTo } from '~/lib/auth/iam'
+import { takeAdminPkceVerifier } from '~/lib/auth/iam-login'
 
 function Callback() {
-  const params = useSearchParams()
+  const params = useSearchParams() ?? new URLSearchParams()
   const router = useRouter()
   const { completeSignIn } = useSession()
   const [error, setError] = useState<string | null>(null)
@@ -26,8 +32,11 @@ function Callback() {
       setError('Missing authorization code.')
       return
     }
-    completeSignIn(code, state)
-      .then(() => router.replace('/'))
+    // The verifier is present ONLY after an admin-host silent SSO (startAdminSignin);
+    // undefined on a tenant host, which then keeps the cloud-backend exchange.
+    completeSignIn(code, state, takeAdminPkceVerifier())
+      // Land the user back where a mid-task expiry interrupted them (default home).
+      .then(() => router.replace(takeReturnTo()))
       .catch((e: unknown) => setError(e instanceof ApiError ? e.message : 'Sign-in failed.'))
   }, [params, completeSignIn, router])
 

app/auth/refresh/route.ts

@@ -0,0 +1,61 @@
+/**
+ * /auth/refresh — silently renew the console session (server-side, BFF).
+ *
+ * The browser calls this with just its httpOnly cookies (no token in the body, none
+ * in the URL). The route reassembles + reads the sealed refresh token, calls IAM with
+ * `grant_type=refresh_token`, and re-seals the ROTATED token set (IAM issues a new
+ * one-time-use refresh token every refresh — we always persist the NEW one). It
+ * returns only the new lifetime, never a token.
+ *
+ * Called two ways, both single-flight on the client (`lib/auth/refresh`): proactively
+ * on a timer at ~80% of the access lifetime, and reactively on a 401 from any cloud/BFF
+ * call. On failure (the refresh token is truly expired/revoked, or a replay of a
+ * rotated one) it 401s WITHOUT clearing the cookies (multi-tab rotating-token race
+ * safety — a lost-race 401 must not nuke another tab's freshly-rotated cookie); the
+ * client then re-reads the session (seeing a winner's fresh cookie if any) or falls
+ * through to graceful re-auth. Only explicit sign-out clears the cookies.
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { applyCookies, durableSessionClientId, readRefreshToken, refreshGrant, sealSession, setCookies, SessionError } from '~/lib/server/session'
+import { csrfRefusal } from '~/lib/server/bearer-proxy'
+
+export const runtime = 'nodejs'
+
+/** 401 WITHOUT clearing the cookies (see the multi-tab note above). */
+const fail = () => NextResponse.json({ error: 'refresh failed' }, { status: 401 })
+
+export async function POST(req: NextRequest): Promise<NextResponse> {
+  // CSRF: uniform same-origin gate on every mutating BFF route (the hz_rt cookie is
+  // already SameSite=lax + Path=/auth, so this is belt-and-suspenders).
+  const csrf = csrfRefusal(req)
+  if (csrf) return csrf
+
+  const rt = readRefreshToken(req)
+  if (!rt) return fail()
+
+  // Host-aware rotation: an admin host's session was minted by the PUBLIC admin-console
+  // client, so it must refresh with that same client (no secret); every other host
+  // refreshes the confidential hanzo-console session.
+  const publicClientId = durableSessionClientId(req.headers.get('x-forwarded-host') ?? req.headers.get('host'))
+
+  let tokens
+  try {
+    tokens = await refreshGrant(rt, publicClientId ?? undefined)
+  } catch (e) {
+    // A 502 (endpoint unreachable) is transient — surface it distinctly so the client
+    // can retry, and never touch the cookies.
+    if (e instanceof SessionError && e.status === 502) {
+      return NextResponse.json({ error: 'refresh unavailable' }, { status: 502 })
+    }
+    return fail()
+  }
+  // A rotated set with no new refresh token would strand us next cycle — require it
+  // (fail-closed: never persist a session we cannot refresh again).
+  if (!tokens.refreshToken) return fail()
+
+  const sealed = sealSession(tokens)
+  if (!sealed) return fail()
+  const res = NextResponse.json({ expiresIn: Math.floor(sealed.expiresInMs / 1000) })
+  return applyCookies(res, setCookies(sealed.identity, sealed.refresh))
+}

app/auth/session/route.ts

@@ -0,0 +1,116 @@
+/**
+ * /auth/session — the console's OWN durable, refreshable OAuth session (BFF).
+ *
+ *   POST   establish the console session for the SIGNED-IN user (first-party
+ *          confidential-client password grant WITH offline_access → access +
+ *          rotating refresh token, sealed into the httpOnly cookies).
+ *   GET    the current account resolved from that session (what the AuthGate reads
+ *          FIRST — durable + silently refreshed, so it survives the casibase
+ *          session's own lifetime and never bounces the user mid-task).
+ *   DELETE sign out — best-effort revoke the refresh token + clear the cookies.
+ *
+ * SECURITY. POST is GATED: it mints a console session ONLY for a caller who is
+ * ALREADY authenticated (a valid casibase/console session — the full login incl. any
+ * MFA), AND only when the password grant resolves to the SAME principal — so it can
+ * never be driven standalone with a stolen password, and never bypasses MFA (an MFA
+ * account never reaches this call). Tokens live only inside the sealed httpOnly
+ * cookies — never returned to the browser, never logged, never in a URL.
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { csrfRefusal } from '~/lib/server/bearer-proxy'
+import { resolveUser } from '~/lib/server/identity'
+import {
+  accountOf,
+  applyCookies,
+  clearCookies,
+  consoleSession,
+  passwordGrant,
+  readRefreshToken,
+  revokeRefreshToken,
+  sameSubject,
+  sealSession,
+  sessionConfigured,
+  setCookies,
+  SessionError,
+} from '~/lib/server/session'
+
+export const runtime = 'nodejs'
+
+/** GET — the account + remaining access lifetime from the live console session, or
+ *  401 when there is none (the client then falls back to the casibase session). */
+export async function GET(req: NextRequest): Promise<NextResponse> {
+  const sess = consoleSession(req)
+  if (!sess || !sess.claims.name) {
+    return NextResponse.json({ error: 'no session' }, { status: 401 })
+  }
+  return NextResponse.json({ account: accountOf(sess.claims), expiresIn: sess.expiresInSec })
+}
+
+/** POST { username, password } — establish the console session for the signed-in user. */
+export async function POST(req: NextRequest): Promise<NextResponse> {
+  // CSRF: refuse a cross-origin login (login-CSRF fixes the victim into an attacker's
+  // session) before touching credentials.
+  const csrf = csrfRefusal(req)
+  if (csrf) return csrf
+
+  if (!sessionConfigured()) {
+    // No confidential client wired: the console still runs on the casibase session;
+    // report "not configured" so the client silently skips the console session.
+    return NextResponse.json({ error: 'session not configured' }, { status: 501 })
+  }
+
+  let body: { username?: unknown; password?: unknown }
+  try {
+    body = (await req.json()) as typeof body
+  } catch {
+    return NextResponse.json({ error: 'bad request' }, { status: 400 })
+  }
+  const username = typeof body.username === 'string' ? body.username.trim() : ''
+  const password = typeof body.password === 'string' ? body.password : ''
+  if (!username || !password) {
+    return NextResponse.json({ error: 'missing credentials' }, { status: 400 })
+  }
+
+  // GATE: the caller must already be authenticated (they just completed the casibase
+  // login incl. any MFA). This binds the console session to a real, MFA-cleared
+  // session and blocks standalone password abuse.
+  const authed = await resolveUser(req)
+  if (!authed) {
+    return NextResponse.json({ error: 'not authenticated' }, { status: 401 })
+  }
+
+  let tokens
+  try {
+    tokens = await passwordGrant(username, password)
+  } catch (e) {
+    const status = e instanceof SessionError ? e.status : 502
+    return NextResponse.json({ error: 'grant failed' }, { status })
+  }
+
+  const sealed = sealSession(tokens)
+  // The grant MUST resolve to the same principal as the established session — the
+  // console session is for the already-authenticated user, never a third party.
+  const grantId =
+    sealed && sealed.claims.owner && sealed.claims.name ? `${sealed.claims.owner}/${sealed.claims.name}` : ''
+  if (!sealed || !grantId || !sameSubject(grantId, authed.id)) {
+    return NextResponse.json({ error: 'identity mismatch' }, { status: 401 })
+  }
+
+  const res = NextResponse.json({
+    account: accountOf(sealed.claims),
+    expiresIn: Math.floor(sealed.expiresInMs / 1000),
+  })
+  return applyCookies(res, setCookies(sealed.identity, sealed.refresh))
+}
+
+/** DELETE — sign out: best-effort revoke the refresh token, then clear the cookies. */
+export async function DELETE(req: NextRequest): Promise<NextResponse> {
+  // CSRF: refuse a cross-origin forced sign-out.
+  const csrf = csrfRefusal(req)
+  if (csrf) return csrf
+
+  const rt = readRefreshToken(req)
+  if (rt) await revokeRefreshToken(rt)
+  return applyCookies(NextResponse.json({ ok: true }), clearCookies())
+}

app/auth/signin/route.ts

@@ -0,0 +1,90 @@
+/**
+ * /auth/signin — the console's OWN OAuth code exchange for ADMIN hosts (BFF).
+ *
+ * On admin.<brand> the credential login mints the code for the PUBLIC `admin-console`
+ * client (the reserved `admin` org). The cloud backend's `/v1/iam/signin` redeems with
+ * its CONFIDENTIAL `hanzo-cloud` client, so IAM rejects it ("the token is for wrong
+ * application (client_id)"). This route redeems the code HERE as admin-console via
+ * authorization_code + PKCE (RFC 7636 — the code_verifier authenticates the exchange,
+ * NO client secret to provision), then seals the durable hz_session the AuthGate + the
+ * admin gate read. Tenant hosts never call this — they keep the cloud-backend exchange.
+ *
+ * SECURITY. The code is single-use and IAM-minted only after a full credential (incl.
+ * any MFA) check; PKCE binds this redemption to the browser that authorized it. Tokens
+ * live ONLY inside the sealed httpOnly cookies — never returned to the browser, never
+ * logged, never in a URL.
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { isAdminHost } from '~/config'
+import { csrfRefusal } from '~/lib/server/bearer-proxy'
+import {
+  accountOf,
+  applyCookies,
+  durableSessionClientId,
+  pkceCodeGrant,
+  sealSession,
+  sessionConfigured,
+  setCookies,
+  SessionError,
+} from '~/lib/server/session'
+
+export const runtime = 'nodejs'
+
+/** The callback the admin credential login authorized against (mirrors iam.CALLBACK_PATH;
+ *  inlined so this server route pulls in no browser-only IAM SDK). */
+const CALLBACK_PATH = '/auth/callback'
+
+export async function POST(req: NextRequest): Promise<NextResponse> {
+  // CSRF: refuse a cross-origin login (login-CSRF fixes a victim into an attacker's
+  // session) before touching the code.
+  const csrf = csrfRefusal(req)
+  if (csrf) return csrf
+
+  const host = req.headers.get('x-forwarded-host') ?? req.headers.get('host') ?? ''
+  const clientId = durableSessionClientId(host)
+  // This exchange is the admin-console (public-client) redemption ONLY. A tenant host
+  // redeems via the cloud backend with its confidential client — refuse it here.
+  if (!isAdminHost(host) || !clientId) {
+    return NextResponse.json({ error: 'not an admin host' }, { status: 400 })
+  }
+  if (!sessionConfigured()) {
+    // The session seal key rests on the confidential-client secret; without it the
+    // cookie can't be minted stably across replicas — report "not configured" honestly.
+    return NextResponse.json({ error: 'session not configured' }, { status: 501 })
+  }
+
+  let body: { code?: unknown; codeVerifier?: unknown }
+  try {
+    body = (await req.json()) as typeof body
+  } catch {
+    return NextResponse.json({ error: 'bad request' }, { status: 400 })
+  }
+  const code = typeof body.code === 'string' ? body.code : ''
+  const codeVerifier = typeof body.codeVerifier === 'string' ? body.codeVerifier : ''
+  if (!code || !codeVerifier) {
+    return NextResponse.json({ error: 'missing code' }, { status: 400 })
+  }
+
+  let tokens
+  try {
+    tokens = await pkceCodeGrant({
+      clientId,
+      code,
+      codeVerifier,
+      redirectUri: `https://${host.replace(/:\d+$/, '')}${CALLBACK_PATH}`,
+    })
+  } catch (e) {
+    const status = e instanceof SessionError ? e.status : 502
+    return NextResponse.json({ error: 'grant failed' }, { status })
+  }
+
+  const sealed = sealSession(tokens)
+  if (!sealed) return NextResponse.json({ error: 'no identity' }, { status: 401 })
+
+  const res = NextResponse.json({
+    account: accountOf(sealed.claims),
+    expiresIn: Math.floor(sealed.expiresInMs / 1000),
+  })
+  return applyCookies(res, setCookies(sealed.identity, sealed.refresh))
+}

app/auth/signup/route.ts

@@ -0,0 +1,131 @@
+/**
+ * Email self-serve signup (HIP-0111) — create a brand-new account + its own org.
+ *
+ * This is the ONE unauthenticated BFF route (the caller has no account yet). It
+ * acts as the confidential `hanzo-console` client to mint, in one shot:
+ *   1. a personal organization (owner=`admin`, password/locale cloned from the
+ *      brand org so the account hashes with the brand's argon2id policy), and
+ *   2. the user as that org's ADMIN (IAM hashes the password server-side).
+ * The client then signs in with the same credentials and lands as admin — no
+ * separate onboarding step (IAM users always belong to an org, so "create then
+ * onboard" is not possible against casibase; the org is minted here). The new user's
+ * `owner` is their OWN personal org (never the reserved `admin` org), so a public
+ * signup is always a self-service customer org — never a platform SuperAdmin.
+ *
+ * Email uniqueness without a global user-lookup endpoint: the org slug is a
+ * DETERMINISTIC, injective function of the email (`personalOrgFromEmail`), so a
+ * repeat signup with the same email resolves to the same slug and is caught by
+ * `getOrganization` (409); two different emails never false-collide.
+ *
+ * PUBLIC-LAUNCH ABUSE PROTECTIONS (this route mints an account + org from the open
+ * internet, so the open path is guarded, in order):
+ *   - same-origin CSRF gate (a scripted cross-origin signup is refused),
+ *   - Turnstile bot wall (`verifyTurnstile`, enforced when the secret is provisioned),
+ *   - per-IP sliding-window rate limit (`signupLimiter`, default 5/IP/hr),
+ *   - disposable-email block (`isDisposableEmail`).
+ * On success the account is JOINED to the brand waitlist (best-effort) so it holds a
+ * position immediately — product access is then waitlist-gated (see WaitlistGate),
+ * NOT signup. Honest states: 501 unwired, 400 bad input, 403 captcha, 409 exists,
+ * 429 rate-limited, 502 IAM failure.
+ */
+import { createHash } from 'node:crypto'
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { brandFromHost } from '~/config'
+import { BRANDS } from '~/lib/branding/brands'
+import { createOrganization, createUser, getOrganization, mintConfigured } from '~/lib/server/identity'
+import {
+  deriveUsername,
+  displayNameFromEmail,
+  personalOrgFromEmail,
+  validateSignup,
+} from '~/lib/server/onboarding'
+import { isDisposableEmail } from '~/lib/server/disposable'
+import { csrfRefusal } from '~/lib/server/bearer-proxy'
+import { clientIp, signupLimiter } from '~/lib/server/rate-limit'
+import { verifyTurnstile } from '~/lib/server/turnstile'
+import { joinWaitlist } from '~/lib/server/waitlist'
+
+export const runtime = 'nodejs'
+
+export async function POST(req: NextRequest): Promise<NextResponse> {
+  // Same-origin gate: the console's own signup form is same-origin; refuse scripted
+  // cross-origin signups before doing any work.
+  const csrf = csrfRefusal(req)
+  if (csrf) return csrf
+
+  if (!mintConfigured()) {
+    return NextResponse.json(
+      { error: 'Account creation is not configured on this deployment (IAM client unset).' },
+      { status: 501 },
+    )
+  }
+
+  const body = (await req.json().catch(() => ({}))) as {
+    email?: string
+    password?: string
+    turnstileToken?: string
+    ref?: string
+  }
+  const v = validateSignup(body.email ?? '', body.password ?? '')
+  if (!v.ok) return NextResponse.json({ error: v.error }, { status: 400 })
+  if (isDisposableEmail(v.email)) {
+    return NextResponse.json({ error: 'Please use a non-disposable email address.' }, { status: 400 })
+  }
+
+  // Bot wall (no-op until Turnstile is provisioned) BEFORE the per-IP throttle, so a
+  // solved challenge is what a legitimate user spends their attempts on.
+  const ip = clientIp(req.headers)
+  const captcha = await verifyTurnstile((body.turnstileToken ?? '').trim(), ip)
+  if (!captcha.ok) {
+    return NextResponse.json({ error: 'Captcha verification failed. Please try again.' }, { status: 403 })
+  }
+
+  // Per-IP rate limit — the open-internet spam/cost floor.
+  if (!signupLimiter.allow(`signup:${ip}`)) {
+    return NextResponse.json(
+      { error: 'Too many sign-up attempts. Please try again later.' },
+      { status: 429, headers: { 'Retry-After': '3600' } },
+    )
+  }
+
+  const brand = BRANDS[brandFromHost(req.headers.get('host'))]
+  const brandOrg = brand.id // hanzo/lux/zoo/pars — cloned for password/locale policy
+  const signupApplication = `${brand.id}-cloud` // hanzo-cloud, lux-cloud, …
+
+  const digest = createHash('sha256').update(v.email).digest('hex')
+  const orgSlug = personalOrgFromEmail(v.email, digest)
+
+  if (await getOrganization(orgSlug)) {
+    return NextResponse.json(
+      { error: 'An account with this email already exists. Sign in instead.' },
+      { status: 409 },
+    )
+  }
+
+  const displayName = displayNameFromEmail(v.email)
+  const username = deriveUsername(v.email)
+  try {
+    await createOrganization({ name: orgSlug, displayName, personal: true, sourceOwner: brandOrg })
+    await createUser({
+      org: orgSlug,
+      username,
+      email: v.email,
+      password: v.password,
+      displayName,
+      signupApplication,
+    })
+  } catch (e) {
+    return NextResponse.json(
+      { error: `Could not create your account: ${e instanceof Error ? e.message : String(e)}` },
+      { status: 502 },
+    )
+  }
+
+  // Join the brand waitlist so the account holds a POSITION immediately — product
+  // access is waitlist-gated (WaitlistGate), and a `?ref=` from the landing link
+  // credits the referrer's position. Best-effort, service-authed; never blocks signup.
+  await joinWaitlist(v.email, { host: req.headers.get('host'), referrerCode: (body.ref ?? '').trim() })
+
+  return NextResponse.json({ ok: true, org: orgSlug })
+}

app/auth/waitlist/route.ts

@@ -0,0 +1,31 @@
+/**
+ * GET /auth/waitlist — the signed-in user's WAITLIST ACCESS + position (BFF).
+ *
+ * THE shared product-access check. The console shell (WaitlistGate) reads this to
+ * decide whether to render the product or the waitlist status page; hanzo.chat and
+ * hanzo.app gate on the SAME underlying `/v1/waitlist/status` for the same user, so
+ * a user's access + position are identical across every surface.
+ *
+ * Resolves the caller's email from their established session (never trusts a
+ * client-supplied email), then asks the waitlist plugin. FAIL-OPEN: when the waitlist
+ * is unconfigured or unreachable, `waitlistAccess` grants access — the gate is
+ * additive and never locks a signed-in user out of a paid product on a blip.
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { resolveUser } from '~/lib/server/identity'
+import { waitlistAccess } from '~/lib/server/waitlist'
+
+export const runtime = 'nodejs'
+
+export async function GET(req: NextRequest): Promise<NextResponse> {
+  const user = await resolveUser(req)
+  if (!user) return NextResponse.json({ error: 'not authenticated' }, { status: 401 })
+
+  // No email on the identity → cannot key a waitlist entry; fail OPEN (don't strand
+  // a valid session behind a gate it can never satisfy).
+  if (!user.email) return NextResponse.json({ hasAccess: true, status: null })
+
+  const { hasAccess, status } = await waitlistAccess(user.email, req.headers.get('host'))
+  return NextResponse.json({ hasAccess, status })
+}

app/billing/topup/wallet/route.ts

@@ -1,167 +0,0 @@
-/**
- * Wallet HUSD top-up — verify on-chain, then record to commerce (server route).
- *
- * Why this lives in console2 and not billing: billing.hanzo.ai is a Next static
- * export (`output: 'export'`) and cannot host a runtime POST handler, and the
- * commerce backend is owned elsewhere. So the verify-and-record seam lives here
- * as a same-origin server route — the same pattern as `app/paas/[...path]`: the
- * browser calls the console's OWN origin, the server does the privileged work,
- * and config comes from server-only env (sourced via KMS, never `NEXT_PUBLIC`).
- *
- * Flow: the client sends an HUSD ERC-20 transfer to the treasury and posts the
- * tx hash here. We read the receipt from the Hanzo EVM, confirm it is a mined,
- * successful HUSD `Transfer(from → treasury, value)`, derive USD cents from the
- * (18-decimal, USD-pegged) value, then record it to commerce as a `husd` crypto
- * payment and return the credited amount + the new balance. The on-chain amount
- * — never a client-supplied number — is what gets credited.
- *
- * Honest failure: if HUSD/treasury are unconfigured (greenfield — HUSD not yet
- * deployed) we return 501 so the UI shows a truthful "coming" state; if the tx
- * is missing/failed/not an HUSD-to-treasury transfer we return 400; if the chain
- * or commerce is unreachable we return 502. Never a fabricated credit.
- */
-import { type NextRequest, NextResponse } from 'next/server'
-import { ethers } from 'ethers'
-
-export const runtime = 'nodejs'
-
-const RPC_URL = (process.env.HANZO_RPC_URL ?? 'https://rpc.hanzo.network').replace(/\/+$/, '')
-const HUSD_ADDRESS = (process.env.HANZO_HUSD_ADDRESS ?? '').trim()
-const TREASURY = (process.env.HANZO_HUSD_TREASURY ?? '').trim()
-const COMMERCE_URL = (process.env.COMMERCE_URL ?? 'https://api.hanzo.ai').replace(/\/+$/, '')
-const CHAIN_ID = Number(process.env.HANZO_CHAIN_ID ?? '36900')
-
-const ERC20_TRANSFER_ABI = ['event Transfer(address indexed from, address indexed to, uint256 value)']
-const isAddr = (a: string): boolean => /^0x[0-9a-fA-F]{40}$/.test(a)
-
-/** Forward the caller's identity (session cookie / bearer) to commerce. */
-function authHeaders(req: NextRequest): Record<string, string> {
-  const h: Record<string, string> = { 'Content-Type': 'application/json', Accept: 'application/json' }
-  const cookie = req.headers.get('cookie')
-  if (cookie) h.Cookie = cookie
-  const auth = req.headers.get('authorization')
-  if (auth) h.Authorization = auth
-  return h
-}
-
-export async function POST(req: NextRequest): Promise<NextResponse> {
-  // Greenfield gate: no HUSD contract / treasury ⇒ honest "not configured".
-  if (!isAddr(HUSD_ADDRESS) || !isAddr(TREASURY)) {
-    return NextResponse.json(
-      { error: 'HUSD top-up is not configured yet (HUSD is not deployed on Hanzo Mainnet).' },
-      { status: 501 },
-    )
-  }
-
-  let body: { txHash?: string; fromAddress?: string; userId?: string }
-  try {
-    body = await req.json()
-  } catch {
-    return NextResponse.json({ error: 'Invalid JSON body.' }, { status: 400 })
-  }
-
-  const txHash = (body.txHash ?? '').trim()
-  const fromAddress = (body.fromAddress ?? '').trim()
-  if (!/^0x[0-9a-fA-F]{64}$/.test(txHash)) {
-    return NextResponse.json({ error: 'A valid transaction hash is required.' }, { status: 400 })
-  }
-
-  // ── 1. Verify the HUSD transfer on-chain ────────────────────────────────────
-  let creditedCents: number
-  let verifiedFrom: string
-  try {
-    const provider = new ethers.JsonRpcProvider(RPC_URL, CHAIN_ID)
-    const receipt = await provider.getTransactionReceipt(txHash)
-    if (!receipt) {
-      return NextResponse.json({ error: 'Transaction not found or not yet mined.' }, { status: 400 })
-    }
-    if (receipt.status !== 1) {
-      return NextResponse.json({ error: 'Transaction failed on-chain.' }, { status: 400 })
-    }
-
-    const iface = new ethers.Interface(ERC20_TRANSFER_ABI)
-    const husd = HUSD_ADDRESS.toLowerCase()
-    const treasury = TREASURY.toLowerCase()
-    let value: bigint | null = null
-    for (const log of receipt.logs) {
-      if (log.address.toLowerCase() !== husd) continue
-      let parsed: ethers.LogDescription | null = null
-      try {
-        parsed = iface.parseLog({ topics: [...log.topics], data: log.data })
-      } catch {
-        continue
-      }
-      if (parsed?.name !== 'Transfer') continue
-      if (String(parsed.args.to).toLowerCase() !== treasury) continue
-      value = parsed.args.value as bigint
-      verifiedFrom = ethers.getAddress(String(parsed.args.from))
-      break
-    }
-    if (value === null) {
-      return NextResponse.json(
-        { error: 'No HUSD transfer to the treasury was found in this transaction.' },
-        { status: 400 },
-      )
-    }
-    if (fromAddress && isAddr(fromAddress) && verifiedFrom!.toLowerCase() !== fromAddress.toLowerCase()) {
-      return NextResponse.json({ error: 'Transfer sender does not match the connected wallet.' }, { status: 400 })
-    }
-    // HUSD is an 18-decimal, USD-pegged stablecoin → 1e16 base units = 1 cent.
-    creditedCents = Number(value / 10n ** 16n)
-    if (creditedCents <= 0) {
-      return NextResponse.json({ error: 'Transferred amount is below the minimum (1 cent).' }, { status: 400 })
-    }
-  } catch (e) {
-    return NextResponse.json(
-      { error: `Could not verify the transaction on Hanzo Mainnet: ${e instanceof Error ? e.message : String(e)}` },
-      { status: 502 },
-    )
-  }
-
-  // ── 2. Record to commerce as an HUSD crypto payment ─────────────────────────
-  try {
-    const recordRes = await fetch(`${COMMERCE_URL}/v1/billing/payment`, {
-      method: 'POST',
-      headers: authHeaders(req),
-      cache: 'no-store',
-      body: JSON.stringify({
-        method: 'crypto',
-        network: 'hanzo',
-        chainId: CHAIN_ID,
-        currency: 'husd',
-        amount: creditedCents,
-        txHash,
-        fromAddress: verifiedFrom!,
-        toAddress: TREASURY,
-        userId: body.userId,
-      }),
-    })
-    if (!recordRes.ok) {
-      const text = await recordRes.text().catch(() => '')
-      return NextResponse.json(
-        { error: `Commerce rejected the payment (HTTP ${recordRes.status}): ${text}`.trim() },
-        { status: 502 },
-      )
-    }
-    const payment = (await recordRes.json().catch(() => ({}))) as { status?: string }
-
-    // New balance (USD ledger) — best-effort; the credit already landed.
-    let balance = 0
-    try {
-      const balRes = await fetch(
-        `${COMMERCE_URL}/v1/billing/balance?user=${encodeURIComponent(body.userId ?? '')}&currency=usd`,
-        { headers: authHeaders(req), cache: 'no-store' },
-      )
-      if (balRes.ok) balance = ((await balRes.json()) as { balance?: number }).balance ?? 0
-    } catch {
-      /* balance is informational; the credit is recorded */
-    }
-
-    return NextResponse.json({ creditedCents, balance, txHash, status: payment.status ?? 'recorded' })
-  } catch (e) {
-    return NextResponse.json(
-      { error: `Could not reach commerce to record the payment: ${e instanceof Error ? e.message : String(e)}` },
-      { status: 502 },
-    )
-  }
-}

app/console/accept/route.ts

@@ -0,0 +1,90 @@
+/**
+ * /console/accept — the invitee's side of the team-invite flow (UNAUTHENTICATED).
+ *
+ *   GET  ?t=<token>  → validate the sealed invite; report whether the member is
+ *                      still PENDING (no password) or already ACTIVATED, plus the
+ *                      org + email to show. Never leaks anything a token-holder
+ *                      shouldn't already know (the admin put them in the org).
+ *   POST { t, password, displayName? } → set the pending member's INITIAL password
+ *                      (IAM hashes it — never plaintext) and mark them activated.
+ *
+ * The sealed token IS the authorization (it names exactly one `org/name`), so this
+ * needs no session — the invitee has none yet. It refuses once the member already
+ * has a password, so a link can never reset an active member's credential.
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { brandFromHost } from '~/config'
+import { BRANDS } from '~/lib/branding/brands'
+import { csrfRefusal } from '~/lib/server/bearer-proxy'
+import { getMember, memberHasPassword, activateMember, mintConfigured } from '~/lib/server/identity'
+import { readInvite, inviteUserId } from '~/lib/server/invite'
+import { MIN_PASSWORD } from '~/lib/server/onboarding'
+
+export const runtime = 'nodejs'
+
+const bad = (error: string, status: number) => NextResponse.json({ error }, { status })
+
+export async function GET(req: NextRequest): Promise<NextResponse> {
+  const inv = readInvite(req.nextUrl.searchParams.get('t'))
+  if (!inv) return bad('This invitation link is invalid or has expired.', 400)
+
+  const member = await getMember(inviteUserId(inv))
+  if (!member || member.owner !== inv.org) {
+    return bad('This invitation is no longer valid — the member was removed.', 410)
+  }
+  return NextResponse.json({
+    ok: true,
+    org: inv.org,
+    email: member.email || inv.email,
+    displayName: member.displayName || member.name,
+    role: member.isAdmin ? 'admin' : 'member',
+    accepted: memberHasPassword(member),
+  })
+}
+
+export async function POST(req: NextRequest): Promise<NextResponse> {
+  const csrf = csrfRefusal(req)
+  if (csrf) return csrf
+
+  if (!mintConfigured()) {
+    return bad('Invite acceptance is not configured on this deployment.', 501)
+  }
+
+  let body: { t?: unknown; password?: unknown; displayName?: unknown }
+  try {
+    body = (await req.json()) as typeof body
+  } catch {
+    return bad('bad request', 400)
+  }
+  const inv = readInvite(typeof body.t === 'string' ? body.t : null)
+  if (!inv) return bad('This invitation link is invalid or has expired.', 400)
+
+  const password = typeof body.password === 'string' ? body.password : ''
+  if (password.length < MIN_PASSWORD) {
+    return bad(`Use a password of at least ${MIN_PASSWORD} characters.`, 400)
+  }
+  if (/\s/.test(password)) return bad('Password cannot contain spaces.', 400)
+  const displayName = typeof body.displayName === 'string' ? body.displayName.trim() : ''
+
+  const id = inviteUserId(inv)
+  const member = await getMember(id)
+  if (!member || member.owner !== inv.org) {
+    return bad('This invitation is no longer valid — the member was removed.', 410)
+  }
+  // Single-use for activation: refuse if the member already has a credential, so a
+  // stale/re-shared link can never reset an active member's password.
+  if (memberHasPassword(member)) {
+    return bad('This invitation was already accepted. Please sign in.', 409)
+  }
+
+  const brand = BRANDS[brandFromHost(req.headers.get('host'))]
+  const signupApplication = `${brand.id}-cloud`
+
+  try {
+    await activateMember(id, { password, displayName: displayName || undefined, signupApplication })
+  } catch (e) {
+    return bad(`Could not activate the account: ${e instanceof Error ? e.message : String(e)}`, 502)
+  }
+  return NextResponse.json({ ok: true, org: inv.org, email: member.email || inv.email })
+}

app/console/invite-link/route.ts

@@ -0,0 +1,69 @@
+/**
+ * POST /console/invite-link — mint a shareable ACCEPT LINK for a pending member.
+ *
+ * The Team module creates the member row via the `/org/iam` proxy (Dave's own
+ * user bearer, Casbin-scoped to his org) — that path is unchanged. This route then
+ * mints the sealed, TTL-bound invite token so the invitee can set a password and
+ * sign in, WITHOUT any email/OTP (delivery is a link hand-off; IAM `send-invitation`
+ * is a documented stub on this deployment).
+ *
+ * Gate: any authenticated ORG ADMIN, pinned to a member of their OWN org (a global
+ * admin may target any org — same policy as the `/org/iam` proxy). The member must
+ * actually EXIST in that org (verified via the confidential client) — so an admin
+ * can never mint an activation link for someone else's tenant or a phantom user.
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { getOrgGate, getMember } from '~/lib/server/identity'
+import { ownerAllowed, orgWriteAllowed } from '~/lib/server/admin-policy'
+import { csrfRefusal } from '~/lib/server/bearer-proxy'
+import { signInvite, acceptLink, type Invite } from '~/lib/server/invite'
+
+export const runtime = 'nodejs'
+
+const bad = (msg: string, status: number) => NextResponse.json({ error: msg }, { status })
+
+/** The public origin the invitee will open — from the ingress-set Host header. */
+function publicOrigin(req: NextRequest): string {
+  const host = req.headers.get('host') ?? req.nextUrl.host
+  const proto = req.headers.get('x-forwarded-proto') ?? (host.startsWith('localhost') ? 'http' : 'https')
+  return `${proto}://${host}`
+}
+
+export async function POST(req: NextRequest): Promise<NextResponse> {
+  const csrf = csrfRefusal(req)
+  if (csrf) return csrf
+
+  const gate = await getOrgGate(req)
+  if (!gate) return bad('forbidden', 403)
+  // Writes (an invite is one) require org admin — a member can view the roster only.
+  if (!orgWriteAllowed({ isSuperAdmin: gate.isSuperAdmin, isAdmin: gate.user.isAdmin })) {
+    return bad('forbidden', 403)
+  }
+
+  let body: { org?: unknown; name?: unknown; email?: unknown }
+  try {
+    body = (await req.json()) as typeof body
+  } catch {
+    return bad('bad request', 400)
+  }
+  const name = typeof body.name === 'string' ? body.name.trim() : ''
+  const email = typeof body.email === 'string' ? body.email.trim() : ''
+  // The org defaults to the caller's own scope; a SuperAdmin may pass another.
+  const reqOrg = typeof body.org === 'string' && body.org.trim() ? body.org.trim() : gate.orgScope
+  if (!name) return bad('missing member name', 400)
+
+  // Pin the org to the caller's scope (a non-SuperAdmin can only ever mint a link
+  // for their OWN org) — the SAME guard as the /org/iam proxy.
+  if (!ownerAllowed(reqOrg, { isSuperAdmin: gate.isSuperAdmin, orgScope: gate.orgScope, orgMetadataOk: false })) {
+    return bad('forbidden', 403)
+  }
+
+  const id = `${reqOrg}/${name}`
+  const member = await getMember(id)
+  if (!member || member.owner !== reqOrg) return bad('member not found', 404)
+
+  const inv: Invite = { org: reqOrg, name, email: email || member.email || '' }
+  const token = signInvite(inv)
+  return NextResponse.json({ ok: true, org: reqOrg, name, email: inv.email, link: acceptLink(publicOrigin(req), token) })
+}

app/console/mfa/[action]/route.ts

@@ -0,0 +1,96 @@
+/**
+ * /console/mfa/<action> — console-native two-factor (TOTP) enrollment BFF.
+ *
+ * WHY console-native: the console delegated 2FA to hanzo.id's account page, but the
+ * custom hanzo.id login worker doesn't establish a Casdoor account session, so a
+ * user who signed in through it lands on an account page that can't manage MFA
+ * (setup returns "Unauthorized operation"). This closes that gap: the user enrolls
+ * 2FA IN the console. We forward each IAM MFA op as the caller's OWN user bearer
+ * (the authz filter authenticates the JWT and Casbin authorizes self-service MFA),
+ * with owner/name PINNED to the resolved session user — so a caller can only ever
+ * manage THEIR OWN 2FA, never another account's.
+ *
+ * Actions (POST): initiate · verify · enable · disable — the standard TOTP flow.
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { resolveUser, adminBearer, iamBaseUrl } from '~/lib/server/identity'
+import { csrfRefusal } from '~/lib/server/bearer-proxy'
+import { fetchWithTimeout } from '~/lib/server/fetch-timeout'
+
+export const runtime = 'nodejs'
+
+const TOTP = 'app' // Casdoor TotpType
+
+/**
+ * IAM endpoint + the params each action sends. owner/name are ALWAYS included and
+ * pinned to the resolved session user for TWO reasons: (1) the handler targets that
+ * user, and (2) the IAM authz filter derives the request OBJECT from `owner`/`name`
+ * (query) and grants self-access when it equals the bearer subject — the SAME rule
+ * that lets `get-users?owner=<me>` through. We send these as the QUERY STRING with an
+ * EMPTY body: the authz filter's object-derivation reads a form body as JSON, so a
+ * form-encoded body yields an empty object (→ no self-match → denied); with the
+ * params in the query and no body it reads owner/name and the self grant applies.
+ */
+const ACTIONS: Record<string, { path: string; params: (u: { owner: string; name: string }, b: Body) => Record<string, string> }> = {
+  initiate: {
+    path: '/v1/iam/mfa/setup/initiate',
+    params: (u) => ({ owner: u.owner, name: u.name, mfaType: TOTP }),
+  },
+  verify: {
+    path: '/v1/iam/mfa/setup/verify',
+    params: (u, b) => ({ owner: u.owner, name: u.name, mfaType: TOTP, passcode: b.passcode ?? '', secret: b.secret ?? '' }),
+  },
+  enable: {
+    path: '/v1/iam/mfa/setup/enable',
+    params: (u, b) => ({ owner: u.owner, name: u.name, mfaType: TOTP, secret: b.secret ?? '', recoveryCodes: b.recoveryCodes ?? '' }),
+  },
+  disable: {
+    path: '/v1/iam/delete-mfa',
+    params: (u) => ({ owner: u.owner, name: u.name }),
+  },
+}
+
+type Body = { passcode?: string; secret?: string; recoveryCodes?: string }
+
+export async function POST(req: NextRequest, ctx: { params: Promise<{ action: string }> }): Promise<NextResponse> {
+  const csrf = csrfRefusal(req)
+  if (csrf) return csrf
+
+  const { action } = await ctx.params
+  const spec = ACTIONS[action]
+  if (!spec) return NextResponse.json({ error: 'unknown action' }, { status: 404 })
+
+  const user = await resolveUser(req)
+  if (!user) return NextResponse.json({ error: 'not authenticated' }, { status: 401 })
+
+  const body = (await req.json().catch(() => ({}))) as Body
+
+  let bearer: string
+  try {
+    bearer = await adminBearer(user)
+  } catch {
+    return NextResponse.json({ status: 'error', msg: 'Could not authorize the request.' }, { status: 502 })
+  }
+
+  // Params ride the QUERY STRING (see ACTIONS doc) with an EMPTY body so the IAM
+  // authz filter derives owner/name for the self-access grant.
+  const qs = new URLSearchParams(spec.params({ owner: user.owner, name: user.name }, body)).toString()
+  try {
+    const res = await fetchWithTimeout(`${iamBaseUrl()}${spec.path}?${qs}`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${bearer}`,
+        Accept: 'application/json',
+      },
+      cache: 'no-store',
+    })
+    const text = await res.text()
+    return new NextResponse(text, {
+      status: res.status,
+      headers: { 'Content-Type': res.headers.get('content-type') ?? 'application/json' },
+    })
+  } catch {
+    return NextResponse.json({ status: 'error', msg: 'Identity service is unavailable.' }, { status: 502 })
+  }
+}

app/docs/page.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+/**
+ * `/docs` → the brand documentation site (docs.hanzo.ai / docs.lux.network / …),
+ * resolved CLIENT-side (task #41, "True 1-binary FE").
+ *
+ * Docs are an EXTERNAL product on their own domain, never an in-app route — so a
+ * typed or bookmarked `<console-host>/docs` must land on the real docs, not the
+ * catch-all not-found. The old app/docs/route.ts issued a server 308; in the
+ * one-binary there is no Next runtime (the static export has no server, and a static
+ * export cannot rewrite), so the redirect is resolved from the per-host brand
+ * (`config.docsUrl`) in the browser — exactly what the sidebar "Docs" link and the
+ * header "?" already open. One way, both topologies (embed + standalone).
+ *
+ * The target is set in an effect (not during render) so there is no SSR/CSR
+ * hydration mismatch on the per-brand host between the build-time default and the
+ * real browser host.
+ */
+import { useEffect, useState } from 'react'
+
+import { config } from '~/config'
+
+export default function DocsRedirect() {
+  const [url, setUrl] = useState('')
+  useEffect(() => {
+    const target = config.docsUrl
+    setUrl(target)
+    window.location.replace(target)
+  }, [])
+  return (
+    <main style={{ padding: 24, fontFamily: 'system-ui, sans-serif' }}>
+      Opening documentation… {url ? <a href={url}>Continue</a> : null}
+    </main>
+  )
+}

app/global-error.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+/**
+ * Top-level recovery boundary (Next App Router `global-error`).
+ *
+ * This REPLACES Next's built-in root fallback — the one that renders the bare,
+ * dead-ended "Application error: a client-side exception has occurred" and leaves
+ * the SPA wedged (no router, so a later in-app nav back to `/` stays dead until a
+ * full reload). It is the OUTERMOST boundary: it catches throws in the root layout
+ * and anything that bubbles past the segment boundaries — including a chunk-load
+ * failure during the very first hydration, which is exactly the "deep-link /
+ * refresh a sub-route → crash" the audit hit (a stale-deploy chunk 404s, falls
+ * through to the app-shell HTML, and the browser throws parsing HTML as JS).
+ *
+ * On a chunk skew it SELF-HEALS: one full reload per window pulls the fresh HTML +
+ * current chunks. The reload is bounded by the SAME sessionStorage key every other
+ * recovery site uses (`CHUNK_RELOAD_AT_KEY`), so a skew that trips several
+ * boundaries at once reloads ONCE, never in a loop. For a genuine (non-chunk)
+ * crash it shows a minimal, self-contained recovery card — it runs with the root
+ * layout torn down, so it owns its own `<html>`/`<body>` and uses inline styles
+ * (no GUI provider is mounted here).
+ */
+import { useEffect } from 'react'
+
+import { isChunkLoadError, shouldReloadForChunk, CHUNK_RELOAD_AT_KEY } from '~/components/errors/boundary-logic'
+
+export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const chunk = isChunkLoadError(error)
+
+  useEffect(() => {
+    console.error('[console] global error:', error)
+    if (!chunk || typeof window === 'undefined') return
+    try {
+      const raw = window.sessionStorage.getItem(CHUNK_RELOAD_AT_KEY)
+      const last = raw ? Number(raw) : null
+      if (shouldReloadForChunk(Date.now(), last)) {
+        window.sessionStorage.setItem(CHUNK_RELOAD_AT_KEY, String(Date.now()))
+        window.location.reload()
+      }
+    } catch {
+      /* sessionStorage blocked (private mode) — fall through to the manual card */
+    }
+  }, [error, chunk])
+
+  return (
+    <html lang="en" style={{ backgroundColor: '#000', colorScheme: 'dark' }}>
+      <body style={{ margin: 0, fontFamily: 'ui-sans-serif, system-ui, -apple-system, sans-serif', color: '#fff', backgroundColor: '#000' }}>
+        <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
+          <div style={{ maxWidth: 440, width: '100%', border: '1px solid #262626', borderRadius: 12, padding: 24, backgroundColor: '#0a0a0a' }}>
+            <h1 style={{ margin: '0 0 8px', fontSize: 18, fontWeight: 700 }}>
+              {chunk ? 'Updating to the latest version' : 'Something went wrong'}
+            </h1>
+            <p style={{ margin: '0 0 20px', fontSize: 14, lineHeight: 1.5, color: '#a3a3a3' }}>
+              {chunk
+                ? 'A newer version of the console just shipped. Reloading to load the latest…'
+                : 'The console hit an unexpected error. Reload to recover, or return home.'}
+            </p>
+            <div style={{ display: 'flex', gap: 8 }}>
+              {!chunk ? (
+                <button type="button" onClick={() => reset()} style={btn(true)}>
+                  Try again
+                </button>
+              ) : null}
+              <button
+                type="button"
+                onClick={() => { if (typeof window !== 'undefined') window.location.reload() }}
+                style={btn(chunk)}
+              >
+                Reload
+              </button>
+              <button
+                type="button"
+                onClick={() => { if (typeof window !== 'undefined') window.location.assign('/') }}
+                style={btn(false)}
+              >
+                Go home
+              </button>
+            </div>
+          </div>
+        </div>
+      </body>
+    </html>
+  )
+}
+
+/** Inline button style — primary (filled) vs chromeless (bordered). */
+function btn(primary: boolean): React.CSSProperties {
+  return {
+    appearance: 'none',
+    cursor: 'pointer',
+    fontSize: 13,
+    fontWeight: 600,
+    padding: '8px 14px',
+    borderRadius: 8,
+    border: primary ? '1px solid #fff' : '1px solid #333',
+    backgroundColor: primary ? '#fff' : 'transparent',
+    color: primary ? '#000' : '#e5e5e5',
+  }
+}

app/globals.css

@@ -1,3 +1,9 @@
+/* Canonical Hanzo faces — Geist Sans (UI/body/headings) + Geist Mono (code/data),
+   loaded from the same CDN package so both faces resolve one way. Geist ships a full
+   real weight range, so headings render a true heavier cut, never a synthesized face. */
+@import url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/style.css');
+@import url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/style.css');
+
 html,
 body,
 #__next {
@@ -6,12 +12,548 @@ body,
 
 body {
   margin: 0;
-  background-color: var(--background, #070b13);
-  color: var(--color, #f2f2f2);
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  background-color: var(--background, #000000);
+  color: var(--color, #ededf1);
+  font-family: 'Geist', system-ui, -apple-system, sans-serif;
+  /* Calm type rendering — crisp, low-glare, comfortable rhythm for a full workday. */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  line-height: 1.5;
+  /* Geist ships a full real weight range, so a requested 500/600/700 resolves to a
+     genuine cut — never a browser-fabricated faux-bold/oblique. This bans synthesis
+     outright as a floor. Inherited by every element; the ONE place the product sets it. */
+  font-synthesis: none;
+}
+
+code,
+pre,
+kbd,
+samp {
+  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+/* Tabular numerals — metrics, prices, contexts and IDs align on a fixed advance
+   width so columns of numbers read cleanly (the dashboard-grade detail). */
+.hz-tnum {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'tnum' 1;
+}
+
+/* Data/numeric face — Geist Mono + tabular figures for metric values, prices, IDs,
+   counts and code-like tokens. The dashboard-grade "numbers are typeset" detail
+   (Linear/Stripe): stat tiles, table numeric cells and monospace identifiers read
+   as precise, column-aligned data — distinct from Geist prose. One class, whole
+   product. `className` forwards to the DOM node on web, so a Gui <Text> can wear it. */
+.hz-mono {
+  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'tnum' 1;
+  letter-spacing: -0.01em;
 }
 
 * {
   box-sizing: border-box;
 }
+
+/* Ban faux-bold/oblique EVERYWHERE. Geist ships real weight cuts, so a requested
+   600/700/800/900 must map to a genuine face, never a browser-synthesized smear.
+   Tamagui/RNW inject runtime styles that reset the
+   inherited `font-synthesis` on Text nodes, so a body-level declaration loses —
+   this universal rule (with !important, a true global invariant) wins on every
+   element regardless of insertion order. One place, whole product. */
+*,
+*::before,
+*::after {
+  font-synthesis: none !important;
+}
+
+/* ── Console dark theme — TRUE-BLACK canvas + calm text/borders. The ONE place the
+   console's dark/light palette is set. Overrides the generated @hanzo/gui (Tamagui)
+   theme variables; the `html:root.t_*` selector is one step more specific than the
+   library's runtime `:root.t_*` block so it wins regardless of stylesheet insertion
+   order. DRY: every surface, border and text color in the app reads from these
+   tokens, so this one block sets the whole product.
+
+   Design intent (dark): a TRUE-BLACK #000 canvas (matches hanzo.ai marketing +
+   hanzo.chat OLED) with a Linear/Vercel-caliber surface-depth ladder above it —
+   resting panels #050505, the next surface #0a0a0a, interactive/elevated #171717 →
+   #1f1f1f — so cards read with real depth, never flat voids. Above the surface
+   ladder the CALM neutral scale (color5–12) gives premium, low-glare off-white text
+   and quiet hairline borders (never harsh pure #fff on pure #000). Neutral grey,
+   monochrome-first; text contrast stays WCAG-AA+ on every surface. */
+html:root.t_dark {
+  --background: #000000;
+  --backgroundStrong: #000000;
+  --backgroundHover: #101010;
+  --backgroundPress: #050505;
+  --backgroundFocus: #171717;
+
+  /* Surface depth ladder over the true-black canvas — panels/cards step up from
+     #050505 so they separate cleanly without heavy borders (Linear-grade depth). */
+  --color1: #050505;
+  --color2: #0a0a0a;
+  --color3: #171717;
+  --color4: #1f1f1f;
+  --color5: hsl(0 0% 16%);
+  --color6: hsl(0 0% 22%);
+  --color7: hsl(0 0% 30%);
+  --color8: hsl(0 0% 42%);
+  --color9: hsl(0 0% 55%);
+  --color10: hsl(0 0% 68%);
+  --color11: hsl(0 0% 83%);
+  --color12: hsl(0 0% 95%);
+  --color: #ededed;
+
+  /* Gentle hairlines — present enough to define, quiet enough to disappear on black. */
+  --borderColor: #1f1f1f;
+  --borderColorHover: #333333;
+  --borderColorPress: hsl(0 0% 13%);
+  --borderColorFocus: hsl(0 0% 23%);
+
+  /* Elevation ladder (Material-inspired: ambient + key light). On the true-black
+     canvas a cast shadow alone is nearly invisible, so each level pairs a deep
+     shadow with a faint top highlight + a hairline ring (set on .hz-paper) so a
+     sheet lifts cleanly off black. Brand-neutral — color stays token-driven. */
+  --hz-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(0, 0, 0, 0.5);
+  --hz-elevation-2: 0 3px 8px rgba(0, 0, 0, 0.62), 0 1px 3px rgba(0, 0, 0, 0.5);
+  --hz-elevation-3: 0 8px 24px rgba(0, 0, 0, 0.64), 0 2px 6px rgba(0, 0, 0, 0.5);
+  --hz-elevation-4: 0 16px 40px rgba(0, 0, 0, 0.68), 0 6px 14px rgba(0, 0, 0, 0.55);
+  --hz-elevation-5: 0 28px 64px rgba(0, 0, 0, 0.72), 0 12px 24px rgba(0, 0, 0, 0.6);
+  --hz-ring: 0 0 0 1px rgba(255, 255, 255, 0.06);
+  --hz-paper-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
+}
+
+/* Light theme — the calm parallel: a warm off-white base (not stark #fff), soft
+   ink text (not pure black), and quiet hairlines. Lighter touch than dark, since
+   the console defaults to dark, but kept consistent for the theme toggle. */
+html:root.t_light {
+  --background: hsl(220 20% 99%);
+  --color1: hsl(220 24% 100%);
+  --color2: hsl(220 20% 98%);
+  --color3: hsl(220 18% 95.5%);
+  --color4: hsl(220 16% 92.5%);
+  --color5: hsl(220 15% 89%);
+  --color9: hsl(220 9% 46%);
+  --color10: hsl(220 10% 38%);
+  --color11: hsl(220 14% 22%);
+  --color12: hsl(220 22% 12%);
+  --color: hsl(220 22% 12%);
+  --borderColor: hsl(220 16% 90%);
+  --borderColorHover: hsl(220 14% 82%);
+
+  /* Elevation ladder — light theme: soft, cool-grey Material shadows on the warm
+     off-white base (the calm parallel of the dark ladder above). */
+  --hz-elevation-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
+  --hz-elevation-2: 0 3px 8px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.06);
+  --hz-elevation-3: 0 10px 24px rgba(16, 24, 40, 0.1), 0 3px 8px rgba(16, 24, 40, 0.07);
+  --hz-elevation-4: 0 18px 40px rgba(16, 24, 40, 0.13), 0 6px 14px rgba(16, 24, 40, 0.08);
+  --hz-elevation-5: 0 28px 60px rgba(16, 24, 40, 0.16), 0 12px 24px rgba(16, 24, 40, 0.1);
+  --hz-ring: 0 0 0 1px rgba(16, 24, 40, 0.05);
+  --hz-paper-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
+}
+
+/* Motion — a single fade-up entrance (matches the hanzo.ai marketing feel:
+   ~0.4s ease-out, small upward travel, staggered by the consumer). One place
+   defines it; <FadeIn> applies the class + per-item delay. */
+@keyframes hz-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.hz-fade-up {
+  animation: hz-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
+  will-change: transform, opacity;
+}
+
+/* Honor the user's reduced-motion preference — no entrance animation. */
+@media (prefers-reduced-motion: reduce) {
+  .hz-fade-up {
+    animation: none;
+  }
+}
+
+/* Shell chrome motion — the sidebar collapse (width) and the Linear-style
+   two-level nav slide (transform). One place defines the easing; the shell
+   applies the class. `className` forwards to the underlying DOM node on web, so
+   the browser transitions the Gui-driven inline width/transform. */
+.hz-collapse {
+  transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: width;
+}
+
+.hz-slide {
+  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform;
+}
+
+/* Backdrop cross-fade behind a SlideOver / dialog. */
+.hz-fade {
+  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: opacity;
+}
+
+/* Drag-to-reorder — a pinned row while it is being dragged (pointer DnD). The
+   lifted row gets a subtle lift; siblings ease into place via `.hz-slide`. */
+.hz-drag-item {
+  touch-action: none;
+  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.hz-drag-item[data-dragging='true'] {
+  transition: none;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
+  opacity: 0.96;
+  cursor: grabbing;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-collapse,
+  .hz-slide,
+  .hz-fade,
+  .hz-drag-item {
+    transition: none;
+  }
+}
+
+/* Sidebar category accordion — a collapsible level-1 section. The body animates
+   its HEIGHT via grid-template-rows 0fr↔1fr (no magic max-height — the row
+   resolves to the real content height) plus a short opacity fade; the header
+   chevron rotates ▸→▾. Collapsed content stays in the DOM (so both directions
+   animate) but is `inert` (out of tab order + a11y tree). One place defines the
+   easing; the shell toggles `data-open`. */
+.hz-acc {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.hz-acc[data-open='true'] {
+  grid-template-rows: 1fr;
+}
+.hz-acc-inner {
+  overflow: hidden;
+  min-height: 0;
+  opacity: 0;
+  transition: opacity 180ms ease;
+}
+.hz-acc[data-open='true'] .hz-acc-inner {
+  opacity: 1;
+}
+.hz-chevron {
+  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform;
+}
+@media (prefers-reduced-motion: reduce) {
+  .hz-acc,
+  .hz-acc-inner,
+  .hz-chevron {
+    transition: none;
+  }
+}
+
+/* LivingOverview motion — the "videogame-like" living dashboard. The count-up +
+   live sparkline are driven in JS (rAF, gated by prefers-reduced-motion in the
+   hooks); these are the pure-CSS bits: a loading shimmer, a live-feed pulse, and
+   a brief highlight when a tile's number changes. One place defines the easing. */
+
+/* Skeleton shimmer — an honest "loading", never fabricated content. */
+@keyframes hz-shimmer {
+  0% {
+    background-position: -160px 0;
+  }
+  100% {
+    background-position: 160px 0;
+  }
+}
+
+.hz-skeleton {
+  background-color: var(--color3, rgba(148, 163, 184, 0.14));
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--color4, rgba(148, 163, 184, 0.22)) 50%,
+    transparent 100%
+  );
+  background-size: 160px 100%;
+  background-repeat: no-repeat;
+  animation: hz-shimmer 1.2s ease-in-out infinite;
+}
+
+/* Live-feed pulse — the "Live" dot on a streaming panel. */
+@keyframes hz-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.45;
+    transform: scale(0.82);
+  }
+}
+
+/* Entrance for a freshly-arrived activity row (staggerless — one row at a time). */
+@keyframes hz-row-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.hz-row-in {
+  animation: hz-row-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-skeleton {
+    animation: none;
+  }
+  .hz-row-in {
+    animation: none;
+  }
+}
+
+
+/* RailwayDeploy — the deployment pipeline. A smooth flowing gradient marches along the
+   active leg of the track (stroke-dashoffset), a soft halo pulses out from the current
+   station, and the status dot breathes. All reduced-motion-guarded (→ static). One place
+   defines the easing; RailwayDeploy applies the classes. */
+@keyframes hz-rail-flow {
+  to {
+    stroke-dashoffset: -28;
+  }
+}
+.hz-rail-flow {
+  stroke-dasharray: 5 9;
+  animation: hz-rail-flow 0.85s linear infinite;
+}
+
+@keyframes hz-rail-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.34;
+  }
+  70% {
+    transform: scale(2.1);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(2.1);
+    opacity: 0;
+  }
+}
+.hz-rail-pulse {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: hz-rail-pulse 1.7s ease-out infinite;
+}
+
+.hz-rail-dot {
+  animation: hz-pulse 1.5s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-rail-flow,
+  .hz-rail-pulse,
+  .hz-rail-dot {
+    animation: none;
+  }
+}
+
+/* DataTable row — the hover fill eases in/out (Tamagui flips the bg instantly;
+   this smooths it to the 140ms ease-out the rest of the product uses). */
+.hz-row {
+  transition: background-color 140ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .hz-row {
+    transition: none;
+  }
+}
+
+/* ── Touch targets — WCAG 2.5.5 (AAA) / Apple HIG ≥44px ──────────────────────
+   On phones/tablets (<lg) every control inside the mobile nav drawer must be at
+   least 44px tall to tap reliably. Scoped to `.hz-touch-target` (set on the drawer
+   root only), so the dense DESKTOP sidebar — a separate mount at lg+ that never
+   wears this class — keeps its Linear-grade density. A Gui <Button> renders a real
+   <button>, so this one rule reaches every nav row / control within the drawer.
+   One class, every touch surface (DRY). */
+@media (max-width: 1023.98px) {
+  .hz-touch-target button,
+  .hz-touch-target [role='button'] {
+    min-height: 44px;
+  }
+}
+
+/* ── Chat composer dock — pinned to the viewport bottom on phones/tablets ─────
+   The full-page chat scrolls inside the shell's content scroller; without this the
+   composer sits at the end of a tall welcome/thread and first paints BELOW the fold.
+   Made sticky it rides the bottom edge of the scrollport (the conversation scrolls
+   under it), so the input is always reachable. From lg up the capped, centered
+   column already keeps it in view, so it stays in normal flow. The element carries
+   an opaque background so content scrolls cleanly beneath. */
+@media (max-width: 1023.98px) {
+  .hz-chat-dock {
+    position: sticky;
+    bottom: 0;
+    z-index: 5;
+    /* Clear the iOS home indicator when Safari's bottom bar hides (viewport-fit=cover
+       exposes the inset; 0 on devices without one, so no effect elsewhere). */
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+/* ── Material paper / 3D elevation ─────────────────────────────────────────────
+   A real depth system for the console's overlay surfaces (drawer, command palette,
+   menus, dialog, support bubble). Layered box-shadow (ambient + key light) read
+   from the per-theme --hz-elevation-* tokens (light AND dark aware). Brand-neutral:
+   the shadow is monochrome and color stays token-driven, so lux/zoo/pars theme
+   cleanly. One place defines the ladder; an overlay wears a class. `className`
+   forwards to the DOM node on web, so a Gui surface can wear these. */
+.hz-elevation-1 { box-shadow: var(--hz-elevation-1); }
+.hz-elevation-2 { box-shadow: var(--hz-elevation-2); }
+.hz-elevation-3 { box-shadow: var(--hz-elevation-3); }
+.hz-elevation-4 { box-shadow: var(--hz-elevation-4); }
+.hz-elevation-5 { box-shadow: var(--hz-elevation-5); }
+
+/* Paper = an elevated sheet: hairline ring + top highlight + a mid cast shadow, so
+   a menu/palette/dialog reads as a physical sheet floating above the page. */
+.hz-paper { box-shadow: var(--hz-ring), var(--hz-paper-highlight), var(--hz-elevation-3); }
+.hz-paper-4 { box-shadow: var(--hz-ring), var(--hz-paper-highlight), var(--hz-elevation-4); }
+.hz-paper-5 { box-shadow: var(--hz-ring), var(--hz-paper-highlight), var(--hz-elevation-5); }
+
+/* Overlay entrance — a fast, physical scale-fade from the origin (menus, palette,
+   dialog, support sheet). 180ms ease-out enter; the overlay's own unmount handles
+   exit. Reduced-motion → snap (no transform). */
+@keyframes hz-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+.hz-pop-in {
+  animation: hz-pop-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  transform-origin: var(--hz-pop-origin, center);
+  will-change: transform, opacity;
+}
+
+/* Popover MENU entrance — OPACITY-ONLY (never transform). floating-ui positions an
+   anchored menu with an inline `transform: translate(x,y)`, and a CSS-animation that
+   also drives `transform` (like hz-pop-in) OVERRIDES that inline value for the
+   animation's duration — detaching the menu from its trigger. So anchored menus
+   (SelectMenu / ComboBox Popover.Content) fade in with NO transform, keeping the
+   floating-ui anchor exact. The transform-based hz-pop-in stays for the centered
+   Dialog surfaces (CommandPalette / AppLauncher / FloatingChat), which are NOT
+   floating-ui-positioned. Reduced-motion → snap. */
+@keyframes hz-menu-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.hz-menu-in {
+  animation: hz-menu-in 140ms ease-out both;
+  will-change: opacity;
+}
+
+/* Scrim fade — the dimmed backdrop behind a dialog/palette eases in (Tamagui mounts
+   the overlay instantly otherwise). */
+@keyframes hz-scrim-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.hz-scrim-in {
+  animation: hz-scrim-in 160ms ease-out both;
+}
+
+/* Support bubble — a gentle hover lift on the elevated brand-H bubble. */
+.hz-lift {
+  transition:
+    transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
+    box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform;
+}
+.hz-lift:hover {
+  transform: translateY(-2px);
+}
+
+/* Hover-paper — a subtle elevation lift on hover for a small affordance (the sidebar
+   brand-H container). Only the H wears this, never the whole row. */
+.hz-hover-paper {
+  transition:
+    box-shadow 160ms ease,
+    transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
+    background-color 140ms ease;
+}
+.hz-hover-paper:hover {
+  box-shadow: var(--hz-elevation-2);
+  transform: translateY(-1px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-pop-in,
+  .hz-menu-in,
+  .hz-scrim-in {
+    animation: none;
+  }
+  .hz-lift,
+  .hz-hover-paper {
+    transition: none;
+  }
+  .hz-lift:hover,
+  .hz-hover-paper:hover {
+    transform: none;
+  }
+}
+
+/* ── A11y + responsive hardening ─────────────────────────────────────────────
+   Global floors that hold across every product surface. One place, whole app. */
+
+/* 1. The page body is a hard NO-horizontal-scroll surface. A stray fixed/overwide
+      child (an off-screen drawer mid-transition, a wide table) must clip, never
+      scroll the whole document sideways. `clip` (not `hidden`) does not create a
+      scroll container, so sticky/fixed descendants keep working. */
+html,
+body {
+  overflow-x: clip;
+}
+
+/* 2. Visible keyboard focus, everywhere. `:focus-visible` fires ONLY for keyboard
+      navigation (never a mouse/touch press), so this paints a crisp ring for
+      tab-through without touching pointer interactions. Tamagui focusStyle handles
+      some controls; this is the global floor so nothing is ever focus-invisible.
+      Colour reads from the theme scale, so it adapts in light and dark. */
+:focus-visible {
+  outline: 2px solid var(--color9, #6c6c6c);
+  outline-offset: 2px;
+  border-radius: 3px;
+}
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* 3. Touch tap targets ≥44px (WCAG 2.5.5 / Apple HIG). On a COARSE pointer
+      (phone/tablet) every top-bar control meets the 44×44 minimum; the desktop
+      mouse density is deliberately left unchanged. Scoped to the top bar so table
+      row-actions and inline chips are untouched. */
+@media (pointer: coarse) {
+  .hz-topbar button {
+    min-height: 44px;
+    min-width: 44px;
+  }
+}

app/keys/route.ts

@@ -1,70 +1,96 @@
 /**
- * Cloud API key management — the per-user `hk-` credential, minted server-side.
+ * Per-user `hk-` Cloud API key — the SAME-ORIGIN console route (the fix for the
+ * API-keys "sign in to manage API keys" / CORS crack).
  *
- * Same-origin (`/keys`): the browser sends only its first-party session cookie;
- * this server handler resolves the user from that cookie and calls IAM as the
- * confidential `hanzo-console` client on the user's behalf. The `hk-` secret is
- * returned to the browser ONLY at creation (POST) — standard show-once handling —
- * and is otherwise never echoed. Authorization is the user's own session: a
- * caller can only ever mint/revoke their OWN key (IAM binds the id to the
- * resolved session), never another tenant's.
+ * The browser calls this OWN-origin route (`/keys`) with just its first-party
+ * session cookie. This handler resolves the signed-in user from that cookie
+ * (`resolveUser`) and mints/reads/revokes the key through IAM as the confidential
+ * `hanzo-console` client (`identity.ts` `mintUserKey`/`getUserKey`/`revokeUserKey`,
+ * over IAM `mint-user-keys`/`get-user`/`revoke-user-keys` — the WORKING key path,
+ * verified live). No credential ever reaches the browser; the `hk-` secret is
+ * returned ONLY by POST (show once).
  *
- *   POST   /keys  → mint (or rotate) the key; returns { accessKey } once.
- *   DELETE /keys  → revoke the key (the old key stops working).
- *   GET    /keys  → whether a key exists (no secret material).
+ * Why not `cloud.hanzo.ai/v1/iam/keys` (the old path): that is a DIFFERENT
+ * ORIGIN than console.hanzo.ai, so a browser `fetch` is blocked by CORS ("Failed to
+ * fetch") — and cloud-api's own keys handler 501s ("IAM client unset") on this
+ * deployment anyway. The IAM confidential-client mint the console already uses for
+ * `hk-` keys elsewhere (`app/ai` chat) is the ONE authoritative, same-origin,
+ * always-working path — so the Org-Settings API-keys surface uses it too (DRY: the
+ * exact primitives from `identity.ts`, no new IAM plumbing).
+ *
+ *   GET    → { hasKey, keyPrefix, createdAt }  (no secret)
+ *   POST   → { accessKey }                       (mint/rotate; full hk- shown ONCE)
+ *   DELETE → { ok: true }                        (revoke; the old key stops working)
  */
 import { type NextRequest, NextResponse } from 'next/server'
 
-import { resolveUser, mintUserKey, revokeUserKey, mintConfigured } from '~/lib/server/identity'
+import { resolveUser, mintUserKey, getUserKey, revokeUserKey, mintConfigured } from '~/lib/server/identity'
+import { csrfRefusal } from '~/lib/server/bearer-proxy'
 
 export const runtime = 'nodejs'
 
-const unauthorized = () =>
-  NextResponse.json({ error: 'Sign in to manage API keys.' }, { status: 401 })
+const msgOf = (e: unknown) => (e instanceof Error ? e.message : String(e))
 
-const notConfigured = () =>
-  NextResponse.json(
-    { error: 'API key minting is not configured on this deployment (IAM client unset).' },
-    { status: 501 },
-  )
-
-export async function GET(req: NextRequest): Promise<NextResponse> {
-  const user = await resolveUser(req)
-  if (!user) return unauthorized()
-  // No secret material on GET — only whether a key exists and its public prefix.
-  const hasKey = Boolean(user.accessKey)
-  return NextResponse.json({
-    hasKey,
-    keyPrefix: hasKey ? user.accessKey.slice(0, 11) : '',
-  })
+/** 401 (not signed in) — the honest state the UI shows to sign in. */
+function unauthorized() {
+  return NextResponse.json({ error: 'Sign in to manage API keys.' }, { status: 401 })
 }
 
-export async function POST(req: NextRequest): Promise<NextResponse> {
+/** GET — the user's current key state (existence + public prefix, NEVER the secret). */
+export async function GET(req: NextRequest) {
   const user = await resolveUser(req)
   if (!user) return unauthorized()
-  if (!mintConfigured()) return notConfigured()
+  if (!mintConfigured()) {
+    // Honest, non-leaking: the confidential client isn't wired on this deployment.
+    return NextResponse.json({ error: 'API key management is not configured on this deployment.' }, { status: 501 })
+  }
+  try {
+    const { accessKey, updatedAt } = await getUserKey(user)
+    return NextResponse.json({
+      hasKey: Boolean(accessKey),
+      keyPrefix: accessKey ? accessKey.slice(0, 11) : '',
+      createdAt: updatedAt || '',
+    })
+  } catch (e) {
+    console.error('keys: could not read key state:', msgOf(e))
+    return NextResponse.json({ error: 'Could not read the API key state.' }, { status: 502 })
+  }
+}
+
+/** POST — mint (or rotate) the key. Returns the full `hk-` secret ONCE. */
+export async function POST(req: NextRequest) {
+  // CSRF: minting mutates (and is billable-adjacent) from the auto-sent cookie —
+  // refuse a cross-origin request before any work.
+  const csrf = csrfRefusal(req)
+  if (csrf) return csrf
+  const user = await resolveUser(req)
+  if (!user) return unauthorized()
+  if (!mintConfigured()) {
+    return NextResponse.json({ error: 'API key management is not configured on this deployment.' }, { status: 501 })
+  }
   try {
     const accessKey = await mintUserKey(user)
     return NextResponse.json({ accessKey })
   } catch (e) {
-    return NextResponse.json(
-      { error: `Could not mint an API key: ${e instanceof Error ? e.message : String(e)}` },
-      { status: 502 },
-    )
+    console.error('keys: could not mint key:', msgOf(e))
+    return NextResponse.json({ error: 'Could not create the API key.' }, { status: 502 })
   }
 }
 
-export async function DELETE(req: NextRequest): Promise<NextResponse> {
+/** DELETE — revoke the key (the old key stops working; gateway cache ~5m). */
+export async function DELETE(req: NextRequest) {
+  const csrf = csrfRefusal(req)
+  if (csrf) return csrf
   const user = await resolveUser(req)
   if (!user) return unauthorized()
-  if (!mintConfigured()) return notConfigured()
+  if (!mintConfigured()) {
+    return NextResponse.json({ error: 'API key management is not configured on this deployment.' }, { status: 501 })
+  }
   try {
     await revokeUserKey(user)
     return NextResponse.json({ ok: true })
   } catch (e) {
-    return NextResponse.json(
-      { error: `Could not revoke the API key: ${e instanceof Error ? e.message : String(e)}` },
-      { status: 502 },
-    )
+    console.error('keys: could not revoke key:', msgOf(e))
+    return NextResponse.json({ error: 'Could not revoke the API key.' }, { status: 502 })
   }
 }

app/layout.tsx

@@ -3,23 +3,41 @@ import './globals.css'
 
 import type { Metadata, Viewport } from 'next'
 import type { ReactNode } from 'react'
+import { headers } from 'next/headers'
 
 import { Provider } from '~/components/Provider'
-import { branding } from '~/config'
+import { ChunkGuard } from '~/components/ChunkGuard'
+import { BrandTitle } from '~/components/BrandTitle'
+import { resolveConfig } from '~/config'
 
-export const metadata: Metadata = {
-  title: branding.name,
-  description: 'Unified admin console for Hanzo Cloud and all cloud products.',
+// The document <title> is SSR metadata, so it must reflect the REQUEST host's
+// brand (console.lux.cloud -> "Lux Cloud Console"), not the build-time default.
+// The visible shell resolves the brand client-side from window.location, but the
+// tab title is server-rendered — without reading the Host header here the browser
+// tab leaks "Hanzo Cloud Console" on Lux/Zoo hosts, a white-label violation.
+export async function generateMetadata(): Promise<Metadata> {
+  const host = (await headers()).get('host') ?? undefined
+  const { brandName } = resolveConfig(host)
+  return {
+    title: `${brandName} Console`,
+    description: 'Unified admin console for Hanzo Cloud and all cloud products.',
+  }
 }
 
 export const viewport: Viewport = {
   themeColor: '#000000',
+  // Extend the layout into the display cutout / home-indicator area so the
+  // `env(safe-area-inset-*)` values become non-zero on notched devices — the mobile
+  // drawers + chat composer read them to keep content clear of the notch/indicator.
+  viewportFit: 'cover',
 }
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className="t_dark" style={{ backgroundColor: '#070b13', colorScheme: 'dark' }} suppressHydrationWarning>
+    <html lang="en" className="t_dark" style={{ backgroundColor: '#000000', colorScheme: 'dark' }} suppressHydrationWarning>
       <body style={{ margin: 0 }}>
+        <ChunkGuard />
+        <BrandTitle />
         <Provider>{children}</Provider>
       </body>
     </html>

app/org/iam/[...path]/route.ts

@@ -0,0 +1,78 @@
+/**
+ * Server-gated SELF-SERVICE org member proxy — a CUSTOMER managing their OWN org.
+ *
+ * The `/admin/iam` proxy is GLOBAL-admin only, so a tenant org owner (e.g.
+ * Dave/maxpower) could never manage their own members through it. This proxy
+ * closes that: it admits ANY authenticated user with an org (`getOrgGate`), then
+ * the shared `forwardIam`:
+ *   - scopes every reference (query `owner`, `id` owner, and the mutation BODY
+ *     owner) to the caller's OWN org — a global admin may cross, a customer never;
+ *   - guards get-organization by org NAME (no reading another org's settings);
+ *   - requires an ORG ADMIN for writes (invite / change-role / remove), while any
+ *     member may READ the roster.
+ * IAM enforces its own checks on the user-bound bearer too — this is the matching,
+ * fail-closed server gate, not the only one.
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { getOrgGate } from '~/lib/server/identity'
+import { forwardIam } from '~/lib/server/iam-proxy'
+
+export const runtime = 'nodejs'
+
+/** Reads — any member of the org (own org only, unless global). */
+const GET_SEGMENTS = new Set([
+  'get-users',
+  'get-user',
+  'get-roles',
+  'get-organization',
+  // Projects live under the org (IAM-served); the console host's /v1 sends /v1/iam/*
+  // to the cloud binary → 404, so the Projects page routes here (Bearer → IAM).
+  'get-organization-projects',
+])
+
+/** Writes — org admin only, own org only (unless global). */
+const POST_SEGMENTS = new Set([
+  'add-user',
+  'update-user',
+  'delete-user',
+  // Org branding/settings — org-admin only, pinned to the caller's OWN org by both
+  // the `?id` name AND the body name (below), so a brand admin can't retarget another.
+  'update-organization',
+  // Project CRUD — org-admin only (requireAdminForWrite), pinned to the caller's org.
+  'add-project',
+  'delete-project',
+])
+
+/** Org objects are owned by the `admin` metadata org (name guarded separately). */
+const ORG_META = new Set(['get-organization', 'update-organization'])
+/** Segments carrying an org NAME to pin to the caller's scope (read id + write body). */
+const ORG_NAME = new Set(['get-organization', 'update-organization'])
+/** Segments keyed by `organization` (projects) — pin it to the caller's own org so an
+ *  omitted/empty organization can't enumerate/pollute across tenants. */
+const ORG_PARAM = new Set(['get-organization-projects', 'add-project', 'delete-project'])
+
+const forbidden = () => NextResponse.json({ error: 'forbidden' }, { status: 403 })
+
+async function handle(req: NextRequest, path: string[], method: 'GET' | 'POST'): Promise<NextResponse> {
+  const gate = await getOrgGate(req)
+  if (!gate) return forbidden()
+  return forwardIam(req, gate, {
+    segment: path.join('/'),
+    method,
+    allowed: method === 'GET' ? GET_SEGMENTS : POST_SEGMENTS,
+    orgMetaSegments: ORG_META,
+    orgNameSegments: ORG_NAME,
+    orgParamSegments: ORG_PARAM,
+    requireAdminForWrite: true,
+  })
+}
+
+type Ctx = { params: Promise<{ path: string[] }> }
+
+export async function GET(req: NextRequest, ctx: Ctx) {
+  return handle(req, (await ctx.params).path, 'GET')
+}
+export async function POST(req: NextRequest, ctx: Ctx) {
+  return handle(req, (await ctx.params).path, 'POST')
+}

app/paas/[...path]/route.ts

@@ -5,21 +5,67 @@
  * from server-only env (sourced via KMS — never `NEXT_PUBLIC_`, never in the
  * browser bundle). This is the real control-plane API, not an iframe stub.
  *
+ * SECURITY: the forwarded token is a PLATFORM SERVICE token — full control-plane
+ * authority, NOT tenant-scoped. So this route is gated to brand admins exactly
+ * like the IAM/KMS admin proxies: `getAdminGate` resolves the caller from their
+ * own session and requires a verified brand-admin (no gate → 403). Without this,
+ * any authenticated browser could drive the whole control plane through the
+ * service token. The gate is the control, NOT a deploy-time env toggle.
+ *
  * When `PAAS_SERVICE_TOKEN` is unset the proxy returns an honest 501 so the UI
  * can show a truthful "not configured" state — it never fabricates apps/deploys.
+ *
+ * SCOPE: the browser stamps the active tenant path (X-Org-Id / X-Project-Id /
+ * X-Environment) on every call. We forward it to the control plane so PaaS
+ * resources scope by org → project → environment like the rest of the console —
+ * but the ORG is re-resolved server-side through the admin policy (`orgFor`): a
+ * global admin's switched org is honored, a brand admin is PINNED to their own,
+ * so the forwarded X-Org-Id is authoritative and never the spoofable claim.
+ * Project + environment are sub-scopes the admin picks WITHIN that org, passed
+ * through verbatim.
  */
 import { type NextRequest, NextResponse } from 'next/server'
 
+import { getAdminGate } from '~/lib/server/identity'
+import { orgFor as policyOrgFor } from '~/lib/server/admin-policy'
+import { csrfRefusal } from '~/lib/server/bearer-proxy'
+import { fetchWithTimeout } from '~/lib/server/fetch-timeout'
+
+export const runtime = 'nodejs'
+
 const PLATFORM_URL = (process.env.PLATFORM_URL ?? 'https://platform.hanzo.ai').replace(/\/+$/, '')
 const TOKEN = process.env.PAAS_SERVICE_TOKEN ?? ''
 
 async function forward(req: NextRequest, path: string[]): Promise<NextResponse> {
+  // CSRF FIRST — the service token below is control-plane god-mode, so a cross-site
+  // page carrying the admin's auto-sent cookie must never drive a deploy/scale/delete.
+  // Refuse a cross-origin MUTATION before the admin gate or any body read (safe reads
+  // pass). Defense in depth on top of the session cookie's own SameSite attribute.
+  const csrf = csrfRefusal(req)
+  if (csrf) return csrf
+
+  // Brand-admin gate — the service token below is control-plane god-mode.
+  const gate = await getAdminGate(req)
+  if (!gate) {
+    return NextResponse.json({ error: 'forbidden' }, { status: 403 })
+  }
   if (!TOKEN) {
     return NextResponse.json(
       { error: 'PaaS control plane is not configured (PAAS_SERVICE_TOKEN missing).' },
       { status: 501 },
     )
   }
+  // Resolve the authoritative tenant path. Org: the admin policy honors a
+  // SuperAdmin's switched org (the X-Org-Id the browser sends = currentOrg()) and pins
+  // a brand admin to their own — so we forward the resolved org, never the raw
+  // claim. Project + environment are sub-scopes within that org, forwarded as-is.
+  const org = policyOrgFor(
+    { isSuperAdmin: gate.user.isSuperAdmin, orgScope: gate.orgScope },
+    req.headers.get('X-Org-Id'),
+  )
+  const projectId = req.headers.get('X-Project-Id')
+  const environment = req.headers.get('X-Environment')
+
   const search = req.nextUrl.search
   const url = `${PLATFORM_URL}/v1/${path.join('/')}${search}`
   const init: RequestInit = {
@@ -28,6 +74,9 @@ async function forward(req: NextRequest, path: string[]): Promise<NextResponse>
       Authorization: `Bearer ${TOKEN}`,
       'Content-Type': 'application/json',
       Accept: 'application/json',
+      'X-Org-Id': org,
+      ...(projectId ? { 'X-Project-Id': projectId } : {}),
+      ...(environment ? { 'X-Environment': environment } : {}),
     },
     // Never cache control-plane reads.
     cache: 'no-store',
@@ -36,7 +85,7 @@ async function forward(req: NextRequest, path: string[]): Promise<NextResponse>
     init.body = await req.text()
   }
   try {
-    const res = await fetch(url, init)
+    const res = await fetchWithTimeout(url, init)
     const text = await res.text()
     return new NextResponse(text, {
       status: res.status,

app/signin/page.tsx

@@ -1,18 +1,13 @@
 'use client'
 
-import { useEffect } from 'react'
-import { useRouter } from 'next/navigation'
-
-import { SignInForm } from '~/components/SignInForm'
-import { useSession } from '~/lib/auth/session'
+/**
+ * Sign-in route. The whole experience (tenant credential form / admin silent SSO)
+ * lives in the shared `<SignIn/>` component, which `AuthGate` also renders — so a
+ * direct `/signin` load resolves to the form whether it mounts this route or the
+ * dashboard shell (the deploy serves the SPA shell for every path).
+ */
+import { SignIn } from '~/components/SignIn'
 
 export default function SignInPage() {
-  const { account, loading } = useSession()
-  const router = useRouter()
-
-  useEffect(() => {
-    if (!loading && account) router.replace('/')
-  }, [loading, account, router])
-
-  return <SignInForm />
+  return <SignIn />
 }

app/system-status/route.ts

@@ -0,0 +1,43 @@
+/**
+ * /system-status — same-origin BFF for the global status badge.
+ *
+ * status.<brand> (Gatus) serves its JSON at `/api/v1/endpoints/statuses` with NO
+ * CORS header, so the browser can't read it cross-origin. This route fetches it
+ * SERVER-SIDE (no CORS) and returns a small overall summary the badge renders
+ * natively — the console's established BFF pattern (no iframe, no third-party
+ * script). Public health data only; no auth, no secrets.
+ *
+ * Fail-soft by construction: any upstream error (down/slow/garbage) returns
+ * `overall: 'unknown'` with HTTP 200, so the badge shows a neutral state and the
+ * shell never breaks.
+ */
+import { NextResponse } from 'next/server'
+
+import { config } from '~/config'
+import { fetchWithTimeout } from '~/lib/server/fetch-timeout'
+import { summarizeStatuses, type StatusSummary } from '~/lib/status/summary'
+
+// Health changes minute-to-minute — always evaluate fresh (short CDN cache below).
+export const dynamic = 'force-dynamic'
+
+const UNKNOWN: StatusSummary = { overall: 'unknown', total: 0, up: 0, down: [] }
+
+export async function GET() {
+  const statusUrl = config.statusUrl
+  let summary = UNKNOWN
+  try {
+    const res = await fetchWithTimeout(
+      `${statusUrl}/api/v1/endpoints/statuses`,
+      { headers: { accept: 'application/json' }, cache: 'no-store' },
+      { timeoutMs: 4000 },
+    )
+    if (res.ok) summary = summarizeStatuses(await res.json())
+  } catch {
+    // fail-soft → UNKNOWN
+  }
+
+  return NextResponse.json(
+    { ...summary, statusUrl, checkedAt: new Date().toISOString() },
+    { headers: { 'Cache-Control': 'public, max-age=30' } },
+  )
+}

app/tasksd/[...path]/route.ts

@@ -0,0 +1,38 @@
+/**
+ * Same-origin proxy to the durable task engine (hanzoai/tasks `tasksd`, the native
+ * Temporal-style HTTP surface at `/v1/tasks/*`).
+ *
+ * `tasksd` runs `TASKSD_REQUIRE_IDENTITY=true`: it validates an IAM **Bearer JWT**
+ * against the IAM JWKS, unconditionally STRIPS inbound `X-Org-Id`, and mints org +
+ * user from the JWT claims (`owner`→org). So — like the `/ai` proxy — the console
+ * calls its OWN origin (`/tasksd/...`) with just the session cookie;
+ * `forwardWithUserBearer` resolves the signed-in user, mints a short-lived
+ * user-bound IAM token (shared per-user cache), and forwards it as the Bearer. No
+ * key in the browser, and every read is org-scoped by the JWT server-side.
+ *
+ * READ-ONLY: only GET is proxied (the console never mutates workflows here), scoped
+ * to the `v1/tasks/*` subtree. When the engine is unreachable the UI shows an honest
+ * BackendStateCard — never fabricated workflows.
+ */
+import { type NextRequest } from 'next/server'
+
+import { forwardWithUserBearer } from '~/lib/server/bearer-proxy'
+
+export const runtime = 'nodejs'
+
+const trim = (s: string) => s.replace(/\/+$/, '')
+/** The durable task engine. Public TLS is not live yet → default to the in-cluster
+ *  service. The tasks Service exposes REST on :7243 (http port); there is NO :80,
+ *  so target :7243 explicitly. Override with TASKS_URL. `|| default` (not `??`) so a
+ *  blank env still falls back to the in-cluster service. */
+const TASKS_URL = trim(process.env.TASKS_URL?.trim() || 'http://tasks.hanzo.svc.cluster.local:7243')
+
+export async function GET(req: NextRequest, ctx: { params: Promise<{ path: string[] }> }) {
+  const rel = (await ctx.params).path.join('/')
+  return forwardWithUserBearer(req, {
+    target: TASKS_URL,
+    path: `v1/tasks/${rel}`,
+    allow: (p) => p === 'v1/tasks' || p.startsWith('v1/tasks/'),
+    unauthorizedMessage: 'Sign in to view tasks.',
+  })
+}

app/training/[...path]/route.ts

@@ -0,0 +1,146 @@
+/**
+ * Same-origin proxy to the cloud ML/training surface on hanzoai/ai (`/v1/train/*`,
+ * `/v1/ml/models`, and the fine-tuning broker `/v1/finetune/*`).
+ *
+ * The console's Training page calls its OWN origin (`/training/...`) with just the
+ * first-party session cookie; this server handler resolves the signed-in user from
+ * that cookie, mints a SHORT-LIVED, user-bound IAM Bearer (`adminBearer` — the ONE
+ * per-user cache shared with the `/v1` bearer proxy), and forwards to the cloud
+ * backend's `/v1/...` surface with `Authorization: Bearer <token>` + the active
+ * `X-Org-Id`. Training is a TENANT action — any signed-in org user may run it — so
+ * this is user-scoped (resolveUser), NOT the control-plane admin gate the `/paas`
+ * proxy uses. The cloud backend resolves the org from the token's `owner` claim (and
+ * the X-Org-Id the plain-REST train sub-service reads), so a caller can only ever
+ * touch their own org's jobs. `POST /v1/train/jobs` is billing-gated by the live
+ * ResourceMeter and returns 402 on an unfunded org — that status flows straight back
+ * so the UI can surface it honestly.
+ *
+ * Why a Bearer and NOT the cookie (the fix for the "Not enabled" 403): cloud-api's
+ * `/v1/train/*` authorizes on a VALIDATED JWT principal and returns 403 "no validated
+ * principal" for a cookie-only call — the raw casibase session cookie is NOT a
+ * principal it accepts (only the sanitizer's cookie-token names or a Bearer). Minting
+ * the same user-bound token the `/v1` proxy uses is the ONE way a signed-in tenant
+ * reaches the train surface; the cookie is deliberately dropped upstream (it can't
+ * authenticate, and a cookie + JWT together risks the public-gateway 431).
+ *
+ * Least privilege: only the explicit ML/training sub-paths are forwarded; anything
+ * else 404s, so this is not a general backend tunnel. No secret ever reaches the
+ * browser — the HuggingFace token (for private repos) is resolved from KMS
+ * server-side inside the broker, never here.
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { resolveUser, adminBearer } from '~/lib/server/identity'
+import { orgFor } from '~/lib/server/admin-policy'
+import { csrfRefusal } from '~/lib/server/bearer-proxy'
+import { fetchWithTimeout } from '~/lib/server/fetch-timeout'
+
+export const runtime = 'nodejs'
+
+const trim = (s: string) => s.replace(/\/+$/, '')
+const msgOf = (e: unknown) => (e instanceof Error ? e.message : String(e))
+/** Cloud `/v1` backend (hanzoai/ai) — same target lib/server/identity.ts resolves. */
+const CLOUD_API_URL = trim(process.env.CLOUD_API_URL ?? 'http://cloud.hanzo.svc.cluster.local:8000')
+
+/** The exact `/v1/<...>` ML/training sub-paths the console is allowed to reach. */
+const ALLOWED = new Set([
+  // mlsvc — the canonical training surface (task #40 ResourceMeter gates POST jobs).
+  'train/jobs',
+  'train/experiments',
+  'ml/models',
+  // Real Kubeflow control-plane probe (which operators/CRDs are actually served).
+  // Read-only; 503 + body flows through so the UI can report a degraded plane.
+  'train/health',
+  // fine-tuning broker (custom-data runs, HF search) — sibling surface.
+  'finetune/jobs',
+  'finetune/job',
+  'finetune/cancel',
+  'finetune/deploy',
+  'finetune/presets',
+  'finetune/hf/models',
+  'finetune/hf/datasets',
+  'finetune/hf/repo',
+])
+
+async function forward(req: NextRequest, path: string[]): Promise<NextResponse> {
+  const rel = path.join('/')
+  if (!ALLOWED.has(rel)) {
+    return NextResponse.json({ status: 'error', msg: 'Not found' }, { status: 404 })
+  }
+
+  // CSRF: `POST /train/jobs` mutates (and bills) from the auto-sent cookie — refuse a
+  // cross-origin one before any work (safe reads pass).
+  const csrf = csrfRefusal(req, 'casibase')
+  if (csrf) return csrf
+
+  const user = await resolveUser(req)
+  if (!user) {
+    return NextResponse.json(
+      { status: 'error', msg: 'Sign in to manage training.' },
+      { status: 401 },
+    )
+  }
+
+  // Mint a short-lived, user-bound Bearer (the SAME per-user cache the `/v1`
+  // proxy uses). cloud-api's `/v1/train/*` 403s a cookie-only call ("no validated
+  // principal"); a Bearer is the one credential it accepts. Fail CLOSED with 502 if
+  // the token can't be minted — never fall through to an unauthenticated forward.
+  let bearer: string
+  try {
+    bearer = await adminBearer(user)
+  } catch (e) {
+    // Redact — the exception carries the internal IAM host/port. Log server-side only.
+    console.error('training-proxy: could not mint user bearer:', msgOf(e))
+    return NextResponse.json(
+      { status: 'error', msg: 'Could not authorize the request.' },
+      { status: 502 },
+    )
+  }
+
+  const url = `${CLOUD_API_URL}/v1/${rel}${req.nextUrl.search}`
+  const headers: Record<string, string> = {
+    Authorization: `Bearer ${bearer}`,
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+    // Org is SERVER-RESOLVED, not the raw browser header: a SuperAdmin's switched
+    // org (?/X-Org-Id) is honored, a non-SuperAdmin caller is PINNED to their own — so a
+    // brand admin can't drive another tenant's training jobs even if the backend
+    // trusted the forwarded header. For a non-SuperAdmin caller this equals the token
+    // owner (the Bearer's own claim), so header and token agree. Matches the /paas +
+    // /admin/kms orgFor pin. The raw session cookie is NOT forwarded (cloud-api can't
+    // validate it as a principal, and cookie + JWT together risks the gateway 431).
+    'X-Org-Id': orgFor({ isSuperAdmin: user.isSuperAdmin, orgScope: user.owner }, req.headers.get('X-Org-Id')),
+  }
+  const projectId = req.headers.get('X-Project-Id')
+  const environment = req.headers.get('X-Environment')
+  if (projectId) headers['X-Project-Id'] = projectId
+  if (environment) headers['X-Environment'] = environment
+
+  const init: RequestInit = { method: req.method, headers, cache: 'no-store' }
+  if (req.method !== 'GET' && req.method !== 'HEAD') {
+    init.body = await req.text()
+  }
+
+  try {
+    const res = await fetchWithTimeout(url, init)
+    const text = await res.text()
+    return new NextResponse(text, {
+      status: res.status,
+      headers: { 'Content-Type': res.headers.get('content-type') ?? 'application/json' },
+    })
+  } catch (e) {
+    return NextResponse.json(
+      { status: 'error', msg: `Fine-tuning backend unreachable: ${e instanceof Error ? e.message : String(e)}` },
+      { status: 502 },
+    )
+  }
+}
+
+type Ctx = { params: Promise<{ path: string[] }> }
+
+export async function GET(req: NextRequest, ctx: Ctx) {
+  return forward(req, (await ctx.params).path)
+}
+export async function POST(req: NextRequest, ctx: Ctx) {
+  return forward(req, (await ctx.params).path)
+}

app/v1/[...path]/route.ts

@@ -0,0 +1,76 @@
+/**
+ * Same-origin user-bearer proxy at the console's OWN `/v1/*` — the ONE prefix-free
+ * path the browser uses to reach the unified cloud-api surfaces that authorize on a
+ * Bearer JWT. CTO contract: every cloud API path is `/v1/`-rooted, ZERO prefix (no
+ * `/cloud/`, no `/api/`).
+ *
+ * The browser holds NO credential: it calls `<origin>/v1/<head>/...` with just its
+ * first-party session cookie. This catch-all resolves WHO the caller is from that
+ * cookie (`resolveUser`), mints a SHORT-LIVED, user-bound IAM token (shared per-user
+ * cache in identity.ts — ONE cache across every proxy), and forwards to cloud-api's
+ * `/v1/*` with `Authorization: Bearer <token>`. The backend resolves the ORG from the
+ * token's `owner` claim, so tenancy is server-authoritative — a browser can never
+ * supply its own org — and the raw session cookie NEVER reaches cloud-api (no
+ * cookie-CSRF surface upstream). This is the EXACT transport the `/ai` proxy proved
+ * live; every service proxy shares the ONE `forwardWithUserBearer` implementation.
+ *
+ * DISPATCH: the AI (`models`/`chat`/…), admin-aggregate (`/v1/admin/*`), visor
+ * (`regions`/`sizes`/`gpu-sizes`), billing (`/v1/billing/*`) and commerce
+ * (`/v1/commerce/*`) heads are routed to their OWN backends by `next.config.mjs`
+ * `beforeFiles` rewrites BEFORE they reach this catch-all — so this handler owns
+ * exactly the cloud-api `/v1/<head>` surface.
+ *
+ * Least privilege: only the allow-listed cloud HEADS are reachable
+ * (`allowCloudSurface`); `v1/iam/*`, `v1/admin/*`, etc. 404 here — this is not a
+ * general cloud-api tunnel. The mutating same-origin (CSRF) guard, the path-traversal
+ * rejection, and the bearer mint all live in `forwardWithUserBearer`.
+ */
+import { type NextRequest } from 'next/server'
+
+import { forwardWithUserBearer } from '~/lib/server/bearer-proxy'
+import { allowCloudSurface } from '~/lib/server/proxy-allow'
+
+export const runtime = 'nodejs'
+
+const trim = (s: string) => s.replace(/\/+$/, '')
+/** The unified cloud backend (hanzoai/cloud). In-cluster ClusterIP — public egress is CF-403'd.
+ *  `|| default` (not `??`) so an env accidentally reconciled to an EMPTY string still falls
+ *  back to the in-cluster service (a blank CLOUD_API_URL would otherwise break every cloud page). */
+const CLOUD_API_URL = trim(process.env.CLOUD_API_URL?.trim() || 'http://cloud-api.hanzo.svc.cluster.local:8000')
+
+type Ctx = { params: Promise<{ path: string[] }> }
+
+function handle(req: NextRequest, ctx: Ctx) {
+  return (async () => {
+    // The `[...path]` catch-all sits UNDER `/v1`, so it captures the segments AFTER
+    // `/v1`. Re-prepend the `v1/` root so the allow-list (matches `v1/<head>`) and the
+    // upstream URL (`CLOUD_API_URL/v1/<head>/...`) both see the cloud-api contract path.
+    const path = `v1/${(await ctx.params).path.join('/')}`
+    return forwardWithUserBearer(req, {
+      target: CLOUD_API_URL,
+      path,
+      allow: allowCloudSurface,
+      // Org is authoritative (Bearer owner). Do NOT forward the browser-controlled
+      // X-Project-Id/X-Environment sub-scopes — the data/serverless resources are
+      // org-keyed, and forwarding an unvalidated project id is an attack surface
+      // (RED MEDIUM). A project-scoped feature must validate membership first.
+      unauthorizedMessage: 'Sign in to use Hanzo Cloud.',
+    })
+  })()
+}
+
+export async function GET(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+export async function POST(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+export async function PUT(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+export async function PATCH(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+export async function DELETE(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}

app/v1/ai-accounts/[...path]/route.ts

@@ -0,0 +1,87 @@
+/**
+ * AI-account credential store — the per-user connect/list/disconnect route.
+ *
+ *   GET    v1/accounts               → { providers: masked[] }  (existence + mode, NO secret)
+ *   POST   v1/accounts/:providerId   → seal a pasted API key / OAuth token / cookie header
+ *   DELETE v1/accounts/:providerId   → drop the sealed credential
+ *
+ * The secret is sealed into an httpOnly cookie server-side (`lib/server/ai-accounts`)
+ * and NEVER echoed back or logged. Every request is session-gated (`resolveUser`); the
+ * two mutating verbs are CSRF-guarded (auto-sent cookie → refuse cross-origin first).
+ *
+ * Namespaced under `/v1/ai-accounts/` so the data plane never shadows the UI tab URLs
+ * (`/ai-accounts`, `/ai-accounts/accounts`) — a route handler always wins over the
+ * catch-all page, so the two live in disjoint path space (same rule as `/v1/billing/`).
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { resolveUser } from '~/lib/server/identity'
+import { csrfRefusal } from '~/lib/server/bearer-proxy'
+import { applyCookies } from '~/lib/server/session'
+import {
+  readAccounts,
+  accountsCookie,
+  maskAccounts,
+  type AiAccountsStore,
+  type StoredCredential,
+} from '~/lib/server/ai-accounts'
+import { isAiProvider, type ConnectMode } from '~/lib/products/ai-accounts'
+
+export const runtime = 'nodejs'
+
+type Ctx = { params: Promise<{ path: string[] }> }
+
+const MODES: ConnectMode[] = ['api', 'oauth', 'web']
+const unauthorized = () => NextResponse.json({ error: 'Sign in to manage AI accounts.' }, { status: 401 })
+const notFound = () => NextResponse.json({ error: 'Not found.' }, { status: 404 })
+
+export async function GET(req: NextRequest, ctx: Ctx) {
+  const user = await resolveUser(req)
+  if (!user) return unauthorized()
+  const seg = (await ctx.params).path
+  if (seg[0] !== 'accounts' || seg.length !== 1) return notFound()
+  return NextResponse.json({ providers: maskAccounts(readAccounts(req)) })
+}
+
+export async function POST(req: NextRequest, ctx: Ctx) {
+  const csrf = csrfRefusal(req)
+  if (csrf) return csrf
+  const user = await resolveUser(req)
+  if (!user) return unauthorized()
+
+  const seg = (await ctx.params).path
+  const id = seg[1]
+  if (seg[0] !== 'accounts' || !id) return notFound()
+  if (!isAiProvider(id)) return NextResponse.json({ error: 'Unknown provider.' }, { status: 400 })
+
+  const body = (await req.json().catch(() => null)) as { mode?: string; secret?: string; baseUrl?: string } | null
+  const mode = body?.mode as ConnectMode
+  const secret = typeof body?.secret === 'string' ? body.secret.trim() : ''
+  if (!MODES.includes(mode) || !secret) {
+    return NextResponse.json({ error: 'A link mode and a non-empty credential are required.' }, { status: 400 })
+  }
+
+  const cred: StoredCredential = {
+    mode,
+    secret, // sealed at rest by accountsCookie; never logged.
+    baseUrl: body?.baseUrl?.trim() || undefined,
+    connectedAt: new Date().toISOString(),
+  }
+  const next: AiAccountsStore = { ...readAccounts(req), [id]: cred }
+  return applyCookies(NextResponse.json({ providers: maskAccounts(next) }), [accountsCookie(next)])
+}
+
+export async function DELETE(req: NextRequest, ctx: Ctx) {
+  const csrf = csrfRefusal(req)
+  if (csrf) return csrf
+  const user = await resolveUser(req)
+  if (!user) return unauthorized()
+
+  const seg = (await ctx.params).path
+  const id = seg[1]
+  if (seg[0] !== 'accounts' || !id) return notFound()
+
+  const store = readAccounts(req)
+  delete store[id]
+  return applyCookies(NextResponse.json({ providers: maskAccounts(store) }), [accountsCookie(store)])
+}

app/v1/ai-accounts/routing-defaults/route.ts

@@ -0,0 +1,45 @@
+/**
+ * AI-accounts ORG routing defaults (READ-ONLY) — the server-driven default the
+ * admin set for the whole org, surfaced so the Routing tab can show
+ * "Organization default: On/Off" and fall back to it when the user has no explicit
+ * override.
+ *
+ *   GET v1/routing-defaults → cloud-api `{ status, data: { auto_routing_active,
+ *                             default_session_routing } }` (streamed through verbatim)
+ *
+ * This is a pure READ. It forwards to cloud-api's org-scoped
+ * `GET /v1/get-routing-defaults` with the caller's short-lived user bearer (org is
+ * the token owner — never browser-supplied), the EXACT same auth pattern as the
+ * `/v1` proxy. It deliberately does NOT touch the org-settings WRITE path: a
+ * customer surface has no clean authenticated path to mint the global-admin write,
+ * and forging one is a confused-deputy escalation (see the long note in
+ * `settings/route.ts`). Reads are fine; writes stay out.
+ *
+ * FAIL-SOFT: an older cloud-api with no such endpoint 404s, which streams straight
+ * through as a 404 the client treats as "no org default" — the tab then honors the
+ * cookie preference alone, exactly as before this endpoint existed.
+ *
+ * A static route, so it wins over the sibling `[...path]` catch-all for this exact
+ * path (same rule as `/v1/ai-accounts/usage` and `/v1/ai-accounts/settings`).
+ */
+import { type NextRequest } from 'next/server'
+
+import { forwardWithUserBearer } from '~/lib/server/bearer-proxy'
+
+export const runtime = 'nodejs'
+
+const trim = (s: string) => s.replace(/\/+$/, '')
+/** The unified cloud backend (hanzoai/cloud) — same in-cluster target as the `/v1` proxy. */
+const CLOUD_API_URL = trim(process.env.CLOUD_API_URL?.trim() || 'http://cloud-api.hanzo.svc.cluster.local:8000')
+
+const UPSTREAM_PATH = 'v1/get-routing-defaults'
+
+export async function GET(req: NextRequest) {
+  return forwardWithUserBearer(req, {
+    target: CLOUD_API_URL,
+    path: UPSTREAM_PATH,
+    allow: (p) => p === UPSTREAM_PATH,
+    errorShape: 'casibase',
+    unauthorizedMessage: 'Sign in to read organization routing defaults.',
+  })
+}

app/v1/ai-accounts/settings/route.ts

@@ -0,0 +1,63 @@
+/**
+ * AI-accounts NON-SECRET preferences — the org/user settings route.
+ *
+ *   GET v1/settings  → { settings: { routingEnabled } }
+ *   PUT v1/settings  → persist { routingEnabled } (sealed), returns the new settings
+ *
+ * The one preference today is `routingEnabled` — the org's `model: "auto"` smart-
+ * routing default that Hanzo surfaces read. Persisted with the SAME sealed-cookie
+ * store as the credential blob (`lib/server/ai-accounts`); there is no secret here,
+ * so the seal is for integrity, not confidentiality. Session-gated; the mutating
+ * verb is CSRF-guarded (auto-sent cookie → refuse cross-origin first).
+ *
+ * A static route, so it wins over the sibling `[...path]` catch-all for this exact
+ * path (same rule as `/v1/ai-accounts/usage`).
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { resolveUser } from '~/lib/server/identity'
+import { csrfRefusal } from '~/lib/server/bearer-proxy'
+import { applyCookies } from '~/lib/server/session'
+import { readSettings, settingsCookie, normalizeSettings } from '~/lib/server/ai-accounts'
+
+export const runtime = 'nodejs'
+
+const unauthorized = () => NextResponse.json({ error: 'Sign in to manage AI settings.' }, { status: 401 })
+
+export async function GET(req: NextRequest) {
+  const user = await resolveUser(req)
+  if (!user) return unauthorized()
+  return NextResponse.json({ settings: readSettings(req) })
+}
+
+export async function PUT(req: NextRequest) {
+  const csrf = csrfRefusal(req)
+  if (csrf) return csrf
+  const user = await resolveUser(req)
+  if (!user) return unauthorized()
+
+  const body = (await req.json().catch(() => null)) as { routingEnabled?: unknown } | null
+  if (typeof body?.routingEnabled !== 'boolean') {
+    return NextResponse.json({ error: 'routingEnabled (boolean) is required.' }, { status: 400 })
+  }
+  const settings = normalizeSettings(body)
+
+  // Cookie-only, deliberately. cloud-api now enforces per-org auto-routing via
+  // `OrgSettings.AutoRouting` (hanzoai/ai), toggled through
+  // `POST /v1/update-org-settings`. But that endpoint is `RequireGlobalAdmin`-gated
+  // (like every /v1/*-model-route admin route) and is NOT gateway-exposed — it is
+  // reachable only on the direct api.cloud.hanzo.ai ingress with a global-admin
+  // session. This Routing tab is a CUSTOMER surface: `resolveUser` here is a tenant
+  // user whose minted `hanzo-console` bearer is NOT global-admin, and the console's
+  // only admin proxy (`/admin/aggregate`) fail-closed-403s a non-global-admin. So
+  // there is NO clean authenticated path for a customer to write cloud-side
+  // OrgSettings, and forging one (a console service token asserting admin authority
+  // for a client-supplied org) would be a confused-deputy privilege escalation —
+  // refused per "do not bodge auth". The toggle therefore stays the sealed-cookie
+  // org preference the Hanzo surfaces read; API `model:"auto"` still honors the
+  // GLOBAL router flag. To make this write real, a global-admin must set the org's
+  // AutoRouting via the admin console (the OrgSettings CRUD), OR cloud-api must add a
+  // self-serve, org-scoped (owner-from-JWT, non-global-admin) auto-routing toggle the
+  // `/ai` proxy can reach — at which point wire that call in here.
+  return applyCookies(NextResponse.json({ settings }), [settingsCookie(settings)])
+}

app/v1/ai-accounts/usage/route.ts

@@ -0,0 +1,75 @@
+/**
+ * Unified AI-account usage — the Overview data plane.
+ *
+ * For each CONNECTED provider it runs the headless `@hanzo/usage` pipeline
+ * server-side over the Node host, decrypting the sealed credential into the
+ * usage-engine settings (`settingsFor`) only in memory for the fetch. It ALSO
+ * merges the org's own Hanzo lane — the REAL commerce usage ledger overview,
+ * fetched through the tested `/billing` proxy (the SAME source the Billing/Overview
+ * dashboards read), so `/ai-accounts` shows Hanzo + every linked provider side by side.
+ *
+ * A static route, so it wins over the sibling `[...path]` catch-all for this exact
+ * path. Session-gated; a secret is never logged or returned.
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+import { nodeHost } from '@hanzo/usage/node'
+import { runPipeline } from '@hanzo/usage'
+
+import { resolveUser } from '~/lib/server/identity'
+import { readAccounts, descriptorFor, settingsFor } from '~/lib/server/ai-accounts'
+import { forwardBilling } from '~/lib/server/billing-proxy'
+import { normalizeUsageRecords } from '~/lib/api/aimetrics'
+import { buildCloudUsageOverview } from '~/lib/api/usage-adapter'
+import type { CloudUsageOverview } from '~/lib/api/usage'
+import type { ProviderUsage } from '~/lib/api/ai-accounts'
+
+export const runtime = 'nodejs'
+
+const msgOf = (e: unknown): string => (e instanceof Error ? e.message : 'Fetch failed.')
+
+/** The org's own Hanzo Cloud lane: the real commerce ledger overview, null on any miss. */
+async function hanzoLane(req: NextRequest): Promise<CloudUsageOverview | null> {
+  try {
+    const res = await forwardBilling(req, ['usage'])
+    if (!res.ok) return null
+    const records = normalizeUsageRecords(await res.json())
+    return buildCloudUsageOverview(records, {
+      range: '30d',
+      topModels: 6,
+      activityType: 'all',
+      activityLimit: 8,
+      activityOffset: 0,
+      now: Date.now(),
+      product: null,
+    })
+  } catch {
+    return null
+  }
+}
+
+/** Run the usage pipeline for one connected provider. */
+async function providerUsage(id: string, cred: ReturnType<typeof readAccounts>[string]): Promise<ProviderUsage> {
+  const descriptor = descriptorFor(id)
+  if (!descriptor) return { id, ok: false, error: 'Unknown provider.' }
+  const { mode, settings } = settingsFor(cred)
+  try {
+    const outcome = await runPipeline(descriptor, { host: nodeHost, sourceMode: mode, settings })
+    if (outcome.result) return { id, ok: true, usage: outcome.result.usage }
+    return { id, ok: false, error: msgOf(outcome.error) }
+  } catch (e) {
+    return { id, ok: false, error: msgOf(e) }
+  }
+}
+
+export async function GET(req: NextRequest) {
+  const user = await resolveUser(req)
+  if (!user) return NextResponse.json({ error: 'Sign in to view usage.' }, { status: 401 })
+
+  const store = readAccounts(req)
+  const [providers, hanzo] = await Promise.all([
+    Promise.all(Object.entries(store).map(([id, cred]) => providerUsage(id, cred))),
+    hanzoLane(req),
+  ])
+
+  return NextResponse.json({ providers, hanzo })
+}

app/v1/billing/[...path]/route.ts

@@ -0,0 +1,38 @@
+/**
+ * Per-tenant billing DATA proxy → commerce. Thin route wrapper: the trust boundary,
+ * tenant scoping, CSRF guard, and binary (PDF) passthrough all live in the tested
+ * `~/lib/server/billing-proxy` (`forwardBilling`) — this file only maps the HTTP verbs.
+ *
+ * Rooted at `/v1/billing/` (the /v1-first law) — this handler lives at
+ * `app/v1/billing/[...path]`, MORE SPECIFIC than the cloud BFF catch-all
+ * `app/v1/[...path]`, so `/v1/billing/*` (data) resolves here while `/v1/<other>/*`
+ * falls through to the catch-all. And `/v1/billing/*` (data) never collides with the
+ * billing UI tab URLs (`/billing/reports`, `/billing/invoices`, …) — they differ at
+ * the FIRST path segment, so the tab slugs fall through to the SPA.
+ *
+ * Verbs: GET (reads: balance/usage/invoices/subscriptions/payment-methods, and the
+ * per-invoice PDF), POST (writes: top-up, spend-alerts, save-a-method, cancel/
+ * reactivate a subscription), PATCH (edit a budget/spend-alert), DELETE (detach a
+ * saved payment method, remove a budget). Each is scoped to the caller's OWN org
+ * server-side; a mutating verb is CSRF-guarded (`forwardBilling`).
+ */
+import { type NextRequest } from 'next/server'
+
+import { forwardBilling } from '~/lib/server/billing-proxy'
+
+export const runtime = 'nodejs'
+
+type Ctx = { params: Promise<{ path: string[] }> }
+
+export async function GET(req: NextRequest, ctx: Ctx) {
+  return forwardBilling(req, (await ctx.params).path)
+}
+export async function POST(req: NextRequest, ctx: Ctx) {
+  return forwardBilling(req, (await ctx.params).path)
+}
+export async function PATCH(req: NextRequest, ctx: Ctx) {
+  return forwardBilling(req, (await ctx.params).path)
+}
+export async function DELETE(req: NextRequest, ctx: Ctx) {
+  return forwardBilling(req, (await ctx.params).path)
+}

app/v1/commerce/[...path]/route.ts

@@ -0,0 +1,66 @@
+/**
+ * Same-origin user-bearer proxy to commerce (`commerce.hanzo.svc`) — the store /
+ * merchant admin surface (products / orders / customers / collections / variants /
+ * discounts / store settings). The browser calls this OWN-origin route
+ * (`/v1/commerce/...`) with just its session cookie; `forwardWithUserBearer` resolves
+ * the user, mints a short-lived user-bound IAM token, and forwards to commerce with
+ * that Bearer. Commerce's EdgeAuth validates the JWT and resolves the org from its
+ * `owner` claim (`middleware.TokenRequired` fast-paths IAM auth), so the store is
+ * org-scoped SERVER-SIDE — a merchant only ever sees their OWN org's catalog/orders/
+ * customers. No token reaches the browser, and the org is never browser-supplied.
+ *
+ * This is the TENANT store surface (any signed-in org member acts on their own org's
+ * store), so it is user-scoped (`resolveUser`), NOT the `/paas` god-mode service-token
+ * path. It is also DISTINCT from the `/billing` proxy: money (balance/usage/invoices/
+ * Square) stays on `/billing` with its own per-tenant subject scoping — this proxy
+ * carries only the store catalog/orders/customers. Least privilege on the path:
+ * `allowCommerceSurface` admits only the merchant REST heads (product/order/user/…),
+ * so `/v1/billing`, `/v1/checkout`, `/_/commerce/tenants` are NOT reachable here.
+ */
+import { type NextRequest } from 'next/server'
+
+import { forwardWithUserBearer } from '~/lib/server/bearer-proxy'
+import { allowCommerceSurface } from '~/lib/server/proxy-allow'
+
+export const runtime = 'nodejs'
+
+const trim = (s: string) => s.replace(/\/+$/, '')
+/** Commerce API (commerce.hanzo.ai). In-cluster ClusterIP on :8001; the CR already
+ *  wires `COMMERCE_URL` (public egress is CF-gated). Override per-deploy with COMMERCE_URL. */
+const COMMERCE_URL = trim(process.env.COMMERCE_URL ?? 'http://commerce.hanzo.svc:8001')
+
+type Ctx = { params: Promise<{ path: string[] }> }
+
+function handle(req: NextRequest, ctx: Ctx) {
+  return (async () => {
+    // This handler lives under `app/v1/commerce/[...path]`, so the catch-all captures
+    // ONLY the sub-path after `/v1/commerce/` (e.g. `product`). Commerce serves its REST
+    // models under `/v1/<model>`, so re-root the upstream path at `v1/` — the same path
+    // `allowCommerceSurface` (v1Head) and `forwardWithUserBearer` see (`v1/product`).
+    const path = `v1/${(await ctx.params).path.join('/')}`
+    return forwardWithUserBearer(req, {
+      target: COMMERCE_URL,
+      path,
+      allow: allowCommerceSurface,
+      // Org is authoritative (Bearer owner). Do NOT forward browser X-Project-Id/
+      // X-Environment — the store is org-keyed and commerce re-scopes on the token.
+      unauthorizedMessage: 'Sign in to manage your store.',
+    })
+  })()
+}
+
+export async function GET(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+export async function POST(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+export async function PUT(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+export async function PATCH(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+export async function DELETE(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}

app/v1/economy/[...path]/route.ts

@@ -0,0 +1,177 @@
+/**
+ * Per-user proxy to the Lux DEX indexer's `dex` subgraph — the Lux Economy /
+ * Markets board's ONE transport. The browser calls console2's OWN origin
+ * (`/v1/economy/overview`) with just the session cookie; this handler resolves the
+ * caller, resolves the BRAND from the request host, and POSTs a FIXED, allowlisted
+ * GraphQL query to the in-cluster graphd per brand-scoped network, returning the
+ * NORMALIZED markets + fills + day-data. No graph host or GraphQL query ever reaches
+ * the browser, and the browser can never compose one.
+ *
+ * Security (mirrors app/nodes/[...path]/route.ts):
+ *  - Session-gated: an unauthenticated caller gets 401.
+ *  - Org/brand-aware: the network set is scoped by `nodeNetworksForBrand(brand)`,
+ *    brand resolved from the host — cloud.lux.cloud sees only Lux networks.
+ *  - Least privilege: the ONLY path is `overview`, and the ONLY GraphQL query is
+ *    the fixed markets+fills+dayData read below — this is not a general GraphQL
+ *    tunnel (no client-supplied query, no mutations, no arbitrary entity).
+ *
+ * Honest by construction: an unset/unreachable graph host yields a `not-reporting`
+ * snapshot with the real error — never fabricated markets. The native DEX is a CLOB,
+ * so the query asks only for the fields the `dex` subgraph really exposes.
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { brandFromHost } from '~/config'
+import { resolveUser } from '~/lib/server/identity'
+import { nodeNetworksForBrand, type NodeNetworkId } from '~/lib/products/brand-scope'
+import { fetchWithTimeout } from '~/lib/server/fetch-timeout'
+import {
+  normalizeMarkets,
+  normalizeTrades,
+  normalizeDayData,
+  type EconomySnapshot,
+  type RawMarket,
+  type RawFill,
+  type RawMarketDayData,
+} from '~/lib/api/economy'
+
+export const runtime = 'nodejs'
+
+const trim = (s: string) => s.replace(/\/+$/, '')
+
+/**
+ * The `dex` subgraph GraphQL endpoint per network — the ONLY endpoint this proxy
+ * will query. graphd serves the DEX subgraph at `<prefix>/graphql` (default prefix
+ * `/v1/graph/cchain/dex`); each is overridable per-deploy. An unset/unreachable host
+ * yields an honest `not-reporting` snapshot — never fake markets. (Cross-cluster
+ * reach depends on network policy; when unreachable the board shows honest empty.)
+ */
+const GRAPH_HOSTS: Partial<Record<NodeNetworkId, string>> = {
+  'lux-mainnet': trim(process.env.DEX_GRAPHQL_MAINNET ?? 'http://graph.lux-mainnet.svc:8080/v1/graph/cchain/dex/graphql'),
+  'lux-testnet': trim(process.env.DEX_GRAPHQL_TESTNET ?? 'http://graph.lux-testnet.svc:8080/v1/graph/cchain/dex/graphql'),
+  'lux-devnet': trim(process.env.DEX_GRAPHQL_DEVNET ?? 'http://graph.lux-devnet.svc:8080/v1/graph/cchain/dex/graphql'),
+}
+
+/** Per-query timeout (ms). */
+const TIMEOUT_MS = Number(process.env.ECONOMY_TIMEOUT_MS ?? 8000)
+
+/**
+ * The ONE fixed GraphQL query — markets (book summary + accrued 24h aggregates),
+ * recent fills (the trade feed), and day-data (the historical series, empty until a
+ * MarketDayData producer emits). Only fields the `dex` subgraph really exposes.
+ */
+const QUERY = `query LuxEconomy {
+  markets(first: 100) {
+    id
+    symbol
+    baseToken
+    quoteToken
+    assetsBound
+    openOrders
+    remaining
+    bestBid
+    bestAsk
+    volume24h
+    tradeCount
+    lastPrice
+    feeTier
+  }
+  fills(first: 40) {
+    id
+    symbol
+    price
+    size
+    side
+    timestamp
+  }
+  marketDayDatas(first: 90) {
+    id
+    date
+    symbol
+    volumeUSD
+    feesUSD
+    tvlUSD
+  }
+}`
+
+interface GraphResp {
+  data?: { markets?: RawMarket[]; fills?: RawFill[]; marketDayDatas?: RawMarketDayData[] }
+  errors?: { message?: string }[]
+}
+
+/** Query ONE network's `dex` subgraph → normalized snapshot. Honest not-reporting on failure. */
+async function probe(net: NodeNetworkId): Promise<EconomySnapshot> {
+  const base: EconomySnapshot = { network: net, status: 'not-reporting', markets: [], trades: [], dayData: [] }
+  const host = GRAPH_HOSTS[net]
+  if (!host) {
+    base.error = 'no DEX GraphQL host configured for this network'
+    return base
+  }
+  try {
+    const res = await fetchWithTimeout(
+      host,
+      {
+        method: 'POST',
+        headers: { 'content-type': 'application/json', accept: 'application/json' },
+        body: JSON.stringify({ query: QUERY }),
+        cache: 'no-store',
+      },
+      { timeoutMs: TIMEOUT_MS },
+    )
+    if (!res.ok) {
+      base.error = `graphql ${res.status}`
+      return base
+    }
+    const json = (await res.json()) as GraphResp
+    if (json?.errors?.length) {
+      base.error = json.errors[0]?.message ?? 'graphql error'
+      return base
+    }
+    const d = json?.data ?? {}
+    return {
+      network: net,
+      status: 'reporting',
+      markets: normalizeMarkets(d.markets),
+      trades: normalizeTrades(d.fills),
+      dayData: normalizeDayData(d.marketDayDatas),
+    }
+  } catch (e) {
+    base.error = e instanceof Error ? e.message : String(e)
+    return base
+  }
+}
+
+async function forward(req: NextRequest, path: string[]): Promise<NextResponse> {
+  // This handler lives at `app/v1/economy/[...path]`, so the catch-all captures the
+  // sub-path after `/v1/economy/`.
+  if (path.join('/') !== 'overview') {
+    return NextResponse.json({ error: 'not found' }, { status: 404 })
+  }
+
+  const user = await resolveUser(req)
+  if (!user) {
+    return NextResponse.json({ error: 'Sign in to view the market economy.' }, { status: 401 })
+  }
+
+  const brand = brandFromHost(req.headers.get('host'))
+  let networks = nodeNetworksForBrand(brand)
+  const only = req.nextUrl.searchParams.get('network') as NodeNetworkId | null
+  if (only) networks = networks.filter((n) => n === only)
+
+  // Query the brand's networks and return the FIRST that reports markets (the live
+  // economy), else the first reporting network, else the first (honest not-reporting).
+  const snaps = await Promise.all(networks.map(probe))
+  const withMarkets = snaps.find((s) => s.status === 'reporting' && s.markets.length > 0)
+  const reporting = snaps.find((s) => s.status === 'reporting')
+  const chosen = withMarkets ?? reporting ?? snaps[0]
+  if (!chosen) {
+    return NextResponse.json({ network: null, status: 'not-reporting', markets: [], trades: [], dayData: [], error: 'no network in scope' })
+  }
+  return NextResponse.json(chosen)
+}
+
+type Ctx = { params: Promise<{ path: string[] }> }
+
+export async function GET(req: NextRequest, ctx: Ctx) {
+  return forward(req, (await ctx.params).path)
+}

app/v1/nodes/[...path]/route.ts

@@ -0,0 +1,168 @@
+/**
+ * Per-user proxy to the REAL luxd node RPC — the Nodes module's ONE transport.
+ * The browser calls console2's OWN origin (`/v1/nodes/inventory`) with just the
+ * session cookie; this handler resolves the caller, resolves the BRAND from the
+ * request host, and fetches the allowlisted luxd RPC methods server-side for each
+ * network that brand may see, returning NORMALIZED per-node rows. No RPC host or
+ * method ever reaches the browser, and the browser can never choose either.
+ *
+ * Security (mirrors app/bootnode/[...path]/route.ts):
+ *  - Session-gated: an unauthenticated caller gets 401 (the RPC data is public,
+ *    but the console surface is authenticated, same as every other module).
+ *  - Org/brand-aware: the network set is scoped by `nodeNetworksForBrand(brand)`,
+ *    brand resolved from the host — so cloud.lux.cloud sees only Lux networks,
+ *    console.hanzo.ai (hanzo) sees all.
+ *  - Least privilege: the ONLY path is `inventory`, and the ONLY luxd methods
+ *    called are the four read methods below — this is not a general RPC tunnel.
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { brandFromHost } from '~/config'
+import { resolveUser } from '~/lib/server/identity'
+import { nodeNetworksForBrand, type NodeNetworkId } from '~/lib/products/brand-scope'
+import {
+  NODE_NETWORK_META,
+  combineInventory,
+  normalizeChains,
+  parseHeight,
+  type NetworkInventory,
+  type RawBlockchain,
+  type RawPeer,
+  type RawValidator,
+} from '~/lib/api/nodes'
+
+export const runtime = 'nodejs'
+
+const trim = (s: string) => s.replace(/\/+$/, '')
+
+/**
+ * Public luxd RPC host per network — the ONLY endpoints this proxy will call.
+ * These are PUBLIC RPC hosts (not secrets); each is overridable per-deploy so a
+ * network can be repointed or disabled without a code change. A host that is
+ * unset/unreachable yields an honest `not-reporting` network — never fake rows.
+ */
+const HOSTS: Record<NodeNetworkId, string> = {
+  'lux-mainnet': trim(process.env.LUX_MAINNET_RPC ?? 'https://api.lux.network'),
+  'lux-testnet': trim(process.env.LUX_TESTNET_RPC ?? 'https://api.lux-test.network'),
+  'lux-devnet': trim(process.env.LUX_DEVNET_RPC ?? 'https://api.lux-dev.network'),
+  'pars-mainnet': trim(process.env.PARS_MAINNET_RPC ?? 'https://api.pars.network'),
+  // Zoo has no confirmed public primary-network host yet; the default is the
+  // conventional host (api.<brand>.network) and reports honestly when unreachable.
+  'zoo-mainnet': trim(process.env.ZOO_MAINNET_RPC ?? 'https://api.zoo.network'),
+}
+
+/** Per-network probe timeout (ms). */
+const TIMEOUT_MS = Number(process.env.NODES_RPC_TIMEOUT_MS ?? 8000)
+
+/** A single allowlisted luxd JSON-RPC call. `path` and `method` are fixed here. */
+async function rpc<T>(
+  host: string,
+  path: '/ext/bc/P' | '/ext/info',
+  method: string,
+  signal: AbortSignal,
+): Promise<T> {
+  const res = await fetch(`${host}${path}`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json', accept: 'application/json' },
+    body: JSON.stringify({ jsonrpc: '2.0', id: 1, method }),
+    cache: 'no-store',
+    signal,
+  })
+  if (!res.ok) throw new Error(`${method} ${res.status}`)
+  const json = (await res.json()) as { result?: T; error?: { message?: string } }
+  if (json?.error) throw new Error(json.error.message ?? `${method} error`)
+  return json.result as T
+}
+
+/** Probe ONE network: validators + peers + version + height, normalized. */
+async function probe(net: NodeNetworkId): Promise<NetworkInventory> {
+  const meta = NODE_NETWORK_META[net]
+  const host = HOSTS[net]
+  const base: NetworkInventory = {
+    id: net,
+    chain: meta.chain,
+    env: meta.env,
+    label: meta.label,
+    status: 'not-reporting',
+    validators: 0,
+    peers: 0,
+    nodes: [],
+    chains: [],
+  }
+
+  const ctrl = new AbortController()
+  const timer = setTimeout(() => ctrl.abort(), TIMEOUT_MS)
+  try {
+    const [valR, peerR, verR, hgtR, chainR] = await Promise.allSettled([
+      rpc<{ validators?: RawValidator[] }>(host, '/ext/bc/P', 'platform.getCurrentValidators', ctrl.signal),
+      rpc<{ numPeers?: string; peers?: RawPeer[] }>(host, '/ext/info', 'info.peers', ctrl.signal),
+      rpc<{ version?: string }>(host, '/ext/info', 'info.getNodeVersion', ctrl.signal),
+      rpc<{ height?: string }>(host, '/ext/bc/P', 'platform.getHeight', ctrl.signal),
+      rpc<{ blockchains?: RawBlockchain[] }>(host, '/ext/bc/P', 'platform.getBlockchains', ctrl.signal),
+    ])
+
+    const reachable =
+      valR.status === 'fulfilled' || peerR.status === 'fulfilled' || chainR.status === 'fulfilled'
+    if (!reachable) {
+      const reason =
+        valR.status === 'rejected'
+          ? valR.reason
+          : peerR.status === 'rejected'
+            ? peerR.reason
+            : chainR.status === 'rejected'
+              ? chainR.reason
+              : null
+      base.error = reason instanceof Error ? reason.message : 'unreachable'
+      return base
+    }
+
+    const validators = valR.status === 'fulfilled' ? valR.value?.validators : undefined
+    const peers = peerR.status === 'fulfilled' ? peerR.value?.peers : undefined
+    const nodes = combineInventory(validators, peers, net)
+
+    base.status = 'reporting'
+    base.nodes = nodes
+    base.validators = nodes.filter((n) => n.role === 'validator').length
+    base.peers = nodes.filter((n) => n.role === 'peer').length
+    if (verR.status === 'fulfilled') base.version = verR.value?.version
+    if (hgtR.status === 'fulfilled') base.height = parseHeight(hgtR.value?.height)
+    // Chains are best-effort: a network can report validators/peers yet not answer
+    // getBlockchains — then the chains list is honestly empty (no fabricated chains).
+    if (chainR.status === 'fulfilled') base.chains = normalizeChains(chainR.value?.blockchains)
+    return base
+  } catch (e) {
+    base.error = e instanceof Error ? e.message : String(e)
+    return base
+  } finally {
+    clearTimeout(timer)
+  }
+}
+
+async function forward(req: NextRequest, path: string[]): Promise<NextResponse> {
+  // ONE endpoint — the inventory. No arbitrary RPC pass-through. This handler lives at
+  // `app/v1/nodes/[...path]`, so the catch-all captures the sub-path after `/v1/nodes/`.
+  if (path.join('/') !== 'inventory') {
+    return NextResponse.json({ error: 'not found' }, { status: 404 })
+  }
+
+  const user = await resolveUser(req)
+  if (!user) {
+    return NextResponse.json({ error: 'Sign in to view node infrastructure.' }, { status: 401 })
+  }
+
+  const brand = brandFromHost(req.headers.get('host'))
+  let networks = nodeNetworksForBrand(brand)
+
+  // Optional single-network scope, still gated by the brand's allowed set.
+  const only = req.nextUrl.searchParams.get('network') as NodeNetworkId | null
+  if (only) networks = networks.filter((n) => n === only)
+
+  const inventory = await Promise.all(networks.map(probe))
+  return NextResponse.json({ brand, networks: inventory })
+}
+
+type Ctx = { params: Promise<{ path: string[] }> }
+
+export async function GET(req: NextRequest, ctx: Ctx) {
+  return forward(req, (await ctx.params).path)
+}

app/v1/superbase/[...path]/route.ts

@@ -0,0 +1,65 @@
+/**
+ * Per-user proxy to the Hanzo Base control plane (base.hanzo.ai) — the embedded
+ * Base module's ONE transport. The browser calls console2's OWN origin
+ * (`/v1/superbase/...`) with just the session cookie; `forwardWithUserBearer`
+ * resolves the user, mints a short-lived user-bound IAM token (shared per-user
+ * cache), and forwards to base.hanzo.ai with that token. No token ever reaches the
+ * browser, and the SAME @hanzo/superbase-dashboard screens render here and standalone.
+ *
+ * NOT the PaaS pattern: PaaS forwards a god-mode SERVICE token and is gated to brand
+ * admins. Base authorizes PER USER itself — the `tenants` collection's
+ * `ListRule = "owner_iam_user = @request.auth.id"` and admin-only mutations are
+ * enforced by Base against the forwarded user identity. So here we forward the
+ * USER's own minted bearer (least privilege, tenant-scoped by Base), and the only
+ * gate is "must be signed in" (resolveUser → 401). A non-admin simply sees their own
+ * tenants and gets Base's 403 on a mutation — honest, not faked.
+ *
+ * Least privilege on the path too: only the Base DATA PLANE is proxied — the
+ * collection schemas (read) and any collection's records (list/get/create/update/
+ * delete), via `allowBaseSurface`. Base's admin/settings/backup/log surfaces 404,
+ * so this stays a data-plane proxy, not a general Base tunnel. Base still authorizes
+ * every read/write per-user and per-collection itself, so a non-admin sees only what
+ * a collection's rules permit and gets Base's own honest 403 on a denied mutation.
+ * (The tenants manager rides this same proxy — records/tenants is one such path.)
+ */
+import { type NextRequest } from 'next/server'
+
+import { forwardWithUserBearer } from '~/lib/server/bearer-proxy'
+import { allowBaseSurface } from '~/lib/server/proxy-allow'
+
+export const runtime = 'nodejs'
+
+const trim = (s: string) => s.replace(/\/+$/, '')
+/** The Base control plane the proxied calls are forwarded to. */
+const BASE_URL = trim(process.env.BASE_DASHBOARD_URL ?? 'https://base.hanzo.ai')
+
+type Ctx = { params: Promise<{ path: string[] }> }
+
+function handle(req: NextRequest, ctx: Ctx) {
+  return (async () => {
+    // This handler lives under `app/v1/superbase/[...path]`, so the catch-all captures
+    // ONLY the sub-path after `/v1/superbase/` (e.g. `collections/...`). Base serves its
+    // data plane under `/v1/collections`, so re-root the upstream path at `v1/` — the same
+    // path `allowBaseSurface` and `forwardWithUserBearer` see (`v1/collections/...`).
+    const path = `v1/${(await ctx.params).path.join('/')}`
+    return forwardWithUserBearer(req, {
+      target: BASE_URL,
+      path,
+      allow: allowBaseSurface,
+      unauthorizedMessage: 'Sign in to manage Base records.',
+    })
+  })()
+}
+
+export async function GET(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+export async function POST(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+export async function PATCH(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+export async function DELETE(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}

app/v1/trading/[...path]/route.ts

@@ -0,0 +1,185 @@
+/**
+ * Per-user proxy to the LIVE trading-bot state — the Trading module's ONE
+ * live-data transport (the DEPLOYED FLEET is read separately via the `/v1`
+ * PaaS proxy). The browser calls console2's OWN origin (`/v1/trading/*`) with just
+ * the session cookie; this handler resolves the caller, resolves the BRAND from the
+ * request host, and reads the allowlisted upstreams server-side, per network that
+ * brand may see. No cluster host or RPC method ever reaches the browser, and the
+ * browser can never choose either.
+ *
+ * Security (mirrors app/nodes/[...path]/route.ts):
+ *  - Session-gated: an unauthenticated caller gets 401.
+ *  - Org/brand-aware: the network set is scoped by `nodeNetworksForBrand(brand)`,
+ *    brand resolved from the host — cloud.lux.cloud sees only Lux networks.
+ *  - Least privilege: the ONLY paths are `metrics` and `orderbook`; the ONLY
+ *    upstreams are the maker's :2112 /metrics scrape and the DEX read endpoint —
+ *    this is not a general RPC/HTTP tunnel.
+ *
+ * Two upstreams, one concern each:
+ *  1. METRICS — GETs the in-cluster maker's Prometheus `:2112/metrics` for a
+ *     network and parses it to `MakerStatus`. The maker Service host per network is
+ *     env-configurable; unset/unreachable → an honest `not-reporting` status.
+ *  2. ORDERBOOK — reads the DEX CLOB `dex_get_orders?market=<poolHex>` for a market
+ *     on a network. The DEX read host is env-configurable; the private D-Chain is
+ *     not publicly exposed, so an unreachable venue → an honest `not-reporting` book
+ *     (never fabricated bids/asks).
+ */
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { brandFromHost } from '~/config'
+import { resolveUser } from '~/lib/server/identity'
+import { nodeNetworksForBrand, type NodeNetworkId } from '~/lib/products/brand-scope'
+import { fetchWithTimeout } from '~/lib/server/fetch-timeout'
+import {
+  parseMakerMetrics,
+  normalizeBook,
+  type MakerStatus,
+  type OrderBook,
+  type RawBookOrder,
+} from '~/lib/api/trading'
+
+export const runtime = 'nodejs'
+
+const trim = (s: string) => s.replace(/\/+$/, '')
+
+/**
+ * The maker's Prometheus metrics host per network — the ONLY metrics endpoint this
+ * proxy will scrape. These point at the in-cluster maker Service (`maker-coherence`,
+ * port 2112) per luxd network namespace. Each is overridable per-deploy; an
+ * unset/unreachable host yields an honest `not-reporting` status — never fake rows.
+ * (Cross-cluster reach depends on network policy; when unreachable the console shows
+ * the honest not-reporting state, exactly like the Nodes surface.)
+ */
+const MAKER_METRICS_HOSTS: Partial<Record<NodeNetworkId, string>> = {
+  'lux-mainnet': trim(process.env.MAKER_METRICS_MAINNET ?? 'http://maker-coherence.lux-mainnet.svc:2112'),
+  'lux-testnet': trim(process.env.MAKER_METRICS_TESTNET ?? 'http://maker-coherence.lux-testnet.svc:2112'),
+  'lux-devnet': trim(process.env.MAKER_METRICS_DEVNET ?? 'http://maker-coherence.lux-devnet.svc:2112'),
+}
+
+/**
+ * The DEX read host per network — the ONLY DEX endpoint this proxy will query for
+ * the order book (`<host>/dex/dex_get_orders?market=<poolHex>`). The native D-Chain
+ * CLOB is not publicly exposed, so these default to the in-cluster luxd router;
+ * unreachable → an honest `not-reporting` book.
+ */
+const DEX_READ_HOSTS: Partial<Record<NodeNetworkId, string>> = {
+  'lux-mainnet': trim(process.env.DEX_READ_MAINNET ?? 'http://luxd-0.luxd-headless.lux-mainnet.svc:9630/v1/bc/D'),
+  'lux-testnet': trim(process.env.DEX_READ_TESTNET ?? 'http://luxd-0.luxd-headless.lux-testnet.svc:9640/v1/bc/D'),
+  'lux-devnet': trim(process.env.DEX_READ_DEVNET ?? 'http://luxd-0.luxd-headless.lux-devnet.svc:9650/v1/bc/D'),
+}
+
+/** Per-upstream probe timeout (ms). */
+const TIMEOUT_MS = Number(process.env.TRADING_TIMEOUT_MS ?? 8000)
+
+/** Scrape ONE network's maker metrics → MakerStatus. Honest not-reporting on failure. */
+async function makerStatus(net: NodeNetworkId): Promise<MakerStatus> {
+  const host = MAKER_METRICS_HOSTS[net]
+  const base: MakerStatus = { status: 'not-reporting', symbols: [] }
+  if (!host) {
+    base.error = 'no metrics host configured for this network'
+    return base
+  }
+  try {
+    const res = await fetchWithTimeout(
+      `${host}/metrics`,
+      { headers: { accept: 'text/plain' }, cache: 'no-store' },
+      { timeoutMs: TIMEOUT_MS },
+    )
+    if (!res.ok) {
+      base.error = `metrics ${res.status}`
+      return base
+    }
+    const text = await res.text()
+    const parsed = parseMakerMetrics(text)
+    return { status: 'reporting', ...parsed }
+  } catch (e) {
+    base.error = e instanceof Error ? e.message : String(e)
+    return base
+  }
+}
+
+/** A single allowlisted DEX read call. `method` is fixed here (dex_get_orders). */
+async function dexGetOrders(host: string, poolHex: string): Promise<RawBookOrder[]> {
+  const url = `${host}/dex/dex_get_orders?market=${encodeURIComponent(poolHex)}`
+  const res = await fetchWithTimeout(url, { headers: { accept: 'application/json' }, cache: 'no-store' }, { timeoutMs: TIMEOUT_MS })
+  if (!res.ok) throw new Error(`dex_get_orders ${res.status}`)
+  const json = (await res.json()) as { orders?: RawBookOrder[] }
+  return Array.isArray(json?.orders) ? json.orders : []
+}
+
+/**
+ * Read ONE market's order book. A `poolId` (32-byte hex) addresses the book
+ * directly; a `symbol`/`base`/`quote` are echoed for display but the book is only
+ * readable by poolId (the console does not compute keccak client- or server-side to
+ * avoid an eth-crypto dep — the caller supplies the poolId, or the book is honestly
+ * not-reporting). Honest not-reporting when the DEX is unreachable.
+ */
+async function orderbook(net: NodeNetworkId, params: URLSearchParams): Promise<OrderBook> {
+  const symbol = params.get('symbol') ?? undefined
+  const poolId = params.get('poolId') ?? undefined
+  const base: OrderBook = { network: net, symbol, poolId, status: 'not-reporting', orders: [] }
+
+  const host = DEX_READ_HOSTS[net]
+  if (!host) {
+    base.error = 'no DEX read host configured for this network'
+    return base
+  }
+  if (!poolId) {
+    // No poolId → the book can't be addressed. Honest, never fabricated.
+    base.error = 'order book is read by poolId; none supplied for this market'
+    return base
+  }
+  try {
+    const raw = await dexGetOrders(host, poolId)
+    return { ...base, status: 'reporting', orders: normalizeBook(raw), error: undefined }
+  } catch (e) {
+    base.error = e instanceof Error ? e.message : String(e)
+    return base
+  }
+}
+
+/** Resolve the brand's networks, optionally narrowed to `?network=` (still gated). */
+function scopedNetworks(req: NextRequest): NodeNetworkId[] {
+  const brand = brandFromHost(req.headers.get('host'))
+  let networks = nodeNetworksForBrand(brand)
+  const only = req.nextUrl.searchParams.get('network') as NodeNetworkId | null
+  if (only) networks = networks.filter((n) => n === only)
+  return networks
+}
+
+async function forward(req: NextRequest, path: string[]): Promise<NextResponse> {
+  const route = path.join('/')
+
+  const user = await resolveUser(req)
+  if (!user) {
+    return NextResponse.json({ error: 'Sign in to view trading bots.' }, { status: 401 })
+  }
+
+  if (route === 'metrics') {
+    const networks = scopedNetworks(req)
+    // A single-network scope is the common case (per-bot status); return the first
+    // (the network the caller asked for), or the brand's first if none specified.
+    const net = networks[0]
+    if (!net) return NextResponse.json({ status: 'not-reporting', symbols: [], error: 'no network in scope' })
+    const status = await makerStatus(net)
+    return NextResponse.json(status)
+  }
+
+  if (route === 'orderbook') {
+    const networks = scopedNetworks(req)
+    const net = networks[0]
+    if (!net) {
+      return NextResponse.json({ network: null, status: 'not-reporting', orders: [], error: 'no network in scope' })
+    }
+    const book = await orderbook(net, req.nextUrl.searchParams)
+    return NextResponse.json(book)
+  }
+
+  return NextResponse.json({ error: 'not found' }, { status: 404 })
+}
+
+type Ctx = { params: Promise<{ path: string[] }> }
+
+export async function GET(req: NextRequest, ctx: Ctx) {
+  return forward(req, (await ctx.params).path)
+}

app/v1/vm/[...path]/route.ts

@@ -0,0 +1,67 @@
+/**
+ * Same-origin user-bearer proxy to Visor (vm.hanzo.ai) — the compute control plane
+ * (regions / gpus / machines / instances). The browser calls this OWN-origin route
+ * (`/v1/vm/...`) with just its session cookie; `forwardWithUserBearer` resolves the
+ * user, mints a short-lived user-bound IAM token, and forwards to visor with that
+ * Bearer. Visor mints org + user from the JWT claims, so compute is org-scoped
+ * server-side — a caller only ever sees their own org's machines. No token reaches
+ * the browser.
+ *
+ * NOT the `/paas` pattern: `/paas` forwards a god-mode control-plane SERVICE token
+ * and is gated to brand admins. Compute is a TENANT action (any signed-in org user
+ * may list/manage their own machines), so this is user-scoped (resolveUser), and
+ * visor itself authorizes the forwarded user bearer.
+ *
+ * Least privilege on the path: only the visor `v1/*` surface is reachable
+ * (`allowVisorSurface`); anything else 404s.
+ */
+import { type NextRequest } from 'next/server'
+
+import { forwardWithUserBearer } from '~/lib/server/bearer-proxy'
+import { allowVisorSurface } from '~/lib/server/proxy-allow'
+
+export const runtime = 'nodejs'
+
+const trim = (s: string) => s.replace(/\/+$/, '')
+/** Visor (vm.hanzo.ai). In-cluster ClusterIP on :19000 (its Service has NO :80) — public
+ *  egress is CF-403'd. Override with VISOR_URL (the CR sets visor.hanzo.svc:19000).
+ *  `|| default` (not `??`): if the env is reconciled to an EMPTY string (observed drift on
+ *  the live pod), `??` would keep the blank and every machines/GPUs call would fail —
+ *  `|| default` treats blank/whitespace as unset so visor ALWAYS resolves. */
+const VISOR_URL = trim(process.env.VISOR_URL?.trim() || 'http://visor.hanzo.svc:19000')
+
+type Ctx = { params: Promise<{ path: string[] }> }
+
+function handle(req: NextRequest, ctx: Ctx) {
+  return (async () => {
+    // This handler lives under `app/v1/vm/[...path]`, so the catch-all captures ONLY the
+    // sub-path after `/v1/vm/` (e.g. `regions`). Visor serves its compute surface under
+    // `/v1/<x>`, so re-root the upstream path at `v1/` — the same path `allowVisorSurface`
+    // and `forwardWithUserBearer` see (`v1/regions`).
+    const path = `v1/${(await ctx.params).path.join('/')}`
+    return forwardWithUserBearer(req, {
+      target: VISOR_URL,
+      path,
+      allow: allowVisorSurface,
+      // Org is authoritative (Bearer owner). Don't forward browser X-Project-Id/
+      // X-Environment (unvalidated sub-scopes) — RED MEDIUM.
+      unauthorizedMessage: 'Sign in to manage compute.',
+    })
+  })()
+}
+
+export async function GET(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+export async function POST(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+export async function PUT(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+export async function PATCH(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}
+export async function DELETE(req: NextRequest, ctx: Ctx) {
+  return handle(req, ctx)
+}

e2e/ai-economics.spec.ts

@@ -0,0 +1,199 @@
+/**
+ * e2e: admin.hanzo.ai AI Economics board (feat/ai-economics).
+ *
+ * TWO layers, mirroring provider-billing.spec:
+ *   (A) FIXTURE render — runs against a LOCAL server (BASE_URL=http://localhost:4000)
+ *       with the network mocked: `/auth/session` → a global admin so the admin shell
+ *       mounts, and the reads (`/v1/admin/usage/funding`, `/v1/admin/finance`,
+ *       `/v1/admin/providers/credit`, `/v1/evals/{datasets,runs,evaluators}`) → a
+ *       fixture where fable-5 is exactly 75% of requests and gross margin is 62%.
+ *       Proves: the page renders, the model-mix table shows the mocked rows WITH the
+ *       request-share %, the margin card shows the mocked grossMarginPct, and the
+ *       honest "no traffic is harvested" training-data card renders. Desktop + mobile.
+ *   (B) LIVE — the fail-closed gate proof (`/v1/admin/*` → >=401 unauthenticated)
+ *       against the same origin; needs no credentials, always runs.
+ *
+ * Run fixture: BASE_URL=http://localhost:4000 npx playwright test ai-economics
+ */
+import { test, expect, type Route, type Page } from '@playwright/test'
+import { mkdirSync } from 'node:fs'
+import { join } from 'node:path'
+
+const BASE_URL = process.env.BASE_URL ?? 'http://localhost:4000'
+const SHOTS = join(process.cwd(), 'e2e-shots')
+
+// A SuperAdmin via the isGlobalAdmin/isSuperAdmin CLAIM (what the `admin: true` module
+// gates on). owner is a normal org so OrgGate resolves locally instead of demanding a
+// pick from the (mocked-empty) org list.
+// owner === the reserved `admin` org IS the SuperAdmin signal the client gate reads
+// (`isSuperAdminOwner` / IAM `User.IsSuperAdmin` — the isGlobalAdmin/isSuperAdmin claim
+// fields are NOT read), so the `admin: true` module renders instead of the managed notice.
+const ACCOUNT = {
+  owner: 'admin',
+  name: 'z',
+  type: 'normal-user',
+  email: 'z@hanzo.ai',
+  displayName: 'Z Admin',
+  isGlobalAdmin: true,
+  isSuperAdmin: true,
+  isAdmin: true,
+  signupApplication: 'hanzo-cloud',
+}
+
+/** GET /v1/admin/usage/funding — the model mix: fable-5 = 750/1000 requests (75%),
+ *  gpt-5.6 = 200 (20%), ds4-flash = 30, ds4-pro = 20. One row per (provider,model,funding). */
+const FUNDING = [
+  { provider: 'do-ai', model: 'fable-5', funding: 'credit', tokens: 4_800_000, cost_cents: 18_200, requests: 600 },
+  { provider: 'do-ai', model: 'fable-5', funding: 'paid', tokens: 1_200_000, cost_cents: 6_100, requests: 150 },
+  { provider: 'openrouter', model: 'gpt-5.6', funding: 'paid', tokens: 900_000, cost_cents: 44_000, requests: 200 },
+  { provider: 'openrouter', model: 'ds4-flash', funding: 'paid', tokens: 120_000, cost_cents: 900, requests: 30 },
+  { provider: 'openrouter', model: 'ds4-pro', funding: 'paid', tokens: 80_000, cost_cents: 3_100, requests: 20 },
+]
+
+/** GET /v1/admin/finance — the casibase-enveloped finance aggregate; grossMarginPct 62. */
+const FINANCE = {
+  status: 'ok',
+  msg: '',
+  data: {
+    cost: { configured: true, error: '', period: '2026-07', totalCents: 3_800_000, vendors: [], digitalocean: { configured: true, error: '', creditRemainingCents: 2_418_000, monthToDateSpendCents: 41_200, avgDailyBurnCents: 20_100, accountBalanceCents: -2_418_000, generatedAt: '', history: [] } },
+    revenue: { configured: true, totalRevenueCents: 10_000_000, mrrCents: 820_000, creditsConsumedCents: 120_000 },
+    derived: { grossMarginCents: 6_200_000, grossMarginPct: 62, runwayDays: 120, profitable: true },
+    generatedAt: '2026-07-15T00:00:00Z',
+  },
+}
+
+/** GET /v1/admin/providers/credit — the DO grant + a paid-only provider. */
+const CREDIT = [
+  { provider: 'do-ai', grant_cents: 2_600_000, burn_cents: 41_200, remaining_cents: 2_418_000, runway_days: 58, has_credit: true, is_paid_only: false },
+  { provider: 'openrouter', grant_cents: 100_000, burn_cents: 21_000, remaining_cents: 62_500, runway_days: 3, has_credit: true, is_paid_only: false },
+]
+
+/** GET /v1/evals/datasets — user-curated registry: 2 datasets, 150 items. */
+const DATASETS = { data: [
+  { name: 'router-quality', description: 'router routing quality', items: 120, createdAt: '2026-07-08T00:00:00Z' },
+  { name: 'safety-redteam', description: 'safety judgments', items: 30, createdAt: '2026-07-02T00:00:00Z' },
+] }
+
+/** GET /v1/evals/runs — recent LLM-as-judge runs with an average score. */
+const RUNS = { data: [
+  { dataset: 'router-quality', runName: 'rq-2026-07-10', model: 'fable-5', judgeModel: 'claude-opus-4.6', items: 120, scored: 120, avgScore: 0.87, createdAt: '2026-07-10T00:00:00Z' },
+  { dataset: 'safety-redteam', runName: 'sr-2026-07-04', model: 'gpt-5.6', judgeModel: 'claude-opus-4.6', items: 30, scored: 30, avgScore: 0.93, createdAt: '2026-07-04T00:00:00Z' },
+] }
+
+/** GET /v1/evals/evaluators. */
+const EVALUATORS = { data: [{ name: 'quality-judge', model: 'claude-opus-4.6', criteria: 'routing quality', scoreName: 'quality' }] }
+
+const API_RE = /\/(v1|cloud|ai|billing|commerce|telemetry|vm|superbase|admin|paas|integrations|auth\/refresh)(\/|$|\?)/
+
+async function mock(route: Route) {
+  const req = route.request()
+  if (req.resourceType() === 'document') return route.continue()
+  const url = new URL(req.url())
+  const path = url.pathname
+
+  if (path === '/auth/session') {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ account: ACCOUNT, expiresIn: 3600 }) })
+  }
+  if (path.startsWith('/auth/')) {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ ok: true }) })
+  }
+  // The economics reads. funding/credit are bare arrays (restGet + pluckList); finance
+  // is the casibase envelope (originGet unwraps `data`); evals are `{data:[...]}`.
+  const json = (body: unknown) => route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(body) })
+  if (path === '/v1/admin/usage/funding') return json(FUNDING)
+  if (path === '/v1/admin/finance') return json(FINANCE)
+  if (path === '/v1/admin/providers/credit') return json(CREDIT)
+  if (path === '/v1/evals/datasets') return json(DATASETS)
+  if (path === '/v1/evals/runs') return json(RUNS)
+  if (path === '/v1/evals/evaluators') return json(EVALUATORS)
+
+  const sameOrigin = url.origin === new URL(BASE_URL).origin
+  if (sameOrigin && !API_RE.test(path)) return route.continue()
+  // Any other data call → an honest empty-ok envelope so the shell is quiet.
+  return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ status: 'ok', msg: '', data: [], data2: 0 }) })
+}
+
+async function openBoard(page: Page) {
+  await page.addInitScript((org) => {
+    try {
+      localStorage.setItem('hanzo.console.org', org)
+      localStorage.setItem('hanzo.console.org.selected', '1') // ENTERED flag — OrgGate → scoped console
+      localStorage.setItem('hz_onboarding_done:' + org, '1') // skip the first-run wizard
+      localStorage.setItem('hz_admin_banner_dismissed', '1')
+    } catch {
+      /* private mode */
+    }
+  }, ACCOUNT.owner)
+  await page.route('**/*', mock)
+  await page.goto(`${BASE_URL}/ai-economics`, { waitUntil: 'domcontentloaded' })
+  const content = page.locator('[data-testid="product-content"]').first()
+  await content.waitFor({ state: 'attached', timeout: 20_000 })
+  await expect(content.getByTestId('ai-economics')).toBeVisible({ timeout: 20_000 })
+  await page.waitForTimeout(700)
+}
+
+test.beforeAll(() => mkdirSync(SHOTS, { recursive: true }))
+
+// ─── (A) fixture render ───────────────────────────────────────────────────────
+test.describe('(A) fixture render — model mix (fable-5 75%) + 62% margin + honest training card', () => {
+  test('renders the model mix, share %, margin, and the honest training-data card (desktop)', async ({ browser }) => {
+    const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } })
+    const page = await ctx.newPage()
+    await openBoard(page)
+
+    // Page rendered (not the operator gate).
+    await expect(page.getByText('AI Economics').first()).toBeVisible()
+    await expect(page.locator('text=/Operator access required|not authorized|access denied/i')).toHaveCount(0)
+
+    // (a) model mix — the mocked rows WITH request-share %.
+    const modelMix = page.getByTestId('model-mix')
+    await expect(modelMix.getByText('Model mix').first()).toBeVisible()
+    await expect(modelMix.getByText('fable-5').first()).toBeVisible()
+    await expect(modelMix.getByText('gpt-5.6').first()).toBeVisible()
+    await expect(modelMix.getByText('75%').first()).toBeVisible() // fable-5 = 750/1000 requests
+    await expect(modelMix.getByText('20%').first()).toBeVisible() // gpt-5.6 = 200/1000
+
+    // (b) profitability — the mocked grossMarginPct.
+    const margin = page.getByTestId('margin-card')
+    await expect(margin.getByText('+62% margin').first()).toBeVisible()
+
+    // (c) training data — the honest "no traffic harvested" collection card + real counts.
+    const training = page.getByTestId('training-collection-card')
+    await expect(training).toBeVisible()
+    await expect(training.getByText(/No traffic is harvested for training/i)).toBeVisible()
+    await expect(page.getByText('Eval datasets').first()).toBeVisible()
+
+    await page.screenshot({ path: join(SHOTS, 'ai-economics-desktop.png'), fullPage: true })
+    await ctx.close()
+  })
+
+  test('reflows with no horizontal body scroll at a narrow (mobile) viewport', async ({ browser }) => {
+    const ctx = await browser.newContext({ viewport: { width: 390, height: 844 } })
+    const page = await ctx.newPage()
+    await openBoard(page)
+
+    await expect(page.getByTestId('model-mix').getByText('fable-5').first()).toBeVisible()
+    const overflow = await page.evaluate(() => {
+      const el = document.documentElement
+      return { scrollWidth: el.scrollWidth, clientWidth: el.clientWidth }
+    })
+    expect(overflow.scrollWidth, 'no horizontal body scroll at 390px').toBeLessThanOrEqual(overflow.clientWidth + 1)
+
+    await page.screenshot({ path: join(SHOTS, 'ai-economics-mobile.png'), fullPage: true })
+    await ctx.close()
+  })
+})
+
+// ─── (B) fail-closed gate — always runs, no credentials ───────────────────────
+test.describe('(B) admin gate fail-closed', () => {
+  test('/v1/admin/{usage/funding,finance,providers/credit} → fail-closed unauthenticated', async ({ request }) => {
+    for (const p of ['usage/funding', 'finance', 'providers/credit']) {
+      const res = await request.get(`${BASE_URL}/v1/admin/${p}`)
+      // A raw request (no page mocks, no session) NEVER gets data: the console's
+      // getAdminGate is fail-closed. Post-deploy this is the 403 global-admin gate;
+      // before a sibling route deploys it may 404 — both are "not open". Never 200.
+      expect(res.status(), `${BASE_URL}/v1/admin/${p} must be fail-closed (>=401)`).toBeGreaterThanOrEqual(401)
+      expect(res.status(), `${BASE_URL}/v1/admin/${p} must not 5xx`).toBeLessThan(500)
+    }
+  })
+})

e2e/billing-isolation.spec.ts

@@ -0,0 +1,97 @@
+/**
+ * e2e: two-tenant BILLING ISOLATION through the `/billing/*` proxy.
+ *
+ * The proxy (app/billing/v1/[...path]/route.ts) resolves the billing subject from the
+ * session server-side and pins the full subject-key set (user/userId/customerId) +
+ * the X-Org-Id header, so a tenant can only ever read its OWN commerce ledger. This
+ * spec proves that end-to-end against the LIVE proxy: two accounts in DIFFERENT orgs
+ * each fetch `/billing/subscriptions` (and `/payment-methods`), and we assert the
+ * two result sets are disjoint — neither tenant can see the other's rows.
+ *
+ * This is the regression guard for the IDOR RED found (the proxy previously pinned
+ * only `?user=` while commerce filters subscriptions on `?userId=`, so subscriptions
+ * were returned across the whole namespace).
+ *
+ * Credentials (env, never in repo). Skips unless BOTH tenants are provided:
+ *   TENANT_A_EMAIL / TENANT_A_PASSWORD  (org A)
+ *   TENANT_B_EMAIL / TENANT_B_PASSWORD  (org B, a DIFFERENT org)
+ *   BASE_URL  default https://console.hanzo.ai
+ *
+ * Run:  TENANT_A_EMAIL=.. TENANT_A_PASSWORD=.. TENANT_B_EMAIL=.. TENANT_B_PASSWORD=.. pnpm e2e billing-isolation.spec.ts
+ */
+import { test, expect, type Page } from '@playwright/test'
+
+const BASE_URL = process.env.BASE_URL ?? 'https://console.hanzo.ai'
+const A = { email: process.env.TENANT_A_EMAIL ?? '', password: process.env.TENANT_A_PASSWORD ?? '' }
+const B = { email: process.env.TENANT_B_EMAIL ?? '', password: process.env.TENANT_B_PASSWORD ?? '' }
+
+async function signIn(page: Page, email: string, password: string) {
+  await page.goto(`${BASE_URL}/signin`)
+  await page.waitForSelector('input[placeholder="Email"]', { timeout: 20_000 })
+  await page.fill('input[placeholder="Email"]', email)
+  await page.fill('input[placeholder="Password"]', password)
+  await page.click('button:has-text("Sign in")')
+  const base = new URL(BASE_URL).origin
+  await page.waitForURL((url) => url.origin === base && url.pathname === '/', { timeout: 30_000 })
+  await page.waitForLoadState('domcontentloaded')
+}
+
+/** Fetch a billing path through the same-origin DATA proxy (`/billing/v1/*`), as the
+ *  signed-in browser. (`/billing/<slug>` without `v1/` is a UI tab, served by the SPA.) */
+async function billing(page: Page, path: string): Promise<{ status: number; ids: string[] }> {
+  return page.evaluate(async (p) => {
+    const res = await fetch(`/billing/v1/${p}`, { credentials: 'include', headers: { Accept: 'application/json' } })
+    let ids: string[] = []
+    try {
+      const body = await res.json()
+      const rows = Array.isArray(body)
+        ? body
+        : (body?.subscriptions ?? body?.paymentMethods ?? body?.payment_methods ?? body?.invoices ?? body?.data ?? [])
+      ids = (Array.isArray(rows) ? rows : [])
+        .map((r: { id?: unknown }) => (typeof r?.id === 'string' ? r.id : ''))
+        .filter(Boolean)
+    } catch {
+      /* non-JSON (e.g. 501 not-configured) — ids stays empty */
+    }
+    return { status: res.status, ids }
+  }, path)
+}
+
+test.describe('billing is isolated per tenant through the proxy', () => {
+  test.skip(
+    !A.email || !A.password || !B.email || !B.password,
+    'TENANT_A_* / TENANT_B_* not set — skipping two-tenant billing isolation',
+  )
+
+  test('two distinct-org tenants never see each other’s subscriptions or payment methods', async ({ browser }) => {
+    const ctxA = await browser.newContext()
+    const ctxB = await browser.newContext()
+    const pageA = await ctxA.newPage()
+    const pageB = await ctxB.newPage()
+
+    await signIn(pageA, A.email, A.password)
+    await signIn(pageB, B.email, B.password)
+
+    // `invoices` is included because its row ids drive the per-invoice PDF URL
+    // (`/billing/v1/invoices/:id/pdf`) — proving the invoice list is tenant-isolated
+    // proves a user can only ever build a PDF URL for their OWN org's invoices.
+    for (const path of ['subscriptions', 'payment-methods', 'invoices']) {
+      const a = await billing(pageA, path)
+      const b = await billing(pageB, path)
+
+      // A 401 would mean the session broke; a 501 means commerce isn't configured
+      // on this deployment (isolation is vacuously safe — nothing is returned).
+      expect(a.status, `tenant A /${path} not authorized`).not.toBe(401)
+      expect(b.status, `tenant B /${path} not authorized`).not.toBe(401)
+
+      if (a.status === 501 || b.status === 501) continue
+
+      // The core isolation assertion: the two tenants' row-id sets are disjoint.
+      const overlap = a.ids.filter((id) => b.ids.includes(id))
+      expect(overlap, `/${path} leaked ${overlap.length} shared rows across tenants`).toEqual([])
+    }
+
+    await ctxA.close()
+    await ctxB.close()
+  })
+})

e2e/blank-audit.spec.ts

@@ -0,0 +1,159 @@
+/**
+ * e2e blank audit — mocked-network render proof for EVERY in-console product route.
+ *
+ * Runs against a LOCAL `next dev` (BASE_URL=http://localhost:4000) with the whole
+ * network mocked, so it needs NO real backend and NO password:
+ *   - `/auth/session` → a global-admin account (sees every product), so the AuthGate
+ *     and OrgGate pass and the full console shell mounts.
+ *   - every data endpoint (`/v1`, `/v1`, `/ai`, `/billing`, `/commerce`,
+ *     `/telemetry`, `/vm`, `/superbase`, `/admin`, cross-origin platform) → a chosen
+ *     failure mode (AUDIT_MODE): `notrouted` (404, the "backend not wired on this
+ *     deployment" reality), `down` (502), or `empty` (200 empty payload).
+ *
+ * For each route it navigates `/<id>`, waits for the shell's `product-content`
+ * region, and classifies what rendered there:
+ *   - `blank`     → the content region mounted but is EMPTY (the bug we hunt),
+ *   - `content`   → real data OR an honest error/empty card (the goal),
+ *   - `notfound`  → Next 404 (an unrouted/external id — expected for a few),
+ *   - `no-shell`  → the shell itself failed to mount (worse than blank).
+ *
+ * It writes e2e/blank-report.json and fails iff any route is `blank`/`no-shell`.
+ *
+ * Run: AUDIT_MODE=notrouted BASE_URL=http://localhost:4000 npx playwright test blank-audit
+ */
+import { test, expect, type Route } from '@playwright/test'
+import { readFileSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+const BASE_URL = process.env.BASE_URL ?? 'http://localhost:4000'
+const MODE = (process.env.AUDIT_MODE ?? 'notrouted') as 'notrouted' | 'down' | 'empty'
+const ROLE = (process.env.AUDIT_ROLE ?? 'admin') as 'admin' | 'customer'
+
+const CANONICAL_IDS: string[] = JSON.parse(readFileSync(join(process.cwd(), 'e2e', 'route-ids.json'), 'utf8'))
+/**
+ * The HUMAN slugs the console nav / docs / bookmarks / the CTO's e2e list use that
+ * are NOT registry ids — they must resolve via SLUG_ALIASES to a real module (never
+ * a 404 blank). Auditing them here proves the alias map end-to-end against the real app.
+ */
+const ALIAS_SLUGS = ['traces', 'deploy', 'plans-pricing', 'wallets', 'model-catalog', 'fine-tuning', 'web-search', 'mlpipelines', 'kubeflow']
+const IDS: string[] = [...CANONICAL_IDS, ...ALIAS_SLUGS]
+
+/** A global-admin (sees every surface) or a tenant customer (Dave/maxpower shape). */
+const ACCOUNT =
+  ROLE === 'admin'
+    ? { owner: 'admin', name: 'z', type: 'normal-user', email: 'z@hanzo.ai', displayName: 'Z Admin', isGlobalAdmin: true, isAdmin: true, signupApplication: 'hanzo-cloud' }
+    : { owner: 'maxpower', name: 'dave', type: 'normal-user', email: 'dave@maxpower.com', displayName: 'Dave', isGlobalAdmin: false, isAdmin: true, signupApplication: 'hanzo-cloud' }
+
+/** casibase envelope + REST payloads for the three failure modes. */
+function payloadFor(mode: typeof MODE): { status: number; body: string } {
+  if (mode === 'down') return { status: 502, body: 'Bad Gateway' }
+  if (mode === 'notrouted') return { status: 404, body: JSON.stringify({ status: 'error', msg: 'not found', data: null }) }
+  // empty-ok: a well-formed empty envelope; REST readers also tolerate [] / {}.
+  return { status: 200, body: JSON.stringify({ status: 'ok', msg: '', data: [], data2: 0 }) }
+}
+
+/** Path prefixes that are DATA calls (mock them); everything else is a Next asset/page. */
+const API_RE = /\/(v1|cloud|ai|billing|commerce|telemetry|vm|superbase|admin|paas|integrations|auth\/refresh)(\/|$|\?)/
+
+async function mock(route: Route) {
+  const req = route.request()
+  // NEVER mock a top-level page navigation (the app HTML). A product route id can
+  // collide with an API head (e.g. `/integrations`, `/billing`), so keying off the
+  // path alone would serve the mock JSON AS the page. Only data calls (xhr/fetch)
+  // are mocked; documents/assets always load the real app.
+  if (req.resourceType() === 'document') return route.continue()
+  const url = new URL(req.url())
+  const path = url.pathname
+
+  // Session → authed account (always ok, regardless of MODE).
+  if (path === '/auth/session') {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ account: ACCOUNT, expiresIn: 3600 }) })
+  }
+  if (path.startsWith('/auth/')) {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ ok: true }) })
+  }
+
+  // Same-origin Next asset or the app HTML → let it through.
+  const sameOrigin = url.origin === new URL(BASE_URL).origin
+  const isApi = API_RE.test(path)
+  if (sameOrigin && !isApi) return route.continue()
+
+  // Cross-origin (platform.hanzo.ai, api.hanzo.ai, cloud.hanzo.ai, …) OR a
+  // same-origin data path → the chosen failure mode.
+  const { status, body } = payloadFor(MODE)
+  const contentType = body.startsWith('{') || body.startsWith('[') ? 'application/json' : 'text/plain'
+  return route.fulfill({ status, contentType, body })
+}
+
+type Outcome = 'content' | 'blank' | 'notfound' | 'no-shell'
+const results: Record<string, { outcome: Outcome; chars: number; sample: string }> = {}
+
+test.describe.configure({ mode: 'serial' })
+
+test.describe(`blank audit [mode=${MODE} role=${ROLE}]`, () => {
+  let page: import('@playwright/test').Page
+  let ctx: import('@playwright/test').BrowserContext
+
+  test.beforeAll(async ({ browser }) => {
+    ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } })
+    page = await ctx.newPage()
+    // Seed the active org to the account's own org so OrgGate doesn't hard-pin +
+    // reload a customer (currentOrg !== owner) mid-audit, and dismiss the admin
+    // banner so the shell is stable. Runs before every navigation (survives reloads).
+    await page.addInitScript((org) => {
+      try {
+        localStorage.setItem('hanzo.console.org', org)
+        localStorage.setItem('hz_admin_banner_dismissed', '1')
+      } catch {
+        /* private mode */
+      }
+    }, ACCOUNT.owner)
+    await page.route('**/*', mock)
+  })
+
+  test.afterAll(async () => {
+    writeFileSync(join(process.cwd(), 'e2e', 'blank-report.json'), JSON.stringify({ mode: MODE, role: ROLE, results }, null, 2))
+    const blanks = Object.entries(results).filter(([, r]) => r.outcome === 'blank' || r.outcome === 'no-shell')
+    const nf = Object.entries(results).filter(([, r]) => r.outcome === 'notfound').map(([id]) => id)
+    // eslint-disable-next-line no-console
+    console.log(`\n=== blank audit [${MODE}/${ROLE}] ===\nroutes: ${Object.keys(results).length}  blank/no-shell: ${blanks.length}  notfound: ${nf.length}`)
+    if (blanks.length) console.log('BLANK:', blanks.map(([id, r]) => `${id}(${r.outcome})`).join(', '))
+    if (nf.length) console.log('NOTFOUND:', nf.join(', '))
+    await ctx?.close()
+  })
+
+  for (const id of IDS) {
+    test(`/${id}`, async () => {
+      await page.goto(`${BASE_URL}/${id}`, { waitUntil: 'domcontentloaded' })
+      // Let the client mount + the module's first data attempt settle.
+      const content = page.locator('[data-testid="product-content"]').first()
+      const appeared = await content.waitFor({ state: 'attached', timeout: 15_000 }).then(() => true).catch(() => false)
+
+      let outcome: Outcome
+      let chars = 0
+      let sample = ''
+      if (!appeared) {
+        // No shell content region — either a Next 404 (notfound) or a shell failure.
+        const is404 = await page.locator('text=/404|not be found|This page could not/i').count().then((c) => c > 0).catch(() => false)
+        outcome = is404 ? 'notfound' : 'no-shell'
+      } else {
+        // Give async data one more settle beat, then read the region's text.
+        await page.waitForTimeout(1200)
+        const txt = (await content.innerText().catch(() => '')) || ''
+        chars = txt.trim().length
+        sample = txt.trim().slice(0, 80).replace(/\s+/g, ' ')
+        outcome = chars > 0 ? 'content' : 'blank'
+      }
+      results[id] = { outcome, chars, sample }
+      // Record only — the final `no blank routes` test asserts over ALL results, so
+      // one blank never fail-fasts the serial group and hides the rest.
+      // eslint-disable-next-line no-console
+      console.log(`${outcome === 'content' ? '✓' : outcome === 'notfound' ? '·' : '✗'} /${id} [${outcome}] ${chars}c ${sample}`)
+    })
+  }
+
+  test('no route renders blank', async () => {
+    const bad = Object.entries(results).filter(([, r]) => r.outcome === 'blank' || r.outcome === 'no-shell')
+    expect(bad.map(([id, r]) => `${id}(${r.outcome})`), 'every product route must render real data or an honest state').toEqual([])
+  })
+})

e2e/budgets-responsive.spec.ts

@@ -0,0 +1,130 @@
+/**
+ * e2e: Budgets & limits page — mocked-network render + RESPONSIVE proof.
+ *
+ * Runs against a LOCAL server (BASE_URL=http://localhost:4000) with the whole network
+ * mocked (same pattern as blank-audit): `/auth/session` → a global admin so the shell
+ * mounts, `/billing/v1/spend-alerts` → real-shaped budget rows (org default + project
+ * warn + service over + unlimited/rate-limit-only), everything else → an empty-ok
+ * envelope.
+ *
+ * It proves the extended Budgets page renders real content at a desktop AND a NARROW
+ * (mobile) viewport, that the body never scrolls horizontally on mobile (the CTO
+ * requirement), and opens the inline edit form. Screenshots at each width.
+ *
+ * Run: BASE_URL=http://localhost:4000 npx playwright test budgets-responsive
+ */
+import { test, expect, type Route, type Page } from '@playwright/test'
+import { mkdirSync } from 'node:fs'
+import { join } from 'node:path'
+
+const BASE_URL = process.env.BASE_URL ?? 'http://localhost:4000'
+const SHOTS = join(process.cwd(), 'e2e-shots')
+
+const ACCOUNT = {
+  owner: 'hanzo',
+  name: 'z',
+  type: 'normal-user',
+  email: 'z@hanzo.ai',
+  displayName: 'Z Admin',
+  // Super admin via the CLAIM (owner is a normal org, not the reserved `admin`).
+  // `isSuperAdmin` is canonical; `isGlobalAdmin` stays for legacy-claim coverage.
+  isSuperAdmin: true,
+  isGlobalAdmin: true,
+  isAdmin: true,
+  signupApplication: 'hanzo-cloud',
+}
+
+/** Real-shaped `/v1/billing/spend-alerts` rows — one per verdict/scope (threshold = cents). */
+const BUDGETS = [
+  { id: 'b1', title: 'Org monthly cap', threshold: 500000, currency: 'usd', project: '', service: '', enforce: true, softPct: 80, rateLimitRpm: 0, periodSpentCents: 312000, over: false, warn: false },
+  { id: 'b2', title: 'Inference budget', threshold: 200000, currency: 'usd', project: 'acme-prod', service: 'inference', enforce: false, softPct: 75, rateLimitRpm: 600, periodSpentCents: 186000, over: false, warn: true },
+  { id: 'b3', title: 'Embeddings cap', threshold: 50000, currency: 'usd', project: '', service: 'embeddings', enforce: true, softPct: 80, rateLimitRpm: 300, periodSpentCents: 51500, over: true, warn: true },
+  { id: 'b4', title: 'Sandbox throttle', threshold: 0, currency: 'usd', project: 'sandbox', service: '', enforce: false, softPct: 0, rateLimitRpm: 120, periodSpentCents: 8300, over: false, warn: false },
+]
+
+const API_RE = /\/(v1|cloud|ai|billing|commerce|telemetry|vm|superbase|admin|paas|integrations|auth\/refresh)(\/|$|\?)/
+
+async function mock(route: Route) {
+  const req = route.request()
+  if (req.resourceType() === 'document') return route.continue()
+  const url = new URL(req.url())
+  const path = url.pathname
+
+  if (path === '/auth/session') {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ account: ACCOUNT, expiresIn: 3600 }) })
+  }
+  if (path.startsWith('/auth/')) {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ ok: true }) })
+  }
+  // The page under test — the real spend-alerts contract.
+  if (path === '/billing/v1/spend-alerts') {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(BUDGETS) })
+  }
+
+  const sameOrigin = url.origin === new URL(BASE_URL).origin
+  if (sameOrigin && !API_RE.test(path)) return route.continue()
+  // Any other data call → an honest empty-ok envelope so the shell is quiet.
+  return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ status: 'ok', msg: '', data: [], data2: 0 }) })
+}
+
+async function openBudgets(page: Page) {
+  await page.addInitScript((org) => {
+    try {
+      localStorage.setItem('hanzo.console.org', org)
+      localStorage.setItem('hz_admin_banner_dismissed', '1')
+    } catch {
+      /* private mode */
+    }
+  }, ACCOUNT.owner)
+  await page.route('**/*', mock)
+  await page.goto(`${BASE_URL}/billing/budgets`, { waitUntil: 'domcontentloaded' })
+  const content = page.locator('[data-testid="product-content"]').first()
+  await content.waitFor({ state: 'attached', timeout: 20_000 })
+  await expect(page.locator('text=Budgets & limits').first()).toBeVisible({ timeout: 20_000 })
+  await page.waitForTimeout(800)
+}
+
+test.beforeAll(() => mkdirSync(SHOTS, { recursive: true }))
+
+test('renders the budgets & limits page at a desktop viewport', async ({ browser }) => {
+  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } })
+  const page = await ctx.newPage()
+  await openBudgets(page)
+
+  // The four budgets + verdicts + scope labels + enforcement, from the real contract.
+  await expect(page.locator('text=Organization default').first()).toBeVisible()
+  await expect(page.locator('text=acme-prod · inference').first()).toBeVisible()
+  await expect(page.locator('text=Over cap').first()).toBeVisible()
+  await expect(page.locator('text=Unlimited').first()).toBeVisible()
+  await expect(page.locator('text=Hard cap').first()).toBeVisible()
+
+  await page.screenshot({ path: join(SHOTS, 'budgets-desktop.png'), fullPage: true })
+
+  // Prove the inline edit form opens with the new controls (scope selector +
+  // Enforce toggle + rate limit). `exact: true` — a substring match would hit the
+  // "Cr-EDIT-s" tab (which contains "edit"); we want the card's Edit button.
+  await page.getByRole('button', { name: 'Edit', exact: true }).first().click()
+  await expect(page.getByRole('button', { name: 'Save budget' }).first()).toBeVisible()
+  await expect(page.locator('text=Enforce (hard cap)').first()).toBeVisible()
+  await expect(page.locator('text=Rate limit').first()).toBeVisible()
+  await page.screenshot({ path: join(SHOTS, 'budgets-edit.png'), fullPage: true })
+  await ctx.close()
+})
+
+test('reflows with no horizontal body scroll at a narrow (mobile) viewport', async ({ browser }) => {
+  const ctx = await browser.newContext({ viewport: { width: 390, height: 844 } })
+  const page = await ctx.newPage()
+  await openBudgets(page)
+
+  await expect(page.locator('text=Organization default').first()).toBeVisible()
+
+  // The CTO requirement: the body must not scroll horizontally on mobile.
+  const overflow = await page.evaluate(() => {
+    const el = document.documentElement
+    return { scrollWidth: el.scrollWidth, clientWidth: el.clientWidth }
+  })
+  expect(overflow.scrollWidth, 'no horizontal body scroll at 390px').toBeLessThanOrEqual(overflow.clientWidth + 1)
+
+  await page.screenshot({ path: join(SHOTS, 'budgets-mobile.png'), fullPage: true })
+  await ctx.close()
+})

e2e/console.spec.ts

@@ -0,0 +1,295 @@
+/**
+ * e2e: Hanzo Cloud Console — login → API key → AI inference
+ *
+ * z@hanzo.ai is in the `hanzo` org (isGlobalAdmin), so the OrgGate now shows
+ * a dismissible admin banner and renders the full console on console.hanzo.ai.
+ * Admin ops still live at admin.hanzo.ai.
+ *
+ * Credentials (env, never in repo):
+ *   HANZO_EMAIL    default z@hanzo.ai
+ *   HANZO_PASSWORD required
+ *   HANZO_API_KEY  optional; skip UI flow, go straight to inference
+ *   HANZO_API_BASE default https://api.hanzo.ai
+ *   BASE_URL       default https://console.hanzo.ai
+ *
+ * Run:
+ *   HANZO_PASSWORD=xxx pnpm e2e
+ *   HANZO_PASSWORD=xxx HANZO_API_KEY=hk-xxx pnpm e2e
+ */
+import { test, expect, type Page } from '@playwright/test'
+
+const EMAIL    = process.env.HANZO_EMAIL    ?? 'z@hanzo.ai'
+const PASSWORD = process.env.HANZO_PASSWORD ?? ''
+const API_KEY  = process.env.HANZO_API_KEY  ?? ''
+const API_BASE = process.env.HANZO_API_BASE ?? 'https://api.hanzo.ai'
+const BASE_URL = process.env.BASE_URL       ?? 'https://console.hanzo.ai'
+
+// ─── helpers ────────────────────────────────────────────────────────────────
+
+async function signIn(page: Page) {
+  await page.goto(`${BASE_URL}/signin`)
+  await page.waitForSelector('input[placeholder="Email"]', { timeout: 20_000 })
+  await page.fill('input[placeholder="Email"]', EMAIL)
+  await page.fill('input[placeholder="Password"]', PASSWORD)
+  await page.click('button:has-text("Sign in")')
+}
+
+/** Wait until we're on the dashboard (route replaced to '/'). */
+async function waitForDashboard(page: Page) {
+  const base = new URL(BASE_URL).origin
+  await page.waitForURL(url => url.origin === base && url.pathname === '/', { timeout: 30_000 })
+  // The dashboard renders product grid cards — wait for at least one visible card/link
+  await page.waitForLoadState('domcontentloaded')
+}
+
+// ─── tests ──────────────────────────────────────────────────────────────────
+
+// Public smoke — needs no credentials, so it always runs (in CI, for Dave, etc.)
+// and catches a dead/blank sign-in gate. The authenticated flows below gate on
+// HANZO_PASSWORD.
+test.describe('Hanzo Cloud Console — public', () => {
+  test('sign-in page renders (email/password + OAuth + passkey)', async ({ page }) => {
+    await page.goto(`${BASE_URL}/signin`)
+    await expect(page.locator('input[placeholder="Email"]')).toBeVisible({ timeout: 20_000 })
+    await expect(page.locator('input[placeholder="Password"]')).toBeVisible()
+    await expect(page.locator('button:has-text("Sign in")')).toBeVisible()
+    await expect(page.locator('button:has-text("Continue with GitHub")')).toBeVisible()
+    await expect(page.locator('button:has-text("Continue with Google")')).toBeVisible()
+    await expect(page.locator('text=/passkey/i')).toBeVisible()
+  })
+
+  test('root serves the app (200, dark #0a0a0a) + /base resolves', async ({ page, request }) => {
+    const res = await page.goto(BASE_URL)
+    expect(res?.status()).toBe(200)
+    await expect(page).toHaveTitle(/Hanzo Cloud Console/)
+    await expect(page.locator('meta[name="theme-color"][content="#0a0a0a"]')).toHaveCount(1)
+    expect((await request.get(`${BASE_URL}/base`)).status()).toBe(200)
+  })
+
+  // Security gates — the server proxies must reject unauthenticated calls and
+  // stay inside their allow-list. No credentials (plain request context) so this
+  // proves the production posture in CI. A regression is a real security bug.
+  test('server proxies reject unauthenticated calls (401)', async ({ request }) => {
+    for (const path of [
+      '/superbase/v1/collections/tenants/records',
+      '/keys',
+    ]) {
+      const res = await request.get(`${BASE_URL}${path}`)
+      expect(res.status(), `${path} must gate`).toBe(401)
+    }
+  })
+
+  test('proxy allow-lists reject off-list paths (no tunnel)', async ({ request }) => {
+    const res = await request.get(`${BASE_URL}/superbase/v1/collections/secrets/records`)
+    // The point is "no tunnel to the backend": the off-list path must be blocked,
+    // not proxied. The proxy may reject with 404 (off allow-list) or 401 (auth
+    // gate hit first) — both are blocked; a 2xx would be the real bug.
+    expect([401, 404], `off-list path must be blocked, got ${res.status()}`).toContain(res.status())
+  })
+
+  test('unknown route never 5xxs', async ({ request }) => {
+    const res = await request.get(`${BASE_URL}/no-such-surface-xyz`)
+    expect(res.status()).toBeLessThan(500)
+  })
+})
+
+test.describe('Hanzo Cloud Console e2e', () => {
+  test.skip(!PASSWORD, 'HANZO_PASSWORD not set — skipping live authenticated tests')
+
+  test('login as z@hanzo.ai — dashboard renders', async ({ page }) => {
+    await signIn(page)
+    await waitForDashboard(page)
+    // Dashboard renders — sign-in form must be gone
+    await expect(page.locator('input[placeholder="Password"]')).not.toBeVisible({ timeout: 10_000 })
+    // At least one product category or card is visible (Overview / AI / Compute etc.)
+    await expect(
+      page.locator('a, button, [role="link"]').filter({ hasText: /models|providers|overview|AI/i }).first()
+    ).toBeVisible({ timeout: 15_000 })
+    console.log('✓ Signed in; dashboard is rendering')
+  })
+
+  test('admin banner visible (z is isAdmin on console.hanzo.ai)', async ({ page }) => {
+    await signIn(page)
+    await waitForDashboard(page)
+    // OrgGate shows the admin banner for admins on the non-admin console host.
+    // The banner may have been dismissed in a prior run (localStorage). Skip softly.
+    const banner = page.locator('text=/Admin ops|admin\\.hanzo\\.ai/i').first()
+    const visible = await banner.isVisible({ timeout: 5_000 }).catch(() => false)
+    if (visible) {
+      console.log('✓ Admin banner visible')
+      await expect(page.locator('button:has-text("Open admin")')).toBeVisible()
+    } else {
+      console.log('ℹ Admin banner was dismissed (localStorage) — OK')
+    }
+  })
+
+  test('create or confirm API key', async ({ page }) => {
+    await signIn(page)
+    await waitForDashboard(page)
+
+    // API Keys module is at /api-keys (catch-all route, id='api-keys')
+    await page.goto(`${BASE_URL}/api-keys`, { waitUntil: 'domcontentloaded' })
+
+    // Wait for the module to hydrate — look for the page header or key cards
+    await expect(
+      page.locator('text=/API Keys/i, text=/Cloud API key/i, text=/Create.*API key/i').first()
+    ).toBeVisible({ timeout: 25_000 })
+
+    const hasKey  = page.locator('text=/Cloud API key/i')
+    const noKey   = page.locator('text=/Create your Cloud API key/i')
+    const createBtn = page.locator('button:has-text("Create API key")')
+
+    const needsCreate = await noKey.isVisible({ timeout: 3_000 }).catch(() => false)
+                     || await createBtn.isVisible({ timeout: 1_000 }).catch(() => false)
+
+    if (needsCreate) {
+      await createBtn.click()
+      // One-time reveal card with the hk- key
+      await expect(page.locator('text=/hk-/')).toBeVisible({ timeout: 25_000 })
+      await expect(page.locator('text=/shown only once/i')).toBeVisible()
+      await expect(page.locator('button:has-text("Copy")')).toBeVisible()
+      console.log('✓ API key created (hk- one-time reveal shown)')
+    } else {
+      // Key already exists
+      await expect(hasKey).toBeVisible({ timeout: 10_000 })
+      await expect(page.locator('text=/hk-…|hk-[A-Za-z0-9]{3,}/i')).toBeVisible({ timeout: 5_000 })
+      console.log('✓ API key already exists (prefix shown)')
+    }
+  })
+
+  test('API key works — GET /v1/models', async ({ page }) => {
+    let apiKey = API_KEY
+
+    if (!apiKey) {
+      await signIn(page)
+      await waitForDashboard(page)
+      await page.goto(`${BASE_URL}/api-keys`, { waitUntil: 'domcontentloaded' })
+      await expect(
+        page.locator('text=/API Keys/i').first()
+      ).toBeVisible({ timeout: 25_000 })
+
+      // Rotate (or create) to show the full key on-screen
+      const rotateBtn = page.locator('button:has-text("Rotate")')
+      const createBtn = page.locator('button:has-text("Create API key")')
+      if (await rotateBtn.isVisible({ timeout: 3_000 }).catch(() => false)) {
+        await rotateBtn.click()
+      } else if (await createBtn.isVisible({ timeout: 1_000 }).catch(() => false)) {
+        await createBtn.click()
+      }
+      await expect(page.locator('text=/hk-/')).toBeVisible({ timeout: 25_000 })
+
+      // Grab the FULL key from the one-time reveal — never the masked display
+      // (the account card shows `hk-2f18…` with an ellipsis, which is not a
+      // usable credential). Match only a full hk- token (no `…`/`...`).
+      const fullKey = /hk-[A-Za-z0-9._-]{16,}/
+      const keyEl = page.locator('[style*="monospace"]').filter({ hasText: fullKey }).first()
+      apiKey = (((await keyEl.textContent().catch(() => '')) ?? '').match(fullKey) ?? [''])[0]
+      if (!apiKey) {
+        const m = ((await page.textContent('body')) ?? '').match(fullKey)
+        apiKey = m ? m[0] : ''
+      }
+      expect(apiKey, 'Could not extract hk- key from page').toMatch(/^hk-/)
+      console.log(`✓ Extracted key prefix: ${apiKey.slice(0, 11)}…`)
+    }
+
+    // Verify the key works against api.hanzo.ai
+    const resp = await page.request.get(`${API_BASE}/v1/models`, {
+      headers: { Authorization: `Bearer ${apiKey}`, Accept: 'application/json' },
+      timeout: 30_000,
+    })
+    expect(resp.ok(), `GET /v1/models → ${resp.status()}`).toBe(true)
+    const json = await resp.json()
+    expect(json).toMatchObject({ data: expect.any(Array) })
+    const models: Array<{ id: string }> = json.data
+    expect(models.length).toBeGreaterThan(0)
+    const ids = models.map(m => m.id)
+    console.log(`✓ /v1/models: ${models.length} models`)
+    console.log(`  GLM      present: ${ids.some(id => id.includes('glm'))}`)
+    console.log(`  Claude   present: ${ids.some(id => id.includes('claude'))}`)
+    console.log(`  DeepSeek present: ${ids.some(id => id.includes('deepseek'))}`)
+    console.log(`  First 5: ${ids.slice(0, 5).join(', ')}`)
+  })
+
+  test('OpenAI inference — glm-5.2', async ({ page }) => {
+    test.skip(!API_KEY, 'Set HANZO_API_KEY to run inference tests')
+
+    const resp = await page.request.post(`${API_BASE}/v1/chat/completions`, {
+      headers: {
+        Authorization: `Bearer ${API_KEY}`,
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      data: {
+        model: 'glm-5.2',
+        messages: [{ role: 'user', content: 'Reply with only: PONG' }],
+        max_tokens: 16,
+        stream: false,
+      },
+      timeout: 30_000,
+    })
+    expect(resp.ok(), `glm-5.2 → ${resp.status()}`).toBe(true)
+    const json = await resp.json()
+    const text: string = json.choices?.[0]?.message?.content ?? ''
+    expect(text).toBeTruthy()
+    console.log(`✓ glm-5.2: "${text.trim()}"`)
+  })
+
+  test('OpenAI inference — deepseek-v4-pro', async ({ page }) => {
+    test.skip(!API_KEY, 'Set HANZO_API_KEY to run inference tests')
+
+    const resp = await page.request.post(`${API_BASE}/v1/chat/completions`, {
+      headers: {
+        Authorization: `Bearer ${API_KEY}`,
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      data: {
+        model: 'deepseek-v4-pro',
+        messages: [{ role: 'user', content: 'Reply with only: PONG' }],
+        max_tokens: 16,
+        stream: false,
+      },
+      timeout: 30_000,
+    })
+    expect(resp.ok(), `deepseek-v4-pro → ${resp.status()}`).toBe(true)
+    const json = await resp.json()
+    const text: string = json.choices?.[0]?.message?.content ?? ''
+    expect(text).toBeTruthy()
+    console.log(`✓ deepseek-v4-pro: "${text.trim()}"`)
+  })
+
+  test('Anthropic-compat /v1/messages — live catalog model', async ({ page }) => {
+    test.skip(!API_KEY, 'Set HANZO_API_KEY to run inference tests')
+
+    // Pick a model that is ACTUALLY available right now (the catalog changes;
+    // a hardcoded id like claude-sonnet-4-6 fails when it isn't provisioned).
+    // The /v1/messages Anthropic surface accepts any catalog model.
+    const listed = await page.request.get(`${API_BASE}/v1/models`, {
+      headers: { Authorization: `Bearer ${API_KEY}`, Accept: 'application/json' },
+      timeout: 30_000,
+    })
+    const ids: string[] = (await listed.json()).data?.map((m: { id: string }) => m.id) ?? []
+    const model = ids.find((id) => id.includes('claude')) ?? ids.find((id) => id === 'glm-5.2') ?? ids[0]
+    expect(model, 'no model available in catalog').toBeTruthy()
+
+    const resp = await page.request.post(`${API_BASE}/v1/messages`, {
+      headers: {
+        Authorization: `Bearer ${API_KEY}`,
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+        'anthropic-version': '2023-06-01',
+      },
+      data: {
+        model,
+        messages: [{ role: 'user', content: 'Reply with only: PONG' }],
+        max_tokens: 16,
+      },
+      timeout: 30_000,
+    })
+    expect(resp.ok(), `/v1/messages (${model}) → ${resp.status()}`).toBe(true)
+    const json = await resp.json()
+    const text: string = json.content?.[0]?.text ?? ''
+    expect(text).toBeTruthy()
+    console.log(`✓ Anthropic-compat /v1/messages (${model}): "${text.trim()}"`)
+  })
+})

e2e/deeplink-refresh.spec.ts

@@ -0,0 +1,80 @@
+/**
+ * e2e regression: the reported launch bug — product routes must render on a
+ * DIRECT URL load and a browser REFRESH, not only via in-app navigation.
+ *
+ * Product modules mount client-only under the catch-all route, so a throw in one
+ * module's first render used to bubble to Next's root fallback and white-screen
+ * the whole console with "Application error: a client-side exception has
+ * occurred" — but ONLY on a direct load / refresh (in-app nav renders fresh and
+ * hid it). `ProductErrorBoundary` + the dashboard `error.tsx` close that class:
+ * even a module throw now keeps the shell and shows a retryable card, never a
+ * white screen. This spec proves each target route:
+ *   1. direct-loads without a client-exception white-screen,
+ *   2. refreshes (F5) without one,
+ *   3. still deep-links its own real content (shell + main region present).
+ *
+ * Credentials (env, never in repo): HANZO_EMAIL / HANZO_PASSWORD, BASE_URL.
+ * Run:  HANZO_PASSWORD=xxx BASE_URL=https://console.hanzo.ai pnpm e2e deeplink-refresh.spec.ts
+ */
+import { test, expect, type Page } from '@playwright/test'
+
+const EMAIL = process.env.HANZO_EMAIL ?? 'z@hanzo.ai'
+const PASSWORD = process.env.HANZO_PASSWORD ?? ''
+const BASE_URL = process.env.BASE_URL ?? 'https://console.hanzo.ai'
+
+// The three routes from the report, plus controls known to deep-link fine.
+const TARGETS = ['/playground', '/prompts', '/gpus']
+const CONTROLS = ['/models', '/providers']
+
+async function signIn(page: Page) {
+  await page.goto(`${BASE_URL}/signin`)
+  await page.waitForSelector('input[placeholder="Email"]', { timeout: 20_000 })
+  // @hanzo/gui Input binds onChangeText — real keystrokes, not fill().
+  await page.locator('input[placeholder="Email"]').pressSequentially(EMAIL, { delay: 12 })
+  await page.locator('input[placeholder="Password"]').pressSequentially(PASSWORD, { delay: 12 })
+  await page.click('button:has-text("Sign in")')
+  const origin = new URL(BASE_URL).origin
+  await page.waitForURL((u) => u.origin === origin && u.pathname === '/', { timeout: 30_000 })
+  await page.waitForLoadState('domcontentloaded')
+}
+
+/** Assert the page rendered the console (shell + main) and did NOT white-screen. */
+async function assertRendered(page: Page, route: string, phase: string) {
+  await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {})
+  // No client-exception white-screen.
+  await expect(
+    page.locator('text=/Application error|client-side exception|Unhandled Runtime Error/i'),
+    `${route} (${phase}) must not white-screen`,
+  ).toHaveCount(0)
+  // Shell survived: the persistent nav ("Overview"/"Apps") is present.
+  const body = (await page.locator('body').innerText().catch(() => '')) || ''
+  expect(body.length, `${route} (${phase}) has content`).toBeGreaterThan(200)
+  expect(body, `${route} (${phase}) kept the shell`).toMatch(/Overview|Apps|Sign out/i)
+}
+
+test.describe('deep-link + refresh must not crash', () => {
+  test.skip(!PASSWORD, 'HANZO_PASSWORD not set — skipping authenticated deep-link pass')
+
+  test.beforeEach(async ({ page }) => {
+    await signIn(page)
+  })
+
+  for (const route of [...TARGETS, ...CONTROLS]) {
+    test(`direct load + refresh: ${route}`, async ({ page }) => {
+      const errors: string[] = []
+      page.on('pageerror', (e) => errors.push(String(e)))
+
+      // 1) DIRECT URL load (full navigation, fresh document).
+      const res = await page.goto(`${BASE_URL}${route}`, { waitUntil: 'domcontentloaded' })
+      expect(res?.status() ?? 0, `${route} HTTP`).toBeLessThan(500)
+      await assertRendered(page, route, 'direct')
+
+      // 2) REFRESH (F5) — the reported failing action.
+      await page.reload({ waitUntil: 'domcontentloaded' })
+      await assertRendered(page, route, 'refresh')
+
+      // An uncaught pageerror on these routes is the regression we are locking out.
+      expect(errors, `${route} uncaught pageerror(s): ${errors.join(' | ').slice(0, 300)}`).toEqual([])
+    })
+  }
+})

e2e/entitlement-sidebar.spec.ts

@@ -0,0 +1,93 @@
+/**
+ * e2e: entitlement-gated sidebar — mocked-network render proof.
+ *
+ * Runs against a LOCAL server (BASE_URL=http://localhost:4000) with the whole
+ * network mocked (same pattern as budgets-responsive): `/auth/session` → a CUSTOMER
+ * (non-admin, non-super-admin) account, and `/v1/orgs/<org>/entitlements` →
+ * `{ enabled: ['agents'] }`. Everything else → an empty-ok envelope.
+ *
+ * It proves the out-of-box gate: a customer's sidebar shows ONLY the products the
+ * org has enabled (always-on essentials + Agents), HIDES a non-entitled product
+ * (GPUs), and offers the "Add product" flow — whose panel lists the non-entitled
+ * products with an Enable action.
+ *
+ * Run: BASE_URL=http://localhost:4000 npx playwright test entitlement-sidebar
+ */
+import { test, expect, type Route, type Page } from '@playwright/test'
+
+const BASE_URL = process.env.BASE_URL ?? 'http://localhost:4000'
+const ORG = 'maxpower'
+
+// A CUSTOMER — NOT a super admin (no isSuperAdmin/isGlobalAdmin, owner ≠ admin), so
+// the entitlement gate is in force (a super admin would bypass it).
+const ACCOUNT = {
+  owner: ORG,
+  name: 'dave',
+  type: 'normal-user',
+  email: 'dave@maxpower.com',
+  displayName: 'Dave',
+  isAdmin: true, // admin of their OWN org — still a customer, not a platform admin
+  signupApplication: 'hanzo-cloud',
+}
+
+const API_RE = /\/(v1|cloud|ai|billing|commerce|telemetry|vm|superbase|admin|paas|integrations|auth\/refresh)(\/|$|\?)/
+
+async function mock(route: Route) {
+  const req = route.request()
+  if (req.resourceType() === 'document') return route.continue()
+  const url = new URL(req.url())
+  const path = url.pathname
+
+  if (path === '/auth/session') {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ account: ACCOUNT, expiresIn: 3600 }) })
+  }
+  if (path.startsWith('/auth/')) {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ ok: true }) })
+  }
+  // The gate under test — the org has ONLY Agents enabled beyond the essentials.
+  if (path === `/v1/orgs/${ORG}/entitlements`) {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ enabled: ['agents'] }) })
+  }
+
+  const sameOrigin = url.origin === new URL(BASE_URL).origin
+  if (sameOrigin && !API_RE.test(path)) return route.continue()
+  return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ status: 'ok', msg: '', data: [], data2: 0 }) })
+}
+
+async function openShell(page: Page) {
+  await page.addInitScript((org) => {
+    try {
+      // Enter the org (skip the picker) so the dashboard shell mounts.
+      localStorage.setItem('hanzo.console.org', org)
+      localStorage.setItem('hanzo.console.org.selected', '1')
+      localStorage.setItem('hz_admin_banner_dismissed', '1')
+    } catch {
+      /* private mode */
+    }
+  }, ORG)
+  await page.route('**/*', mock)
+  await page.goto(`${BASE_URL}/agents`, { waitUntil: 'domcontentloaded' })
+  await page.waitForTimeout(1200)
+}
+
+test('gated sidebar shows only enabled products + Add product', async ({ browser }) => {
+  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } })
+  const page = await ctx.newPage()
+  await openShell(page)
+
+  const nav = page.locator('nav, [role="navigation"]').first()
+
+  // Enabled product IS in the nav.
+  await expect(page.getByText('Agents', { exact: true }).first()).toBeVisible({ timeout: 20_000 })
+  // The "Add product" affordance is offered.
+  await expect(page.getByRole('button', { name: 'Add product' }).first()).toBeVisible()
+  // A non-entitled product is HIDDEN from the sidebar nav.
+  await expect(nav.getByText('GPUs', { exact: true })).toHaveCount(0)
+
+  // The Add-product flow lists the non-entitled products with an Enable action.
+  await page.getByRole('button', { name: 'Add product' }).first().click()
+  await expect(page.getByText('Enable products to add them', { exact: false }).first()).toBeVisible({ timeout: 10_000 })
+  await expect(page.getByRole('button', { name: /Enable GPUs/ }).first()).toBeVisible()
+
+  await ctx.close()
+})

e2e/gpus-connect.spec.ts

@@ -0,0 +1,101 @@
+/**
+ * e2e screenshot proof — the GPUs page shows BOTH "Connect GPU" (BYO) and "Deploy GPU"
+ * (cloud) actions, and a BYO machine renders with a BYO badge next to a cloud one.
+ *
+ * Fully mocked network (no backend, no password), same harness as blank-audit:
+ *   - /auth/session → a tenant customer (so CustomerGpus renders, not AdminGpus).
+ *   - GET .../v1/machines → one BYO GB10 (provider=byo) + one cloud H100 (provider=doks).
+ *   - GET .../v1/gpus → a small live catalog so the page reads real.
+ *   - every other data path → an honest empty envelope.
+ *
+ * Writes two PNGs to e2e/shots/. Run:
+ *   BASE_URL=http://localhost:4000 npx playwright test gpus-connect
+ */
+import { test, type Route } from '@playwright/test'
+import { mkdirSync } from 'node:fs'
+import { join } from 'node:path'
+
+const BASE_URL = process.env.BASE_URL ?? 'http://localhost:4000'
+const SHOTS = join(process.cwd(), 'e2e', 'shots')
+
+const ACCOUNT = {
+  owner: 'maxpower',
+  name: 'dave',
+  type: 'normal-user',
+  email: 'dave@maxpower.com',
+  displayName: 'Dave',
+  isGlobalAdmin: false,
+  isAdmin: true,
+  signupApplication: 'hanzo-cloud',
+}
+
+const ok = (data: unknown) => JSON.stringify({ status: 'ok', msg: '', data })
+
+// Two GPU machines: a BYO GB10 that dialed in via `hanzo gpu connect`, and a
+// Hanzo-Cloud-provisioned H100. isGpuMachine keeps both (gpu set / gpu-* slug).
+const MACHINES = [
+  { id: 'gb10-studio', name: 'gb10-studio', type: 'byo-gpu', provider: 'byo', gpu: 'NVIDIA GB10', region: 'on-prem', status: 'online' },
+  { id: 'gpu-h100-sfo', name: 'gpu-h100-sfo', type: 'gpu-h100x1-80gb', provider: 'doks', gpu: 'H100', region: 'sfo3', status: 'running', costHourlyUsd: 2.49 },
+]
+
+const CATALOG = [
+  { slug: 'gpu-h100x1-80gb', model: 'H100', gpuCount: 1, vramGb: 80, vcpus: 20, memGb: 240, priceHourly: 2.49, priceMonthly: 1818 },
+  { slug: 'gpu-a100x1-40gb', model: 'A100', gpuCount: 1, vramGb: 40, vcpus: 12, memGb: 120, priceHourly: 1.59, priceMonthly: 1161 },
+  { slug: 'gpu-l40sx1-48gb', model: 'L40S', gpuCount: 1, vramGb: 48, vcpus: 8, memGb: 64, priceHourly: 1.14, priceMonthly: 832 },
+]
+
+const API_RE = /\/(v1|cloud|ai|billing|commerce|telemetry|vm|superbase|admin|paas|integrations|auth\/refresh)(\/|$|\?)/
+
+async function mock(route: Route) {
+  const req = route.request()
+  if (req.resourceType() === 'document') return route.continue()
+  const url = new URL(req.url())
+  const path = url.pathname
+
+  if (path === '/auth/session') {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ account: ACCOUNT, expiresIn: 3600 }) })
+  }
+  if (path.startsWith('/auth/')) {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ ok: true }) })
+  }
+
+  const sameOrigin = url.origin === new URL(BASE_URL).origin
+  if (sameOrigin && !API_RE.test(path)) return route.continue()
+
+  // Data paths — match by suffix so it works regardless of /vm vs /cloud proxy prefix.
+  if (path.endsWith('/v1/machines')) return route.fulfill({ status: 200, contentType: 'application/json', body: ok(MACHINES) })
+  if (path.endsWith('/v1/gpus')) return route.fulfill({ status: 200, contentType: 'application/json', body: ok(CATALOG) })
+  // Everything else (regions, sizes, clusters, billing, …) → honest empty.
+  return route.fulfill({ status: 200, contentType: 'application/json', body: ok([]) })
+}
+
+test('GPUs page: Connect vs Deploy + BYO/Cloud badges', async ({ browser }) => {
+  mkdirSync(SHOTS, { recursive: true })
+  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 2 })
+  const page = await ctx.newPage()
+  await page.addInitScript((org) => {
+    try {
+      localStorage.setItem('hanzo.console.org', org)
+      localStorage.setItem('hz_admin_banner_dismissed', '1')
+    } catch {
+      /* private mode */
+    }
+  }, ACCOUNT.owner)
+  await page.route('**/*', mock)
+
+  await page.goto(`${BASE_URL}/gpus`, { waitUntil: 'domcontentloaded' })
+  await page.locator('[data-testid="product-content"]').first().waitFor({ state: 'attached', timeout: 20_000 })
+  // Wait for both header actions to be present, then the machine rows to render.
+  await page.getByRole('button', { name: 'Connect GPU' }).first().waitFor({ timeout: 20_000 })
+  await page.locator('text=NVIDIA GB10').first().waitFor({ timeout: 20_000 })
+  await page.waitForTimeout(600)
+  await page.screenshot({ path: join(SHOTS, 'gpus-connect-deploy.png'), fullPage: true })
+
+  // Open the Connect drawer and capture it.
+  await page.getByRole('button', { name: 'Connect GPU' }).first().click()
+  await page.locator('text=hanzo gpu connect').first().waitFor({ timeout: 10_000 })
+  await page.waitForTimeout(500)
+  await page.screenshot({ path: join(SHOTS, 'gpus-connect-drawer.png'), fullPage: true })
+
+  await ctx.close()
+})

e2e/insights-o11y.spec.ts

@@ -0,0 +1,200 @@
+/**
+ * PROOF: Insights (o11y observability) is live, IAM-gated, and renders on
+ * admin.hanzo.ai for the SuperAdmin — wired to the VERSION-LESS `/v1/o11y/<resource>`
+ * surface (cloud embedded o11y v1.5.4).
+ *
+ * Two layers, so the spec is ALWAYS runnable and honest:
+ *
+ *  A. UNAUTHENTICATED gate proof (always runs, no creds). Proves the version-less
+ *     surface is LIVE and IAM-gated against the real backend:
+ *       - GET  /v1/o11y/health          → 200 {"service":"o11y","status":"ok"}
+ *       - POST /v1/o11y/services         → 403 "no validated principal"  (gated)
+ *       - POST /v1/o11y/query_range      → 403 "no validated principal"  (gated)
+ *       - GET  /v1/o11y/rules            → 403 "no validated principal"  (gated)
+ *     i.e. anonymous is refused (403), so a logged-in bearer is REQUIRED — which is
+ *     exactly why the console routes o11y through the `/v1` user-bearer BFF.
+ *     (The deprecated `/v1/o11y/v1/rules` alias also still resolves — 403, not 404.)
+ *
+ *  B. AUTHENTICATED render proof (runs when a SuperAdmin password is provided). Signs
+ *     in, establishes the shared `.hanzo.ai` session, enters admin.hanzo.ai (or falls
+ *     back to console.hanzo.ai — the SAME image — when the edge guard refuses), and:
+ *       - fetches `/v1/o11y/health` + reads through the bearer proxy: a logged-in
+ *         session PASSES the IAM gate (NOT 403); health is 200.
+ *       - navigates to Insights (Service Map · Logs · Traces · Fleet Observability) and
+ *         asserts each RENDERS — real o11y data when the runtime returns rows, else the
+ *         honest RuntimeNotice — never a crash. Screenshots each.
+ *
+ * Run:
+ *   # unauthenticated gate proof (works today, no creds):
+ *   BASE_URL=https://console.hanzo.ai npx playwright test insights-o11y --reporter=line
+ *   # full authenticated render proof (needs the SuperAdmin password):
+ *   HANZO_EMAIL='z@hanzo.ai' HANZO_PASSWORD='…' npx playwright test insights-o11y --reporter=line
+ *
+ * The SuperAdmin creds are the reserved-`admin`-org superuser (admin.hanzo.ai login).
+ * If z@hanzo.ai resolves to the brand `hanzo` org (a per-org admin, not the platform
+ * SuperAdmin), the per-org Insights modules STILL render for the hanzo org (o11y only
+ * needs a validated principal, not the admin org); the cross-org Fleet Observability
+ * board is the one surface that additionally requires `owner==admin`.
+ */
+import { test, expect, type Page, type APIRequestContext } from '@playwright/test'
+
+const EMAIL = process.env.HANZO_EMAIL ?? 'z@hanzo.ai'
+const PASSWORD = process.env.HANZO_PASSWORD ?? ''
+const CONSOLE = process.env.CONSOLE_URL ?? 'https://console.hanzo.ai'
+const ADMIN = process.env.ADMIN_URL ?? 'https://admin.hanzo.ai'
+/** The real cloud backend the console's `/v1` bearer BFF forwards to (for the direct gate proof). */
+const CLOUD_API = process.env.CLOUD_API_ORIGIN ?? 'https://api.hanzo.ai'
+const SHOTS = process.env.SHOT_DIR ?? 'e2e-shots'
+
+// ── o11y-shape payloads (mirrors src/lib/api/apm.ts — inlined so the spec has no
+//    'use client'/React import from the app source) ────────────────────────────────
+const nowMs = Date.now()
+const win = { startNs: String((nowMs - 3_600_000) * 1e6), endNs: String(nowMs * 1e6), startMs: nowMs - 3_600_000, endMs: nowMs }
+const servicesBody = { start: win.startNs, end: win.endNs, tags: [] as unknown[] }
+const queryRangeBody = {
+  start: win.startMs,
+  end: win.endMs,
+  step: 60,
+  compositeQuery: {
+    queryType: 'builder',
+    panelType: 'list',
+    builderQueries: {
+      A: {
+        queryName: 'A',
+        dataSource: 'logs',
+        aggregateOperator: 'noop',
+        aggregateAttribute: {},
+        expression: 'A',
+        disabled: false,
+        stepInterval: 60,
+        filters: { items: [], op: 'AND' },
+        groupBy: [],
+        having: [],
+        orderBy: [{ columnName: 'timestamp', order: 'desc' }],
+        limit: null,
+        offset: 0,
+        pageSize: 50,
+      },
+    },
+  },
+}
+
+/** Sign in via the console app sign-in form (email/password → session cookie). */
+async function signIn(page: Page, base: string) {
+  await page.goto(`${base}/signin`)
+  await page.waitForSelector('input[placeholder="Email"]', { timeout: 25_000 })
+  await page.fill('input[placeholder="Email"]', EMAIL)
+  await page.fill('input[placeholder="Password"]', PASSWORD)
+  await page.click('button:has-text("Sign in")')
+  await page.waitForFunction(() => !location.pathname.startsWith('/signin'), { timeout: 30_000 }).catch(() => {})
+  await page.waitForLoadState('domcontentloaded')
+}
+
+/** Body text of an APIResponse, best-effort. */
+async function body(res: { text(): Promise<string> }): Promise<string> {
+  return (await res.text().catch(() => '')).slice(0, 200)
+}
+
+// ════════════════════════════════════════════════════════════════════════════════
+// A. Unauthenticated gate proof — ALWAYS runs (no credentials required).
+// ════════════════════════════════════════════════════════════════════════════════
+test.describe('Insights o11y — version-less surface is LIVE + IAM-gated (unauthenticated)', () => {
+  test('GET /v1/o11y/health is 200; the reads are 403 "no validated principal"', async ({ request }: { request: APIRequestContext }) => {
+    // Liveness — the version-less health endpoint the reboot ships (public).
+    const health = await request.get(`${CLOUD_API}/v1/o11y/health`)
+    expect(health.status(), 'version-less /v1/o11y/health must be live').toBe(200)
+    const healthBody = await body(health)
+    expect(healthBody, 'health should report the o11y service ok').toMatch(/o11y|ok|status|healthy/i)
+    console.log(`✓ GET /v1/o11y/health → 200 :: ${healthBody}`)
+
+    // Every VERSION-LESS read is IAM-gated: anonymous → 403 "no validated principal".
+    // This is the proof that a logged-in bearer is REQUIRED (attached by the /v1 bearer BFF).
+    const gated: { name: string; res: Awaited<ReturnType<APIRequestContext['get']>> }[] = [
+      { name: 'services', res: await request.post(`${CLOUD_API}/v1/o11y/services`, { data: servicesBody }) },
+      { name: 'query_range', res: await request.post(`${CLOUD_API}/v1/o11y/query_range`, { data: queryRangeBody }) },
+      { name: 'rules', res: await request.get(`${CLOUD_API}/v1/o11y/rules`) },
+    ]
+    for (const g of gated) {
+      expect(g.res.status(), `version-less /v1/o11y/${g.name} must be IAM-gated (403) for an anonymous caller`).toBe(403)
+      expect(await body(g.res)).toMatch(/no validated principal|principal|unauthor/i)
+      console.log(`✓ /v1/o11y/${g.name} → 403 (IAM-gated, anonymous refused)`)
+    }
+
+    // The deprecated nested-version alias still RESOLVES (gated, not a 404) — canonical
+    // is version-less, but the old form remains addressable during migration.
+    const alias = await request.get(`${CLOUD_API}/v1/o11y/v1/rules`)
+    expect(alias.status(), 'deprecated /v1/o11y/v1/rules alias should resolve (403), not 404').toBe(403)
+    console.log('✓ deprecated /v1/o11y/v1/rules alias resolves (403, not 404) — version-less is canonical')
+  })
+})
+
+// ════════════════════════════════════════════════════════════════════════════════
+// B. Authenticated render proof — runs when a SuperAdmin password is provided.
+// ════════════════════════════════════════════════════════════════════════════════
+test.describe('Insights renders on admin.hanzo.ai for the SuperAdmin (authenticated)', () => {
+  test.skip(!PASSWORD, 'HANZO_PASSWORD (SuperAdmin) not set — authenticated render proof staged')
+
+  /** Sign in on console (sets the `.hanzo.ai` session) and pick the admin surface if it admits. */
+  async function enter(page: Page): Promise<string> {
+    await signIn(page, CONSOLE)
+    // admin.hanzo.ai carries an edge forward-auth guard (`admin-guard@file`, org=admin).
+    // The shared `.hanzo.ai` session set above may admit the SuperAdmin; if the guard
+    // still refuses, fall back to console.hanzo.ai — the SAME image + o11y wiring.
+    const probe = await page.request.get(`${ADMIN}/`)
+    if (probe.status() === 200) {
+      console.log('✓ admin.hanzo.ai admitted the session — proving on the admin surface')
+      return ADMIN
+    }
+    console.log(`ℹ admin.hanzo.ai edge-guard → ${probe.status()} for the shared session; proving on console.hanzo.ai (same image + o11y wiring)`)
+    return CONSOLE
+  }
+
+  test('o11y reads pass the IAM gate through the /v1 bearer BFF (NOT 403 when signed in)', async ({ page }) => {
+    const surface = await enter(page)
+
+    // Health through the bearer proxy — 200 JSON (NOT the SPA shell / 403).
+    const health = await page.request.get(`${surface}/v1/o11y/health`)
+    expect(health.status(), 'authenticated /v1/o11y/health must be 200').toBe(200)
+    const hb = await body(health)
+    expect(hb, 'health must be JSON from o11y, not the SPA shell').toMatch(/o11y|ok|status|healthy/i)
+    expect(hb, 'health must not be the HTML app shell').not.toMatch(/<!DOCTYPE html>|<html/i)
+    console.log(`✓ authenticated /v1/o11y/health → 200 :: ${hb}`)
+
+    // The gated reads: a logged-in session's minted bearer PASSES the IAM gate. The
+    // runtime may answer 200 (rows or honest-empty) or 503 (initializing) — but NEVER
+    // 403 "no validated principal" (which the anonymous caller got in proof A).
+    const reads: { name: string; res: Awaited<ReturnType<typeof page.request.post>> }[] = [
+      { name: 'services', res: await page.request.post(`${surface}/v1/o11y/services`, { data: servicesBody }) },
+      { name: 'query_range', res: await page.request.post(`${surface}/v1/o11y/query_range`, { data: queryRangeBody }) },
+      { name: 'rules', res: await page.request.get(`${surface}/v1/o11y/rules`) },
+    ]
+    for (const r of reads) {
+      expect(r.res.status(), `/v1/o11y/${r.name} must PASS the IAM gate (not 403) for a signed-in session`).not.toBe(403)
+      console.log(`✓ authenticated /v1/o11y/${r.name} → ${r.res.status()} (bearer passed the gate)`)
+    }
+  })
+
+  test('Insights modules render (Service Map · Logs · Traces · Fleet Observability)', async ({ page }) => {
+    const surface = await enter(page)
+
+    // Each Observe module must MOUNT and render either real o11y data or the honest
+    // RuntimeNotice/empty state — and never a crash / error boundary / blank.
+    const modules: { id: string; label: string; expect: RegExp }[] = [
+      { id: 'service-map', label: 'Service Map', expect: /Service Map|Rate|Errors|Duration|p99|dependency|Observability|no telemetry|not enabled|initializing/i },
+      { id: 'logs', label: 'Logs', expect: /Logs|Application logs|Request activity|Severity|Message|no application logs|Observability|initializing/i },
+      { id: 'o11y', label: 'Traces', expect: /Traces|Trace|Latency|Tokens|Cost|Observability|No traces|initializing|not enabled/i },
+      { id: 'fleet-o11y', label: 'Fleet Observability', expect: /Fleet Observability|Requests|Tokens|Latency|Top organizations|operator access|not authorized/i },
+    ]
+    for (const m of modules) {
+      await page.goto(`${surface}/${m.id}`, { waitUntil: 'domcontentloaded' })
+      await expect(page, `${m.label} bounced to sign-in`).not.toHaveURL(/\/signin/, { timeout: 15_000 })
+      // No React error boundary / hard crash.
+      await expect(page.locator('text=/something went wrong|application error|Unexpected token|this page could not be found/i'),
+        `${m.label} crashed`).toHaveCount(0)
+      // The module rendered its own surface (real data OR an honest state).
+      await expect(page.getByText(m.expect).first(), `${m.label} did not render`).toBeVisible({ timeout: 30_000 })
+      await page.screenshot({ path: `${SHOTS}/insights-${m.id}.png`, fullPage: true })
+      console.log(`✓ ${m.label} (/${m.id}) rendered — screenshot e2e-shots/insights-${m.id}.png`)
+    }
+  })
+})

e2e/interactive-training.spec.ts

@@ -0,0 +1,129 @@
+/**
+ * e2e: Interactive Training (Fine-tuning → Interactive tab) — mocked-network render proof.
+ *
+ * Runs against a LOCAL server (BASE_URL=http://localhost:4000) with the whole network
+ * mocked (same pattern as budgets-responsive / entitlement-sidebar): `/auth/session` → a
+ * super-admin account so the shell mounts and the entitlement gate is bypassed, the engine
+ * training plane (`/v1/training/clients` + `/clients/<id>`) → real-shaped fixtures,
+ * everything else → an empty-ok envelope.
+ *
+ * It proves the ENGINE plane surface: the Interactive tab renders, the New-client form
+ * validates an empty base_model (Create disabled until a model is typed), a mocked client
+ * row reports status `ready`, and selecting it renders the loss-curve chart region.
+ *
+ * Run: BASE_URL=http://localhost:4000 npx playwright test interactive-training
+ */
+import { test, expect, type Route, type Page } from '@playwright/test'
+import { mkdirSync } from 'node:fs'
+import { join } from 'node:path'
+
+const BASE_URL = process.env.BASE_URL ?? 'http://localhost:4000'
+const ORG = 'hanzo'
+const SHOTS = join(process.cwd(), 'e2e-shots')
+
+const ACCOUNT = {
+  owner: ORG,
+  name: 'z',
+  type: 'normal-user',
+  email: 'z@hanzo.ai',
+  displayName: 'Z Admin',
+  isSuperAdmin: true,
+  isGlobalAdmin: true,
+  isAdmin: true,
+  signupApplication: 'hanzo-cloud',
+}
+
+const LORA = { rank: 16, alpha: 32, target_modules: ['q_proj', 'k_proj', 'v_proj', 'o_proj', 'gate_proj', 'up_proj', 'down_proj'] }
+const CLIENT = {
+  id: 'client_demo',
+  base_model: 'HuggingFaceTB/SmolLM2-135M',
+  status: 'ready',
+  lora_config: LORA,
+  trainable_params: 442368,
+  forward_backward_calls: 3,
+  optim_steps: 2,
+  last_loss: 1.234,
+}
+const DETAIL = { ...CLIENT, loss_history: [2.4, 2.0, 1.7, 1.5, 1.234] }
+
+const API_RE = /\/(v1|cloud|ai|billing|commerce|telemetry|vm|superbase|admin|paas|integrations|auth\/refresh)(\/|$|\?)/
+
+async function mock(route: Route) {
+  const req = route.request()
+  if (req.resourceType() === 'document') return route.continue()
+  const url = new URL(req.url())
+  const path = url.pathname
+
+  if (path === '/auth/session') {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ account: ACCOUNT, expiresIn: 3600 }) })
+  }
+  if (path.startsWith('/auth/')) {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ ok: true }) })
+  }
+  // The engine training plane under test — the clean `/v1/training/*` the browser calls
+  // (next.config dispatches it to the `/ai` bearer proxy server-side; the mock short-circuits).
+  if (path === '/v1/training/clients') {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ clients: [CLIENT] }) })
+  }
+  if (path === `/v1/training/clients/${CLIENT.id}`) {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(DETAIL) })
+  }
+
+  const sameOrigin = url.origin === new URL(BASE_URL).origin
+  if (sameOrigin && !API_RE.test(path)) return route.continue()
+  return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ status: 'ok', msg: '', data: [], data2: 0 }) })
+}
+
+async function openInteractive(page: Page) {
+  await page.addInitScript((org) => {
+    try {
+      localStorage.setItem('hanzo.console.org', org)
+      localStorage.setItem('hanzo.console.org.selected', '1')
+      localStorage.setItem('hz_admin_banner_dismissed', '1')
+      // Skip the first-run onboarding wizard so the console surface mounts directly.
+      localStorage.setItem(`hz_onboarding_done:${org}`, '1')
+    } catch {
+      /* private mode */
+    }
+  }, ORG)
+  await page.route('**/*', mock)
+  await page.goto(`${BASE_URL}/finetuning/interactive`, { waitUntil: 'domcontentloaded' })
+  await page.waitForTimeout(1500)
+}
+
+test('Interactive tab renders the engine plane, validates create, shows a ready client + loss chart', async ({ browser }) => {
+  mkdirSync(SHOTS, { recursive: true })
+  const ctx = await browser.newContext({ viewport: { width: 1440, height: 1000 } })
+  const page = await ctx.newPage()
+  await openInteractive(page)
+
+  // No hard crash / bounce to sign-in.
+  await expect(page).not.toHaveURL(/\/signin/)
+  await expect(page.locator('text=/Application error|Unhandled Runtime Error/i')).toHaveCount(0)
+
+  // 1. The Interactive tab surface rendered (its unique sub-header copy).
+  await expect(page.getByText(/Create a live LoRA client/i)).toBeVisible({ timeout: 20_000 })
+
+  // 2. A mocked client row reports status `ready`.
+  await expect(page.getByText('client_demo').first()).toBeVisible({ timeout: 15_000 })
+  await expect(page.getByText('ready', { exact: true }).first()).toBeVisible()
+
+  // 3. The New-client form validates an empty base_model: Create is disabled until a
+  //    model is typed.
+  await page.getByRole('button', { name: 'New client' }).first().click()
+  const baseInput = page.getByPlaceholder('HuggingFaceTB/SmolLM2-135M')
+  await expect(baseInput).toBeVisible({ timeout: 10_000 })
+  const create = page.getByRole('button', { name: 'Create client' })
+  await expect(create).toBeDisabled()
+  await baseInput.fill('HuggingFaceTB/SmolLM2-135M')
+  await expect(create).toBeEnabled()
+  await page.screenshot({ path: join(SHOTS, 'interactive-training-clients.png'), fullPage: true })
+
+  // 4. Selecting the client renders its loss-curve chart region (real loss_history).
+  await page.getByText('client_demo').first().click()
+  await expect(page.getByText('Loss curve')).toBeVisible({ timeout: 15_000 })
+  await expect(page.getByText(/steps · last/)).toBeVisible()
+  await page.screenshot({ path: join(SHOTS, 'interactive-training-detail.png'), fullPage: true })
+
+  await ctx.close()
+})

e2e/live-billing-admin.spec.ts

@@ -0,0 +1,148 @@
+/**
+ * LIVE confirmation for feat/billing-usage-admin (v8.4.15) on the deployed cluster.
+ *
+ * Topology (verified live):
+ *  - console.hanzo.ai: the console app is directly reachable at `/`; `/v1/*` is
+ *    routed by the ingress to cloud-api (hanzoai/gateway), which enforces its OWN
+ *    `global admin required` gate. The console's own H1 gate is reachable directly
+ *    at `/admin/aggregate/*`. z@hanzo.ai is a global admin on this host.
+ *  - admin.hanzo.ai: an EDGE forward-auth (`admin-guard@file`, org=admin, cookie
+ *    on `.hanzo.ai`) sits in front of the SAME console image. A browser must carry
+ *    a valid `.hanzo.ai` guard/session cookie to pass; a cold hit is 401.
+ *
+ * Three required checks (task bar):
+ *   (a) admin business board (LivingOverview: MRR/usage/orgs/top-agents/fleet)
+ *       renders for the GLOBAL admin z@hanzo.ai.
+ *   (b) an unprivileged caller gets 403 on /v1/admin/* — no cross-org leak
+ *       (fail-closed gate); iam/kms are not tunneled.
+ *   (c) billing Reports shows the product/agent cost DIMENSION (honest-empty ok).
+ */
+import { test, expect, type Page, type APIRequestContext } from '@playwright/test'
+
+const EMAIL    = process.env.HANZO_EMAIL    ?? 'z@hanzo.ai'
+const PASSWORD = process.env.HANZO_PASSWORD ?? ''
+const CONSOLE  = process.env.CONSOLE_URL    ?? 'https://console.hanzo.ai'
+const ADMIN    = process.env.ADMIN_URL      ?? 'https://admin.hanzo.ai'
+const SHOTS    = process.env.SHOT_DIR       ?? 'e2e-shots'
+
+/** Sign in via the console app sign-in form (email/password → cloud /v1/signin). */
+async function signIn(page: Page, base: string) {
+  await page.goto(`${base}/signin`)
+  await page.waitForSelector('input[placeholder="Email"]', { timeout: 25_000 })
+  await page.fill('input[placeholder="Email"]', EMAIL)
+  await page.fill('input[placeholder="Password"]', PASSWORD)
+  await page.click('button:has-text("Sign in")')
+  await page.waitForFunction(() => !location.pathname.startsWith('/signin'), { timeout: 30_000 })
+  await page.waitForLoadState('domcontentloaded')
+}
+
+// ─── (b) fail-closed gate — needs no credentials, always runs ─────────────────
+test.describe('LIVE v8.4.15 — (b) admin gate fail-closed', () => {
+  test('/v1/admin/* → 403 unauthenticated on console.hanzo.ai; iam/kms not tunneled', async ({ request }) => {
+    for (const head of ['overview', 'usage', 'orgs', 'audit', 'products']) {
+      const res = await request.get(`${CONSOLE}/v1/admin/${head}`)
+      expect(res.status(), `${CONSOLE}/v1/admin/${head} must be 403`).toBe(403)
+    }
+    // The console's OWN H1 route is also fail-closed.
+    const own = await request.get(`${CONSOLE}/admin/aggregate/overview`)
+    expect(own.status(), 'console app /admin/aggregate gate must be 403').toBe(403)
+    // Least privilege: iam/kms are NOT reachable through the aggregate rewrite.
+    for (const head of ['iam', 'kms']) {
+      const res = await request.get(`${CONSOLE}/admin/aggregate/${head}`)
+      expect([403, 404], `${head} must not tunnel via aggregate`).toContain(res.status())
+    }
+    // Edge-guarded admin host: cold hit is refused (401 forward-auth) — never open.
+    const edge = await request.get(`${ADMIN}/v1/admin/overview`)
+    expect(edge.status(), 'admin.hanzo.ai must be edge-gated (401/403)').toBeGreaterThanOrEqual(401)
+    expect(edge.status()).toBeLessThan(404)
+    console.log('✓ (b) console /v1/admin/* → 403 unauth; /admin/aggregate/{iam,kms} not tunneled; admin.hanzo.ai edge-gated')
+  })
+})
+
+// ─── (a) + (c) authenticated as the global admin z@hanzo.ai ───────────────────
+test.describe('LIVE v8.4.15 — (a) business board + (c) billing dimension', () => {
+  test.skip(!PASSWORD, 'HANZO_PASSWORD not set')
+
+  test('(a) admin business board renders for global admin z@hanzo.ai', async ({ page }) => {
+    await signIn(page, CONSOLE)
+
+    // The business board (catalog id `business`, admin:true) renders the ONE
+    // LivingOverview for `admin-business`: MRR / revenue / active orgs / customers,
+    // revenue+usage trend, top-agents-by-cost donut, fleet health.
+    await page.goto(`${CONSOLE}/business`, { waitUntil: 'domcontentloaded' })
+    await expect(page).not.toHaveURL(/\/signin/, { timeout: 15_000 })
+
+    // Global admin sees the board (not the admin-only "not authorized" gate).
+    const board = page.locator(
+      'text=/MRR|Revenue|Active orgs|Customers|Usage cost|Top agents|Fleet|Business/i'
+    ).first()
+    await expect(board, 'admin business board did not render for the global admin').toBeVisible({ timeout: 30_000 })
+    // The client admin gate did NOT block z (would show a forbidden/hidden state).
+    await expect(page.locator('text=/not authorized|access denied|admin only|forbidden/i')).toHaveCount(0)
+
+    await page.screenshot({ path: `${SHOTS}/a-business-board.png`, fullPage: true })
+    console.log('✓ (a) admin business board rendered for global admin z@hanzo.ai')
+  })
+
+  // (a2) The god-view gate is consistent with the account's ACTUAL grant. z@hanzo.ai
+  // lives in org `hanzo` (a brand/org admin), NOT the global `admin` org, so the
+  // all-orgs god view is correctly refused (403) and the board shows the honest
+  // "managed by Hanzo" fallback — no fabricated cross-org KPIs, no leak. A member of
+  // the `admin` org would instead get 200 and the KPI board. Either way the gate is
+  // fail-closed and matches what the board renders.
+  test('(a2) god-view gate matches the account grant (hanzo org-admin → honest 403)', async ({ page }) => {
+    await signIn(page, CONSOLE)
+    const acct = await (await page.request.get(`${CONSOLE}/v1/get-account`)).json().catch(() => ({}))
+    const owner = acct?.data?.owner
+    const res = await page.request.get(`${CONSOLE}/v1/admin/overview`)
+    if (owner === 'admin') {
+      expect(res.status(), 'global admin must pass the gate').not.toBe(403)
+      console.log(`✓ (a2) global-admin (org=admin) /v1/admin/overview → ${res.status()} (gate passed)`)
+    } else {
+      expect(res.status(), 'non-global-admin must be refused the god view').toBe(403)
+      console.log(`✓ (a2) org-admin (org=${owner}) → 403 on the god view; board shows honest managed fallback (no cross-org leak)`)
+    }
+  })
+
+  // (a3) admin.hanzo.ai: after establishing the shared `.hanzo.ai` session, the
+  // edge guard should admit the global admin and render the same board. If the
+  // guard still refuses (its own OIDC bootstrap), record the honest state — the
+  // board is proven on console.hanzo.ai (same image) and the edge gate is proven
+  // fail-closed above.
+  test('(a3) admin.hanzo.ai admits the global admin (or is honestly edge-gated)', async ({ page }) => {
+    await signIn(page, CONSOLE) // sets the `.hanzo.ai`-scoped session
+    const res = await page.request.get(`${ADMIN}/`)
+    if (res.status() === 200) {
+      await page.goto(`${ADMIN}/business`, { waitUntil: 'domcontentloaded' })
+      const board = page.locator('text=/MRR|Revenue|Active orgs|Customers|Top agents|Business/i').first()
+      await expect(board).toBeVisible({ timeout: 30_000 })
+      await page.screenshot({ path: `${SHOTS}/a3-admin-host-board.png`, fullPage: true })
+      console.log('✓ (a3) admin.hanzo.ai admitted the global admin; board rendered')
+    } else {
+      console.log(`ℹ (a3) admin.hanzo.ai edge-guard returned ${res.status()} for the shared session — board verified on console.hanzo.ai (same image)`)
+    }
+  })
+
+  test('(c) billing Reports renders the cost-dimension surface', async ({ page }) => {
+    await signIn(page, CONSOLE)
+    // v8.4.16: the data proxy moved to /billing/v1/*, so /billing/reports now falls
+    // through to the SPA (was shadowed by the /billing/[...path] proxy → raw JSON).
+    // A hard deep-link must render the Reports UI, not a proxy "not found".
+    await page.goto(`${CONSOLE}/billing/reports`, { waitUntil: 'domcontentloaded' })
+    await expect(page).not.toHaveURL(/\/signin/, { timeout: 15_000 })
+    // The route no longer resolves to the commerce proxy JSON.
+    await expect(page.locator('text=/^\\{"error":"not found"\\}$|could not be found/i'),
+      'reports still shadowed by the /billing proxy').toHaveCount(0, { timeout: 20_000 })
+
+    // The Cost-table Reports surface: the "spend by <dimension>" control. model +
+    // provider are always offered; product + agent appear the moment the commerce
+    // ledger tags a row (honest — never a fabricated column). Assert a dimension
+    // affordance renders (BillingReports mounted).
+    const dim = page.getByText(/by model|by provider|by product|by agent|group by|dimension|spend by|Cost by/i).first()
+    await expect(dim, 'cost dimension control did not render').toBeVisible({ timeout: 30_000 })
+    await expect(page.locator('text=/something went wrong|application error/i')).toHaveCount(0)
+
+    await page.screenshot({ path: `${SHOTS}/c-billing-reports.png`, fullPage: true })
+    console.log('✓ (c) /billing/reports rendered the BillingReports cost-dimension control (unshadowed)')
+  })
+})

e2e/open-edition.spec.ts

@@ -0,0 +1,103 @@
+/**
+ * e2e: the Open Edition (run-for-pay) overview renders its real, product-specific
+ * content — not just "a page mounted".
+ *
+ * `pages.spec.ts` proves /open-edition is reachable + doesn't crash (the generic
+ * sweep). THIS spec proves the run-for-pay board actually rendered the things that
+ * make it the Open Edition board: the "Open Edition" heading, the run-for-pay
+ * framing, the "cost + 25%" margin caption on the Spend KPI, and the spend/tokens
+ * KPI labels — all sourced from the config in
+ * src/components/products/overview/living/registry.ts (id `open-edition`), which
+ * reads the REAL commerce usage ledger scoped to the open-edition product tag.
+ *
+ * These are content assertions on the live surface, not a stub: if the config is
+ * unwired, the route unrouted, or the board silently swapped for another usage
+ * view, a specific assertion fails.
+ *
+ * Credentials (env, never in repo):
+ *   HANZO_EMAIL     default z@hanzo.ai (global admin — sees every product)
+ *   HANZO_PASSWORD  required (skips when unset)
+ *   BASE_URL        default https://console.hanzo.ai
+ *
+ * Run:  HANZO_PASSWORD=xxx pnpm e2e open-edition.spec.ts
+ */
+import { test, expect, type Page } from '@playwright/test'
+
+const EMAIL = process.env.HANZO_EMAIL ?? 'z@hanzo.ai'
+const PASSWORD = process.env.HANZO_PASSWORD ?? ''
+const BASE_URL = process.env.BASE_URL ?? 'https://console.hanzo.ai'
+
+async function signIn(page: Page) {
+  await page.goto(`${BASE_URL}/signin`)
+  await page.waitForSelector('input[placeholder="Email"]', { timeout: 20_000 })
+  await page.fill('input[placeholder="Email"]', EMAIL)
+  await page.fill('input[placeholder="Password"]', PASSWORD)
+  await page.click('button:has-text("Sign in")')
+  const base = new URL(BASE_URL).origin
+  await page.waitForURL((url) => url.origin === base && url.pathname === '/', { timeout: 30_000 })
+  await page.waitForLoadState('domcontentloaded')
+}
+
+test.describe('Open Edition — run-for-pay overview renders real content', () => {
+  test.skip(!PASSWORD, 'HANZO_PASSWORD not set — skipping authenticated Open Edition visual gate')
+
+  let ctx: import('@playwright/test').BrowserContext
+  let page: Page
+
+  test.beforeAll(async ({ browser }) => {
+    ctx = await browser.newContext()
+    page = await ctx.newPage()
+    await signIn(page)
+  })
+
+  test.afterAll(async () => {
+    await ctx?.close()
+  })
+
+  test('the /open-edition board mounts, is reachable, and does not crash', async () => {
+    const errors: string[] = []
+    const onErr = (e: Error) => errors.push(String(e))
+    page.on('pageerror', onErr)
+
+    const res = await page.goto(`${BASE_URL}/open-edition`, { waitUntil: 'domcontentloaded' })
+    expect(res?.status() ?? 0, '/open-edition HTTP').toBeLessThan(500)
+
+    await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {})
+    await expect(page.locator('text=/Application error|Unhandled Runtime Error/i')).toHaveCount(0)
+
+    const bodyText = (await page.locator('body').innerText().catch(() => '')) || ''
+    expect(bodyText.trim().length, '/open-edition rendered content').toBeGreaterThan(0)
+
+    page.off('pageerror', onErr)
+    if (errors.length) console.log(`⚠ /open-edition pageerror: ${errors.join(' | ').slice(0, 200)}`)
+  })
+
+  test('renders the Open Edition run-for-pay header + the cost+25% Spend KPI', async () => {
+    await page.goto(`${BASE_URL}/open-edition`, { waitUntil: 'domcontentloaded' })
+    await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {})
+
+    // The product heading — this is the Open Edition board, not a generic usage view.
+    await expect(page.getByText('Open Edition', { exact: false }).first()).toBeVisible({ timeout: 20_000 })
+
+    // The run-for-pay framing from the config subtitle (`Run open-source workloads
+    // for pay …`). Matches on the distinctive phrase so it can't pass on another board.
+    await expect(page.getByText(/run open-source workloads for pay/i).first()).toBeVisible()
+
+    // The load-bearing pricing detail: the Spend KPI carries the "cost + 25% margin"
+    // caption (the served revenue R = cost + resell margin). This is the visible
+    // proof the 25% run-for-pay model is surfaced, not just tokens.
+    await expect(page.getByText(/cost \+ 25% margin/i).first()).toBeVisible()
+
+    // The run-for-pay KPI labels the config declares (spend billed, tokens run).
+    await expect(page.getByText(/spend billed/i).first()).toBeVisible()
+    await expect(page.getByText(/tokens run/i).first()).toBeVisible()
+  })
+
+  test('captures a full-page screenshot of the Open Edition board', async () => {
+    await page.goto(`${BASE_URL}/open-edition`, { waitUntil: 'domcontentloaded' })
+    await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {})
+    // Wait for the heading so the shot is of the rendered board, not a spinner frame.
+    await expect(page.getByText('Open Edition', { exact: false }).first()).toBeVisible({ timeout: 20_000 })
+    await page.screenshot({ path: 'e2e/screenshots/open-edition.png', fullPage: true })
+  })
+})

e2e/pages.spec.ts

@@ -0,0 +1,121 @@
+/**
+ * e2e: screenshot every console page + assert each renders (FE↔BE wired).
+ *
+ * Signs in as z@hanzo.ai (global admin, sees every product), then visits all 89
+ * registered product routes. For each page it:
+ *   - navigates to /<id>,
+ *   - waits for hydration,
+ *   - asserts the app shell is present and the page did NOT hit a hard crash
+ *     (Next error overlay / "Application error" / a blank body),
+ *   - captures a full-page screenshot into e2e/screenshots/<id>.png.
+ *
+ * This is the "screenshot it all, make sure every page is wired" pass. It does
+ * NOT click destructive buttons — it proves each surface mounts, renders real
+ * state (or an honest empty/loading/403), and is reachable end to end. Deeper
+ * per-button flows live in console.spec.ts (API key create/rotate, inference).
+ *
+ * Credentials (env, never in repo):
+ *   HANZO_EMAIL     default z@hanzo.ai
+ *   HANZO_PASSWORD  required (skips when unset)
+ *   BASE_URL        default https://console.hanzo.ai
+ *
+ * Run:  HANZO_PASSWORD=xxx pnpm e2e pages.spec.ts
+ */
+import { test, expect, type Page } from '@playwright/test'
+
+const EMAIL = process.env.HANZO_EMAIL ?? 'z@hanzo.ai'
+const PASSWORD = process.env.HANZO_PASSWORD ?? ''
+const BASE_URL = process.env.BASE_URL ?? 'https://console.hanzo.ai'
+
+/**
+ * Every product route id in the registry (src/lib/products/registry.tsx).
+ * Kept as a literal list so the spec has zero import coupling to the app bundle;
+ * a page added to the registry gets a screenshot by adding its id here.
+ */
+const PAGES: string[] = [
+  'overview', 'dashboards', 'status',
+  // AI
+  'models', 'model-catalog' /* alias */, 'providers', 'playground', 'chat', 'inference',
+  'agents', 'prompts', 'finetuning', 'embeddings', 'evals', 'datasets', 'experiments',
+  'annotation-queues', 'scores', 'score-configs', 'observations', 'traces', 'sessions',
+  // Compute / hypervisor
+  'machines', 'gpus', 'clusters', 'kubernetes', 'containers', 'networks', 'vpc',
+  'load-balancer', 'service-mesh', 'edge', 'zero-trust', 'dns', 'cdn',
+  // Data / storage
+  's3', 'sql', 'vector', 'datastore', 'kv', 'search', 'docdb', 'base', 'memory', 'indexer',
+  // Platform
+  'functions', 'pipelines', 'builds', 'releases', 'environments', 'projects', 'oracles',
+  // Identity / security
+  'iam', 'users', 'team', 'authz', 'kms', 'secrets', 'mpc', 'hsm', 'attestations',
+  'api-keys', 'tokens', 'applications',
+  // Business / analytics — the unified Billing Center + its sub-pages (Cost /
+  // Subscriptions / Payment-methods are now tabs of /billing, not top-level routes).
+  'billing', 'billing/reports', 'billing/budgets', 'billing/invoices',
+  'billing/subscriptions', 'billing/payment-methods', 'billing/credits',
+  'ai-metrics', 'open-edition', 'metrics', 'settlement', 'wallet', 'plans', 'referrals', 'marketplace',
+  // Ops / tooling
+  'logs', 'alerts', 'o11y', 'gateway', 'tasks', 'integrations', 'registry', 'audit',
+  'sdks', 'cli', 'ide', 'studio', 'desktop', 'bot', 'profile', 'settings',
+]
+
+async function signIn(page: Page) {
+  await page.goto(`${BASE_URL}/signin`)
+  await page.waitForSelector('input[placeholder="Email"]', { timeout: 20_000 })
+  await page.fill('input[placeholder="Email"]', EMAIL)
+  await page.fill('input[placeholder="Password"]', PASSWORD)
+  await page.click('button:has-text("Sign in")')
+  const base = new URL(BASE_URL).origin
+  await page.waitForURL((url) => url.origin === base && url.pathname === '/', { timeout: 30_000 })
+  await page.waitForLoadState('domcontentloaded')
+}
+
+// Sign in ONCE and reuse the session for all 94 pages. A per-test login (94×)
+// trips IAM's "too many login attempts" rate-limit around page 35, which is a
+// SECURITY FEATURE working correctly — not a page failure. One shared context
+// signs in once, then every page reuses the cookie. Serial so they share it.
+test.describe.configure({ mode: 'serial' })
+
+test.describe('Hanzo Cloud Console — every page renders + screenshot', () => {
+  test.skip(!PASSWORD, 'HANZO_PASSWORD not set — skipping authenticated screenshot pass')
+
+  let ctx: import('@playwright/test').BrowserContext
+  let page: Page
+
+  test.beforeAll(async ({ browser }) => {
+    ctx = await browser.newContext()
+    page = await ctx.newPage()
+    await signIn(page)
+  })
+
+  test.afterAll(async () => {
+    await ctx?.close()
+  })
+
+  for (const id of PAGES) {
+    test(`page: /${id}`, async () => {
+      const errors: string[] = []
+      const onErr = (e: Error) => errors.push(String(e))
+      page.on('pageerror', onErr)
+
+      const res = await page.goto(`${BASE_URL}/${id}`, { waitUntil: 'domcontentloaded' })
+      // Route must not 5xx.
+      expect(res?.status() ?? 0, `/${id} HTTP`).toBeLessThan(500)
+
+      // App shell mounted (the console renders a nav + main region on every page).
+      await page.waitForLoadState('networkidle', { timeout: 20_000 }).catch(() => {})
+
+      // Hard-crash guards: no Next error overlay, no generic crash banner.
+      await expect(page.locator('text=/Application error|Unhandled Runtime Error/i')).toHaveCount(0)
+
+      // The body must have real content (not a blank white page).
+      const bodyText = (await page.locator('body').innerText().catch(() => '')) || ''
+      expect(bodyText.trim().length, `/${id} rendered content`).toBeGreaterThan(0)
+
+      await page.screenshot({ path: `e2e/screenshots/${id}.png`, fullPage: true })
+
+      page.off('pageerror', onErr)
+      // Surface (don't fail on) any console page errors for triage.
+      if (errors.length) console.log(`⚠ /${id} pageerror: ${errors.join(' | ').slice(0, 200)}`)
+    })
+  }
+})

e2e/polish-qa.spec.ts

@@ -0,0 +1,217 @@
+/**
+ * e2e: visual-polish + responsive + a11y regression guards (v8.4.112).
+ *
+ * Locks the fixes from the state-of-the-art QA pass so they can't silently
+ * regress:
+ *   - the body is a hard no-horizontal-scroll surface (overflow-x guard),
+ *   - a global :focus-visible keyboard ring exists,
+ *   - the overview loads REAL data (KPI numbers, not skeletons),
+ *   - the per-product quick-links band navigates to the right destination,
+ *   - the GPU Launch drawer shows the prepay/card gate (never credit-fundable),
+ *   - the model catalog renders DISTINCT per-family brand icons,
+ *   - the sidebar collapses to a hamburger drawer on mobile,
+ *   - top-bar tap targets are ≥44px on a touch (coarse) pointer.
+ *
+ * The PUBLIC block runs with no credentials (it exercises /signin + the shipped
+ * CSS floor) so it always runs in CI. The AUTHENTICATED block gates on
+ * HANZO_PASSWORD (the repo convention) — it needs the Dave/maxpower-class session.
+ *
+ * Credentials (env, never in repo):
+ *   HANZO_EMAIL     default z@hanzo.ai
+ *   HANZO_PASSWORD  required for the authenticated block (skips when unset)
+ *   BASE_URL        default https://console.hanzo.ai
+ *
+ * Run:  pnpm e2e polish-qa.spec.ts
+ *       HANZO_PASSWORD=xxx pnpm e2e polish-qa.spec.ts
+ */
+import { test, expect, devices, type Page } from '@playwright/test'
+
+const EMAIL = process.env.HANZO_EMAIL ?? 'z@hanzo.ai'
+const PASSWORD = process.env.HANZO_PASSWORD ?? ''
+const BASE_URL = process.env.BASE_URL ?? 'https://console.hanzo.ai'
+
+// ── helpers ──────────────────────────────────────────────────────────────────
+
+async function signIn(page: Page) {
+  await page.goto(`${BASE_URL}/signin`)
+  await page.waitForSelector('input[placeholder="Email"]', { timeout: 20_000 })
+  await page.fill('input[placeholder="Email"]', EMAIL)
+  await page.fill('input[placeholder="Password"]', PASSWORD)
+  await page.click('button:has-text("Sign in")')
+  const base = new URL(BASE_URL).origin
+  await page.waitForURL((url) => url.origin === base && url.pathname === '/', { timeout: 30_000 })
+  await page.waitForLoadState('domcontentloaded')
+}
+
+/** Widest element beyond the viewport right edge (a real horizontal-overflow culprit
+ *  in NORMAL flow — excludes off-screen transform:translateX drawers, which clip). */
+async function horizontalOverflow(page: Page) {
+  return page.evaluate(() => {
+    const de = document.documentElement
+    return { scrollW: de.scrollWidth, clientW: de.clientWidth, overflow: de.scrollWidth > de.clientWidth + 1 }
+  })
+}
+
+// ── PUBLIC — always runs (no credentials) ────────────────────────────────────
+
+test.describe('console polish — public (CSS floor + responsive)', () => {
+  for (const [name, width, height] of [
+    ['mobile', 390, 844],
+    ['tablet', 768, 1024],
+    ['desktop', 1440, 900],
+  ] as const) {
+    test(`no horizontal body scroll on /signin — ${name} ${width}×${height}`, async ({ page }) => {
+      await page.setViewportSize({ width, height })
+      await page.goto(`${BASE_URL}/signin`)
+      await page.waitForLoadState('domcontentloaded')
+      const { overflow, scrollW, clientW } = await horizontalOverflow(page)
+      expect(overflow, `document scrolls sideways (${scrollW} > ${clientW})`).toBe(false)
+    })
+  }
+
+  test('body carries the overflow-x guard (never a sideways-scrolling document)', async ({ page }) => {
+    await page.goto(`${BASE_URL}/signin`)
+    await page.waitForLoadState('domcontentloaded')
+    const overflowX = await page.evaluate(() => getComputedStyle(document.body).overflowX)
+    // `clip` (preferred) or `hidden` — either bans a horizontal scroll container.
+    expect(['clip', 'hidden']).toContain(overflowX)
+  })
+
+  test('a global :focus-visible keyboard ring is defined', async ({ page }) => {
+    await page.goto(`${BASE_URL}/signin`)
+    await page.waitForLoadState('domcontentloaded')
+    // The rule is compiled into a same-origin stylesheet — scan for it (proves the
+    // a11y floor shipped, independent of any element's own focus style).
+    const hasRule = await page.evaluate(() => {
+      for (const sheet of Array.from(document.styleSheets)) {
+        let rules: CSSRuleList
+        try {
+          rules = sheet.cssRules
+        } catch {
+          continue // cross-origin sheet — skip
+        }
+        for (const rule of Array.from(rules)) {
+          const t = (rule as CSSStyleRule).selectorText
+          if (t && t.includes(':focus-visible') && (rule as CSSStyleRule).style?.outlineStyle) return true
+        }
+      }
+      return false
+    })
+    expect(hasRule, ':focus-visible outline rule not found in any stylesheet').toBe(true)
+  })
+})
+
+// ── AUTHENTICATED — the console shell (gates on HANZO_PASSWORD) ───────────────
+
+test.describe('console polish — authenticated shell', () => {
+  test.skip(!PASSWORD, 'HANZO_PASSWORD not set — skipping authenticated polish checks')
+  test.describe.configure({ mode: 'serial' })
+
+  test('overview loads REAL data (KPI numbers, not skeletons)', async ({ page }) => {
+    await signIn(page)
+    // The living overview renders count-up KPI tiles with real figures.
+    await expect(page.locator('text=/Inference tokens|Spend|Requests|Active models/i').first()).toBeVisible({
+      timeout: 20_000,
+    })
+    // At least one KPI shows a concrete numeric value (k/M/$/%, not just "—").
+    const body = (await page.locator('body').innerText()) || ''
+    expect(/\$\s?\d|[\d.]+\s?[kKmM]\b|\d+%/.test(body), 'no real KPI figure on the overview').toBe(true)
+  })
+
+  test('per-product quick-links band navigates to the scoped destination', async ({ page }) => {
+    await signIn(page)
+    await page.goto(`${BASE_URL}/models`, { waitUntil: 'domcontentloaded' })
+    // The band shows BILLING / USAGE / METRICS with → links.
+    const cost = page.locator('text=/Cost reports/i').first()
+    await expect(cost).toBeVisible({ timeout: 20_000 })
+    await cost.click()
+    // Lands on a billing/cost surface (never a 404 / access-required).
+    await expect(page).toHaveURL(/billing|cost/i, { timeout: 15_000 })
+    await expect(page.locator('text=/404|could not be found|Access required/i')).toHaveCount(0)
+  })
+
+  test('GPU Launch drawer shows the prepay/CARD gate (credits never fund GPUs)', async ({ page }) => {
+    await signIn(page)
+    await page.goto(`${BASE_URL}/gpus`, { waitUntil: 'domcontentloaded' })
+    await page.locator('button:has-text("Launch GPU")').first().click()
+    // The drawer's gate copy is the exact prepay/card contract.
+    await expect(page.locator('text=/Prepay only/i').first()).toBeVisible({ timeout: 15_000 })
+    await expect(page.locator("text=/Granted credits can.?t be used for GPUs/i").first()).toBeVisible()
+    await expect(page.locator('text=/Add a payment card/i').first()).toBeVisible()
+  })
+
+  test('Machines launch is CREDIT-funded (distinct from the GPU card gate)', async ({ page }) => {
+    await signIn(page)
+    await page.goto(`${BASE_URL}/machines`, { waitUntil: 'domcontentloaded' })
+    // CPU machines fund from the Hanzo credit balance — no card required.
+    await expect(page.locator('text=/Hanzo credit|charged to credits|no card required/i').first()).toBeVisible({
+      timeout: 20_000,
+    })
+  })
+
+  test('model catalog renders DISTINCT per-family brand icons', async ({ page }) => {
+    await signIn(page)
+    await page.goto(`${BASE_URL}/models`, { waitUntil: 'domcontentloaded' })
+    await expect(page.locator('text=/Search models across every family/i')).toBeVisible({ timeout: 20_000 })
+    // Each family header icon carries its own brand background colour (Zen light,
+    // Qwen #615CED, Meta #0866FF, DeepSeek #4D6BFE, Mistral #FA520F, Google #1A73E8,
+    // OpenAI black). Collect the distinct colours behind the family marks.
+    const distinct = await page.evaluate(() => {
+      const colours = new Set<string>()
+      document.querySelectorAll('[style*="background"]').forEach((el) => {
+        const r = el.getBoundingClientRect()
+        if (r.width >= 24 && r.width <= 56 && Math.abs(r.width - r.height) <= 8) {
+          const bg = getComputedStyle(el as HTMLElement).backgroundColor
+          if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') colours.add(bg)
+        }
+      })
+      return colours.size
+    })
+    // At least 3 distinct brand colours ⇒ icons are NOT one generic circle.
+    expect(distinct, 'family icons are not visibly distinct').toBeGreaterThanOrEqual(3)
+  })
+
+  test('sidebar collapses to a hamburger drawer on mobile', async ({ browser }) => {
+    const ctx = await browser.newContext({ ...devices['iPhone 13'] })
+    const page = await ctx.newPage()
+    try {
+      await signIn(page)
+      await page.goto(`${BASE_URL}/models`, { waitUntil: 'domcontentloaded' })
+      // Persistent sidebar (the "Filter products…" search) is hidden below lg.
+      const sidebarFilter = page.locator('input[placeholder="Filter products…"]')
+      await expect(sidebarFilter).toBeHidden({ timeout: 15_000 }).catch(() => {})
+      // The hamburger opens the SAME nav as a drawer.
+      await page.locator('button[aria-label="Open navigation"]').click()
+      await expect(page.locator('text=/Overview/i').first()).toBeVisible({ timeout: 10_000 })
+      // No horizontal body scroll on mobile.
+      const { overflow } = await horizontalOverflow(page)
+      expect(overflow, 'mobile document scrolls sideways').toBe(false)
+    } finally {
+      await ctx.close()
+    }
+  })
+
+  test('top-bar tap targets are ≥44px on a touch pointer', async ({ browser }) => {
+    const ctx = await browser.newContext({ ...devices['iPhone 13'] })
+    const page = await ctx.newPage()
+    try {
+      await signIn(page)
+      await page.goto(`${BASE_URL}/models`, { waitUntil: 'domcontentloaded' })
+      // Wait for the shell top bar to render.
+      await page.locator('button[aria-label="Open navigation"]').waitFor({ state: 'visible', timeout: 15_000 })
+      const small = await page.evaluate(() => {
+        const bad: { label: string; w: number; h: number }[] = []
+        document.querySelectorAll('.hz-topbar button').forEach((el) => {
+          const r = el.getBoundingClientRect()
+          if (r.width > 0 && (r.width < 44 || r.height < 44)) {
+            bad.push({ label: el.getAttribute('aria-label') || '(icon)', w: Math.round(r.width), h: Math.round(r.height) })
+          }
+        })
+        return bad
+      })
+      expect(small, `top-bar controls under 44px: ${JSON.stringify(small)}`).toEqual([])
+    } finally {
+      await ctx.close()
+    }
+  })
+})

e2e/probe-o11y.spec.ts

@@ -0,0 +1,120 @@
+/**
+ * LIVE probe of the o11y (O11y) backend through the console's own /v1 bearer BFF.
+ * Logs in as z@hanzo.ai and, from the AUTHENTICATED page context, fetches each
+ * candidate endpoint exactly as the Observe modules now do — same-origin
+ * `<origin>/v1/o11y/<resource>` (the VERSION-LESS canonical surface; the `/v1`
+ * catch-all mints the caller's IAM bearer). Prints the HTTP status + a body
+ * snippet per endpoint so we know what returns real data vs 404/403 before we build.
+ *
+ * Not a pass/fail test — a discovery harness. Run:
+ *   BASE_URL=https://console.hanzo.ai HANZO_PASSWORD='…' npx playwright test probe-o11y --reporter=line
+ */
+import { test, type Page } from '@playwright/test'
+
+const EMAIL = process.env.HANZO_EMAIL ?? 'z@hanzo.ai'
+const PASSWORD = process.env.HANZO_PASSWORD ?? ''
+const BASE_URL = process.env.BASE_URL ?? 'https://console.hanzo.ai'
+
+async function signIn(page: Page) {
+  await page.goto(`${BASE_URL}/signin`)
+  await page.waitForSelector('input[placeholder="Email"]', { timeout: 20_000 })
+  await page.fill('input[placeholder="Email"]', EMAIL)
+  await page.fill('input[placeholder="Password"]', PASSWORD)
+  await page.click('button:has-text("Sign in")')
+  const base = new URL(BASE_URL).origin
+  // Resilient: the post-login target may be '/' (dashboard) OR '/onboard' (org gate)
+  // OR it may just set the session cookie while staying put briefly. Wait for the
+  // sign-in form to DISAPPEAR (we left the /signin gate), whatever the destination.
+  await page
+    .waitForFunction(() => !document.querySelector('input[placeholder="Password"]'), { timeout: 90_000 })
+    .catch(() => {})
+  // Give the session cookie + any redirect a moment to settle, then land on '/'.
+  await page.goto(base, { waitUntil: 'domcontentloaded' }).catch(() => {})
+  await page.waitForTimeout(2500)
+}
+
+/** now() epoch — O11y wants ns for services/errors, ms for infra. */
+const nowMs = Date.now()
+const endNs = String(nowMs * 1_000_000)
+const startNs = String((nowMs - 60 * 60 * 1000) * 1_000_000) // 1h window
+const endMs = nowMs
+const startMs = nowMs - 60 * 60 * 1000
+
+type Probe = { name: string; path: string; method: 'GET' | 'POST'; body?: unknown }
+
+const PROBES: Probe[] = [
+  // ── Health (sanity: proves the runtime is reachable) ──
+  { name: 'health', path: 'o11y/health', method: 'GET' },
+  { name: 'version', path: 'o11y/version', method: 'GET' },
+  // ── Dashboards ──
+  { name: 'dashboards.list', path: 'o11y/dashboards', method: 'GET' },
+  // ── Service map / APM ──
+  { name: 'services.list', path: 'o11y/services/list', method: 'GET' },
+  { name: 'services', path: 'o11y/services', method: 'POST', body: { start: startNs, end: endNs, tags: [] } },
+  { name: 'dependency_graph', path: 'o11y/dependency_graph', method: 'POST', body: { start: startNs, end: endNs, tags: [] } },
+  { name: 'service.top_operations', path: 'o11y/service/top_operations', method: 'POST', body: { start: startNs, end: endNs, service: '' } },
+  // ── Logs / traces (the one true read — composite query_range) ──
+  {
+    name: 'query_range',
+    path: 'o11y/query_range',
+    method: 'POST',
+    body: {
+      start: startMs,
+      end: endMs,
+      step: 60,
+      compositeQuery: {
+        queryType: 'builder',
+        panelType: 'list',
+        builderQueries: {
+          A: { queryName: 'A', dataSource: 'logs', aggregateOperator: 'noop', aggregateAttribute: {}, expression: 'A', disabled: false, stepInterval: 60, filters: { items: [], op: 'AND' }, groupBy: [], having: [], orderBy: [{ columnName: 'timestamp', order: 'desc' }], limit: null, offset: 0, pageSize: 50 },
+        },
+      },
+    },
+  },
+  // ── Infra ──
+  { name: 'hosts.list', path: 'o11y/hosts/list', method: 'POST', body: { start: startMs, end: endMs, filters: { op: 'AND', items: [] } } },
+  { name: 'pods.list', path: 'o11y/pods/list', method: 'POST', body: { start: startMs, end: endMs, filters: { op: 'AND', items: [] } } },
+  { name: 'nodes.list', path: 'o11y/nodes/list', method: 'POST', body: { start: startMs, end: endMs, filters: { op: 'AND', items: [] } } },
+  { name: 'namespaces.list', path: 'o11y/namespaces/list', method: 'POST', body: { start: startMs, end: endMs, filters: { op: 'AND', items: [] } } },
+  { name: 'clusters.list', path: 'o11y/clusters/list', method: 'POST', body: { start: startMs, end: endMs, filters: { op: 'AND', items: [] } } },
+  // ── Exceptions ──
+  { name: 'listErrors', path: 'o11y/listErrors', method: 'POST', body: { start: startNs, end: endNs, limit: 50, order: 'descending', orderParam: 'exceptionCount' } },
+  { name: 'countErrors', path: 'o11y/countErrors', method: 'POST', body: { start: startNs, end: endNs } },
+  // ── Alerts ──
+  { name: 'rules', path: 'o11y/rules', method: 'GET' },
+]
+
+test('probe o11y endpoints (live, authenticated)', async ({ page }) => {
+  test.setTimeout(180_000)
+  if (!PASSWORD) throw new Error('HANZO_PASSWORD required for the live probe')
+  await signIn(page)
+
+  const results = await page.evaluate(
+    async ({ probes }: { probes: Probe[] }) => {
+      const out: { name: string; status: number; ok: boolean; snippet: string }[] = []
+      for (const p of probes) {
+        try {
+          const res = await fetch(`${window.location.origin}/v1/${p.path}`, {
+            method: p.method,
+            credentials: 'include',
+            headers: p.body !== undefined ? { 'Content-Type': 'application/json' } : {},
+            body: p.body !== undefined ? JSON.stringify(p.body) : undefined,
+          })
+          const text = await res.text()
+          out.push({ name: p.name, status: res.status, ok: res.ok, snippet: text.slice(0, 240) })
+        } catch (e) {
+          out.push({ name: p.name, status: -1, ok: false, snippet: String(e).slice(0, 240) })
+        }
+      }
+      return out
+    },
+    { probes: PROBES },
+  )
+
+  console.log('\n================ O11Y LIVE PROBE ================')
+  for (const r of results) {
+    console.log(`\n[${r.status}] ${r.name}`)
+    console.log(`   ${r.snippet.replace(/\n/g, ' ')}`)
+  }
+  console.log('\n================ END PROBE ================\n')
+})

e2e/provider-billing.spec.ts

@@ -0,0 +1,190 @@
+/**
+ * e2e: admin.hanzo.ai Provider Billing board (feat/admin-provider-billing).
+ *
+ * TWO layers, mirroring insights-o11y.spec:
+ *   (A) FIXTURE render — runs against a LOCAL server (BASE_URL=http://localhost:4000)
+ *       with the network mocked (budgets-responsive pattern): `/auth/session` → a
+ *       global admin so the admin shell mounts, and the two contract endpoints
+ *       (`/v1/admin/providers/credit`, `/v1/admin/usage/funding`) → the DIGITALOCEAN
+ *       $26k credit + glm-5.2 funding-split fixture. Proves the credit card + the
+ *       credit-vs-paid split RENDER, at desktop AND mobile (no horizontal scroll),
+ *       with screenshots. This is the develop-against-the-contract proof.
+ *   (B) LIVE — the fail-closed gate proof (`/v1/admin/providers/credit` +
+ *       `/v1/admin/usage/funding` → 403 unauthenticated) ALWAYS runs; the
+ *       authenticated render against REAL DO data is STAGED behind HANZO_PASSWORD
+ *       (the reserved-admin SuperAdmin secret) + a deployed image.
+ *
+ * Run fixture: BASE_URL=http://localhost:4000 npx playwright test provider-billing
+ * Run live:    HANZO_PASSWORD=… CONSOLE_URL=https://admin.hanzo.ai npx playwright test provider-billing
+ */
+import { test, expect, type Route, type Page } from '@playwright/test'
+import { mkdirSync } from 'node:fs'
+import { join } from 'node:path'
+
+const BASE_URL = process.env.BASE_URL ?? 'http://localhost:4000'
+const SHOTS = join(process.cwd(), 'e2e-shots')
+
+// A SuperAdmin via the isGlobalAdmin/isSuperAdmin CLAIM (what the admin:true module
+// gates on — `useIsSuperAdmin`). owner is a normal org so the OrgGate resolves the
+// current org locally instead of demanding a pick from the (mocked-empty) org list;
+// the real reserved-`admin`-org SuperAdmin is exercised by the LIVE (B) test.
+const ACCOUNT = {
+  owner: 'admin',
+  name: 'z',
+  type: 'normal-user',
+  email: 'z@hanzo.ai',
+  displayName: 'Z Admin',
+  isGlobalAdmin: true,
+  isSuperAdmin: true,
+  isAdmin: true,
+  signupApplication: 'hanzo-cloud',
+}
+
+/** GET /v1/admin/providers/credit — the DO $26k grant (the acceptance headline),
+ *  plus a paid-only + a second credit provider to exercise every badge. */
+const CREDIT = [
+  { provider: 'do-ai', grant_cents: 2_600_000, burn_cents: 41_200, remaining_cents: 2_418_000, runway_days: 58, has_credit: true, is_paid_only: false },
+  { provider: 'openrouter', grant_cents: 100_000, burn_cents: 21_000, remaining_cents: 62_500, runway_days: 3, has_credit: true, is_paid_only: false },
+  { provider: 'openai-direct', grant_cents: 0, burn_cents: 8_500, remaining_cents: 0, runway_days: null, has_credit: false, is_paid_only: true },
+]
+
+/** GET /v1/admin/usage/funding — glm-5.2 on DO drawn from OUR CREDIT (the live
+ *  usage), plus paid / paid-only / BYO rows so the split shows all four classes. */
+const FUNDING = [
+  { provider: 'do-ai', model: 'glm-5.2', funding: 'credit', tokens: 1_284_000, cost_cents: 18_200, requests: 3_120 },
+  { provider: 'openrouter', model: 'gpt-5', funding: 'paid', tokens: 92_000, cost_cents: 44_000, requests: 210 },
+  { provider: 'openai-direct', model: 'gpt-5-mini', funding: 'paid_only', tokens: 30_000, cost_cents: 9_000, requests: 140 },
+  { provider: 'anthropic', model: 'claude-opus-4.6', funding: 'byo', tokens: 50_000, cost_cents: 0, requests: 80 },
+]
+
+const API_RE = /\/(v1|cloud|ai|billing|commerce|telemetry|vm|superbase|admin|paas|integrations|auth\/refresh)(\/|$|\?)/
+
+async function mock(route: Route) {
+  const req = route.request()
+  if (req.resourceType() === 'document') return route.continue()
+  const url = new URL(req.url())
+  const path = url.pathname
+
+  if (path === '/auth/session') {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ account: ACCOUNT, expiresIn: 3600 }) })
+  }
+  if (path.startsWith('/auth/')) {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ ok: true }) })
+  }
+  // The two contract endpoints — bare arrays, exactly as documented.
+  if (path === '/v1/admin/providers/credit') {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(CREDIT) })
+  }
+  if (path === '/v1/admin/usage/funding') {
+    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(FUNDING) })
+  }
+
+  const sameOrigin = url.origin === new URL(BASE_URL).origin
+  if (sameOrigin && !API_RE.test(path)) return route.continue()
+  // Any other data call → an honest empty-ok envelope so the shell is quiet.
+  return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ status: 'ok', msg: '', data: [], data2: 0 }) })
+}
+
+async function openBoard(page: Page) {
+  await page.addInitScript((org) => {
+    try {
+      localStorage.setItem('hanzo.console.org', org)
+      localStorage.setItem('hanzo.console.org.selected', '1') // ENTERED flag — OrgGate → scoped console
+      localStorage.setItem('hz_onboarding_done:' + org, '1') // skip the first-run wizard (auto-skipped on admin.* + embed)
+      localStorage.setItem('hz_admin_banner_dismissed', '1')
+    } catch {
+      /* private mode */
+    }
+  }, ACCOUNT.owner)
+  await page.route('**/*', mock)
+  await page.goto(`${BASE_URL}/provider-billing`, { waitUntil: 'domcontentloaded' })
+  const content = page.locator('[data-testid="product-content"]').first()
+  await content.waitFor({ state: 'attached', timeout: 20_000 })
+  // Scope the readiness wait to the product CONTENT (the "Provider Billing" nav
+  // label is hidden behind the off-canvas sidebar on a narrow viewport).
+  await expect(content.getByText('Provider credit').first()).toBeVisible({ timeout: 20_000 })
+  await page.waitForTimeout(900)
+}
+
+test.beforeAll(() => mkdirSync(SHOTS, { recursive: true }))
+
+// ─── (A) fixture render ───────────────────────────────────────────────────────
+test.describe('(A) fixture render — DO $26k credit + glm-5.2 funding split', () => {
+  test('renders the credit card + funding split at a desktop viewport', async ({ browser }) => {
+    const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } })
+    const page = await ctx.newPage()
+    await openBoard(page)
+
+    // Section 1: the DO credit card — the $26k grant + remaining + runway + badge.
+    await expect(page.locator('text=Provider credit').first()).toBeVisible()
+    await expect(page.locator('text=do-ai').first()).toBeVisible()
+    await expect(page.locator('text=$26,000.00').first()).toBeVisible() // the $26k DO grant
+    await expect(page.locator('text=$24,180.00').first()).toBeVisible() // remaining
+    await expect(page.locator('text=58 days').first()).toBeVisible() // runway_days
+    await expect(page.locator('text=Has credit').first()).toBeVisible()
+    await expect(page.locator('text=Paid-only').first()).toBeVisible() // openai-direct badge
+
+    // Section 2: the credit-vs-paid split — all four funding classes + the glm-5.2 row.
+    await expect(page.locator('text=Credit vs paid usage').first()).toBeVisible()
+    await expect(page.locator('text=Our credit').first()).toBeVisible()
+    await expect(page.locator('text=glm-5.2').first()).toBeVisible()
+    await expect(page.locator('text=BYO key').first()).toBeVisible()
+
+    await page.screenshot({ path: join(SHOTS, 'provider-billing-desktop.png'), fullPage: true })
+    await ctx.close()
+  })
+
+  test('reflows with no horizontal body scroll at a narrow (mobile) viewport', async ({ browser }) => {
+    const ctx = await browser.newContext({ viewport: { width: 390, height: 844 } })
+    const page = await ctx.newPage()
+    await openBoard(page)
+
+    await expect(page.locator('text=do-ai').first()).toBeVisible()
+    const overflow = await page.evaluate(() => {
+      const el = document.documentElement
+      return { scrollWidth: el.scrollWidth, clientWidth: el.clientWidth }
+    })
+    expect(overflow.scrollWidth, 'no horizontal body scroll at 390px').toBeLessThanOrEqual(overflow.clientWidth + 1)
+
+    await page.screenshot({ path: join(SHOTS, 'provider-billing-mobile.png'), fullPage: true })
+    await ctx.close()
+  })
+})
+
+// ─── (B) live — fail-closed gate always runs; real-DO render staged ───────────
+const CONSOLE = process.env.CONSOLE_URL ?? 'https://console.hanzo.ai'
+const PASSWORD = process.env.HANZO_PASSWORD ?? ''
+const EMAIL = process.env.HANZO_EMAIL ?? 'z@hanzo.ai'
+
+test.describe('(B) LIVE — admin gate + real DO data', () => {
+  test('fail-closed: /v1/admin/{providers/credit,usage/funding} → 403 unauthenticated', async ({ request }) => {
+    for (const p of ['providers/credit', 'usage/funding']) {
+      const res = await request.get(`${CONSOLE}/v1/admin/${p}`)
+      // Fail-closed: an unauthenticated caller NEVER gets data. Post-deploy this is
+      // the 403 global-admin gate (like every other /v1/admin/* head); before the
+      // sibling endpoint deploys the route may 404 — both are "not open". Never 200.
+      expect(res.status(), `${CONSOLE}/v1/admin/${p} must be fail-closed (>=401)`).toBeGreaterThanOrEqual(401)
+      expect(res.status(), `${CONSOLE}/v1/admin/${p} must not 5xx`).toBeLessThan(500)
+    }
+  })
+
+  test('authenticated: the board renders REAL DO credit + funding for the SuperAdmin', async ({ page }) => {
+    test.skip(!PASSWORD, 'HANZO_PASSWORD (reserved-admin SuperAdmin secret) not set — staged for the live deploy')
+    await page.goto(`${CONSOLE}/signin`)
+    await page.waitForSelector('input[placeholder="Email"]', { timeout: 25_000 })
+    await page.fill('input[placeholder="Email"]', EMAIL)
+    await page.fill('input[placeholder="Password"]', PASSWORD)
+    await page.click('button:has-text("Sign in")')
+    await page.waitForFunction(() => !location.pathname.startsWith('/signin'), { timeout: 30_000 })
+
+    await page.goto(`${CONSOLE}/provider-billing`, { waitUntil: 'domcontentloaded' })
+    await expect(page).not.toHaveURL(/\/signin/, { timeout: 15_000 })
+    // The board (not the operator-access gate) rendered for the SuperAdmin.
+    await expect(page.locator('text=/Provider credit|Credit vs paid/i').first()).toBeVisible({ timeout: 30_000 })
+    await expect(page.locator('text=/Operator access required/i')).toHaveCount(0)
+    // Real DO data: the $26k grant / a do-ai card / glm-5.2 usage.
+    await expect(page.locator('text=/do-ai|digitalocean/i').first()).toBeVisible({ timeout: 30_000 })
+    await page.screenshot({ path: join(SHOTS, 'provider-billing-live-do.png'), fullPage: true })
+    console.log('✓ (B) Provider Billing rendered REAL DO credit + funding for the SuperAdmin')
+  })
+})

e2e/route-ids.json

@@ -0,0 +1,129 @@
+[
+"overview",
+"overlord",
+"business",
+"finance",
+"fleet-customers",
+"fleet-revenue",
+"retention",
+"enablement",
+"beta-features",
+"bots",
+"vms",
+"cluster-fleet",
+"function-fleet",
+"models",
+"providers",
+"provider-admin",
+"agents",
+"inference",
+"finetuning",
+"ml-pipelines",
+"embeddings",
+"evals",
+"gpus",
+"machines",
+"containers",
+"functions",
+"edge",
+"applications",
+"app-platform",
+"vector",
+"sql",
+"kv",
+"s3",
+"datastore",
+"base",
+"records",
+"docdb",
+"gateway",
+"nodes",
+"vpc",
+"dns",
+"cdn",
+"load-balancer",
+"service-mesh",
+"iam",
+"authz",
+"kms",
+"hsm",
+"secrets",
+"mpc",
+"audit",
+"zero-trust",
+"cli",
+"sdks",
+"api",
+"integrations",
+"playground",
+"ide",
+"desktop",
+"projects",
+"tracker",
+"tenants",
+"apps",
+"environments",
+"builds",
+"registry",
+"releases",
+"pipelines",
+"clusters",
+"kubernetes",
+"logs",
+"metrics",
+"o11y",
+"service-map",
+"ai-metrics",
+"open-edition",
+"analytics",
+"dashboards",
+"alerts",
+"billing",
+"status",
+"plans",
+"trading",
+"markets",
+"settlement",
+"wallet",
+"referrals",
+"tokens",
+"networks",
+"indexer",
+"oracles",
+"attestations",
+"chat",
+"bot",
+"crm",
+"cms",
+"erp",
+"helpdesk",
+"accessibility",
+"marketplace",
+"search",
+"websearch",
+"crawl",
+"studio",
+"templates",
+"console",
+"products",
+"orders",
+"customers",
+"inventory",
+"promotions",
+"storefront",
+"api-keys",
+"settings",
+"prompts",
+"datasets",
+"experiments",
+"sessions",
+"scores",
+"score-configs",
+"annotation-queues",
+"observations",
+"users",
+"memory",
+"tasks",
+"team",
+"profile"
+]

e2e/signin-direct.spec.ts

@@ -0,0 +1,41 @@
+/**
+ * e2e regression — a DIRECT load of /signin renders the sign-in form.
+ *
+ * ROOT CAUSE this guards: the deploy (the go:embed'd static console in hanzoai/cloud)
+ * serves the SPA shell (the `/` route's index.html) for EVERY path — verified live:
+ * GET / and GET /signin return byte-identical HTML. So a direct /signin load mounts the
+ * dashboard tree (AuthGate), NOT the /signin route. Before the fix, AuthGate saw no
+ * account and called `router.replace('/signin')`, a NO-OP at /signin, and spun on the
+ * loader forever (inputs=0, buttons=0). Reaching /signin as a REDIRECT target (from
+ * `/`, `/projects`, …) worked because the URL changed. This asserts the direct entry
+ * now resolves to the form. The fix: AuthGate + the /signin route both render the ONE
+ * `<SignIn/>` component, so /signin resolves to the form without depending on a nav.
+ *
+ * Runs LOGGED OUT (a fresh context): the live get-account is anonymous → not signed in.
+ * Works against the live console (BASE_URL default) OR a local SPA-fallback server
+ * (BASE_URL=http://localhost:4173 serving out/ with index.html as the catch-all).
+ */
+import { test, expect } from '@playwright/test'
+
+const BASE_URL = process.env.BASE_URL ?? 'https://console.hanzo.ai'
+
+test.describe('direct /signin renders the sign-in form (SPA-fallback regression)', () => {
+  test('a hard load of /signin shows inputs + buttons, not an infinite spinner', async ({ browser }) => {
+    // Fresh, cookie-less context → a logged-out visitor (anonymous get-account).
+    const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } })
+    const page = await ctx.newPage()
+
+    await page.goto(`${BASE_URL}/signin`, { waitUntil: 'domcontentloaded' })
+
+    // The credential form: email + password inputs and at least one button. A few
+    // seconds is ample — a spinner that never resolves is the bug.
+    const emailInput = page.getByPlaceholder('Email')
+    await expect(emailInput).toBeVisible({ timeout: 15_000 })
+    await expect(page.getByPlaceholder('Password')).toBeVisible()
+    expect(await page.locator('input').count()).toBeGreaterThanOrEqual(2)
+    expect(await page.locator('button').count()).toBeGreaterThanOrEqual(1)
+
+    await page.screenshot({ path: 'e2e-shots/signin-direct.png' })
+    await ctx.close()
+  })
+})

gui.config.ts

@@ -1,7 +1,22 @@
 import { defaultConfig } from '@hanzogui/config/v5'
 import { createGui } from '@hanzo/gui'
 
-export const config = createGui(defaultConfig)
+// Canonical Hanzo UI face: Geist Sans (loaded via the CDN @import in app/globals.css,
+// parallel to Geist Mono for code/data). Override the @hanzo/gui (Tamagui) v5 default
+// system-font family on the body + heading fonts so every <Text>/<Paragraph>/<H*>
+// renders Geist — one place, whole product (DRY). Size/line-height/weight scales are
+// inherited from the default config; only the family swaps. Falls back to system-ui
+// if the Geist face is unavailable, so the UI degrades gracefully.
+const GEIST = "'Geist', system-ui, -apple-system, sans-serif"
+
+export const config = createGui({
+  ...defaultConfig,
+  fonts: {
+    ...defaultConfig.fonts,
+    body: { ...defaultConfig.fonts.body, family: GEIST },
+    heading: { ...defaultConfig.fonts.heading, family: GEIST },
+  },
+})
 
 export default config
 

gui.d.ts

@@ -1,11 +1,14 @@
 /**
- * Registers our Gui config with the type system so component style props
- * (tokens, themes, shorthands) are typed. `GuiCustomConfig` is declared in
- * `@hanzogui/web` and re-exported across the Gui packages; augmenting it there
- * flows the types through every `@hanzo/gui` component.
+ * Registers our Gui config with the type system so shorthand style props
+ * (tokens, themes, bg/px/py/items/justify etc.) are typed correctly.
+ * GuiCustomConfig is declared in @hanzogui/web and flows through @hanzo/gui.
  */
 import type { Conf } from './gui.config'
 
 declare module '@hanzogui/web' {
   interface GuiCustomConfig extends Conf {}
 }
+
+declare module '@hanzogui/core' {
+  interface GuiCustomConfig extends Conf {}
+}

next.config.mjs

@@ -1,7 +1,9 @@
-import { readdirSync } from 'node:fs'
+import { readdirSync, readFileSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
 import { dirname, join } from 'node:path'
 
+import { resolveBuildId, readGitSha } from './src/config/build-id.mjs'
+
 /**
  * Hanzo Cloud Console — Next.js config.
  *
@@ -20,6 +22,12 @@ import { dirname, join } from 'node:path'
  */
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
+// Single source of the app version: package.json. Exposed to the browser as
+// NEXT_PUBLIC_APP_VERSION so the shell can render the shared "Hanzo Cloud <MAJOR.MINOR>"
+// product-release label (console app-semver; cloud ships its own Go v1.x under the
+// same umbrella). No second place holds the version.
+const pkgVersion = JSON.parse(readFileSync(join(__dirname, 'package.json'), 'utf8')).version
+
 /** Every installed `@hanzogui/*` package, discovered (not hardcoded). */
 function guiPackages() {
   const dir = join(__dirname, 'node_modules', '@hanzogui')
@@ -29,13 +37,161 @@ function guiPackages() {
   } catch {
     scoped = []
   }
-  return ['@hanzo/gui', '@hanzo/iam-js-sdk', 'react-native-web', ...scoped]
+  // @hanzo/dash and @hanzo/data ship their screens/components as ESM/TSX
+  // source (no compiled dist), so the shared Base UI is transpiled here the same
+  // way Gui is. @hanzo/usage ships its <UsagePanel> (`/react`) as TSX source for the
+  // same reason (its headless core `.`/`/node` are compiled dist and pass through).
+  return ['@hanzo/gui', '@hanzo/iam-js-sdk', '@hanzo/dash', '@hanzo/data', '@hanzo/canvas', '@hanzo/finance-ui', '@hanzo/usage', 'react-native-web', ...scoped]
 }
 
+/**
+ * Same-origin `/v1/*` — ZERO client-visible prefix (the CTO contract: "no prefix
+ * before /v1/ in any API call"). The browser ALWAYS calls its OWN origin at a clean
+ * `/v1/<head>/...`, never `/cloud/...`, `/ai/...` or `/api/...`.
+ *
+ * The DEFAULT terminus for a `/v1/<head>` call is the console's `app/v1/[...path]`
+ * catch-all bearer proxy (→ cloud-api `/v1/*`): it mints a short-lived user bearer
+ * from the session cookie and forwards it, so the raw cookie NEVER reaches cloud-api
+ * (no cookie-CSRF surface) and the org is server-authoritative. That handler needs
+ * NO rewrite — a clean `/v1/agents` falls straight through to it.
+ *
+ * These `beforeFiles` rewrites exist ONLY to DISPATCH the heads whose backend is NOT
+ * cloud-api to their own hardened same-origin proxy, while keeping the client URL a
+ * clean `/v1/...`:
+ *   - AI gateway heads (models/chat/embeddings/rerank/… + pricing/plans) → `/ai`.
+ *   - Admin AGGREGATE reads/writes (`/v1/admin/{overview,usage,…}`, the cross-tenant
+ *     god view) → the GLOBAL-ADMIN-GATED `/admin/aggregate` proxy, which runs
+ *     `getAdminGate` (fail-closed 403) BEFORE forwarding (RED H1). `admin/iam` +
+ *     `admin/kms` are deliberately NOT rewritten — they keep their own gated proxies,
+ *     reached by the client's explicit `/admin/*` origin path.
+ *   - Visor compute CATALOG (regions/sizes, and `gpu-sizes` → visor `gpus`) → `/v1/vm`.
+ *
+ * (Per-tenant billing + commerce store DATA are NOT dispatched here — they are
+ * FILESYSTEM routes `app/v1/{billing,commerce}/[...path]`, more specific than the
+ * `/v1/[...path]` cloud BFF, so a clean `/v1/billing/*` · `/v1/commerce/*` resolves
+ * straight to them with no rewrite.)
+ *
+ * `beforeFiles` so a dispatched head wins over the `/v1` catch-all; the scope is the
+ * CLOSED head list each non-cloud client uses (a blanket `/v1/:path*` would shadow the
+ * cloud surface). Each destination handler STILL enforces its own least-privilege
+ * allow-list (`proxy-allow.ts`), so a rewrite can never widen what a proxy admits.
+ */
+// `pricing` (the rich model+provider CATALOG at `/v1/pricing/models`) and `plans` (the
+// subscription tiers/entitlements) are AI-gateway-served like models/chat and are in the
+// `/ai` proxy ALLOWED set (app/ai/[...path]), so they route to `/ai` too.
+// `ai` is the AI Login Manager connections head (`/v1/ai/connections[/*]`) — routed to the
+// `/ai` bearer proxy like the rest; it is NOT a cloud-api head (never shadows a cloud surface).
+// `training` is the interactive (Tinker-style) engine head (`/v1/training/clients[/*]`) — the
+// live LoRA client plane, allow-listed in the `/ai` proxy, likewise never a cloud-api head.
+// `router` is the routing-observability head (`/v1/router/stats`); `get-/update-training-contribution`
+// are the org's opt-in flag — all AI-gateway-served (hanzoai/ai) like the router policy, so they route
+// to the `/ai` bearer proxy and are in its ALLOWED set (app/ai/[...path]).
+const AI_V1_HEADS = ['models', 'chat', 'embeddings', 'rerank', 'audio', 'images', 'videos', 'pricing', 'plans', 'ai', 'training', 'get-router-policy', 'update-router-policy', 'router', 'get-training-contribution', 'update-training-contribution']
+// The admin aggregate heads rewritten to the GLOBAL-ADMIN-GATED proxy. `providers`
+// is the AI-provider control board — its GET (the list) AND its POST mutations
+// (`providers/toggle`, `providers/primary`) both match the `/:path*` rewrite below,
+// which is method-agnostic (Next matches on the URL), so POST is covered without a
+// second entry. Keep this in sync with `admin-aggregate.ts` ADMIN_AGGREGATE_HEADS.
+const ADMIN_V1_HEADS = ['overview', 'usage', 'orgs', 'audit', 'products', 'finance', 'compute', 'o11y', 'providers', 'customers', 'revenue', 'analytics', 'enablement', 'grants', 'referrals', 'affiliates', 'authors', 'treasury', 'services']
+/**
+ * DEV-ONLY: proxy the client's direct-cloud `/v1/{iam,o11y}/*` calls (get-account,
+ * annotation-queues/users) to a real cloud backend so `npm run dev` renders the
+ * authenticated shell locally. Enabled ONLY when `DEV_CLOUD_ORIGIN` is set (never in
+ * the built image), so production is unchanged — there the console host's edge routes
+ * `/v1` to the console, whose `/v1` catch-all forwards to cloud-api. The request cookie
+ * is forwarded by the rewrite, so the local dev session resolves against the real cloud.
+ */
+const DEV_CLOUD_ORIGIN = process.env.DEV_CLOUD_ORIGIN?.replace(/\/+$/, '')
+const devCloudRewrites = () =>
+  DEV_CLOUD_ORIGIN
+    ? [
+        { source: '/v1/iam/:path*', destination: `${DEV_CLOUD_ORIGIN}/v1/iam/:path*` },
+        { source: '/v1/o11y/:path*', destination: `${DEV_CLOUD_ORIGIN}/v1/o11y/:path*` },
+      ]
+    : []
+
+// Public compute CATALOG (regions / CPU sizes) → the same-origin visor proxy
+// (`app/v1/vm/[...path]`). The GPU-accelerator catalog is the DISTINCT head `/v1/gpu-sizes`
+// so it never collides with the cloud-api GPU INVENTORY at `/v1/gpus` (served by `/v1`).
+const VM_V1_HEADS = ['regions', 'sizes']
+
+const aiSurfaceRewrites = () => ({
+  beforeFiles: [
+    // Cloud-api heads (prompts/agents/automations/functions/framework/s3/vector/…) are
+    // NOT rewritten: a clean `/v1/<head>` falls through to the `app/v1/[...path]` bearer
+    // proxy → cloud-api `/v1/*`. Only the NON-cloud backends are dispatched below.
+    // Client builds a clean `/v1/<aihead>`; dispatch to the `/ai` bearer proxy WITHOUT a
+    // nested version in the target — `app/ai/[...path]` re-roots the upstream at `v1/`
+    // (`isAllowedAiPath`/the gateway see `v1/<aihead>`), so no nested version leaks anywhere.
+    ...AI_V1_HEADS.map((h) => ({ source: `/v1/${h}`, destination: `/ai/${h}` })),
+    ...AI_V1_HEADS.map((h) => ({ source: `/v1/${h}/:path*`, destination: `/ai/${h}/:path*` })),
+    // The SaaS-operations god-view is served by COMMERCE (the money SOT), NOT the
+    // cloud aggregate: route /v1/admin/saas to its OWN global-admin-gated commerce
+    // proxy (`app/admin/saas`). Placed before the aggregate map so it wins; `saas` is
+    // deliberately NOT in ADMIN_V1_HEADS (that list forwards to cloud /v1/admin/*).
+    { source: `/v1/admin/saas`, destination: `/admin/saas` },
+    ...ADMIN_V1_HEADS.map((h) => ({ source: `/v1/admin/${h}`, destination: `/admin/aggregate/${h}` })),
+    ...ADMIN_V1_HEADS.map((h) => ({ source: `/v1/admin/${h}/:path*`, destination: `/admin/aggregate/${h}/:path*` })),
+    // Public compute catalog → the visor `app/v1/vm/[...path]` proxy (a bare `/v1/regions`
+    // dispatches to the /v1-first vm handler; the visor client also builds `/v1/vm/*` directly).
+    ...VM_V1_HEADS.map((h) => ({ source: `/v1/${h}`, destination: `/v1/vm/${h}` })),
+    ...VM_V1_HEADS.map((h) => ({ source: `/v1/${h}/:path*`, destination: `/v1/vm/${h}/:path*` })),
+    { source: `/v1/gpu-sizes`, destination: `/v1/vm/gpus` },
+    // Per-tenant billing DATA + commerce store DATA need NO rewrite: they are FILESYSTEM
+    // routes `app/v1/billing/[...path]` (service token) and `app/v1/commerce/[...path]`
+    // (user bearer), each MORE SPECIFIC than the `app/v1/[...path]` cloud BFF, so a clean
+    // `/v1/billing/*` · `/v1/commerce/*` resolves straight to them (the /v1-first law).
+    ...devCloudRewrites(),
+  ],
+})
+
+/**
+ * EMBED MODE (the "True 1-binary FE" target — task #41).
+ *
+ * `npm run build:embed` sets CONSOLE_EMBED=1 and produces a STATIC EXPORT (`out/`)
+ * that the hanzoai/cloud Go binary go:embeds and serves at its own web root. In this
+ * mode the console SPA is same-origin with the cloud `/v1` API (config.cloudUrl
+ * defaults to window.location.origin), so:
+ *
+ *   - `output: 'export'` — emit a pure static bundle, no Node server.
+ *   - NO `rewrites` — a static export cannot run rewrites, and it does not need
+ *     them: the clean `/v1/<head>` calls the SPA already builds now terminate
+ *     DIRECTLY at the embedded cloud's mounted subsystems (prompts/agents/evals/…,
+ *     models/chat/embeddings/…, admin/*), which is exactly what the rewrites/`app/v1`
+ *     proxy forward to via the Next BFF. The BFF proxy routes (app/v1, app/ai,
+ *     app/commerce, …) are the server, and in one-binary the cloud binary IS the
+ *     server — so they are simply absent from the export (see below).
+ *   - `images.unoptimized` — the export has no Image Optimization server.
+ *
+ * PRECONDITION for a clean `output:'export'`: the app/ tree must contain NO dynamic
+ * server route handlers (a static export has no server runtime to run them).
+ * Those handlers are the BFF proxies + the two standalone routes; the latter
+ * (keys/onboard) are ported to cloud `/v1/iam/{keys,onboard}`, and the proxies collapse to
+ * the cloud `/v1/*` the SPA calls directly. The embed build therefore runs against
+ * a tree with every app route handler removed (the build:embed script prunes the
+ * "route" files into a scratch stash so the server build on `main` is untouched).
+ *
+ * The normal `npm run build` is UNCHANGED (server build with rewrites) so nothing
+ * regresses for the standalone console deployment during the transition.
+ */
+const EMBED = process.env.CONSOLE_EMBED === '1'
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  // Deterministic per-commit build id (see src/config/build-id.mjs): pins ONE id
+  // across every replica of a release so a rolling deploy never serves one build's
+  // HTML against another build's /_next/static/<BUILD_ID>/ path — the chunk-404 the
+  // live audit hit. SOURCE_COMMIT (CI build-arg) -> git HEAD -> package version.
+  generateBuildId: () => resolveBuildId({ env: process.env, gitSha: readGitSha(__dirname), version: pkgVersion }),
+  env: { NEXT_PUBLIC_APP_VERSION: pkgVersion },
+  // @hanzo/usage is transpiled (see guiPackages) so its source <UsagePanel> (`/react`)
+  // compiles in the client bundle; its headless `.` entry (used by the /ai-accounts
+  // server routes) carries no node built-ins, so it needs no server-external treatment.
   transpilePackages: guiPackages(),
+  ...(EMBED
+    ? { output: 'export', images: { unoptimized: true } }
+    : { rewrites: aiSurfaceRewrites }),
   experimental: {
     esmExternals: true,
   },

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@hanzo/console2",
-  "version": "0.6.0",
+  "name": "@hanzo/console",
+  "version": "8.4.136",
   "private": true,
   "license": "BSD-3-Clause",
   "author": "Hanzo AI <dev@hanzo.ai>",
@@ -8,28 +8,56 @@
   "scripts": {
     "dev": "next dev -p 4000",
     "build": "next build",
+    "build:embed": "node scripts/build-embed.mjs",
     "start": "next start -p 4000",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "e2e": "playwright test",
+    "e2e:headed": "playwright test --headed"
   },
   "dependencies": {
+    "@hanzo/capture": "^0.1.0",
+    "@hanzo/canvas": "^0.1.0",
+    "@hanzo/dash": "0.3.0",
+    "@hanzo/data": "^1.2.0",
+    "@hanzo/finance-ui": "0.1.1",
     "@hanzo/gui": "7.3.0",
     "@hanzo/iam-js-sdk": "0.19.1",
+    "@hanzo/logo": "^1.0.7",
+    "@hanzo/usage": "^0.1.6",
     "@hanzogui/config": "7.3.0",
     "@hanzogui/core": "7.3.0",
     "@hanzogui/lucide-icons-2": "7.3.0",
     "@hanzogui/next-theme": "7.3.0",
+    "@lexical/html": "0.46.0",
+    "@lexical/link": "0.46.0",
+    "@lexical/list": "0.46.0",
+    "@lexical/react": "0.46.0",
+    "@lexical/rich-text": "0.46.0",
+    "@lexical/selection": "0.46.0",
+    "@lexical/utils": "0.46.0",
+    "@luxfi/logo": "^1.0.1",
+    "@xyflow/react": "12.11.1",
+    "@zap-proto/web": "1.0.0",
+    "@zap-proto/zap": "1.6.0",
+    "@zooai/logo": "^1.0.2",
+    "axe-core": "4.12.1",
     "ethers": "6.17.0",
+    "lexical": "0.46.0",
     "next": "15.5.19",
+    "qrcode.react": "4.2.0",
     "react": "19.2.7",
     "react-dom": "19.2.7",
     "react-native-web": "0.21.2",
     "superjson": "2.2.2"
   },
   "devDependencies": {
+    "@playwright/test": "^1.61.1",
     "@types/node": "22.20.0",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "react-native": "0.83.9",
-    "typescript": "5.9.3"
+    "typescript": "5.9.3",
+    "vitest": "3.2.4"
   }
 }

platform-seed/packages.json

@@ -0,0 +1,93 @@
+{
+  "$comment": "SEED DATA for the platform `package` table — the white-label package catalog. This file is the SOURCE for seeding the platform DB (`~/work/hanzo/platform`), NOT a console runtime import. The console reads packages at runtime via `GET /v1/packages` (the platform serves these rows); adding a package = inserting a row here + reseeding, never a console code edit + redeploy. See `src/lib/api/packages.ts` and the follow-up spec in LLM.md. Each row matches the `Package` shape (`src/components/products/tenants/packages.ts`).",
+  "packages": [
+    {
+      "id": "console-admin",
+      "name": "Console / Admin",
+      "description": "A white-label admin console for the tenant — their own branded control plane over Hanzo Cloud.",
+      "services": ["console-admin", "iam"],
+      "brandTemplate": { "customBrand": true, "hostPattern": "console.{slug}.hanzo.app" },
+      "iamTemplate": { "ownIssuer": false, "appPattern": "{slug}-console" },
+      "domainPattern": "console.{slug}.hanzo.app",
+      "plan": "starter",
+      "sovereign": false
+    },
+    {
+      "id": "paas",
+      "name": "PaaS",
+      "description": "The deploy platform — projects, environments, apps, and pipelines on a dedicated cluster.",
+      "services": ["paas", "iam", "kms"],
+      "brandTemplate": { "customBrand": false, "hostPattern": "{slug}.hanzo.app" },
+      "iamTemplate": { "ownIssuer": false, "appPattern": "{slug}-paas" },
+      "domainPattern": "{slug}.hanzo.app",
+      "plan": "growth",
+      "sovereign": false
+    },
+    {
+      "id": "dex",
+      "name": "DEX",
+      "description": "A decentralized exchange surface, branded and domain-bound for the tenant.",
+      "services": ["dex", "iam", "kms"],
+      "brandTemplate": { "customBrand": true, "hostPattern": "dex.{slug}.exchange" },
+      "iamTemplate": { "ownIssuer": false, "appPattern": "{slug}-dex" },
+      "domainPattern": "dex.{slug}.exchange",
+      "plan": "growth",
+      "sovereign": false
+    },
+    {
+      "id": "bank",
+      "name": "Bank",
+      "description": "The regulated bank / tokenization stack with per-tenant custody and KMS.",
+      "services": ["bank", "iam", "kms"],
+      "brandTemplate": { "customBrand": true, "hostPattern": "bank.{slug}.com" },
+      "iamTemplate": { "ownIssuer": true, "appPattern": "{slug}-bank" },
+      "domainPattern": "bank.{slug}.com",
+      "plan": "enterprise",
+      "sovereign": false
+    },
+    {
+      "id": "ats",
+      "name": "ATS",
+      "description": "An alternative trading system surface with its own IAM scope and secrets.",
+      "services": ["ats", "iam", "kms"],
+      "brandTemplate": { "customBrand": true, "hostPattern": "ats.{slug}.com" },
+      "iamTemplate": { "ownIssuer": true, "appPattern": "{slug}-ats" },
+      "domainPattern": "ats.{slug}.com",
+      "plan": "enterprise",
+      "sovereign": false
+    },
+    {
+      "id": "bd",
+      "name": "Broker-Dealer",
+      "description": "A broker-dealer surface, provisioned with the tenant brand + identity scope.",
+      "services": ["bd", "iam", "kms"],
+      "brandTemplate": { "customBrand": true, "hostPattern": "bd.{slug}.com" },
+      "iamTemplate": { "ownIssuer": true, "appPattern": "{slug}-bd" },
+      "domainPattern": "bd.{slug}.com",
+      "plan": "enterprise",
+      "sovereign": false
+    },
+    {
+      "id": "ta",
+      "name": "Transfer Agent",
+      "description": "A transfer-agent surface for the tenant, branded and identity-scoped.",
+      "services": ["ta", "iam", "kms"],
+      "brandTemplate": { "customBrand": true, "hostPattern": "ta.{slug}.com" },
+      "iamTemplate": { "ownIssuer": true, "appPattern": "{slug}-ta" },
+      "domainPattern": "ta.{slug}.com",
+      "plan": "enterprise",
+      "sovereign": false
+    },
+    {
+      "id": "sovereign-l1",
+      "name": "Sovereign L1",
+      "description": "The full regulated-fintech stack on a sovereign L1 — ATS + BD + TA + the tenant's own chain.",
+      "services": ["ats", "bd", "ta", "chain", "iam", "kms", "console-admin"],
+      "brandTemplate": { "customBrand": true, "hostPattern": "{slug}.network" },
+      "iamTemplate": { "ownIssuer": true, "appPattern": "{slug}-console" },
+      "domainPattern": "{slug}.network",
+      "plan": "enterprise",
+      "sovereign": true
+    }
+  ]
+}

playwright.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Playwright e2e config targeting console.hanzo.ai (live) and localhost:4000 (dev).
+ * Run against production: BASE_URL=https://console.hanzo.ai pnpm e2e
+ * Run against dev:        pnpm dev  # then pnpm e2e (default)
+ */
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: 1,
+  reporter: 'list',
+  timeout: 60_000,
+
+  use: {
+    baseURL: process.env.BASE_URL ?? 'https://console.hanzo.ai',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+    // Needed for Tamagui/RNW rendering (blocks by default on non-Chromium)
+    headless: true,
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})

scripts/build-embed.mjs

@@ -0,0 +1,228 @@
+#!/usr/bin/env node
+/**
+ * build-embed.mjs — produce the STATIC console bundle the hanzoai/cloud Go binary
+ * go:embeds (task #41, "True 1-binary FE"). Invoked by `npm run build:embed`.
+ *
+ * A Next `output: 'export'` build imposes two constraints this app does not meet on
+ * `main` (it is a server build there). This script makes the app export-clean for
+ * the duration of ONE build and ALWAYS restores it (a finally block; in CI the
+ * checkout is disposable, locally it keeps the tree pristine), so nothing on `main`
+ * and the normal `npm run build` are unaffected:
+ *
+ *  1) NO server route handlers. A static export has no runtime to run an
+ *     app/route.ts. This repo's route handlers are (a) BFF reverse-proxies that in
+ *     one-binary collapse to the cloud `/v1/*` the SPA calls directly, and (b) the
+ *     two standalone routes (keys/onboard) now ported to cloud `/v1/iam/{keys,onboard}`.
+ *     Either way they must be absent from the export → we STASH them.
+ *
+ *  2) Every dynamic page segment needs `generateStaticParams()`. The console's two
+ *     dynamic pages ([...slug] and discover/[id]) are `'use client'` catch-alls that
+ *     resolve their view CLIENT-side from the product registry — so the correct
+ *     static-export shape is "pre-render NONE; serve the SPA shell for every deep
+ *     link" (cloud/webui.go's serveIndex is exactly that fallback). A `'use client'`
+ *     module may not itself export the server-only generateStaticParams, so we
+ *     OVERLAY each dynamic page with a tiny SERVER wrapper (generateStaticParams →
+ *     [] + dynamicParams=false) that renders the original client body, which we move
+ *     beside it as `_body.tsx` (a leading-underscore dir/file is not a route).
+ *
+ *  3) NO request-time dynamic API in the ROOT LAYOUT. `output: 'export'` prerenders
+ *     EVERY page THROUGH app/layout.tsx, so a request-time read there — the root
+ *     `generateMetadata` calling `headers()` for a per-host <title> — throws in the
+ *     Server Components render for ALL pages (it surfaces on /_not-found and aborts
+ *     the export). The embed is same-origin and resolves brand CLIENT-side from
+ *     window.location, so the SSR title can safely fall back to the build-time
+ *     default; the browser re-renders the correct brand. So we NEUTRALIZE the
+ *     layout's `next/headers` read for the export (drop the import, host → undefined)
+ *     and restore the pristine layout after. Without this, the export FAILS and the
+ *     cloud image degrades to the committed fallback shell (the 1-binary console
+ *     silently ships as a stub).
+ *
+ * Steps: stash route handlers → overlay dynamic pages → neutralize root-layout
+ * dynamic APIs → `CONSOLE_EMBED=1 next build` (emits out/) → restore everything.
+ */
+import { execFileSync } from 'node:child_process'
+import {
+  copyFileSync,
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  renameSync,
+  rmSync,
+  statSync,
+  writeFileSync,
+} from 'node:fs'
+import { basename, dirname, join, relative } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..')
+const appDir = join(root, 'app')
+const stashDir = join(root, '.embed-stash')
+
+/** Recursively collect files under dir whose basename matches re. */
+function findFiles(dir, re) {
+  const out = []
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const p = join(dir, entry.name)
+    if (entry.isDirectory()) out.push(...findFiles(p, re))
+    else if (re.test(entry.name)) out.push(p)
+  }
+  return out
+}
+
+/** Move a file, creating the destination's parent dirs. */
+function move(from, to) {
+  mkdirSync(dirname(to), { recursive: true })
+  renameSync(from, to)
+}
+
+/** The dynamic segment of a page dir: `[id]` → "id", `[...slug]` → "slug", or "". */
+function dynamicSegment(file) {
+  const m = basename(dirname(file)).match(/^\[(?:\.\.\.)?([^\]]+)\]$/)
+  return m ? m[1] : ''
+}
+
+/** Whether the dir name is a catch-all (`[...seg]`) vs a single segment (`[seg]`). */
+function isCatchAll(file) {
+  return /^\[\.\.\./.test(basename(dirname(file)))
+}
+
+/** A dynamic page needing generateStaticParams under output:export. */
+function isDynamicPage(file) {
+  return basename(file) === 'page.tsx' && dynamicSegment(file) !== ''
+}
+
+/**
+ * The server wrapper written in place of a dynamic client page for the export.
+ *
+ *   - `dynamic = 'force-static'`: the export prerender step treats the body's
+ *     dynamic reads (use(params)/searchParams) as static — it renders a placeholder
+ *     instead of throwing. The route's REAL client component still ships in the JS
+ *     bundle, so client-side navigation hydrates the true page; direct deep links
+ *     hit the embedding host's SPA fallback (cloud/webui.go serveIndex → index.html)
+ *     which re-resolves the route client-side.
+ *   - `generateStaticParams` returns ONE placeholder param (output:export requires a
+ *     non-empty set) keyed to the segment; a catch-all takes an array value.
+ *   - `dynamicParams = false`: no on-demand params (there is no server); everything
+ *     else is the SPA fallback. The real body lives beside this as `_body.tsx`.
+ */
+function wrapperSource(seg, catchAll) {
+  const value = catchAll ? `['index']` : `'index'`
+  return `// AUTO-GENERATED for \`output: 'export'\` by scripts/build-embed.mjs — do not commit.
+// The real (client) page body is ./_body.tsx (still bundled → client nav hydrates it);
+// this server wrapper only satisfies the static-export contract. See the script.
+import Body from './_body'
+
+export const dynamic = 'force-static'
+export const dynamicParams = false
+export function generateStaticParams() {
+  return [{ ${seg}: ${value} }]
+}
+export default function Page(props: any) {
+  return <Body {...props} />
+}
+`
+}
+
+/**
+ * Rewrite the root layout to be export-clean: `output: 'export'` prerenders EVERY
+ * page through app/layout.tsx, so a request-time dynamic API there (next/headers'
+ * `headers()`) throws in the Server Components render for ALL pages and aborts the
+ * export (it surfaces on /_not-found). The root `generateMetadata` reads the Host
+ * header only to brand the SSR <title>; in the same-origin embed the brand is
+ * resolved CLIENT-side from window.location, so we drop the `next/headers` import
+ * and resolve the host to `undefined` (→ the build-time default brand; the browser
+ * re-renders the correct brand). Returns the pristine source (to restore in the
+ * finally), or null when the layout has no request-time read to neutralize.
+ */
+function neutralizeLayout(file) {
+  if (!existsSync(file)) return null
+  const src = readFileSync(file, 'utf8')
+  if (!/from ['"]next\/headers['"]/.test(src)) return null
+  const patched = src
+    .replace(/^\s*import\s*\{[^}]*\}\s*from\s*['"]next\/headers['"];?[^\n]*\n/m, '')
+    .replace(/\(await\s+headers\(\)\)\.get\([^)]*\)\s*\?\?\s*undefined/g, 'undefined')
+    .replace(/\(await\s+headers\(\)\)\.get\([^)]*\)/g, 'undefined')
+  writeFileSync(file, patched, 'utf8')
+  return src
+}
+
+const routes = existsSync(appDir) ? findFiles(appDir, /^route\.(ts|tsx|js)$/) : []
+const dynamicPages = existsSync(appDir) ? findFiles(appDir, /^page\.tsx$/).filter(isDynamicPage) : []
+
+const stashedRoutes = []
+const wrappedPages = [] // { page, body }
+const layoutFile = join(appDir, 'layout.tsx')
+let layoutPristine = null // pristine app/layout.tsx source while neutralized for the export
+
+if (existsSync(stashDir)) rmSync(stashDir, { recursive: true, force: true })
+
+try {
+  // 1) Stash server route handlers out of the export.
+  for (const r of routes) {
+    const rel = relative(appDir, r)
+    move(r, join(stashDir, 'routes', rel))
+    stashedRoutes.push(rel)
+  }
+
+  // 2) Overlay each dynamic page: keep a copy of the original, move the original to
+  //    _body.tsx, write the server wrapper as page.tsx.
+  for (const page of dynamicPages) {
+    const rel = relative(appDir, page)
+    const pristine = join(stashDir, 'pages', rel)
+    const body = join(dirname(page), '_body.tsx')
+    mkdirSync(dirname(pristine), { recursive: true })
+    copyFileSync(page, pristine) // pristine original for restore
+    renameSync(page, body) // client body → non-route sibling
+    writeFileSync(page, wrapperSource(dynamicSegment(page), isCatchAll(page)), 'utf8')
+    wrappedPages.push({ page, body })
+  }
+
+  // 3) Neutralize the root layout's request-time dynamic APIs (next/headers) so the
+  //    export prerender doesn't throw for every page through the layout.
+  layoutPristine = neutralizeLayout(layoutFile)
+
+  console.log(
+    `[build:embed] stashed ${stashedRoutes.length} route handler(s), wrapped ${wrappedPages.length} dynamic page(s)${
+      layoutPristine ? ', neutralized root-layout headers()' : ''
+    }; building static export…`,
+  )
+
+  // The project pins Next 15 (webpack is its default builder; the custom `webpack()`
+  // config in next.config.mjs applies). No Turbopack flag is passed.
+  execFileSync('npx', ['next', 'build'], {
+    cwd: root,
+    stdio: 'inherit',
+    // CONSOLE_EMBED gates the server-side build transforms; NEXT_PUBLIC_CONSOLE_EMBED
+    // is inlined into the CLIENT bundle so runtime code (lib/embed.ts → IS_EMBED) can
+    // skip the BFF-only session probes (/auth/refresh|session, /billing welcome) that
+    // don't exist in this static, server-less deployment.
+    env: { ...process.env, CONSOLE_EMBED: '1', NEXT_PUBLIC_CONSOLE_EMBED: '1' },
+  })
+
+  const out = join(root, 'out')
+  if (!existsSync(out) || !statSync(out).isDirectory()) {
+    throw new Error('next build did not emit out/ (static export failed)')
+  }
+  console.log('[build:embed] static export ready at out/')
+} finally {
+  // ALWAYS restore: put the pristine root layout back; remove wrappers + _body, put
+  // the original page back; un-stash routes.
+  if (layoutPristine != null) writeFileSync(layoutFile, layoutPristine, 'utf8')
+  for (const { page, body } of wrappedPages) {
+    if (existsSync(body)) rmSync(body, { force: true })
+    const rel = relative(appDir, page)
+    const pristine = join(stashDir, 'pages', rel)
+    if (existsSync(pristine)) {
+      rmSync(page, { force: true })
+      move(pristine, page)
+    }
+  }
+  for (const rel of stashedRoutes) move(join(stashDir, 'routes', rel), join(appDir, rel))
+  if (existsSync(stashDir)) rmSync(stashDir, { recursive: true, force: true })
+  if (stashedRoutes.length || wrappedPages.length) {
+    console.log(
+      `[build:embed] restored ${stashedRoutes.length} route handler(s) + ${wrappedPages.length} dynamic page(s)`,
+    )
+  }
+}

src/components/AddProductPanel.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+/**
+ * Add product — the out-of-box "assemble your own backend" flow. Lists every
+ * product the org has NOT yet enabled (brand-scoped, non-admin, minus the always-on
+ * essentials), grouped by category, each with an "Enable" action that POSTs the
+ * entitlement patch and drops the product into the org's sidebar. Rendered in the
+ * shared DetailPane (opened from the sidebar's "Add product" row).
+ *
+ * Honest by construction: it derives from the ONE catalog + the live entitlement
+ * set, shows the real enable state (Enabling…/Enabled), surfaces an error inline,
+ * and shows an honest empty state when nothing is left to add.
+ */
+import { useMemo, useState } from 'react'
+import { Button, Text, XStack, YStack } from '@hanzo/gui'
+import { Check, Plus } from '@hanzogui/lucide-icons-2'
+
+import { addableCatalogByCategory, type CatalogEntry } from '~/lib/products/registry'
+import { useEntitlements } from '~/lib/entitlements-context'
+import { useIsSuperAdmin } from '~/lib/auth/admin'
+import { useProductColors } from '~/lib/products/pins'
+import { asColor } from '~/components/ui/color'
+import { EmptyState } from '~/components/ui/EmptyState'
+
+function AddRow({ entry, onEnable }: { entry: CatalogEntry; onEnable: () => Promise<void> }) {
+  const { colorOf } = useProductColors()
+  const [state, setState] = useState<'idle' | 'busy' | 'done' | 'error'>('idle')
+  const Icon = entry.icon
+  const enable = async () => {
+    setState('busy')
+    try {
+      await onEnable()
+      setState('done')
+    } catch {
+      setState('error')
+    }
+  }
+  return (
+    <XStack items="center" gap="$3" py="$2" px="$2" rounded="$3" hoverStyle={{ bg: '$color2' }}>
+      <YStack width={30} height={30} rounded="$3" bg="$color3" items="center" justify="center">
+        <Icon size={16} color={asColor(colorOf(entry.id))} />
+      </YStack>
+      <YStack flex={1} minW={0}>
+        <Text fontSize="$3" fontWeight="600" color="$color12" numberOfLines={1}>
+          {entry.label}
+        </Text>
+        <Text fontSize="$1" color="$color10" numberOfLines={1}>
+          {entry.description}
+        </Text>
+        {state === 'error' ? (
+          <Text fontSize="$1" color="$red10">
+            Could not enable — try again.
+          </Text>
+        ) : null}
+      </YStack>
+      {state === 'done' ? (
+        <XStack items="center" gap="$1.5" px="$2">
+          <Check size={14} color="$green10" />
+          <Text fontSize="$2" color="$green10" fontWeight="600">
+            Enabled
+          </Text>
+        </XStack>
+      ) : (
+        <Button
+          size="$2"
+          icon={<Plus size={14} />}
+          disabled={state === 'busy'}
+          onPress={enable}
+          aria-label={`Enable ${entry.label}`}
+        >
+          {state === 'busy' ? 'Enabling…' : 'Enable'}
+        </Button>
+      )}
+    </XStack>
+  )
+}
+
+export function AddProductPanel() {
+  const showAdmin = useIsSuperAdmin()
+  const { enabled, addProducts } = useEntitlements()
+  const groups = useMemo(() => addableCatalogByCategory(showAdmin, enabled), [showAdmin, enabled])
+
+  if (groups.length === 0) {
+    return (
+      <YStack p="$4">
+        <EmptyState
+          icon={Check}
+          title="Everything's enabled"
+          description="Your organization has enabled every available product. New products appear here as they launch."
+        />
+      </YStack>
+    )
+  }
+
+  return (
+    <YStack p="$3" gap="$4">
+      <Text fontSize="$2" color="$color10">
+        Enable products to add them to your organization's console. You only pay for what you use.
+      </Text>
+      {groups.map((group) => (
+        <YStack key={group.category} gap="$1">
+          <Text fontSize="$1" color="$color10" fontWeight="700" textTransform="uppercase" px="$2">
+            {group.category}
+          </Text>
+          {group.entries.map((entry) => (
+            <AddRow key={entry.id} entry={entry} onEnable={() => addProducts([entry.id])} />
+          ))}
+        </YStack>
+      ))}
+    </YStack>
+  )
+}

src/components/Analytics.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+/**
+ * Bridges the console session + App-Router navigation into the shared analytics
+ * client (`@hanzo/capture`). Rendered once, inside both `SessionProvider` and
+ * `AnalyticsProvider` (see `Provider.tsx`), it renders nothing.
+ *
+ *  - `usePageview` emits a pageview on every path change (the provider fires the
+ *    FIRST pageview itself, so this only covers subsequent client navigations).
+ *  - `identify` binds the person to the STABLE `owner/name` actor id — the same id
+ *    the API client already uses (`setCurrentActor`), never the email — once the
+ *    session resolves. The org tenant is stamped server-side from the session, so
+ *    we send the user id only. Anonymous placeholder sessions are skipped.
+ */
+import { useEffect, useRef } from 'react'
+import { usePathname } from 'next/navigation'
+import { useAnalytics, usePageview } from '@hanzo/capture/react'
+
+import { useSession } from '~/lib/auth/session'
+
+export function AnalyticsBridge() {
+  const analytics = useAnalytics()
+  const { account } = useSession()
+  usePageview(usePathname())
+
+  const identified = useRef('')
+  useEffect(() => {
+    if (!account?.owner || !account?.name || account.type === 'anonymous-user') return
+    const personId = `${account.owner}/${account.name}`
+    if (identified.current === personId) return
+    identified.current = personId
+    analytics.identify(personId)
+  }, [account, analytics])
+
+  return null
+}

src/components/AppLauncher.tsx

@@ -17,13 +17,19 @@ import {
   useState,
   type ReactNode,
 } from 'react'
-import { useRouter } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 import { Dialog, Input, ScrollView, Text, VisuallyHidden, XStack, YStack } from '@hanzo/gui'
-import { ExternalLink, Lock, Search } from '@hanzogui/lucide-icons-2'
+import { Lock, Search } from '@hanzogui/lucide-icons-2'
 
-import { catalogByCategory, type CatalogEntry } from '~/lib/products/registry'
+import { findEntry, visibleCatalogByCategory, type CatalogEntry } from '~/lib/products/registry'
+import { orderEntries } from '~/lib/products/order'
 import { searchCatalog } from '~/lib/products/search'
+import { useProductColors } from '~/lib/products/pins'
+import { asColor } from '~/components/ui/color'
 import { openProduct } from '~/lib/products/open'
+import { useIsSuperAdmin } from '~/lib/auth/admin'
+import { useEntitlements } from '~/lib/entitlements-context'
+import { filterEntitled } from '~/lib/entitlements'
 
 type LauncherApi = { isOpen: boolean; open: () => void; close: () => void }
 
@@ -35,7 +41,7 @@ export function useAppLauncher(): LauncherApi {
   return ctx
 }
 
-function Tile({ entry, onPress }: { entry: CatalogEntry; onPress: () => void }) {
+function Tile({ entry, color, active, onPress }: { entry: CatalogEntry; color: string; active?: boolean; onPress: () => void }) {
   const Icon = entry.icon
   return (
     <YStack
@@ -48,6 +54,9 @@ function Tile({ entry, onPress }: { entry: CatalogEntry; onPress: () => void })
       items="center"
       justify="center"
       rounded="$6"
+      bg={active ? '$color3' : 'transparent'}
+      borderWidth={1}
+      borderColor={active ? '$color6' : 'transparent'}
       hoverStyle={{ bg: '$color3' }}
     >
       <XStack
@@ -56,40 +65,54 @@ function Tile({ entry, onPress }: { entry: CatalogEntry; onPress: () => void })
         items="center"
         justify="center"
         rounded="$7"
-        bg="$color4"
         position="relative"
+        style={{ backgroundColor: `${color}22` }}
       >
-        <Icon size={26} />
+        <Icon size={26} color={asColor(color)} />
         {entry.admin ? (
           <XStack position="absolute" t={-4} r={-4} bg="$color2" rounded="$10" p="$1">
             <Lock size={11} opacity={0.7} />
           </XStack>
-        ) : entry.kind === 'external' ? (
-          <XStack position="absolute" t={-4} r={-4} bg="$color2" rounded="$10" p="$1">
-            <ExternalLink size={11} opacity={0.7} />
-          </XStack>
         ) : null}
       </XStack>
       <Text fontSize="$2" fontWeight="600" color="$color12" numberOfLines={1}>
         {entry.label}
       </Text>
-      {entry.status === 'soon' ? (
-        <YStack px="$1.5" py={1} rounded="$10" bg="$color4" position="absolute" b="$2">
-          <Text fontSize={8} fontWeight="800" letterSpacing={0.5} color="$color11">
-            SOON
-          </Text>
-        </YStack>
-      ) : null}
     </YStack>
   )
 }
 
 function LauncherDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (o: boolean) => void }) {
   const router = useRouter()
+  const pathname = usePathname() ?? ''
+  const showAdmin = useIsSuperAdmin()
+  const { enabled } = useEntitlements()
+  const { colorOf } = useProductColors()
   const [query, setQuery] = useState('')
 
-  const groups = useMemo(() => catalogByCategory(), [])
-  const filtered = useMemo(() => (query.trim() ? searchCatalog(query) : null), [query])
+  // The active product (from the current route) — pinned first + emphasized in the
+  // browse grid, per directive #58 §2.2.
+  const activeId = useMemo(() => {
+    const seg = pathname.split('/').filter(Boolean)[0]
+    return seg ? (findEntry(seg)?.id ?? null) : null
+  }, [pathname])
+
+  // Browse (no query): each category's apps are CONTINUOUS ALPHABETICAL with the
+  // selected app pinned first — the SAME `orderEntries` rule the sidebar uses (DRY).
+  const groups = useMemo(
+    () =>
+      visibleCatalogByCategory(showAdmin, enabled).map((g) => ({
+        category: g.category,
+        entries: orderEntries(g.entries, activeId),
+      })),
+    [showAdmin, enabled, activeId],
+  )
+  // While filtering, keep the relevance ranking (a search is not alphabetical). Gate
+  // the results by admin AND entitlement (the launcher mirrors the sidebar's scope).
+  const filtered = useMemo(
+    () => (query.trim() ? filterEntitled(searchCatalog(query).filter((e) => showAdmin || !e.admin), enabled, showAdmin) : null),
+    [query, showAdmin, enabled],
+  )
 
   const activate = useCallback(
     (entry: CatalogEntry) => {
@@ -102,11 +125,11 @@ function LauncherDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (
   return (
     <Dialog modal open={open} onOpenChange={onOpenChange}>
       <Dialog.Portal>
-        <Dialog.Overlay key="launcher-overlay" bg="rgba(0,0,0,0.6)" />
+        <Dialog.Overlay key="launcher-overlay" className="hz-scrim-in" bg="rgba(0,0,0,0.6)" />
         <Dialog.Content
           key="launcher-content"
+          className="hz-paper hz-pop-in"
           bordered
-          elevate
           width="92vw"
           height="88vh"
           maxW={1180}
@@ -156,7 +179,7 @@ function LauncherDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (
                 ) : (
                   <XStack flexWrap="wrap" gap="$2">
                     {filtered.map((entry) => (
-                      <Tile key={entry.id} entry={entry} onPress={() => activate(entry)} />
+                      <Tile key={entry.id} entry={entry} color={colorOf(entry.id)} active={entry.id === activeId} onPress={() => activate(entry)} />
                     ))}
                   </XStack>
                 )
@@ -168,7 +191,7 @@ function LauncherDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (
                     </Text>
                     <XStack flexWrap="wrap" gap="$2">
                       {group.entries.map((entry) => (
-                        <Tile key={entry.id} entry={entry} onPress={() => activate(entry)} />
+                        <Tile key={entry.id} entry={entry} color={colorOf(entry.id)} active={entry.id === activeId} onPress={() => activate(entry)} />
                       ))}
                     </XStack>
                   </YStack>

src/components/AuthGate.tsx

@@ -3,25 +3,45 @@
 /**
  * Auth gate — renders children only for a signed-in account.
  *
- * While the session loads, shows a spinner. With no account, redirects to
+ * While the session loads, shows a spinner. With no account it sends the visitor to
  * `/signin`. Used to wrap the authenticated dashboard.
+ *
+ * SPA-FALLBACK CAVEAT (the reason for the `/signin` branch below): the deploy serves
+ * the SPA shell (the `/` route's index.html) for EVERY path, so a DIRECT load of
+ * `/signin` mounts THIS gate (the `/` route tree), not the `/signin` route. A visitor
+ * with no account would then have `router.replace('/signin')` be a no-op (the URL is
+ * already `/signin`) and be trapped on the spinner forever. So at `/signin` we render
+ * the sign-in experience inline instead of redirecting — `<SignIn/>` is the SAME
+ * component the `/signin` route renders (and it bounces an already-signed-in visitor
+ * back to `/`). Everywhere else, an unauthenticated visitor is redirected to `/signin`.
  */
-import { useEffect, type ReactNode } from 'react'
+import { useEffect, useState, type ReactNode } from 'react'
 import { useRouter } from 'next/navigation'
 
 import { Loader } from '~/components/ui/Loader'
+import { SignIn } from '~/components/SignIn'
 import { useSession } from '~/lib/auth/session'
 
 export function AuthGate({ children }: { children: ReactNode }) {
   const { account, loading } = useSession()
   const router = useRouter()
+  // The REAL browser path, resolved after mount (window is absent during SSR/prerender)
+  // — unambiguous under the SPA fallback where the served HTML is the `/` route's shell.
+  const [atSignin, setAtSignin] = useState<boolean | null>(null)
+  useEffect(() => {
+    setAtSignin(window.location.pathname === '/signin')
+  }, [])
 
   useEffect(() => {
-    if (!loading && !account) router.replace('/signin')
-  }, [loading, account, router])
+    // Redirect an unauthenticated visitor to /signin — but never when already there
+    // (a same-URL replace is a no-op; we render the form inline at /signin instead).
+    if (!loading && !account && atSignin === false) router.replace('/signin')
+  }, [loading, account, atSignin, router])
 
-  if (loading || !account) {
-    return <Loader />
-  }
+  // At /signin, the ONE sign-in experience owns the surface (form on a tenant host,
+  // silent SSO on an admin host, redirect-to-/ when already signed in).
+  if (atSignin) return <SignIn />
+
+  if (atSignin === null || loading || !account) return <Loader />
   return <>{children}</>
 }

src/components/BrandTitle.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import { branding } from '~/config'
+
+/**
+ * BrandTitle — keep the browser-tab document.title white-labeled to the request
+ * host's brand, on the client.
+ *
+ * The console ships into the unified `hanzoai/cloud` binary as a Next.js STATIC
+ * EXPORT (go:embed): `generateMetadata` runs at BUILD time with the default host,
+ * so the exported <title> is baked to "Hanzo Cloud Console" for every host. The
+ * cloud serving layer rewrites that <title> per Host on the first paint, but Next
+ * re-applies the baked metadata title on hydration (and on client navigations) —
+ * reverting a Lux/Zoo tab back to "Hanzo Cloud Console", a white-label violation.
+ *
+ * This client net resolves the brand from window.location (via `branding.name`,
+ * the same source the visible shell uses) and enforces the correct title,
+ * defeating the baked-metadata re-application. On the dynamic standalone app the
+ * SSR title is already host-correct, so this only ever re-affirms it — a no-op.
+ */
+export function BrandTitle() {
+  useEffect(() => {
+    const desired = branding.name // "<Brand> Cloud Console", from window.location
+    const apply = () => {
+      if (document.title !== desired) document.title = desired
+    }
+    apply()
+    // Next re-applies the baked metadata title after hydration; re-affirm the
+    // brand title whenever the document head mutates. Writing document.title only
+    // when it has drifted keeps the observer from looping on its own change.
+    const observer = new MutationObserver(apply)
+    observer.observe(document.head, { childList: true, subtree: true, characterData: true })
+    return () => observer.disconnect()
+  }, [])
+
+  return null
+}

src/components/ChunkGuard.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+/**
+ * ChunkGuard — window-level net that recovers from a stale-deploy chunk 404.
+ *
+ * On a rolling deploy an open tab (or a fresh deep-link that lands on the other
+ * replica) requests a hashed chunk that no longer exists on the replica it hits.
+ * The 404 falls through to the app-shell HTML, so the browser throws
+ * `ChunkLoadError` / "Unexpected token '<'" trying to parse HTML as JS — a blank,
+ * unrecoverable screen. This catches that at the WINDOW level and does one full
+ * reload, which pulls the fresh HTML + current chunks.
+ *
+ * Two catch surfaces, because a chunk 404 surfaces two ways:
+ *  - CAPTURE-phase `error` on the failing `<script>`/`<link>` element — a resource
+ *    load error does NOT bubble, so only a capture listener sees it. This fires on
+ *    the RAW 404 during the initial deep-link load, before webpack's loader even
+ *    rejects — the earliest, most reliable signal for "refresh a sub-route 404s a
+ *    chunk".
+ *  - `unhandledrejection` / bubbled `error` carrying a `ChunkLoadError` message —
+ *    webpack's dynamic-import path.
+ *
+ * The React error boundaries (`global-error`, the dashboard segment,
+ * `ProductErrorBoundary`) catch the same class at RENDER time; this complements
+ * them for the async/resource paths a render boundary never sees. Every recovery
+ * site — this net and all three boundaries — shares ONE loop-breaker
+ * (`shouldReloadForChunk` bounded by `CHUNK_RELOAD_AT_KEY`), so a persistent skew
+ * reloads at most once per window and never spins. Chunk detection is shared too
+ * (`isChunkLoadError`) — one definition of "this is a chunk skew" for the whole app.
+ */
+import { useEffect } from 'react'
+
+import { isChunkLoadError, shouldReloadForChunk, CHUNK_RELOAD_AT_KEY } from '~/components/errors/boundary-logic'
+
+/** True when a failed resource load targets a Next build asset (script/link). */
+function isNextAssetError(target: EventTarget | null): boolean {
+  if (!target || typeof target !== 'object') return false
+  const el = target as Partial<HTMLScriptElement & HTMLLinkElement>
+  const url = el.src || el.href
+  return typeof url === 'string' && url.includes('/_next/static/')
+}
+
+export function ChunkGuard() {
+  useEffect(() => {
+    // Reload at most once per window, coordinated with the render boundaries so a
+    // skew that trips several detectors at once reloads ONCE (the timestamp ages
+    // out, so a genuine later skew can still recover) — never a reload loop.
+    const recover = () => {
+      try {
+        const raw = window.sessionStorage.getItem(CHUNK_RELOAD_AT_KEY)
+        const last = raw ? Number(raw) : null
+        if (!shouldReloadForChunk(Date.now(), last)) return
+        window.sessionStorage.setItem(CHUNK_RELOAD_AT_KEY, String(Date.now()))
+        window.location.reload()
+      } catch {
+        /* sessionStorage blocked (private mode) — let a render boundary show its card */
+      }
+    }
+
+    const onError = (e: ErrorEvent) => {
+      if (isNextAssetError(e.target) || isChunkLoadError(e.error ?? e.message)) recover()
+    }
+    const onRejection = (e: PromiseRejectionEvent) => {
+      if (isChunkLoadError(e.reason)) recover()
+    }
+
+    // `capture: true` so the non-bubbling resource-load error on a 404'd chunk
+    // element reaches us.
+    window.addEventListener('error', onError, true)
+    window.addEventListener('unhandledrejection', onRejection)
+    return () => {
+      window.removeEventListener('error', onError, true)
+      window.removeEventListener('unhandledrejection', onRejection)
+    }
+  }, [])
+
+  return null
+}

src/components/CommandPalette.tsx

@@ -11,13 +11,18 @@
  *   - `?` prefix  asks the docs knowledge store (RAG, store=`docs`) and shows the
  *                 grounded answer with any links it cites.
  *
+ * Beyond navigation it also runs ACTIONS — toggle theme, browse all apps, open
+ * settings, switch organization, ask AI / search docs, sign out — ranked by the
+ * same query, so ⌘K is ONE surface for "go somewhere" and "do something".
+ *
  * Everything composes existing pieces: the catalog registry (`searchCatalog` +
- * `openProduct`), the AI client (`AiApi`), and the honest backend-state mapper.
- * Nothing is fabricated — AI/RAG failures degrade to a truthful state card.
+ * `openProduct`), the AI client (`AiApi`), the chrome hooks (theme/launcher/
+ * session/org-scope), and the honest backend-state mapper. Nothing is fabricated —
+ * AI/RAG failures degrade to a truthful state card.
  *
  * Keyboard is handled on `window`: ⌘K toggles from anywhere; while open, ↑/↓ move
- * the selection, ↵ activates, Esc closes. The header search box opens it; the
- * shell's "?" opens it straight in docs-help mode.
+ * the selection (over actions then products), ↵ activates, Esc closes. The header
+ * search box opens it; type `>` for AI, `?` for docs.
  */
 import {
   createContext,
@@ -26,9 +31,11 @@ import {
   useEffect,
   useMemo,
   useState,
+  type ComponentType,
   type ReactNode,
 } from 'react'
 import { useRouter } from 'next/navigation'
+import { useThemeSetting } from '@hanzogui/next-theme'
 import {
   Anchor,
   Dialog,
@@ -42,28 +49,65 @@ import {
 } from '@hanzo/gui'
 import {
   ArrowRight,
+  Building2,
   Command,
   CornerDownLeft,
-  ExternalLink,
+  House,
   LayoutGrid,
   Lock,
+  LogOut,
+  Moon,
   Search,
+  SlidersHorizontal,
   Sparkles,
+  Sun,
+  Zap,
 } from '@hanzogui/lucide-icons-2'
 
-import { AiApi } from '~/lib/api'
-import { catalog, findEntry, type CatalogEntry } from '~/lib/products/registry'
-import { searchCatalog } from '~/lib/products/search'
+import { AiApi, IamAdminApi, type Organization } from '~/lib/api'
+import { findEntry, type CatalogEntry } from '~/lib/products/registry'
+import { commandBarSystemPrompt, hanzoAssistantSystemPrompt } from '~/lib/assistant'
+import { searchDestinations, type Destination } from '~/lib/products/search'
+import { useProductColors } from '~/lib/products/pins'
+import { asColor } from '~/components/ui/color'
+import { ProductIcon } from '~/components/ui/ProductIcon'
 import { openProduct } from '~/lib/products/open'
+import { currentOrg, switchOrg } from '~/lib/org-scope'
+import { useSession } from '~/lib/auth/session'
+import { useIsSuperAdmin } from '~/lib/auth/admin'
+import { useEntitlements } from '~/lib/entitlements-context'
 import { useAppLauncher } from '~/components/AppLauncher'
 import { BackendStateCard, classifyBackend, type BackendState } from '~/components/ui/BackendState'
 
+const titleCase = (s: string) => (s ? s[0].toUpperCase() + s.slice(1) : s)
+
+/**
+ * A non-navigation command: a verb the palette can run (toggle theme, browse all
+ * apps, switch org, sign out, …). Orthogonal to catalog entries — both are ranked
+ * by the same query so ⌘K is ONE surface for "go somewhere" AND "do something".
+ */
+type PaletteAction = {
+  id: string
+  label: string
+  hint: string
+  /** Extra text the query matches against (synonyms). */
+  keywords: string
+  icon: ComponentType<{ size?: number }>
+  /** Runs on activate. Closing the palette (if wanted) is the action's own job. */
+  run: () => void
+}
+
+/** Substring match over an action's label + synonyms (lowercased query). */
+function actionMatches(a: PaletteAction, q: string): boolean {
+  if (!q) return false
+  return `${a.label} ${a.keywords}`.toLowerCase().includes(q)
+}
+
 type Mode = 'catalog' | 'ai' | 'help'
 
 type PaletteApi = {
   isOpen: boolean
   open: () => void
-  openMode: (mode: 'ai' | 'help') => void
   close: () => void
 }
 
@@ -75,20 +119,6 @@ export function useCommandPalette(): PaletteApi {
   return ctx
 }
 
-/** System prompt for `>` mode: lets the model map a request to ONE product id. */
-function navSystemPrompt(): string {
-  const list = catalog.map((e) => `${e.id} — ${e.label} — ${e.category}`).join('\n')
-  return [
-    'You are the command bar for the Hanzo Cloud Console.',
-    'The user wants to find or open a product, or asks a question.',
-    'Products (id — label — category):',
-    list,
-    '',
-    'If the request clearly refers to ONE product above, reply with exactly: NAV <id>',
-    'using an id from the list and nothing else. Otherwise answer concisely in plain text.',
-  ].join('\n')
-}
-
 type RunState =
   | { status: 'idle' }
   | { status: 'loading' }
@@ -127,10 +157,12 @@ function Answer({ text }: { text: string }) {
 function CatalogRow({
   entry,
   active,
+  color,
   onPress,
 }: {
   entry: CatalogEntry
   active: boolean
+  color?: string
   onPress: () => void
 }) {
   const Icon = entry.icon
@@ -143,10 +175,11 @@ function CatalogRow({
       px="$3"
       py="$2.5"
       rounded="$3"
+      id={active ? 'cmdk-active' : undefined}
       bg={active ? '$color5' : 'transparent'}
       hoverStyle={{ bg: active ? '$color5' : '$color3' }}
     >
-      <Icon size={17} />
+      <ProductIcon icon={Icon} color={color} size={24} />
       <YStack flex={1}>
         <Text fontSize="$3" fontWeight="600" color="$color12">
           {entry.label}
@@ -157,11 +190,103 @@ function CatalogRow({
         </Text>
       </YStack>
       {entry.admin ? <Lock size={13} opacity={0.45} /> : null}
-      {entry.kind === 'external' ? <ExternalLink size={13} opacity={0.45} /> : <ArrowRight size={13} opacity={active ? 0.8 : 0.3} />}
+      <ArrowRight size={13} opacity={active ? 0.8 : 0.3} />
     </XStack>
   )
 }
 
+/** A ⌘K result — a product (via CatalogRow) or a deep sub-page jump. */
+function DestinationRow({
+  dest,
+  active,
+  colorOf,
+  onPress,
+}: {
+  dest: Destination
+  active: boolean
+  colorOf: (id: string) => string
+  onPress: () => void
+}) {
+  if (dest.kind === 'product')
+    return <CatalogRow entry={dest.entry} active={active} color={colorOf(dest.entry.id)} onPress={onPress} />
+  const { entry, subpage } = dest
+  const Icon = subpage.icon ?? entry.icon
+  return (
+    <XStack
+      onPress={onPress}
+      cursor="pointer"
+      items="center"
+      gap="$3"
+      px="$3"
+      py="$2.5"
+      rounded="$3"
+      id={active ? 'cmdk-active' : undefined}
+      bg={active ? '$color5' : 'transparent'}
+      hoverStyle={{ bg: active ? '$color5' : '$color3' }}
+    >
+      <Icon size={17} color={asColor(colorOf(entry.id))} />
+      <YStack flex={1}>
+        <Text fontSize="$3" fontWeight="600" color="$color12">
+          {entry.label} › {subpage.label}
+        </Text>
+        <Text fontSize="$1" color="$color10">
+          {entry.category} · {entry.label}
+        </Text>
+      </YStack>
+      <ArrowRight size={13} opacity={active ? 0.8 : 0.3} />
+    </XStack>
+  )
+}
+
+/** Stable key for a destination (product id, or `id/slug` for a sub-page). */
+const destKey = (d: Destination): string => (d.kind === 'product' ? d.entry.id : `${d.entry.id}/${d.subpage.slug}`)
+
+function ActionRow({
+  action,
+  active,
+  onPress,
+}: {
+  action: PaletteAction
+  active: boolean
+  onPress: () => void
+}) {
+  const Icon = action.icon
+  return (
+    <XStack
+      onPress={onPress}
+      cursor="pointer"
+      items="center"
+      gap="$3"
+      px="$3"
+      py="$2.5"
+      rounded="$3"
+      id={active ? 'cmdk-active' : undefined}
+      bg={active ? '$color5' : 'transparent'}
+      hoverStyle={{ bg: active ? '$color5' : '$color3' }}
+    >
+      <Icon size={17} />
+      <YStack flex={1}>
+        <Text fontSize="$3" fontWeight="600" color="$color12">
+          {action.label}
+        </Text>
+        <Text fontSize="$1" color="$color10">
+          {action.hint}
+        </Text>
+      </YStack>
+      <CornerDownLeft size={13} opacity={active ? 0.8 : 0.3} />
+    </XStack>
+  )
+}
+
+/** A small uppercase section label inside the palette result list. */
+function SectionLabel({ children }: { children: ReactNode }) {
+  return (
+    <Text px="$3" pt="$2" pb="$1" fontSize="$1" color="$color10" fontWeight="700" textTransform="uppercase">
+      {children}
+    </Text>
+  )
+}
+
 function PaletteDialog({
   open,
   seed,
@@ -173,16 +298,87 @@ function PaletteDialog({
 }) {
   const router = useRouter()
   const launcher = useAppLauncher()
+  const { signOut } = useSession()
+  const showAdmin = useIsSuperAdmin()
+  const { enabled } = useEntitlements()
+  const { colorOf } = useProductColors()
+  const { current, resolvedTheme, set: setTheme } = useThemeSetting()
+  const isDark = (resolvedTheme ?? current ?? 'dark') !== 'light'
   const [query, setQuery] = useState(seed)
   const [sel, setSel] = useState(0)
   const [run, setRun] = useState<RunState>({ status: 'idle' })
+  const [orgs, setOrgs] = useState<Organization[]>([])
 
   const mode: Mode = query.startsWith('>') ? 'ai' : query.startsWith('?') ? 'help' : 'catalog'
   const sub = (mode === 'catalog' ? query : query.slice(1)).trim()
 
-  const results = useMemo(
-    () => (mode === 'catalog' ? searchCatalog(query).slice(0, 50) : []),
-    [mode, query],
+  // The org list powers the "Switch to <org>" actions. Only an admin who can see
+  // more than one org gets switch actions; everyone else just gets the verbs. The
+  // list comes from the cross-tenant `/admin/iam/get-organizations?owner=admin`
+  // aggregate, which is server-gated to global admins — so don't fire it for a tenant
+  // user (it only 403s); they just get the verbs, no switch actions.
+  useEffect(() => {
+    if (!open || !showAdmin) return
+    let live = true
+    IamAdminApi.organizations()
+      .then((p) => {
+        if (live) setOrgs(p.rows ?? [])
+      })
+      .catch(() => {
+        if (live) setOrgs([])
+      })
+    return () => {
+      live = false
+    }
+  }, [open, showAdmin])
+
+  // Every command the palette can RUN (verbs + per-org switches). Composed from the
+  // same pieces the chrome uses (router, launcher, theme, session, org scope) — no
+  // dead entries: each `run` is wired.
+  const actions = useMemo<PaletteAction[]>(() => {
+    const cur = currentOrg()
+    const verbs: PaletteAction[] = [
+      { id: 'home', label: 'Go to Overview', hint: 'Dashboard home', keywords: 'home start dashboard root overview', icon: House, run: () => { onOpenChange(false); router.push('/') } },
+      { id: 'apps', label: 'Browse all apps', hint: 'Open the app launcher', keywords: 'launcher grid all products everything apps', icon: LayoutGrid, run: () => { onOpenChange(false); launcher.open() } },
+      { id: 'settings', label: 'Open Settings', hint: 'Account, organization, branding', keywords: 'preferences account profile settings', icon: SlidersHorizontal, run: () => { onOpenChange(false); router.push('/settings') } },
+      { id: 'theme', label: isDark ? 'Switch to light theme' : 'Switch to dark theme', hint: 'Toggle appearance', keywords: 'dark light appearance theme mode color', icon: isDark ? Sun : Moon, run: () => setTheme(isDark ? 'light' : 'dark') },
+      { id: 'ai', label: 'Ask AI', hint: 'Find or do something with AI', keywords: 'assistant zen gpt ask question ai', icon: Sparkles, run: () => setQuery('> ') },
+      { id: 'docs', label: 'Search the docs', hint: 'Ask the documentation', keywords: 'help docs documentation manual guide', icon: Zap, run: () => setQuery('? ') },
+      { id: 'signout', label: 'Sign out', hint: 'End your session', keywords: 'logout sign out exit leave', icon: LogOut, run: () => { onOpenChange(false); void signOut() } },
+    ]
+    const orgVerbs: PaletteAction[] = orgs
+      .filter((o) => o.name !== cur)
+      .map((o) => ({
+        id: `org:${o.name}`,
+        label: `Switch to ${o.displayName || titleCase(o.name)}`,
+        hint: 'Switch organization',
+        keywords: `org organization tenant switch ${o.name}`,
+        icon: Building2,
+        run: () => switchOrg(o.name),
+      }))
+    return [...verbs, ...orgVerbs]
+  }, [isDark, orgs, router, launcher, signOut, setTheme, onOpenChange])
+
+  // Every jump target — products AND deep sub-pages ("queues" → Tasks › Queues) —
+  // gated so a customer never sees an admin-only surface.
+  const destResults = useMemo(
+    () => (mode === 'catalog' ? searchDestinations(query, showAdmin, enabled).slice(0, 50) : []),
+    [mode, query, showAdmin, enabled],
+  )
+
+  const matchedActions = useMemo(
+    () => (mode === 'catalog' && sub ? actions.filter((a) => actionMatches(a, sub.toLowerCase())) : []),
+    [mode, sub, actions],
+  )
+
+  // One ordered list (actions first, then destinations) so ↑/↓/↵ traverse both.
+  type Item = { kind: 'action'; action: PaletteAction } | { kind: 'dest'; dest: Destination }
+  const items = useMemo<Item[]>(
+    () => [
+      ...matchedActions.map((action) => ({ kind: 'action' as const, action })),
+      ...destResults.map((dest) => ({ kind: 'dest' as const, dest })),
+    ],
+    [matchedActions, destResults],
   )
 
   // Seed the query each time the palette opens.
@@ -204,24 +400,41 @@ function PaletteDialog({
     [onOpenChange, router],
   )
 
+  /** Activate a destination — a product (open) or a sub-page (navigate deep). */
+  const activateDest = useCallback(
+    (dest: Destination) => {
+      onOpenChange(false)
+      if (dest.kind === 'subpage') router.push(dest.path)
+      else openProduct(dest.entry, (p) => router.push(p))
+    },
+    [onOpenChange, router],
+  )
+
   const submit = useCallback(async () => {
     if (!sub) return
     setRun({ status: 'loading' })
     try {
       if (mode === 'ai') {
-        const ans = (await AiApi.chat({ question: sub, system: navSystemPrompt() })).trim()
+        // Same grounded expert prompt as the chat, plus the nav contract: a clear
+        // "open X" jumps to the product; anything else gets a real, accurate answer.
+        const ans = (await AiApi.chat({ question: sub, system: commandBarSystemPrompt({ showAdmin }) })).trim()
         const m = ans.match(/^NAV\s+([a-z0-9-]+)/i)
         const entry = m ? findEntry(m[1]) : undefined
         if (entry) setRun({ status: 'nav', entry })
         else setRun({ status: 'text', text: ans })
       } else {
-        const ans = await AiApi.ragChat({ question: sub, store: 'docs' })
+        // Docs mode: retrieval grounded in the same expert context.
+        const ans = await AiApi.ragChat({
+          question: sub,
+          store: 'docs',
+          system: hanzoAssistantSystemPrompt({ showAdmin }),
+        })
         setRun({ status: 'text', text: ans })
       }
     } catch (e) {
       setRun({ status: 'error', state: classifyBackend(e) })
     }
-  }, [mode, sub])
+  }, [mode, sub, showAdmin])
 
   // Keyboard while open: ↑/↓ select, ↵ activate/ask, Esc close.
   useEffect(() => {
@@ -234,14 +447,17 @@ function PaletteDialog({
       if (mode === 'catalog') {
         if (e.key === 'ArrowDown') {
           e.preventDefault()
-          setSel((s) => Math.min(s + 1, Math.max(results.length - 1, 0)))
+          setSel((s) => Math.min(s + 1, Math.max(items.length - 1, 0)))
         } else if (e.key === 'ArrowUp') {
           e.preventDefault()
           setSel((s) => Math.max(s - 1, 0))
         } else if (e.key === 'Enter') {
           e.preventDefault()
-          const r = results[sel]
-          if (r) activate(r)
+          const it = items[sel]
+          if (it) {
+            if (it.kind === 'action') it.action.run()
+            else activateDest(it.dest)
+          }
         }
       } else if (e.key === 'Enter') {
         e.preventDefault()
@@ -252,7 +468,14 @@ function PaletteDialog({
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
-  }, [open, mode, results, sel, run, submit, activate, onOpenChange])
+  }, [open, mode, items, sel, run, submit, activate, activateDest, onOpenChange])
+
+  // Keep the ↑/↓-selected row visible: as selection moves past the fold, scroll
+  // the active row into view (the list can hold 50 results — well beyond 420px).
+  useEffect(() => {
+    if (!open || mode !== 'catalog' || typeof document === 'undefined') return
+    document.getElementById('cmdk-active')?.scrollIntoView({ block: 'nearest' })
+  }, [sel, open, mode])
 
   const placeholder =
     mode === 'ai'
@@ -264,13 +487,18 @@ function PaletteDialog({
   return (
     <Dialog modal open={open} onOpenChange={onOpenChange}>
       <Dialog.Portal>
-        <Dialog.Overlay key="palette-overlay" bg="rgba(0,0,0,0.5)" />
+        <Dialog.Overlay key="palette-overlay" className="hz-scrim-in" bg="rgba(0,0,0,0.5)" />
+        {/* Full-screen on mobile (fills the viewport, reachable from the mobile
+            menu); a floating 640 box at lg+ on Material paper (real depth). */}
         <Dialog.Content
           key="palette-content"
+          className="hz-paper hz-pop-in"
           bordered
-          elevate
-          width={640}
-          maxW="90%"
+          width="100vw"
+          height="100dvh"
+          maxW="100vw"
+          rounded="$0"
+          $lg={{ width: 640, height: 'auto', maxW: '90%', rounded: '$6' }}
           p="$0"
           gap="$0"
           overflow="hidden"
@@ -305,19 +533,33 @@ function PaletteDialog({
             </XStack>
           </XStack>
 
-          {/* Body */}
-          <YStack minH={120} maxH={420}>
+          {/* Body — fills the viewport on mobile, capped at lg+. */}
+          <YStack flex={1} minH={0} overflow="hidden" $lg={{ flex: 0, minH: 120, maxH: 420 }}>
             {mode === 'catalog' ? (
-              results.length === 0 ? (
+              items.length === 0 ? (
                 <YStack p="$5" items="center">
-                  <Text color="$color10">No products match “{sub}”.</Text>
+                  <Text color="$color10">No commands or products match “{sub}”.</Text>
                 </YStack>
               ) : (
-                <ScrollView p="$2">
+                <ScrollView flex={1} p="$2" showsVerticalScrollIndicator keyboardShouldPersistTaps="handled">
                   <YStack gap="$0.5">
-                    {results.map((entry, i) => (
-                      <CatalogRow key={entry.id} entry={entry} active={i === sel} onPress={() => activate(entry)} />
+                    {matchedActions.length > 0 ? <SectionLabel>Actions</SectionLabel> : null}
+                    {matchedActions.map((action, i) => (
+                      <ActionRow key={`action-${action.id}`} action={action} active={i === sel} onPress={action.run} />
                     ))}
+                    {destResults.length > 0 && matchedActions.length > 0 ? <SectionLabel>Go to</SectionLabel> : null}
+                    {destResults.map((dest, j) => {
+                      const i = matchedActions.length + j
+                      return (
+                        <DestinationRow
+                          key={destKey(dest)}
+                          dest={dest}
+                          active={i === sel}
+                          colorOf={colorOf}
+                          onPress={() => activateDest(dest)}
+                        />
+                      )
+                    })}
                   </YStack>
                 </ScrollView>
               )
@@ -340,7 +582,7 @@ function PaletteDialog({
                     </Text>
                   </XStack>
                 ) : run.status === 'nav' ? (
-                  <CatalogRow entry={run.entry} active onPress={() => activate(run.entry)} />
+                  <CatalogRow entry={run.entry} active color={colorOf(run.entry.id)} onPress={() => activate(run.entry)} />
                 ) : run.status === 'text' ? (
                   <Answer text={run.text} />
                 ) : (
@@ -410,11 +652,6 @@ export function CommandPaletteProvider({ children }: { children: ReactNode }) {
     setIsOpen(true)
   }, [])
 
-  const openMode = useCallback((mode: 'ai' | 'help') => {
-    setSeed(mode === 'ai' ? '> ' : '? ')
-    setIsOpen(true)
-  }, [])
-
   const close = useCallback(() => setIsOpen(false), [])
 
   // ⌘K / Ctrl+K toggles the palette from anywhere.
@@ -431,7 +668,7 @@ export function CommandPaletteProvider({ children }: { children: ReactNode }) {
   }, [])
 
   return (
-    <Ctx.Provider value={{ isOpen, open, openMode, close }}>
+    <Ctx.Provider value={{ isOpen, open, close }}>
       {children}
       <PaletteDialog open={isOpen} seed={seed} onOpenChange={setIsOpen} />
     </Ctx.Provider>
@@ -461,7 +698,9 @@ export function CommandSearchBox() {
       <Text flex={1} fontSize="$3" color="$color10" numberOfLines={1}>
         Search or jump to…
       </Text>
-      <XStack items="center" gap="$1" opacity={0.6}>
+      {/* ⌘K hint — hidden below lg: there is no keyboard shortcut on a phone, and
+          the chip stole width from the placeholder (which truncated to “S…”). */}
+      <XStack display="none" $lg={{ display: 'flex' }} items="center" gap="$1" opacity={0.6}>
         <Command size={12} />
         <Text fontSize="$2" color="$color10">
           K

src/components/DetailPane.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+/**
+ * DetailPane — the ONE reusable right-side pane for viewing / editing the details
+ * of an item, anywhere in the console. A product does NOT build its own pane: it
+ * writes a DESCRIPTOR (`{ title, subtitle?, icon?, content, footer? }`) and calls
+ * `useDetailPane().open(descriptor)`. The pane slides out smoothly from the right
+ * (full-screen on mobile) via the shared `SlideOver`, so every "open item detail"
+ * looks and behaves identically (DRY).
+ *
+ * Rendered ONCE at the shell root (via `DetailPaneProvider`), so any module — a
+ * machine row, a provider, a pinned product's customize form — opens the same
+ * pane. Interactive content closes itself with `useDetailPane().close()`.
+ *
+ * The last descriptor stays mounted through the close transition, so the exit
+ * animates with its content (no flash of empty pane). Opening a new descriptor
+ * replaces it.
+ */
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react'
+import { Button, ScrollView, Text, XStack, YStack } from '@hanzo/gui'
+import { X } from '@hanzogui/lucide-icons-2'
+
+import { SlideOver } from '~/components/ui/SlideOver'
+import { asColor, type IconLike } from '~/components/ui/color'
+
+export type DetailDescriptor = {
+  /** Pane title (the item's name). */
+  title: ReactNode
+  /** Optional secondary line under the title (type, id, status…). */
+  subtitle?: ReactNode
+  /** Optional title icon, tinted with `iconColor`. */
+  icon?: IconLike
+  iconColor?: string
+  /** Desktop pane width (px). Mobile is always full-screen. Default 460. */
+  size?: number
+  /** The body — the detail view or edit form for the item. */
+  content: ReactNode
+  /** Optional sticky footer (primary actions), pinned below the scroll body. */
+  footer?: ReactNode
+}
+
+export type DetailPaneApi = {
+  open: (descriptor: DetailDescriptor) => void
+  close: () => void
+  isOpen: boolean
+}
+
+const Ctx = createContext<DetailPaneApi | null>(null)
+
+export function useDetailPane(): DetailPaneApi {
+  const ctx = useContext(Ctx)
+  if (!ctx) throw new Error('useDetailPane must be used within <DetailPaneProvider>')
+  return ctx
+}
+
+export function DetailPaneProvider({ children }: { children: ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [desc, setDesc] = useState<DetailDescriptor | null>(null)
+
+  const open = useCallback((descriptor: DetailDescriptor) => {
+    setDesc(descriptor)
+    setIsOpen(true)
+  }, [])
+  const close = useCallback(() => setIsOpen(false), [])
+
+  const api = useMemo<DetailPaneApi>(() => ({ open, close, isOpen }), [open, close, isOpen])
+  const Icon = desc?.icon
+
+  return (
+    <Ctx.Provider value={api}>
+      {children}
+      <SlideOver
+        open={isOpen}
+        onClose={close}
+        side="right"
+        size={desc?.size ?? 460}
+        ariaLabel={typeof desc?.title === 'string' ? desc?.title : 'Details'}
+        zIndex={1100}
+      >
+        {/* Bare-mode layout: fixed header · scroll body · optional sticky footer. */}
+        <XStack items="center" gap="$2.5" px="$4" height={56} borderBottomWidth={1} borderColor="$borderColor">
+          {Icon ? <Icon size={18} color={desc?.iconColor ? asColor(desc.iconColor) : undefined} /> : null}
+          <YStack flex={1} minW={0}>
+            <Text fontSize="$5" fontWeight="700" color="$color12" numberOfLines={1}>
+              {desc?.title}
+            </Text>
+            {desc?.subtitle !== undefined ? (
+              <Text fontSize="$2" color="$color10" numberOfLines={1}>
+                {desc?.subtitle}
+              </Text>
+            ) : null}
+          </YStack>
+          <Button size="$2" chromeless icon={<X size={18} />} onPress={close} aria-label="Close" />
+        </XStack>
+
+        <ScrollView flex={1} minH={0}>
+          <YStack p="$4" gap="$3">
+            {desc?.content}
+          </YStack>
+        </ScrollView>
+
+        {desc?.footer !== undefined ? (
+          <XStack px="$4" py="$3" gap="$2" borderTopWidth={1} borderColor="$borderColor" bg="$color1">
+            {desc?.footer}
+          </XStack>
+        ) : null}
+      </SlideOver>
+    </Ctx.Provider>
+  )
+}

src/components/FloatingChat.tsx

@@ -0,0 +1,173 @@
+'use client'
+
+/**
+ * Floating AI chat — a bubble fixed bottom-right on every dashboard page, so the
+ * assistant is one tap away from any view (the "where's chat on mobile" ask).
+ *
+ * It REUSES the one working chat surface (`ChatConversation` → `AiApi.chat` → the
+ * keyless `/ai` proxy → /v1/chat/completions). Nothing about AI is rebuilt here;
+ * this is purely a container that mounts that conversation in an overlay:
+ * - phone/tablet (<1024px): a full-screen sheet.
+ * - laptop/desktop: a ~380×560 popover anchored bottom-right.
+ *
+ * "History" inside the conversation deep-links to the full `/chat` page (the
+ * bubble is a quick-ask surface, not the session browser) and closes the bubble.
+ *
+ * Mounted once in the dashboard layout (like the app launcher), so a single
+ * instance floats over all children — lightweight, no per-page wiring.
+ */
+import { createContext, useCallback, useContext, useState, type ReactNode } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
+import { Button, Dialog, Text, VisuallyHidden, XStack, YStack } from '@hanzo/gui'
+import { Sparkles, X } from '@hanzogui/lucide-icons-2'
+
+import { ChatConversation } from '~/components/products/chat/ChatConversation'
+import { BrandMark } from '~/components/ui/BrandLogo'
+
+type FloatingChatApi = { isOpen: boolean; open: () => void; close: () => void; toggle: () => void }
+
+const Ctx = createContext<FloatingChatApi | null>(null)
+
+/** Open/close the floating assistant from anywhere (e.g. an empty-state CTA). */
+export function useFloatingChat(): FloatingChatApi {
+  const ctx = useContext(Ctx)
+  if (!ctx) throw new Error('useFloatingChat must be used within <FloatingChatProvider>')
+  return ctx
+}
+
+function ChatSheet({
+  open,
+  onOpenChange,
+  onHistory,
+}: {
+  open: boolean
+  onOpenChange: (o: boolean) => void
+  onHistory: () => void
+}) {
+  // Size is CSS-driven (media props), not a JS branch: base = mobile full-bleed
+  // sheet; `$lg` = a compact popover pinned bottom-right. The scrim dims the page
+  // on mobile and goes transparent on desktop (popover, no full-screen dim).
+  return (
+    <Dialog modal open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay key="chat-overlay" className="hz-scrim-in" bg="rgba(0,0,0,0.5)" $lg={{ bg: 'transparent' }} />
+        <Dialog.Content
+          key="chat-content"
+          className="hz-paper hz-pop-in"
+          bordered
+          position="absolute"
+          bg="$color1"
+          overflow="hidden"
+          p="$0"
+          // Mobile/tablet: full-bleed.
+          t={0}
+          l={0}
+          r={0}
+          b={0}
+          width="100vw"
+          height="100dvh"
+          rounded="$0"
+          // Desktop (≥lg): a compact popover bottom-right, above the bubble.
+          $lg={{
+            t: 'auto',
+            l: 'auto',
+            b: 88,
+            r: 24,
+            width: 380,
+            height: 560,
+            rounded: '$6',
+          }}
+        >
+          <VisuallyHidden>
+            <Dialog.Title>Assistant</Dialog.Title>
+          </VisuallyHidden>
+
+          <YStack flex={1} minH={0}>
+            <XStack
+              items="center"
+              justify="space-between"
+              px="$3"
+              py="$2.5"
+              borderBottomWidth={1}
+              borderColor="$borderColor"
+              bg="$color2"
+            >
+              <XStack items="center" gap="$2">
+                <Sparkles size={16} opacity={0.8} />
+                <Text fontSize="$4" fontWeight="700" color="$color12">
+                  Assistant
+                </Text>
+              </XStack>
+              <Button
+                size="$2"
+                chromeless
+                icon={<X size={18} />}
+                onPress={() => onOpenChange(false)}
+                aria-label="Close assistant"
+              />
+            </XStack>
+
+            {/* The ONE working conversation, given a flex container to fill. */}
+            <YStack flex={1} minH={0} p="$3">
+              <ChatConversation compact onShowHistory={onHistory} />
+            </YStack>
+          </YStack>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}
+
+export function FloatingChatProvider({ children }: { children: ReactNode }) {
+  const router = useRouter()
+  const pathname = usePathname() ?? ''
+  // The bubble is redundant — and OVERLAPS the composer's send control — on the
+  // pages that ARE a full chat/composer surface. Suppress it there (the assistant
+  // is still openable programmatically via `useFloatingChat`); every other page
+  // keeps the one-tap bubble.
+  const onChatSurface =
+    pathname === '/chat' ||
+    pathname.startsWith('/chat/') ||
+    pathname === '/playground' ||
+    pathname.startsWith('/playground/')
+  const [isOpen, setIsOpen] = useState(false)
+  const open = useCallback(() => setIsOpen(true), [])
+  const close = useCallback(() => setIsOpen(false), [])
+  const toggle = useCallback(() => setIsOpen((v) => !v), [])
+
+  const onHistory = useCallback(() => {
+    setIsOpen(false)
+    router.push('/chat')
+  }, [router])
+
+  return (
+    <Ctx.Provider value={{ isOpen, open, close, toggle }}>
+      {children}
+
+      {/* The bubble — fixed bottom-right over every page (rendered last in this
+          provider so DOM order keeps it above normal-flow content; the chat sheet
+          portals above it). Hidden while open so the sheet's own close control is
+          the single dismiss affordance. Hidden on the chat/playground surfaces,
+          where it would overlap the page's own composer. */}
+      {!isOpen && !onChatSurface ? (
+        <YStack position="fixed" b={24} r={24}>
+          {/* The support/AI bubble = the brand 'H' mark (white-labeled per brand),
+              on Material paper elevation with a gentle hover lift. */}
+          <Button
+            circular
+            size="$6"
+            bg="$color5"
+            className="hz-lift hz-elevation-3"
+            hoverStyle={{ bg: '$color6' }}
+            pressStyle={{ bg: '$color7' }}
+            icon={<BrandMark size={22} />}
+            onPress={open}
+            aria-label="Open AI assistant"
+          />
+        </YStack>
+      ) : null}
+
+      <ChatSheet open={isOpen} onOpenChange={setIsOpen} onHistory={onHistory} />
+    </Ctx.Provider>
+  )
+}

src/components/HomeSummary.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+/**
+ * Home summary strip — the at-a-glance account header on the console home, the
+ * way DigitalOcean/Vercel open with balance + spend before the resource grid.
+ *
+ * Real per-tenant data over the same `/billing/*` proxy the Cost page and sidebar
+ * wallet use (server-injected token, scoped to the caller's org). It is purely
+ * additive and fail-quiet: if billing isn't configured/routed on a deployment the
+ * strip simply doesn't render (the catalog below is the home's substance) — it
+ * never shows a fabricated balance and never blocks the page.
+ */
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Button, Card, Text, XStack, YStack } from '@hanzo/gui'
+import { ArrowRight, CreditCard, TrendingUp } from '@hanzogui/lucide-icons-2'
+
+import { useSession } from '~/lib/auth/session'
+import { BillingApi } from '~/lib/api/billing'
+
+const usd = (cents: number): string => `$${(cents / 100).toFixed(2)}`
+
+type Stats = { availableCents: number | null; spendCents: number | null }
+
+function Stat({
+  icon,
+  label,
+  value,
+  hint,
+}: {
+  icon: React.ReactNode
+  label: string
+  value: string
+  hint?: string
+}) {
+  return (
+    <Card p="$3.5" gap="$1.5" borderWidth={1} borderColor="$borderColor" flex={1} minW={200}>
+      <XStack items="center" gap="$1.5">
+        {icon}
+        <Text fontSize="$2" color="$color10">
+          {label}
+        </Text>
+      </XStack>
+      <Text fontSize="$8" fontWeight="900" color="$color12">
+        {value}
+      </Text>
+      {hint ? (
+        <Text fontSize="$2" color="$color10">
+          {hint}
+        </Text>
+      ) : null}
+    </Card>
+  )
+}
+
+export function HomeSummary() {
+  const router = useRouter()
+  const { account } = useSession()
+  const signedIn = Boolean(account?.owner)
+  const [stats, setStats] = useState<Stats | null>(null)
+
+  useEffect(() => {
+    if (!signedIn) return
+    let alive = true
+    void (async () => {
+      const [balance, usage] = await Promise.allSettled([BillingApi.balance(), BillingApi.usage()])
+      if (!alive) return
+      const availableCents = balance.status === 'fulfilled' ? balance.value.available : null
+      const spendCents = usage.status === 'fulfilled' ? usage.value.totalCents : null
+      // Only render the strip if at least one real number came back — otherwise it
+      // stays hidden (no fabricated stats, no empty scaffold).
+      if (availableCents === null && spendCents === null) return
+      setStats({ availableCents, spendCents })
+    })()
+    return () => {
+      alive = false
+    }
+  }, [signedIn])
+
+  if (!signedIn || !stats) return null
+
+  return (
+    <XStack flexWrap="wrap" gap="$3" items="stretch">
+      <Stat
+        icon={<CreditCard size={14} opacity={0.7} />}
+        label="Cloud credit"
+        value={stats.availableCents != null ? usd(stats.availableCents) : '—'}
+        hint="available to spend"
+      />
+      <Stat
+        icon={<TrendingUp size={14} opacity={0.7} />}
+        label="Spend this period"
+        value={stats.spendCents != null ? usd(stats.spendCents) : '—'}
+        hint="across every product"
+      />
+      <Card
+        p="$3.5"
+        gap="$2"
+        borderWidth={1}
+        borderColor="$borderColor"
+        bg="$color2"
+        flex={1}
+        minW={220}
+        justify="center"
+      >
+        <Text fontSize="$3" color="$color11">
+          Manage balance, usage, and invoices.
+        </Text>
+        <XStack gap="$2">
+          <Button size="$2" iconAfter={<ArrowRight size={14} />} onPress={() => router.push('/billing')}>
+            View cost
+          </Button>
+          <Button size="$2" chromeless onPress={() => router.push('/billing/credits')}>
+            Add credits
+          </Button>
+        </XStack>
+      </Card>
+    </XStack>
+  )
+}

src/components/OrgAccentProvider.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+/**
+ * Org accent applier — reads the signed-in org's persisted brand color and applies it
+ * to the live console accent on EVERY load (so a custom theme survives reload), and
+ * clears it on sign-out. This is the load-time half of the "apply the org's theme
+ * color" fix; Settings → Branding applies it immediately on save via the same
+ * `applyOrgAccent`, so the two share one mechanism.
+ *
+ * It fetches the active org's `themeData` (`TeamApi.organization`, the org-scoped IAM
+ * read an org admin can make) once the session resolves, then applies. Best-effort: a
+ * failed fetch simply leaves the default monochrome accent (never throws, never blocks
+ * render). Renders nothing.
+ */
+import { useEffect } from 'react'
+
+import { TeamApi } from '~/lib/api'
+import { currentOrg } from '~/lib/org-scope'
+import { useSession } from '~/lib/auth/session'
+import { setOrgAccent } from '~/lib/theme/accent'
+
+export function OrgAccentProvider() {
+  const { account } = useSession()
+  // Re-resolve when the signed-in identity changes (sign-in / sign-out / org switch,
+  // which reloads with a new `currentOrg()`).
+  const owner = account?.owner ?? null
+
+  useEffect(() => {
+    if (!owner) {
+      setOrgAccent(null) // signed out → default monochrome accent
+      return
+    }
+    let cancelled = false
+    TeamApi.organization(currentOrg())
+      .then((org) => {
+        if (!cancelled) setOrgAccent(org.themeData)
+      })
+      .catch(() => {
+        // Org theme unreadable on this host → keep the default accent (no fabrication).
+        if (!cancelled) setOrgAccent(null)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [owner])
+
+  return null
+}

src/components/OrgGate.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+/**
+ * Org gate — the two-level org model's router. EVERY login lands org-LESS.
+ *
+ * Route:
+ *   0. No org at all → first-run org onboarding (create/join).
+ *   1. Has org(s) but none ENTERED yet → the {@link OrgPicker} (the "Home" org
+ *      list). A one-org user still sees a one-card list and clicks in; a global
+ *      admin sees every org (masquerade). We never auto-enter.
+ *   2. An org is entered → the scoped console (children). A global admin on a
+ *      non-admin host also gets a dismissible banner linking to admin.hanzo.ai.
+ *
+ * Entering/leaving an org is `org-scope`'s job (`enterOrg`/`leaveOrg`, which
+ * reload); in-shell quick-switching is the OrgSwitcher's. This gate only decides
+ * which of the three surfaces to show, read fresh on mount to avoid a flash.
+ */
+import { useEffect, useState, type ReactNode } from 'react'
+import { Button, Spinner, Text, XStack, YStack } from '@hanzo/gui'
+
+import { getBrand } from '~/lib/branding/brands'
+import { useSession } from '~/lib/auth/session'
+import { isSuperAdminAccount } from '~/lib/auth/admin'
+import { hasSelectedOrg } from '~/lib/org-scope'
+import { OrgOnboarding } from '~/components/OrgOnboarding'
+import { OrgPicker } from '~/components/OrgPicker'
+
+const LS_BANNER_DISMISSED = 'hz_admin_banner_dismissed'
+
+function onAdminHost(): boolean {
+  return typeof window !== 'undefined' && window.location.hostname.startsWith('admin.')
+}
+
+function AdminBanner({ onDismiss }: { onDismiss: () => void }) {
+  const brand = getBrand()
+  const adminUrl = `https://admin.${brand.adminDomain}`
+  return (
+    <XStack
+      bg="$yellow2"
+      borderBottomWidth={1}
+      borderColor="$yellow7"
+      px="$4"
+      py="$2"
+      items="center"
+      justify="space-between"
+      gap="$3"
+      flexWrap="wrap"
+    >
+      <Text fontSize="$2" color="$yellow11" flex={1}>
+        {'Admin ops (IAM · KMS · orgs) → '}
+        <Text fontSize="$2" color="$yellow12" fontWeight="700">
+          {`admin.${brand.adminDomain}`}
+        </Text>
+      </Text>
+      <XStack gap="$2" items="center">
+        <Button
+          size="$2"
+          bg="$yellow4"
+          borderColor="$yellow7"
+          onPress={() => window.location.assign(adminUrl)}
+        >
+          {`Open admin`}
+        </Button>
+        <Button size="$2" chromeless theme="yellow" onPress={onDismiss}>
+          ✕
+        </Button>
+      </XStack>
+    </XStack>
+  )
+}
+
+export function OrgGate({ children }: { children: ReactNode }) {
+  const { account } = useSession()
+  const owner = account?.owner ?? ''
+  // GLOBAL (cross-tenant) admin — the only one who may use admin.hanzo.ai. The
+  // decision (membership in the reserved `admin` org, or an explicit isSuperAdmin
+  // claim) lives in ONE place — `isSuperAdminAccount` — shared with the nav gate.
+  // A tenant org owner (e.g. Dave/maxpower) has owner!=='admin' → never global.
+  const isSuperAdmin = isSuperAdminAccount(account)
+  const [bannerDismissed, setBannerDismissed] = useState(true) // start hidden to avoid flash
+  // Which surface to show — resolved on mount (localStorage is client-only) so the
+  // picker vs. scoped-console decision never flashes the wrong one during hydration.
+  const [selected, setSelected] = useState<boolean | null>(null)
+
+  // Restore banner dismissed state + read the org selection on mount.
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    setBannerDismissed(localStorage.getItem(LS_BANNER_DISMISSED) === '1')
+    setSelected(hasSelectedOrg())
+  }, [owner])
+
+  const dismissBanner = () => {
+    setBannerDismissed(true)
+    if (typeof window !== 'undefined') localStorage.setItem(LS_BANNER_DISMISSED, '1')
+  }
+
+  // admin.hanzo.ai is GLOBAL-admin-only (cross-tenant IAM/KMS/orgs ops). A
+  // non-global-admin who lands here — e.g. an org owner like Dave/maxpower — is
+  // bounced to the regular console host; they never reach the admin surfaces (the
+  // server /admin/* proxies also fail-closed, this is the matching UI gate).
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    if (onAdminHost() && owner && !isSuperAdmin) {
+      const consoleHost = window.location.hostname.replace(/^admin\./, 'console.')
+      window.location.replace(`https://${consoleHost}${window.location.pathname}${window.location.search}`)
+    }
+  }, [owner, isSuperAdmin])
+
+  // No org yet → first-run onboarding
+  if (!owner) {
+    return <OrgOnboarding />
+  }
+
+  // On the admin host but not a global admin → render nothing while the redirect
+  // above fires, so the admin console never flashes for an unauthorized user.
+  if (onAdminHost() && !isSuperAdmin) {
+    return null
+  }
+
+  // Selection not read yet (pre-hydration) → a brief neutral loader, so the picker
+  // and the scoped console never flash in the wrong order.
+  if (selected === null) {
+    return (
+      <YStack flex={1} minH="100vh" items="center" justify="center">
+        <Spinner size="large" color="$color11" />
+      </YStack>
+    )
+  }
+
+  // Has org(s) but none entered → the org-less picker (the "Home" list). Every
+  // login lands here; a one-org user clicks their single card in.
+  if (!selected) {
+    return <OrgPicker />
+  }
+
+  // An org is entered → the scoped console. A GLOBAL admin on a non-admin host also
+  // gets the dismissible admin banner; org owners never see it (admin.hanzo.ai is
+  // cross-tenant ops they cannot use).
+  const showBanner = isSuperAdmin && !onAdminHost() && !bannerDismissed
+
+  return (
+    <YStack flex={1}>
+      {showBanner && <AdminBanner onDismiss={dismissBanner} />}
+      {children}
+    </YStack>
+  )
+}

src/components/OrgOnboarding.tsx

@@ -0,0 +1,188 @@
+'use client'
+
+/**
+ * Org onboarding — the first-run screen for a user who isn't in an organization.
+ *
+ * Shown by {@link OrgGate} when the session has no org. Two predictable paths:
+ *   - "Create your organization": type a name; we show the exact slug it becomes,
+ *     then create the org and make you its admin.
+ *   - "Skip — use a personal organization": one click creates a `<username>` org
+ *     so EVERYONE always has an org and lands straight in the console.
+ *
+ * The mutation is the server route `/onboard` (it acts as the confidential
+ * console client; the browser only sends its cookie). Because an IAM user's
+ * org IS their identity, creating the org moves the user into it — so on success
+ * we re-authenticate (sign out → sign in) to mint a session for the new org, and
+ * the user arrives in their console. Honest inline errors; never a fake success.
+ */
+import { useState, type ReactNode } from 'react'
+import { Button, Card, Input, Spinner, Text, XStack, YStack } from '@hanzo/gui'
+import { Building2, ArrowRight, Sparkles } from '@hanzogui/lucide-icons-2'
+
+import { useSession } from '~/lib/auth/session'
+import { slugifyOrg, validateOrgName } from '~/lib/server/onboarding'
+import { v1Url } from '~/lib/api/client'
+import { FadeIn } from '~/components/ui/FadeIn'
+
+type Phase = 'form' | 'done'
+
+export function OrgOnboarding() {
+  const { signIn, signOut } = useSession()
+  const [name, setName] = useState('')
+  const [busy, setBusy] = useState<false | 'create' | 'personal'>(false)
+  const [error, setError] = useState<string | null>(null)
+  const [phase, setPhase] = useState<Phase>('form')
+
+  const slug = slugifyOrg(name)
+  const named = validateOrgName(name)
+  const canCreate = named.ok && !busy
+
+  async function onboard(payload: { name: string } | { personal: true }, which: 'create' | 'personal') {
+    setError(null)
+    setBusy(which)
+    let res: Response
+    try {
+      res = await fetch(v1Url('iam/onboard'), {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      })
+    } catch {
+      setError('Network error — please try again.')
+      setBusy(false)
+      return
+    }
+    const json = (await res.json().catch(() => null)) as { org?: string; error?: string } | null
+    if (!res.ok || !json?.org) {
+      setError(json?.error || `Could not create the organization (HTTP ${res.status}).`)
+      setBusy(false)
+      return
+    }
+    // Created + joined. Re-authenticate so the new session carries the new org.
+    setPhase('done')
+    try {
+      await signOut()
+    } catch {
+      // ignore — we re-auth regardless
+    }
+    signIn()
+  }
+
+  if (phase === 'done') {
+    return (
+      <Center>
+        <FadeIn style={CENTER_STYLE}>
+          <Card p="$5" gap="$4" width={440} borderWidth={1} borderColor="$borderColor" bg="$color1" items="center">
+            <Spinner size="large" color="$color11" />
+            <YStack gap="$1" items="center">
+              <Text fontSize="$6" fontWeight="800">
+                Organization ready
+              </Text>
+              <Text fontSize="$3" color="$color11" text="center">
+                Signing you in to your new organization…
+              </Text>
+            </YStack>
+            <Button size="$3" chromeless onPress={() => signIn()}>
+              Continue
+            </Button>
+          </Card>
+        </FadeIn>
+      </Center>
+    )
+  }
+
+  return (
+    <Center>
+      <FadeIn style={CENTER_STYLE}>
+        <Card p="$5" gap="$4" width={440} borderWidth={1} borderColor="$borderColor" bg="$color1">
+          <YStack gap="$2">
+            <XStack gap="$2" items="center">
+              <Building2 size={20} />
+              <Text fontSize="$7" fontWeight="800">
+                Create your organization
+              </Text>
+            </XStack>
+            <Text fontSize="$3" color="$color11">
+              Your account isn’t in an organization yet. Create one to get started — you can
+              rename it and invite teammates later.
+            </Text>
+          </YStack>
+
+          <YStack gap="$2">
+            <Text fontSize="$2" color="$color11" fontWeight="600">
+              Organization name
+            </Text>
+            <Input
+              value={name}
+              onChangeText={(v) => {
+                setName(v)
+                if (error) setError(null)
+              }}
+              placeholder="Acme Inc"
+              autoCapitalize="words"
+              autoFocus
+              onSubmitEditing={() => canCreate && void onboard({ name }, 'create')}
+            />
+            {slug ? (
+              <Text fontSize="$2" color="$color10">
+                Identifier: <Text color="$color12">{slug}</Text>
+              </Text>
+            ) : (
+              <Text fontSize="$2" color="$color10">
+                Letters and numbers — spaces become hyphens.
+              </Text>
+            )}
+          </YStack>
+
+          {error ? (
+            <Text fontSize="$2" color="$red10">
+              {error}
+            </Text>
+          ) : null}
+
+          <Button
+            size="$4"
+            theme="light"
+            disabled={!canCreate}
+            iconAfter={busy === 'create' ? <Spinner color="$color1" /> : <ArrowRight size={16} />}
+            onPress={() => void onboard({ name }, 'create')}
+          >
+            {busy === 'create' ? 'Creating…' : 'Create organization'}
+          </Button>
+
+          <XStack items="center" gap="$3">
+            <YStack flex={1} height={1} bg="$borderColor" />
+            <Text fontSize="$1" color="$color10">
+              OR
+            </Text>
+            <YStack flex={1} height={1} bg="$borderColor" />
+          </XStack>
+
+          <Button
+            size="$3"
+            disabled={!!busy}
+            icon={busy === 'personal' ? <Spinner color="$color11" /> : <Sparkles size={16} />}
+            onPress={() => void onboard({ personal: true }, 'personal')}
+          >
+            {busy === 'personal' ? 'Setting up…' : 'Skip — use a personal organization'}
+          </Button>
+
+          <Button size="$2" chromeless disabled={!!busy} onPress={() => void signOut()}>
+            Sign out
+          </Button>
+        </Card>
+      </FadeIn>
+    </Center>
+  )
+}
+
+const CENTER_STYLE = { display: 'flex', justifyContent: 'center', width: '100%' } as const
+
+function Center({ children }: { children: ReactNode }) {
+  return (
+    <YStack flex={1} minH="100vh" items="center" justify="center" p="$4">
+      {children}
+    </YStack>
+  )
+}

src/components/OrgPicker.tsx

@@ -0,0 +1,307 @@
+'use client'
+
+/**
+ * Org picker — the org-LESS landing every login sees first.
+ *
+ * The two-level model's top level: a full-page list of the organizations the
+ * caller can act in. A one-org user sees a single card and clicks in (we never
+ * auto-enter); a global admin (z@hanzo.ai) sees EVERY live org and can enter any
+ * of them (masquerade). Clicking a card {@link enterOrg} scopes the whole console
+ * to that org (X-Org-Id) and drops into it; the sidebar "Home" affordance
+ * ({@link leaveOrg}) returns here and de-scopes.
+ *
+ * Data source mirrors {@link OrgSwitcher}: a global admin lists all orgs via the
+ * gated `/admin/iam` proxy; a tenant (who 403s that list) sees just their own org,
+ * synthesized from the session — so the picker is always honest and never fabricates
+ * an org. All decisions (sort, filter, paginate, card view-model) live in the pure
+ * `org-picker/logic.ts`; this file is a thin render of it with honest loading /
+ * empty / error states.
+ */
+import { useEffect, useMemo, useState } from 'react'
+import { Building2, LayoutGrid, Plus, Search } from '@hanzogui/lucide-icons-2'
+import { Button, Card, Input, Spinner, Text, XStack, YStack } from '@hanzo/gui'
+
+import { getBrand } from '~/lib/branding/brands'
+import { useSession } from '~/lib/auth/session'
+import { useIsSuperAdmin } from '~/lib/auth/admin'
+import { enterOrg } from '~/lib/org-scope'
+import { IamAdminApi, type Organization } from '~/lib/api'
+import { BrandMark } from '~/components/ui/BrandLogo'
+import { EmptyState } from '~/components/ui/EmptyState'
+import { FadeIn } from '~/components/ui/FadeIn'
+import { OrgOnboarding } from '~/components/OrgOnboarding'
+import { PAGE_SIZE, pickerView, type OrgCard, type PickerContext } from '~/components/org-picker/logic'
+
+const titleCase = (s: string) => (s ? s[0].toUpperCase() + s.slice(1) : s)
+
+/** One org card — logo or monogram, label, honest role + quick facts. */
+function OrgCardView({ card, onEnter }: { card: OrgCard; onEnter: () => void }) {
+  return (
+    <Card
+      onPress={onEnter}
+      cursor="pointer"
+      role="button"
+      aria-label={`Open ${card.title}`}
+      borderWidth={1}
+      borderColor="$borderColor"
+      bg="$color1"
+      p="$4"
+      gap="$3"
+      width={280}
+      minW={240}
+      hoverStyle={{ bg: '$color2', borderColor: '$color8' }}
+      pressStyle={{ opacity: 0.85 }}
+    >
+      <XStack items="center" gap="$3">
+        {card.logo ? (
+          // Arbitrary external org logo — raw <img> (next/image would need a
+          // per-tenant remote allowlist).
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={card.logo}
+            alt=""
+            style={{ height: 40, width: 40, objectFit: 'contain', display: 'block', borderRadius: 8 }}
+          />
+        ) : (
+          <YStack width={40} height={40} rounded="$4" bg="$color4" items="center" justify="center">
+            <Text fontSize="$4" fontWeight="800" color="$color12">
+              {card.initials}
+            </Text>
+          </YStack>
+        )}
+        <YStack flex={1} minW={0}>
+          <Text fontSize="$5" fontWeight="700" color="$color12" numberOfLines={1}>
+            {card.title}
+          </Text>
+          <Text fontSize="$1" color="$color10" numberOfLines={1}>
+            {card.name}
+          </Text>
+        </YStack>
+      </XStack>
+
+      <XStack items="center" gap="$2" flexWrap="wrap">
+        <XStack items="center" gap="$1.5" bg="$color3" rounded="$10" px="$2.5" py="$1">
+          <Building2 size={12} opacity={0.7} />
+          <Text fontSize="$1" color="$color11" fontWeight="600">
+            {card.role}
+          </Text>
+        </XStack>
+        {card.facts.map((f) => (
+          <Text key={f.label} fontSize="$1" color="$color10" numberOfLines={1}>
+            {f.label}: <Text color="$color11">{f.value}</Text>
+          </Text>
+        ))}
+      </XStack>
+    </Card>
+  )
+}
+
+function Center({ children }: { children: React.ReactNode }) {
+  return (
+    <YStack flex={1} minH="100vh" items="center" justify="center" p="$4" gap="$4">
+      {children}
+    </YStack>
+  )
+}
+
+export function OrgPicker() {
+  const { account } = useSession()
+  const isSuperAdmin = useIsSuperAdmin()
+  const owner = account?.owner ?? ''
+
+  const [orgs, setOrgs] = useState<Organization[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [query, setQuery] = useState('')
+  const [page, setPage] = useState(1)
+  const [creating, setCreating] = useState(false)
+
+  // The caller's OWN org, synthesized from the session — the single org that IS a
+  // tenant's identity, and the honest fallback if the cross-tenant list can't load.
+  const ownOrgOnly = useMemo<Organization[]>(
+    () =>
+      owner
+        ? [{ owner: 'admin', name: owner, displayName: account?.displayName?.trim() || titleCase(owner) } as Organization]
+        : [],
+    [owner, account?.displayName],
+  )
+
+  // Load the caller's visible orgs. A global admin gets the full cross-tenant list
+  // (paged large, then this component client-paginates); a tenant 403s that list, so
+  // it sees just its own org — honest, never fabricated.
+  useEffect(() => {
+    if (!owner) return
+    let live = true
+    if (!isSuperAdmin) {
+      setOrgs(ownOrgOnly)
+      return
+    }
+    setOrgs(null)
+    setError(null)
+    IamAdminApi.organizations({ pageSize: 1000 })
+      .then((p) => {
+        if (live) setOrgs(p.rows ?? [])
+      })
+      .catch(() => {
+        // The cross-tenant list is unavailable — surface it honestly, but still fall
+        // back to the caller's own org so the picker is never a dead screen.
+        if (live) {
+          setError('Could not load all organizations — showing your own.')
+          setOrgs(ownOrgOnly)
+        }
+      })
+    return () => {
+      live = false
+    }
+  }, [owner, isSuperAdmin, ownOrgOnly])
+
+  const ctx: PickerContext = useMemo(
+    () => ({ ownOrg: owner, isSuperAdmin, callerIsAdmin: Boolean(account?.isAdmin) }),
+    [owner, isSuperAdmin, account?.isAdmin],
+  )
+
+  const view = useMemo(
+    () => (orgs ? pickerView(orgs, query, page, ctx) : null),
+    [orgs, query, page, ctx],
+  )
+
+  const brandName = getBrand().brandName.replace(' Cloud', '')
+
+  // "Create organization" → the sanctioned onboarding flow (its own success re-auth),
+  // with a way back to the list.
+  if (creating) {
+    return (
+      <YStack flex={1} minH="100vh">
+        <XStack p="$3">
+          <Button size="$2" chromeless icon={<LayoutGrid size={14} />} onPress={() => setCreating(false)}>
+            All organizations
+          </Button>
+        </XStack>
+        <OrgOnboarding />
+      </YStack>
+    )
+  }
+
+  // Loading — the first org fetch hasn't settled.
+  if (!view) {
+    return (
+      <Center>
+        <Spinner size="large" color="$color11" />
+        <Text fontSize="$3" color="$color10">
+          Loading your organizations…
+        </Text>
+      </Center>
+    )
+  }
+
+  return (
+    <YStack flex={1} minH="100vh" items="center" px="$4" py="$8" $md={{ py: '$10' }}>
+      <YStack width="100%" maxW={1040} gap="$6">
+        {/* Hero — brand mark + what this is. */}
+        <FadeIn style={{ width: '100%' }}>
+          <YStack gap="$3" items="center">
+            <XStack items="center" gap="$2.5">
+              <BrandMark size={30} />
+              <Text fontSize="$8" fontWeight="800" color="$color12" letterSpacing={-0.6}>
+                {brandName} Console
+              </Text>
+            </XStack>
+            <Text fontSize="$5" fontWeight="700" color="$color12" text="center">
+              Choose an organization
+            </Text>
+            <Text fontSize="$3" color="$color11" maxW={520} text="center">
+              {isSuperAdmin
+                ? 'Pick an organization to manage. As a platform admin you can enter any of them.'
+                : 'Select your organization to open its console.'}
+            </Text>
+          </YStack>
+        </FadeIn>
+
+        {/* Search + create — only show search once there's enough to filter. */}
+        <XStack items="center" gap="$2" flexWrap="wrap" justify="center">
+          {orgs && orgs.length > 6 ? (
+            <XStack
+              items="center"
+              gap="$2"
+              px="$3"
+              height={40}
+              rounded="$4"
+              borderWidth={1}
+              borderColor="$borderColor"
+              bg="$color2"
+              flex={1}
+              minW={240}
+              maxW={420}
+            >
+              <Search size={15} opacity={0.6} />
+              <Input
+                flex={1}
+                unstyled
+                value={query}
+                onChangeText={(v) => {
+                  setQuery(v)
+                  setPage(1)
+                }}
+                placeholder="Filter organizations…"
+                fontSize="$3"
+                color="$color12"
+                autoCapitalize="none"
+                autoCorrect={false}
+              />
+            </XStack>
+          ) : null}
+          <Button
+            size="$3"
+            icon={<Plus size={16} />}
+            onPress={() => setCreating(true)}
+            aria-label="Create organization"
+          >
+            Create organization
+          </Button>
+        </XStack>
+
+        {/* Error — the fetch itself failed (we still degrade to own-org above, so this
+            is rare; kept honest rather than silent). */}
+        {error ? (
+          <Text fontSize="$2" color="$red10" text="center">
+            {error}
+          </Text>
+        ) : null}
+
+        {/* Grid, empty, or no-match — all honest. */}
+        {view.total === 0 && query.trim() ? (
+          <Text fontSize="$3" color="$color10" text="center">
+            No organizations match “{query.trim()}”.
+          </Text>
+        ) : view.total === 0 ? (
+          <EmptyState
+            icon={Building2}
+            title="No organizations yet"
+            description="Create your first organization to start using the console."
+            primary={{ label: 'Create organization', icon: <Plus size={15} />, onPress: () => setCreating(true) }}
+          />
+        ) : (
+          <>
+            <XStack flexWrap="wrap" gap="$3" justify="center">
+              {view.cards.map((card) => (
+                <OrgCardView key={card.key} card={card} onEnter={() => enterOrg(card.name)} />
+              ))}
+            </XStack>
+
+            {view.hasMore ? (
+              <XStack justify="center">
+                <Button size="$3" chromeless onPress={() => setPage((p) => p + 1)}>
+                  Show {Math.min(view.remaining, PAGE_SIZE)} more
+                  {view.remaining > PAGE_SIZE ? ` of ${view.remaining}` : ''}
+                </Button>
+              </XStack>
+            ) : null}
+
+            <Text fontSize="$1" color="$color9" text="center">
+              {view.shown} of {view.total} {view.total === 1 ? 'organization' : 'organizations'}
+            </Text>
+          </>
+        )}
+      </YStack>
+    </YStack>
+  )
+}

src/components/OrgSwitcher.tsx

@@ -1,80 +1,313 @@
 'use client'
 
 /**
- * Org switcher — shows the organization you're acting in, and (only when you
- * actually belong to more than one) lets you switch.
+ * Org switcher — a Vercel-style, LAZY-LOADING team/org switcher that shows the org
+ * the console is scoped to, lets the user switch between the orgs they can see, and
+ * CREATE a new one.
  *
- * Honest by construction: the current org comes from your account; the list comes
- * from IAM (`get-organizations`). Most users belong to one org, so this is just a
- * labelled chip. When several are visible (a multi-brand admin), each brand org
- * routes to that brand's own console host — where it re-authenticates against that
- * brand's IAM — because tenancy is server-side (a brand JWT per host), not a
- * client toggle. We never fabricate orgs: if IAM can't list them, you see your
- * one org.
+ * The org LIST comes from IAM (`get-organizations`, via the gated `/admin/iam`
+ * proxy): a super admin sees every org, a regular user sees only their own. For a
+ * super admin the list is TRULY lazy — `useOrgList` fetches ONE page at a time
+ * (`orgQuery` / `ORG_PAGE_SIZE`), pushes the search term to the server, and loads
+ * more on demand (infinite-scroll + "Load more") so it scales to thousands of orgs
+ * without loading them all up front. A regular user (who 403s the cross-tenant list)
+ * simply sees their current org, synthesized from the scope — never fabricated.
+ *
+ * Selecting an org re-scopes the console IN PLACE — `switchOrg` persists the choice
+ * and reloads so every module refetches under the new `X-Org-Id` (the super-admin
+ * masquerade / god-view is unchanged). Create posts to the same-origin `/onboard`
+ * route (zero-org user → created + joined as admin; existing user → an ADDITIONAL
+ * org they're scope-switched into). Keyboard: ↑/↓ move, ↵ select, Esc close.
  */
-import { useEffect, useState } from 'react'
-import { Button, Popover, Text, XStack, YStack } from '@hanzo/gui'
-import { Building2, Check, ChevronsUpDown } from '@hanzogui/lucide-icons-2'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Button, Input, Popover, Spinner, Text, XStack, YStack } from '@hanzo/gui'
+import { Building2, Check, ChevronsUpDown, Plus, Search } from '@hanzogui/lucide-icons-2'
 
-import { config } from '~/config'
-import { useSession } from '~/lib/auth/session'
+import { currentOrg, switchOrg } from '~/lib/org-scope'
+import {
+  mergeOrgs,
+  orgQuery,
+  orgRows,
+  pageIsFull,
+  rowFor,
+  type OrgRow,
+  type OrgTier,
+} from '~/lib/org-list'
 import { IamAdminApi, type Organization } from '~/lib/api'
-
-/** Brand orgs that have their own console host (where switching re-auths). */
-const BRAND_CONSOLE_HOST: Record<string, string> = {
-  hanzo: 'console.hanzo.ai',
-  lux: 'console.lux.cloud',
-  zoo: 'console.zoo.cloud',
-  pars: 'console.pars.cloud',
-}
+import { v1Url } from '~/lib/api/client'
+import { useIsSuperAdmin } from '~/lib/auth/admin'
 
 const titleCase = (s: string) => (s ? s[0].toUpperCase() + s.slice(1) : s)
 
-export function OrgSwitcher() {
-  const { account } = useSession()
-  const currentId = account?.organization || account?.owner || config.iamOrgName
-  const [orgs, setOrgs] = useState<Organization[]>([])
-  const [open, setOpen] = useState(false)
+// ── Lazy-load hook ────────────────────────────────────────────────────────────
 
+type OrgListState = {
+  /** Accumulated raw orgs (server page order), appended across pages. */
+  rows: Organization[]
+  /** First page in flight (blank list). */
+  loading: boolean
+  /** A subsequent page in flight (list already shown). */
+  loadingMore: boolean
+  error: string | null
+  /** Whether another page is likely available (last page was full). */
+  hasMore: boolean
+}
+
+const EMPTY: OrgListState = { rows: [], loading: false, loadingMore: false, error: null, hasMore: false }
+
+/**
+ * Fetch the cross-tenant org list lazily: page 0 on open, more pages on demand,
+ * and re-query (debounced) when the search term changes. Only runs when `enabled`
+ * (a super admin) — a regular user never fires the admin-gated list.
+ */
+function useOrgList(enabled: boolean) {
+  const [query, setQuery] = useState('')
+  const [debounced, setDebounced] = useState('')
+  const [state, setState] = useState<OrgListState>(EMPTY)
+  const pageRef = useRef(0)
+  const reqRef = useRef(0) // race token — a newer request supersedes older ones
+  const stateRef = useRef(state)
   useEffect(() => {
-    let live = true
-    IamAdminApi.organizations()
-      .then((p) => {
-        if (live) setOrgs(p.rows ?? [])
-      })
-      .catch(() => {
-        // IAM org listing not available to this account — single-org display.
-        if (live) setOrgs([])
-      })
-    return () => {
-      live = false
+    stateRef.current = state
+  }, [state])
+
+  // Debounce the raw query so search-as-you-type re-hits the server at most ~4×/s.
+  useEffect(() => {
+    const id = setTimeout(() => setDebounced(query.trim()), 250)
+    return () => clearTimeout(id)
+  }, [query])
+
+  const fetchPage = useCallback(async (page: number, q: string, append: boolean) => {
+    const token = ++reqRef.current
+    setState((s) => ({ ...s, loading: !append, loadingMore: append, error: null }))
+    try {
+      const res = await IamAdminApi.organizations(orgQuery(page, q))
+      if (token !== reqRef.current) return // superseded by a newer query/page
+      const incoming = res.rows ?? []
+      pageRef.current = page
+      setState((s) => ({
+        rows: append ? mergeOrgs(s.rows, incoming) : incoming,
+        loading: false,
+        loadingMore: false,
+        error: null,
+        hasMore: pageIsFull(incoming.length),
+      }))
+    } catch (e) {
+      if (token !== reqRef.current) return
+      // The cross-tenant list isn't available to this account — honest empty, never
+      // a fabricated list. (A regular user 403s here; the hook is disabled for them.)
+      setState((s) => ({
+        rows: append ? s.rows : [],
+        loading: false,
+        loadingMore: false,
+        error: append ? (e instanceof Error ? e.message : 'Could not load more.') : null,
+        hasMore: false,
+      }))
     }
   }, [])
 
-  const currentName =
-    orgs.find((o) => o.name === currentId)?.displayName || titleCase(currentId)
+  // (Re)load page 0 when enabled toggles on or the debounced query changes.
+  useEffect(() => {
+    if (!enabled) {
+      reqRef.current++ // cancel any in-flight page
+      pageRef.current = 0
+      setState(EMPTY)
+      return
+    }
+    pageRef.current = 0
+    void fetchPage(0, debounced, false)
+  }, [enabled, debounced, fetchPage])
 
-  // Only a real multi-membership turns this into a switcher.
-  const others = orgs.filter((o) => o.name !== currentId)
-  if (others.length === 0) {
-    return (
-      <XStack items="center" gap="$2" px="$2.5" height={32} rounded="$3" borderWidth={1} borderColor="$borderColor">
-        <Building2 size={14} opacity={0.7} />
-        <Text fontSize="$2" color="$color11" numberOfLines={1}>
-          {currentName}
-        </Text>
-      </XStack>
-    )
+  const loadMore = useCallback(() => {
+    const s = stateRef.current
+    if (s.loading || s.loadingMore || !s.hasMore) return
+    void fetchPage(pageRef.current + 1, debounced, true)
+  }, [debounced, fetchPage])
+
+  return { ...state, query, setQuery, loadMore }
+}
+
+// ── Presentational bits ───────────────────────────────────────────────────────
+
+/** Monochrome plan/tier pill — rendered only when the org carries a real tier. */
+function TierBadge({ tier }: { tier: OrgTier }) {
+  return (
+    <XStack items="center" bg="$color3" rounded="$10" px="$2" py="$0.5" borderWidth={1} borderColor="$borderColor">
+      <Text fontSize="$1" color="$color11" fontWeight="600">
+        {tier.label}
+      </Text>
+    </XStack>
+  )
+}
+
+/** An org's avatar — its logo when set, else a monogram tile. */
+function OrgAvatar({ row, size = 22 }: { row: OrgRow; size?: number }) {
+  if (row.logo) {
+    // Arbitrary external org logo — raw <img> (next/image would need a per-tenant
+    // remote allowlist).
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img src={row.logo} alt="" style={{ height: size, width: size, objectFit: 'contain', display: 'block', borderRadius: 6 }} />
   }
+  return (
+    <YStack width={size} height={size} rounded="$3" bg="$color4" items="center" justify="center">
+      <Text fontSize="$1" fontWeight="800" color="$color12">
+        {row.initials}
+      </Text>
+    </YStack>
+  )
+}
 
-  const select = (org: Organization) => {
+/** One selectable org row. */
+function OrgRowView({
+  row,
+  current,
+  active,
+  onPress,
+}: {
+  row: OrgRow
+  current: boolean
+  active: boolean
+  onPress: () => void
+}) {
+  return (
+    <XStack
+      id={active ? 'org-active' : undefined}
+      onPress={onPress}
+      cursor="pointer"
+      items="center"
+      gap="$2.5"
+      px="$2"
+      py="$2"
+      rounded="$3"
+      bg={active ? '$color5' : current ? '$color4' : 'transparent'}
+      hoverStyle={{ bg: '$color5' }}
+    >
+      <OrgAvatar row={row} />
+      <Text flex={1} fontSize="$2" color="$color12" numberOfLines={1}>
+        {row.title}
+      </Text>
+      {row.tier ? <TierBadge tier={row.tier} /> : null}
+      {current ? <Check size={15} /> : null}
+    </XStack>
+  )
+}
+
+// ── Switcher ──────────────────────────────────────────────────────────────────
+
+export function OrgSwitcher() {
+  const currentId = currentOrg()
+  const isSuperAdmin = useIsSuperAdmin()
+  const list = useOrgList(isSuperAdmin)
+
+  const [open, setOpen] = useState(false)
+  const [sel, setSel] = useState(0)
+  const [creating, setCreating] = useState(false)
+  const [newName, setNewName] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [err, setErr] = useState<string | null>(null)
+  const searchRef = useRef<{ focus?: () => void } | null>(null)
+
+  // Rows to render. Super admin → the (lazy, server-paged) cross-tenant list,
+  // client-filtered over name+displayName. Regular user → only their own org,
+  // synthesized from the active scope (unchanged behavior; never fabricated).
+  const rows: OrgRow[] = useMemo(() => {
+    if (isSuperAdmin) return orgRows(list.rows, list.query)
+    return [rowFor({ owner: 'admin', name: currentId, displayName: titleCase(currentId) } as Organization)]
+  }, [isSuperAdmin, list.rows, list.query, currentId])
+
+  // The current org's human label for the trigger — real displayName once loaded.
+  const currentName = useMemo(() => {
+    const hit = list.rows.find((o) => o.name === currentId)
+    return hit?.displayName || titleCase(currentId)
+  }, [list.rows, currentId])
+
+  // Selectable items: the org rows, then the "Create" footer as the last item.
+  const itemCount = rows.length + 1
+  const createIndex = rows.length
+
+  // Reset the highlight to the top whenever the visible set changes.
+  useEffect(() => {
+    setSel(0)
+  }, [list.query, rows.length])
+
+  // Focus the search box when the popover opens (super admin only).
+  useEffect(() => {
+    if (open && !creating && isSuperAdmin) {
+      const id = setTimeout(() => searchRef.current?.focus?.(), 0)
+      return () => clearTimeout(id)
+    }
+  }, [open, creating, isSuperAdmin])
+
+  const select = useCallback((org: string) => {
     setOpen(false)
-    const host = BRAND_CONSOLE_HOST[org.name]
-    if (host && org.name !== currentId && typeof window !== 'undefined') {
-      window.location.assign(`https://${host}`)
+    switchOrg(org) // persists + reloads so every module re-scopes under the new X-Org-Id
+  }, [])
+
+  const activate = useCallback(
+    (index: number) => {
+      if (index === createIndex) {
+        setCreating(true)
+        setErr(null)
+        return
+      }
+      const row = rows[index]
+      if (row) select(row.name)
+    },
+    [createIndex, rows, select],
+  )
+
+  // Keyboard while open (and not in the create form): ↑/↓ move, ↵ select, Esc close.
+  useEffect(() => {
+    if (!open || creating) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setOpen(false)
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        setSel((s) => Math.min(s + 1, itemCount - 1))
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        setSel((s) => Math.max(s - 1, 0))
+      } else if (e.key === 'Enter') {
+        e.preventDefault()
+        activate(sel)
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [open, creating, itemCount, sel, activate])
+
+  // Keep the highlighted row in view as ↑/↓ moves past the fold.
+  useEffect(() => {
+    if (!open || typeof document === 'undefined') return
+    document.getElementById('org-active')?.scrollIntoView({ block: 'nearest' })
+  }, [sel, open])
+
+  const create = async () => {
+    const name = newName.trim()
+    if (!name) return
+    setBusy(true)
+    setErr(null)
+    try {
+      const res = await fetch(v1Url('iam/onboard'), {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name }),
+      })
+      const data = (await res.json().catch(() => ({}))) as { org?: string; error?: string }
+      if (!res.ok || !data.org) throw new Error(data.error || `Could not create organization (${res.status}).`)
+      // Scope into the new org (persists + reloads so every module refetches).
+      switchOrg(data.org)
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : 'Could not create the organization.')
+      setBusy(false)
     }
   }
 
+  const showSearch = isSuperAdmin
+  const isEmpty = !list.loading && rows.length === 0
+
   return (
     <Popover open={open} onOpenChange={setOpen} placement="bottom-end">
       <Popover.Trigger asChild>
@@ -82,36 +315,157 @@ export function OrgSwitcher() {
           {currentName}
         </Button>
       </Popover.Trigger>
-      <Popover.Content bordered elevate p="$2" width={240} bg="$color2" borderColor="$borderColor">
-        <YStack gap="$0.5">
-          <Text px="$2" py="$1" fontSize="$1" color="$color10" fontWeight="700" textTransform="uppercase">
-            Organizations
-          </Text>
-          {orgs.map((org) => {
-            const isCurrent = org.name === currentId
-            const switchable = !isCurrent && Boolean(BRAND_CONSOLE_HOST[org.name])
-            return (
-              <XStack
-                key={org.name}
-                onPress={switchable ? () => select(org) : undefined}
-                cursor={switchable ? 'pointer' : 'default'}
-                items="center"
-                gap="$2"
-                px="$2"
-                py="$2"
-                rounded="$3"
-                opacity={isCurrent || switchable ? 1 : 0.5}
-                hoverStyle={switchable ? { bg: '$color4' } : undefined}
+      <Popover.Content bordered elevate p="$2" width={320} bg="$color2" borderColor="$borderColor">
+        {creating ? (
+          <YStack gap="$2">
+            <Text fontSize="$2" color="$color12" fontWeight="700">
+              Create organization
+            </Text>
+            <Input
+              size="$3"
+              placeholder="Organization name"
+              value={newName}
+              onChangeText={setNewName}
+              autoCapitalize="words"
+              onSubmitEditing={() => void create()}
+            />
+            {err ? (
+              <Text fontSize="$1" color="$red10">
+                {err}
+              </Text>
+            ) : null}
+            <XStack gap="$2" justify="flex-end">
+              <Button
+                size="$2"
+                chromeless
+                onPress={() => {
+                  setCreating(false)
+                  setErr(null)
+                }}
+                disabled={busy}
               >
-                <Building2 size={14} opacity={0.7} />
-                <Text flex={1} fontSize="$2" color="$color12" numberOfLines={1}>
-                  {org.displayName || titleCase(org.name)}
-                </Text>
-                {isCurrent ? <Check size={14} /> : null}
+                Cancel
+              </Button>
+              <Button
+                size="$2"
+                onPress={() => void create()}
+                disabled={busy || !newName.trim()}
+                icon={busy ? <Spinner size="small" /> : <Plus size={14} />}
+              >
+                Create
+              </Button>
+            </XStack>
+          </YStack>
+        ) : (
+          <YStack gap="$1">
+            {showSearch ? (
+              <XStack items="center" gap="$2" px="$2" py="$1" rounded="$3" borderWidth={1} borderColor="$borderColor">
+                <Search size={13} opacity={0.6} />
+                <Input
+                  ref={searchRef as never}
+                  flex={1}
+                  size="$2"
+                  borderWidth={0}
+                  bg="transparent"
+                  placeholder="Find organization…"
+                  value={list.query}
+                  onChangeText={list.setQuery}
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                />
               </XStack>
-            )
-          })}
-        </YStack>
+            ) : null}
+
+            <div
+              style={{ maxHeight: 320, overflowY: 'auto', display: 'flex', flexDirection: 'column' }}
+              onScroll={(e) => {
+                const el = e.currentTarget
+                if (el.scrollHeight - el.scrollTop - el.clientHeight < 48) list.loadMore()
+              }}
+            >
+              {list.loading ? (
+                <XStack items="center" gap="$2" px="$2" py="$3">
+                  <Spinner size="small" color="$color11" />
+                  <Text fontSize="$2" color="$color10">
+                    Loading organizations…
+                  </Text>
+                </XStack>
+              ) : isEmpty ? (
+                list.query.trim() ? (
+                  <Text px="$2" py="$2" fontSize="$2" color="$color10">
+                    No organizations match “{list.query.trim()}”.
+                  </Text>
+                ) : (
+                  <YStack px="$2" py="$3" gap="$1">
+                    <Text fontSize="$2" color="$color11" fontWeight="600">
+                      No organizations yet
+                    </Text>
+                    <Text fontSize="$1" color="$color10">
+                      Teams you create and join appear here for quick context switching.
+                    </Text>
+                  </YStack>
+                )
+              ) : (
+                rows.map((row, i) => (
+                  <OrgRowView
+                    key={row.key}
+                    row={row}
+                    current={row.name === currentId}
+                    active={i === sel}
+                    onPress={() => activate(i)}
+                  />
+                ))
+              )}
+
+              {list.loadingMore ? (
+                <XStack items="center" gap="$2" px="$2" py="$2">
+                  <Spinner size="small" color="$color11" />
+                  <Text fontSize="$1" color="$color10">
+                    Loading more…
+                  </Text>
+                </XStack>
+              ) : list.hasMore ? (
+                <XStack
+                  onPress={() => list.loadMore()}
+                  cursor="pointer"
+                  items="center"
+                  justify="center"
+                  px="$2"
+                  py="$1.5"
+                  rounded="$3"
+                  hoverStyle={{ bg: '$color4' }}
+                >
+                  <Text fontSize="$1" color="$color11" fontWeight="600">
+                    Load more
+                  </Text>
+                </XStack>
+              ) : null}
+            </div>
+
+            <XStack
+              id={sel === createIndex ? 'org-active' : undefined}
+              onPress={() => activate(createIndex)}
+              cursor="pointer"
+              items="center"
+              gap="$2.5"
+              px="$2"
+              py="$2"
+              mt="$1"
+              rounded="$3"
+              borderTopWidth={1}
+              borderColor="$borderColor"
+              bg={sel === createIndex ? '$color5' : 'transparent'}
+              hoverStyle={{ bg: '$color5' }}
+            >
+              <YStack width={22} height={22} rounded="$3" bg="$color3" items="center" justify="center">
+                <Plus size={14} />
+              </YStack>
+              <Text fontSize="$2" color="$color12">
+                Create organization
+              </Text>
+            </XStack>
+          </YStack>
+        )}
       </Popover.Content>
     </Popover>
   )

src/components/ProductRoute.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+/**
+ * The ONE product-route renderer. Resolves a slug against the registry and renders
+ * the module (or an honest sub-page stub / admin notice / interstitial), inside the
+ * product error boundary. Used by BOTH the `app/(dashboard)/[...slug]` catch-all
+ * (slug from the route params, on a real Next server) AND the dashboard home
+ * (`app/(dashboard)/page.tsx`, slug from `usePathname()` — see the note there),
+ * so the one-binary STATIC embed resolves deep links client-side from the live URL
+ * even though cloud serves the single root `index.html` for every path. One
+ * definition, both entry points — no duplicated routing.
+ */
+import { notFound } from 'next/navigation'
+
+import { resolveView, isAdminRoute } from '~/lib/products/match'
+import { findEntry } from '~/lib/products/registry'
+import { useIsSuperAdmin } from '~/lib/auth/admin'
+import { ProductSubpageStub } from '~/components/products/ProductSubpageStub'
+import { ProductSubpageModule } from '~/components/products/subpage/ProductSubpageModule'
+import { ProductInterstitial } from '~/components/products/ProductInterstitial'
+import { AdminManagedNotice } from '~/components/products/AdminManagedNotice'
+import { ProductErrorBoundary } from '~/components/errors/ProductErrorBoundary'
+
+export function ProductRoute({ slug }: { slug: string[] }) {
+  const showAdmin = useIsSuperAdmin()
+  const view = resolveView(slug)
+
+  if (view.kind === 'notfound') notFound()
+
+  if (view.kind === 'external') return <ProductInterstitial id={view.entry.id} />
+
+  if (!showAdmin && isAdminRoute(slug)) {
+    const entry = findEntry(slug[0])
+    if (entry && entry.kind === 'module') {
+      const seg = slug[1]
+      const subpage = seg ? (entry.subpages ?? []).find((s) => s.slug === seg && s.admin) : undefined
+      return <AdminManagedNotice entry={entry} subpage={subpage} />
+    }
+  }
+
+  if (view.kind === 'stub') return <ProductSubpageStub entry={view.entry} subpage={view.subpage} />
+
+  if (view.kind === 'subpage')
+    return (
+      <ProductErrorBoundary resetKey={slug.join('/')}>
+        <ProductSubpageModule entry={view.entry} subpage={view.subpage} />
+      </ProductErrorBoundary>
+    )
+
+  const Component = view.matched.route.component
+  return (
+    <ProductErrorBoundary resetKey={slug.join('/')}>
+      <Component params={view.matched.params} />
+    </ProductErrorBoundary>
+  )
+}
+
+export default ProductRoute