@hanzo/dashboard 0.2.0 → 0.2.2

package/src/lib/components/TenantStatusBadge.tsx

@@ -1,33 +0,0 @@
-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

@@ -1,30 +0,0 @@
-// @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

@@ -1,12 +0,0 @@
-// 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

@@ -1,137 +0,0 @@
-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

@@ -1,229 +0,0 @@
-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>
-  )
-}