@hanzo/dashboard 0.2.0

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@hanzo/dashboard",
+  "version": "0.2.0",
+  "type": "module",
+  "description": "Hanzo Base tenant-management screens \u2014 host-agnostic @hanzo/gui v7 React surface, shared by the standalone dashboard (base.hanzo.ai) and the embedded console module (console.hanzo.ai).",
+  "exports": {
+    ".": {
+      "types": "./src/lib/index.ts",
+      "default": "./src/lib/index.ts"
+    }
+  },
+  "main": "./src/lib/index.ts",
+  "module": "./src/lib/index.ts",
+  "types": "./src/lib/index.ts",
+  "sideEffects": false,
+  "files": [
+    "src/lib"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@hanzo/gui": ">=7.2.2",
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@hanzo/gui": "^7.2.2",
+    "@hanzo/iam": "^0.9.4",
+    "@hanzogui/config": "^7.0.0",
+    "@hanzogui/vite-plugin": "7.0.0",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-native-web": "^0.21.0",
+    "react-router-dom": "^7.0.2",
+    "typescript": "^5.7.2",
+    "vite": "^7.0.0"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "overrides": {
+    "@hanzogui/vite-plugin": "7.0.0",
+    "@hanzogui/web": "102.0.0-rc.41-hanzoai.1",
+    "@hanzogui/core": "102.0.0-rc.41-hanzoai.1",
+    "@hanzogui/themes": "102.0.0-rc.41-hanzoai.1"
+  },
+  "resolutions": {
+    "@hanzogui/vite-plugin": "7.0.0",
+    "@hanzogui/web": "102.0.0-rc.41-hanzoai.1",
+    "@hanzogui/core": "102.0.0-rc.41-hanzoai.1",
+    "@hanzogui/themes": "102.0.0-rc.41-hanzoai.1"
+  },
+  "license": "BSD-3-Clause",
+  "author": "Hanzo AI <dev@hanzo.ai>"
+}

package/readme.md

@@ -0,0 +1,57 @@
+# SuperBase Dashboard
+
+Static SPA that the superbase Go binary embeds via `go:embed` and serves
+at `/dashboard/*` (with `/_/tenants/*` redirecting here as a legacy
+alias).
+
+- Vite + React 19 + React Router
+- `@hanzo/gui` v7 for all UI (no shadcn, no Radix-direct)
+- `@hanzo/iam` PKCE OIDC against `hanzo.id`
+- Talks to the local Base instance at `/v1/collections/tenants/records`
+
+No Svelte. No Express. No server-side. Pure static bundle.
+
+## Build
+
+```sh
+bun install
+bun run build
+```
+
+The output lands in `dist/` — that's what the Go binary embeds. Each
+asset is content-hashed; `dist/index.html` is the SPA shell. The Go
+binary rewrites the `<meta name="hanzo-iam-*">` tags in `index.html`
+at serve time to inject the right environment's IAM client id, so the
+bundle has no env-specific configuration baked in.
+
+## Dev
+
+```sh
+bun run dev
+```
+
+Vite serves at `http://127.0.0.1:5180/dashboard/` and proxies `/v1/*`
+to `http://127.0.0.1:8090` (a locally-running Base / superbase binary).
+
+If you don't have a local IAM, the SPA still loads — `useIam()`
+surfaces the sign-in screen and clicking it redirects to
+`https://hanzo.id`. Override the IAM target with:
+
+```sh
+VITE_IAM_SERVER_URL=https://iam-local.hanzo.ai \
+VITE_IAM_CLIENT_ID=hanzo-superbase-local \
+bun run dev
+```
+
+## What's where
+
+- `src/main.tsx` — `HanzoguiProvider` → `IamProvider` → router
+- `src/App.tsx` — header + auth gate
+- `src/auth.ts` — IAM config (meta-tag → env → defaults)
+- `src/api.ts` — typed Base client (list/get/create/update/delete)
+- `src/routes/TenantsList.tsx` — table + drawer + 5s polling
+- `src/routes/NewTenant.tsx` — create form with kebab-slug validation
+- `src/routes/LoginCallback.tsx` — OIDC PKCE callback
+- `src/components/` — TenantRow, TenantStatusBadge, ConfirmDialog
+- `gui.config.ts` — @hanzogui/config v5 default + dark theme
+- `vite.config.ts` — base `/dashboard/`, hanzogui dedupe + optimizeDeps

package/src/lib/api.ts

@@ -0,0 +1,155 @@
+// Typed, host-agnostic Base client for the SuperBase `tenants` collection.
+//
+// ONE transport, injected by the host. The screens never see a token or a
+// fetch — they call the returned `TenantsApi`. Two hosts build it differently:
+//
+//   • standalone (base.hanzo.ai): same-origin, Bearer from @hanzo/iam.
+//       createTenantsApi({ getToken: () => accessToken })
+//   • embedded (console.hanzo.ai): calls console2's own `/superbase/*` proxy
+//     with the session cookie; the proxy mints + forwards the user's IAM
+//     bearer server-side, so no token reaches this browser.
+//       createTenantsApi({ baseUrl: '/superbase', credentials: 'include' })
+//
+// One and only one way: every mutation goes through a method on the api object.
+// No raw fetch elsewhere in the screens.
+
+export type TenantStatus =
+  | 'Pending'
+  | 'Creating'
+  | 'Running'
+  | 'Degraded'
+  | 'Deleting'
+
+export interface TenantSpec {
+  replicas: number
+  storage: string
+}
+
+export interface TenantRecord {
+  id: string
+  slug: string
+  name: string
+  owner_iam_user: string
+  namespace: string
+  spec: TenantSpec
+  status: TenantStatus
+  subdomain: string
+  current_writer: string
+  term: number
+  created: string
+  updated: string
+}
+
+export interface CreateTenantInput {
+  slug: string
+  name: string
+  namespace?: string
+  spec: TenantSpec
+}
+
+export interface UpdateTenantInput {
+  name?: string
+  namespace?: string
+  spec?: Partial<TenantSpec>
+}
+
+export interface ListResponse<T> {
+  page: number
+  perPage: number
+  totalPages: number
+  totalItems: number
+  items: T[]
+}
+
+const BASE_PATH = '/v1/collections/tenants/records'
+
+export class ApiError extends Error {
+  status: number
+  body: unknown
+  constructor(status: number, body: unknown, message?: string) {
+    super(message ?? `Base API error ${status}`)
+    this.status = status
+    this.body = body
+  }
+}
+
+/**
+ * Host-supplied transport. `baseUrl` prefixes every request (''=same-origin for
+ * the standalone app, '/superbase'=console2's proxy). `getToken` provides the
+ * Bearer when the host holds the token in the browser (standalone); omit it when
+ * a same-origin proxy injects the credential server-side (console2), and set
+ * `credentials: 'include'` so the proxy receives the session cookie.
+ */
+export interface TenantsTransport {
+  baseUrl?: string
+  getToken?: () => string | null
+  credentials?: RequestCredentials
+}
+
+/** The complete data surface the screens consume — five methods, no token. */
+export interface TenantsApi {
+  list(params?: { page?: number; perPage?: number; sort?: string }): Promise<ListResponse<TenantRecord>>
+  get(idOrSlug: string): Promise<TenantRecord>
+  create(input: CreateTenantInput): Promise<TenantRecord>
+  update(id: string, patch: UpdateTenantInput): Promise<TenantRecord>
+  remove(id: string): Promise<void>
+}
+
+export function createTenantsApi(t: TenantsTransport = {}): TenantsApi {
+  const baseUrl = (t.baseUrl ?? '').replace(/\/+$/, '')
+  const credentials: RequestCredentials = t.credentials ?? 'same-origin'
+
+  async function request<T>(path: string, init: RequestInit): Promise<T> {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+      ...((init.headers as Record<string, string>) ?? {}),
+    }
+    const token = t.getToken?.() ?? null
+    if (token) headers.Authorization = `Bearer ${token}`
+
+    const res = await fetch(`${baseUrl}${path}`, { ...init, headers, credentials })
+    if (!res.ok) {
+      let body: unknown = null
+      try { body = await res.json() } catch { /* not JSON */ }
+      throw new ApiError(res.status, body, `Base API ${res.status} ${res.statusText}`)
+    }
+    if (res.status === 204) return undefined as T
+    return (await res.json()) as T
+  }
+
+  return {
+    list(params) {
+      const q = new URLSearchParams()
+      if (params?.page) q.set('page', String(params.page))
+      if (params?.perPage) q.set('perPage', String(params.perPage))
+      // The tenants collection has no `created`/`createdAt` autodate field in
+      // the deployed Base schema, so `sort=-created` 400s. `-id` is always
+      // present and id is monotonic, giving newest-first ordering.
+      q.set('sort', params?.sort ?? '-id')
+      return request<ListResponse<TenantRecord>>(`${BASE_PATH}?${q}`, { method: 'GET' })
+    },
+    get(idOrSlug) {
+      // Base supports lookup by id or by a unique field via filter; slug is unique.
+      if (idOrSlug.match(/^[a-z0-9]{15}$/)) {
+        return request<TenantRecord>(`${BASE_PATH}/${encodeURIComponent(idOrSlug)}`, { method: 'GET' })
+      }
+      const q = new URLSearchParams({ filter: `slug='${idOrSlug.replace(/'/g, "\\'")}'`, perPage: '1' })
+      return request<ListResponse<TenantRecord>>(`${BASE_PATH}?${q}`, { method: 'GET' }).then((r) => {
+        if (r.items.length === 0) throw new ApiError(404, null, `tenant not found: ${idOrSlug}`)
+        return r.items[0]
+      })
+    },
+    create(input) {
+      return request<TenantRecord>(BASE_PATH, { method: 'POST', body: JSON.stringify(input) })
+    },
+    update(id, patch) {
+      return request<TenantRecord>(`${BASE_PATH}/${encodeURIComponent(id)}`, {
+        method: 'PATCH',
+        body: JSON.stringify(patch),
+      })
+    },
+    remove(id) {
+      return request<void>(`${BASE_PATH}/${encodeURIComponent(id)}`, { method: 'DELETE' })
+    },
+  }
+}

package/src/lib/components/ConfirmDialog.tsx

@@ -0,0 +1,53 @@
+import { Button, Dialog, Text, XStack, YStack } from '@hanzo/gui'
+
+export function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmLabel = 'Confirm',
+  destructive = false,
+  onConfirm,
+  onCancel,
+}: {
+  open: boolean
+  title: string
+  message: string
+  confirmLabel?: string
+  destructive?: boolean
+  onConfirm: () => void
+  onCancel: () => void
+}) {
+  return (
+    <Dialog modal open={open} onOpenChange={(v) => { if (!v) onCancel() }}>
+      <Dialog.Portal>
+        <Dialog.Overlay bg="rgba(0,0,0,0.6)" />
+        <Dialog.Content
+          bg="#0a0a0a"
+          borderColor="#27272a"
+          borderWidth={1}
+          p={20}
+          width={420}
+          gap={16}
+        >
+          <Dialog.Title>
+            <Text fontSize={18} fontWeight="700" color="#f4f4f5">{title}</Text>
+          </Dialog.Title>
+          <Dialog.Description>
+            <Text color="#a1a1aa">{message}</Text>
+          </Dialog.Description>
+          <YStack gap={12}>
+            <XStack gap={8} justify="flex-end">
+              <Button onPress={onCancel}>Cancel</Button>
+              <Button
+                theme={destructive ? 'red' : 'blue'}
+                onPress={onConfirm}
+              >
+                {confirmLabel}
+              </Button>
+            </XStack>
+          </YStack>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}

package/src/lib/components/TenantRow.tsx

@@ -0,0 +1,39 @@
+import { Text, XStack } from '@hanzo/gui'
+import { TenantStatusBadge } from './TenantStatusBadge'
+import type { TenantRecord } from '../api'
+
+// One row in the tenants list. Click anywhere on the row to open the
+// detail drawer — selection is parent-controlled.
+export function TenantRow({
+  tenant,
+  onClick,
+}: {
+  tenant: TenantRecord
+  onClick: (t: TenantRecord) => void
+}) {
+  return (
+    <XStack
+      px={16}
+      py={12}
+      borderBottomWidth={1}
+      borderBottomColor="#27272a"
+      hoverStyle={{ bg: '#18181b' }}
+      cursor="pointer"
+      onPress={() => onClick(tenant)}
+      items="center"
+      gap={16}
+    >
+      <Text flex={1} color="#f4f4f5" fontWeight="600">{tenant.slug}</Text>
+      <Text flex={2} color="#a1a1aa" numberOfLines={1}>{tenant.subdomain || '—'}</Text>
+      <XStack width={120} justify="flex-start">
+        <TenantStatusBadge status={tenant.status} />
+      </XStack>
+      <Text flex={2} color="#a1a1aa" numberOfLines={1}>
+        {tenant.current_writer || '—'}
+      </Text>
+      <Text width={80} color="#a1a1aa" style={{ textAlign: 'right' }}>
+        term {tenant.term}
+      </Text>
+    </XStack>
+  )
+}

package/src/lib/components/TenantStatusBadge.tsx

@@ -0,0 +1,33 @@
+import { Text, XStack } from '@hanzo/gui'
+import type { TenantStatus } from '../api'
+
+// Color map mirrors the BaseApp.Status.Phase semantics — we read the
+// Status verbatim from the operator (see plugin/tenant/types.go), so
+// any new value will fall through to the neutral default rather than
+// silently rendering wrong. `as const` keeps the hex literals narrow so
+// they satisfy the Gui `bg`/`color` token unions (a widened `string` won't).
+const NEUTRAL = { bg: '#3f3f46', fg: '#fafafa' } as const // zinc 700 / 50
+const COLORS = {
+  Pending:  NEUTRAL,
+  Creating: { bg: '#1e40af', fg: '#dbeafe' }, // blue 800 / 100
+  Running:  { bg: '#166534', fg: '#dcfce7' }, // green 800 / 100
+  Degraded: { bg: '#92400e', fg: '#fef3c7' }, // amber 800 / 100
+  Deleting: { bg: '#991b1b', fg: '#fee2e2' }, // red 800 / 100
+} as const satisfies Record<TenantStatus, { bg: string; fg: string }>
+
+export function TenantStatusBadge({ status }: { status: TenantStatus }) {
+  const c = COLORS[status] ?? NEUTRAL
+  return (
+    <XStack
+      bg={c.bg}
+      px={8}
+      py={2}
+      rounded={4}
+      items="center"
+    >
+      <Text fontSize={12} color={c.fg} fontWeight="600">
+        {status}
+      </Text>
+    </XStack>
+  )
+}

package/src/lib/index.ts

@@ -0,0 +1,30 @@
+// @hanzo/superbase-dashboard — the Hanzo Base tenant-management screens.
+//
+// Host-agnostic surface consumed by BOTH the standalone dashboard (base.hanzo.ai,
+// the superbase Go binary) and the embedded console module (console.hanzo.ai,
+// console2). ONE source of screens; each host supplies a transport + navigation.
+//
+//   import { createTenantsApi, TenantsScreen, NewTenantScreen } from '@hanzo/superbase-dashboard'
+//
+// See ./api (createTenantsApi) and ./nav (TenantsNav) for the two injection
+// points. The screens themselves never touch a token, a router, or a fetch.
+
+export { createTenantsApi, ApiError } from './api'
+export type {
+  TenantsApi,
+  TenantsTransport,
+  TenantRecord,
+  TenantStatus,
+  TenantSpec,
+  CreateTenantInput,
+  UpdateTenantInput,
+  ListResponse,
+} from './api'
+export type { TenantsNav } from './nav'
+
+export { TenantsScreen } from './screens/TenantsScreen'
+export { NewTenantScreen } from './screens/NewTenantScreen'
+
+export { TenantStatusBadge } from './components/TenantStatusBadge'
+export { TenantRow } from './components/TenantRow'
+export { ConfirmDialog } from './components/ConfirmDialog'

package/src/lib/nav.ts

@@ -0,0 +1,12 @@
+// Host-agnostic navigation surface for the Base screens.
+//
+// The screens never import a router. Each host maps these intents to its own
+// routing: the standalone app to react-router `navigate`, console2 to the Next
+// `useRouter().push` under the `/base` product path. Tenant DETAIL is a
+// client-state drawer inside TenantsScreen — not a route — so it needs no nav.
+export interface TenantsNav {
+  /** Return to the tenants list, optionally re-selecting a tenant by id. */
+  toList(opts?: { selected?: string }): void
+  /** Open the new-tenant form. */
+  toNew(): void
+}

package/src/lib/screens/NewTenantScreen.tsx

@@ -0,0 +1,137 @@
+import { useState } from 'react'
+import { Button, Card, Input, Label, Text, XStack, YStack } from '@hanzo/gui'
+import type { TenantsApi } from '../api'
+import type { TenantsNav } from '../nav'
+
+// Slug validation mirrors the Base collection constraint (lowercase
+// kebab-case, must start with a letter, 2-31 chars). Keep this in
+// sync with the slug regex in plugin/tenant/collection.go.
+const SLUG_RE = /^[a-z][a-z0-9-]{1,30}$/
+
+const REPLICAS = [3, 5, 7] as const
+const STORAGE = ['10Gi', '25Gi', '50Gi'] as const
+
+/**
+ * The create-tenant form. Host-agnostic: submits through the injected `api`,
+ * returns to the list (re-selecting the new tenant) or cancels via `nav`.
+ */
+export function NewTenantScreen({ api, nav }: { api: TenantsApi; nav: TenantsNav }) {
+  const [slug, setSlug] = useState('')
+  const [name, setName] = useState('')
+  const [replicas, setReplicas] = useState<(typeof REPLICAS)[number]>(3)
+  const [storage, setStorage] = useState<(typeof STORAGE)[number]>('10Gi')
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const slugError =
+    slug.length === 0 ? null :
+    SLUG_RE.test(slug) ? null :
+    'Lowercase letters, digits and dashes only; must start with a letter; 2-31 chars.'
+
+  const canSubmit = slug.length > 0 && !slugError && name.length > 0 && !submitting
+
+  const onSubmit = async () => {
+    if (!canSubmit) return
+    setSubmitting(true)
+    setError(null)
+    try {
+      const created = await api.create({ slug, name, spec: { replicas, storage } })
+      nav.toList({ selected: created.id })
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <YStack flex={1} p={24} gap={16} maxW={560}>
+      <XStack items="center" gap={12}>
+        <Text fontSize={24} fontWeight="700" color="#f4f4f5" flex={1}>New tenant</Text>
+        <Button onPress={() => nav.toList()}>Cancel</Button>
+      </XStack>
+
+      <Card bg="#09090b" borderColor="#27272a" borderWidth={1} p={20} gap={16}>
+        <YStack gap={6}>
+          <Label htmlFor="slug">
+            <Text color="#d4d4d8" fontWeight="600">Slug</Text>
+          </Label>
+          <Input
+            id="slug"
+            value={slug}
+            onChangeText={(v) => setSlug(v.toLowerCase())}
+            placeholder="acme-prod"
+            autoCapitalize="none"
+          />
+          {slugError && <Text color="#fca5a5" fontSize={12}>{slugError}</Text>}
+          {!slugError && slug.length > 0 && (
+            <Text color="#71717a" fontSize={12}>
+              Subdomain will be <Text color="#a1a1aa" fontWeight="600">{slug}.base.hanzo.ai</Text>
+            </Text>
+          )}
+        </YStack>
+
+        <YStack gap={6}>
+          <Label htmlFor="name">
+            <Text color="#d4d4d8" fontWeight="600">Display name</Text>
+          </Label>
+          <Input
+            id="name"
+            value={name}
+            onChangeText={setName}
+            placeholder="Acme Production"
+          />
+        </YStack>
+
+        <YStack gap={6}>
+          <Text color="#d4d4d8" fontWeight="600">Replicas</Text>
+          <XStack gap={8}>
+            {REPLICAS.map((n) => (
+              <Button
+                key={n}
+                theme={replicas === n ? 'blue' : undefined}
+                onPress={() => setReplicas(n)}
+              >
+                {n}
+              </Button>
+            ))}
+          </XStack>
+          <Text color="#71717a" fontSize={12}>
+            Odd-count replica set for the writer-election quorum.
+          </Text>
+        </YStack>
+
+        <YStack gap={6}>
+          <Text color="#d4d4d8" fontWeight="600">Storage</Text>
+          <XStack gap={8}>
+            {STORAGE.map((s) => (
+              <Button
+                key={s}
+                theme={storage === s ? 'blue' : undefined}
+                onPress={() => setStorage(s)}
+              >
+                {s}
+              </Button>
+            ))}
+          </XStack>
+          <Text color="#71717a" fontSize={12}>PVC size per replica.</Text>
+        </YStack>
+
+        {error && (
+          <Card p={12} bg="#450a0a" borderColor="#7f1d1d" borderWidth={1}>
+            <Text color="#fecaca">{error}</Text>
+          </Card>
+        )}
+
+        <XStack justify="flex-end">
+          <Button
+            theme="blue"
+            disabled={!canSubmit}
+            onPress={onSubmit}
+          >
+            {submitting ? 'Creating…' : 'Create tenant'}
+          </Button>
+        </XStack>
+      </Card>
+    </YStack>
+  )
+}

package/src/lib/screens/TenantsScreen.tsx

@@ -0,0 +1,229 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Button, Card, Text, XStack, YStack } from '@hanzo/gui'
+import { TenantRow } from '../components/TenantRow'
+import { TenantStatusBadge } from '../components/TenantStatusBadge'
+import { ConfirmDialog } from '../components/ConfirmDialog'
+import type { TenantsApi, TenantRecord } from '../api'
+import type { TenantsNav } from '../nav'
+
+const POLL_MS = 5000
+
+/**
+ * The tenants list + detail drawer. Host-agnostic: data comes from the injected
+ * `api`, navigation to the new-tenant form from `nav`. Detail is a client-state
+ * drawer (not a route), so it works identically standalone and embedded.
+ */
+export function TenantsScreen({ api, nav }: { api: TenantsApi; nav: TenantsNav }) {
+  const [tenants, setTenants] = useState<TenantRecord[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [selected, setSelected] = useState<TenantRecord | null>(null)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+
+  const refresh = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const r = await api.list({ perPage: 200 })
+      setTenants(r.items)
+      // Re-resolve selected from refreshed list so drawer reflects latest status.
+      setSelected((s) => (s ? r.items.find((x) => x.id === s.id) ?? null : null))
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    } finally {
+      setLoading(false)
+    }
+  }, [api])
+
+  useEffect(() => {
+    refresh()
+    const id = setInterval(refresh, POLL_MS)
+    return () => clearInterval(id)
+  }, [refresh])
+
+  const onDelete = async () => {
+    if (!selected) return
+    try {
+      await api.remove(selected.id)
+      setConfirmDelete(false)
+      setSelected(null)
+      await refresh()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    }
+  }
+
+  return (
+    <XStack flex={1}>
+      <YStack flex={1} p={24} gap={16}>
+        <XStack items="center" gap={12}>
+          <Text fontSize={24} fontWeight="700" color="#f4f4f5" flex={1}>Tenants</Text>
+          <Button onPress={refresh} disabled={loading}>Refresh</Button>
+          <Button theme="blue" onPress={() => nav.toNew()}>New tenant</Button>
+        </XStack>
+
+        {error && (
+          <Card p={12} bg="#450a0a" borderColor="#7f1d1d" borderWidth={1}>
+            <Text color="#fecaca">{error}</Text>
+          </Card>
+        )}
+
+        <Card bg="#09090b" borderColor="#27272a" borderWidth={1} p={0}>
+          <XStack
+            px={16}
+            py={10}
+            borderBottomWidth={1}
+            borderBottomColor="#27272a"
+            bg="#0a0a0a"
+            gap={16}
+          >
+            <Text flex={1} color="#71717a" fontSize={12} fontWeight="600">SLUG</Text>
+            <Text flex={2} color="#71717a" fontSize={12} fontWeight="600">SUBDOMAIN</Text>
+            <Text width={120} color="#71717a" fontSize={12} fontWeight="600">STATUS</Text>
+            <Text flex={2} color="#71717a" fontSize={12} fontWeight="600">CURRENT WRITER</Text>
+            <Text width={80} color="#71717a" fontSize={12} fontWeight="600" style={{ textAlign: 'right' }}>TERM</Text>
+          </XStack>
+          {tenants.length === 0 ? (
+            <YStack p={32} items="center">
+              <Text color="#71717a">No tenants yet. Create one to get started.</Text>
+            </YStack>
+          ) : (
+            tenants.map((t) => (
+              <TenantRow key={t.id} tenant={t} onClick={setSelected} />
+            ))
+          )}
+        </Card>
+      </YStack>
+
+      {selected && (
+        <YStack
+          width={420}
+          bg="#0a0a0a"
+          borderLeftWidth={1}
+          borderLeftColor="#27272a"
+          p={24}
+          gap={16}
+        >
+          <XStack items="center" gap={12}>
+            <Text fontSize={20} fontWeight="700" color="#f4f4f5" flex={1}>{selected.slug}</Text>
+            <Button size="$2" onPress={() => setSelected(null)}>Close</Button>
+          </XStack>
+          <YStack gap={4}>
+            <Text color="#71717a" fontSize={12}>NAME</Text>
+            <Text color="#f4f4f5">{selected.name}</Text>
+          </YStack>
+          <YStack gap={4}>
+            <Text color="#71717a" fontSize={12}>STATUS</Text>
+            <XStack><TenantStatusBadge status={selected.status} /></XStack>
+          </YStack>
+          <YStack gap={4}>
+            <Text color="#71717a" fontSize={12}>SUBDOMAIN</Text>
+            <Text color="#f4f4f5">{selected.subdomain || '—'}</Text>
+          </YStack>
+          <YStack gap={4}>
+            <Text color="#71717a" fontSize={12}>NAMESPACE</Text>
+            <Text color="#f4f4f5">{selected.namespace}</Text>
+          </YStack>
+          <YStack gap={4}>
+            <Text color="#71717a" fontSize={12}>SPEC</Text>
+            <Text color="#f4f4f5">
+              {selected.spec.replicas} replicas · {selected.spec.storage}
+            </Text>
+          </YStack>
+          <YStack gap={4}>
+            <Text color="#71717a" fontSize={12}>CURRENT WRITER</Text>
+            <Text color="#f4f4f5">{selected.current_writer || '—'}</Text>
+          </YStack>
+          <YStack gap={4}>
+            <Text color="#71717a" fontSize={12}>TERM</Text>
+            <Text color="#f4f4f5">{selected.term}</Text>
+          </YStack>
+          <YStack gap={4}>
+            <Text color="#71717a" fontSize={12}>OWNER</Text>
+            <Text color="#f4f4f5">{selected.owner_iam_user || '—'}</Text>
+          </YStack>
+
+          {selected.status === 'Running' && selected.subdomain ? (
+            <DbAccess tenant={selected} />
+          ) : (
+            <YStack gap={4}>
+              <Text color="#71717a" fontSize={12}>ENDPOINT</Text>
+              <Text color="#52525b">Available once the tenant is Running.</Text>
+            </YStack>
+          )}
+
+          <XStack flex={1} />
+          <Button theme="red" onPress={() => setConfirmDelete(true)}>Delete tenant</Button>
+        </YStack>
+      )}
+
+      <ConfirmDialog
+        open={confirmDelete}
+        title="Delete tenant?"
+        message={`This deletes the "${selected?.slug ?? ''}" tenant record. The operator will tear down the BaseApp and all associated state. This cannot be undone.`}
+        confirmLabel="Delete"
+        destructive
+        onConfirm={onDelete}
+        onCancel={() => setConfirmDelete(false)}
+      />
+    </XStack>
+  )
+}
+
+// What makes a tenant "usable as a database backend": its live endpoints. A
+// Running Base instance always serves the REST/realtime data API at `/v1`
+// (collections, records, auth, files — usable from any app/SDK) and, when the
+// image runs with BASE_ENABLE_ADMIN_UI=1, the visual admin (collections /
+// records / auth / SQL) at `/_/`. We surface both straight off the tenant
+// subdomain so a freshly-provisioned Base is immediately usable.
+function DbAccess({ tenant }: { tenant: TenantRecord }) {
+  const [copied, setCopied] = useState(false)
+  const base = `https://${tenant.subdomain}`
+  const apiBase = `${base}/v1`
+
+  const open = (url: string) => {
+    if (typeof window !== 'undefined') window.open(url, '_blank', 'noopener,noreferrer')
+  }
+  const copy = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1200)
+    } catch {
+      /* clipboard unavailable (insecure context) — no-op */
+    }
+  }
+
+  return (
+    <YStack gap={10} p={12} bg="#09090b" borderColor="#27272a" borderWidth={1} rounded={8}>
+      <Text color="#71717a" fontSize={12} fontWeight="600">USE THIS DATABASE</Text>
+
+      <YStack gap={4}>
+        <Text color="#71717a" fontSize={11}>ENDPOINT</Text>
+        <XStack items="center" gap={8}>
+          <Text color="#f4f4f5" flex={1} numberOfLines={1}>{base}</Text>
+          <Button size="$2" onPress={() => open(base)}>Open ↗</Button>
+        </XStack>
+      </YStack>
+
+      <YStack gap={4}>
+        <Text color="#71717a" fontSize={11}>ADMIN — collections · records · auth · SQL</Text>
+        <XStack items="center" gap={8}>
+          <Text color="#a1a1aa" flex={1} numberOfLines={1}>{base}/_/</Text>
+          <Button size="$2" theme="blue" onPress={() => open(`${base}/_/`)}>Open admin ↗</Button>
+        </XStack>
+      </YStack>
+
+      <YStack gap={4}>
+        <Text color="#71717a" fontSize={11}>REST API</Text>
+        <XStack items="center" gap={8}>
+          <Text color="#a1a1aa" flex={1} numberOfLines={1}>{apiBase}</Text>
+          <Button size="$2" onPress={() => copy(apiBase)}>{copied ? 'Copied' : 'Copy'}</Button>
+        </XStack>
+        <Text color="#52525b" fontSize={11}>
+          e.g. GET {apiBase}/collections/&lt;name&gt;/records
+        </Text>
+      </YStack>
+    </YStack>
+  )
+}