@hanzo/dashboard 0.2.0 → 0.2.1

package/src/pipeline/Pipeline.tsx

@@ -0,0 +1,178 @@
+'use client'
+
+/**
+ * Pipeline — the animated deploy-stage line. A horizontal track with N stages:
+ * completed stages fill in with a check, the current stage pulses, the active leg
+ * shows a flowing gradient, and a failure turns the reached stage red. Purely
+ * presentational — driven by a `stages` prop (each `{ name, state }`); the consumer
+ * derives those from a real status string with the pure `pipelineModel` and polls
+ * to pass fresh stages. Reduced motion → a static, filled line.
+ *
+ * All geometry derives from the stage states, so it renders whatever pipeline the
+ * caller supplies (the default four-stage deploy line, or a custom set).
+ */
+import { useContainerWidth } from '../charts/Charts'
+import { useReducedMotion } from '../motion/hooks'
+import type { PipelineStage, StageState } from './stages'
+import { Text, XStack, YStack } from '@hanzo/gui'
+
+const ACCENT = '#7c5cff'
+const GREEN = '#23c562'
+const RED = '#ff5d8f'
+const MUTED = 'rgba(148,163,184,0.28)'
+
+export interface PipelineProps {
+  /** The stages to render, in order (derive via `pipelineModel(status).stages`). */
+  stages: PipelineStage[]
+  /** A short status label shown above the track (e.g. `pipelineModel(...).label`). */
+  label?: string
+  /** Accent tone for the filled track + active stage. Defaults by state (green live / red error / purple). */
+  tone?: string
+  /** Animate the active leg + pulse. Default true; reduced motion still forces static. */
+  animate?: boolean
+}
+
+export function Pipeline({ stages, label, tone, animate = true }: PipelineProps) {
+  const reduced = useReducedMotion()
+
+  const n = stages.length
+  const errorIdx = stages.findIndex((s) => s.state === 'error')
+  const activeStateIdx = stages.findIndex((s) => s.state === 'active')
+  const doneCount = stages.filter((s) => s.state === 'done').length
+  const errored = errorIdx >= 0
+  const live = n > 0 && doneCount === n && !errored
+  const activeIndex = errored ? errorIdx : activeStateIdx >= 0 ? activeStateIdx : live ? n - 1 : -1
+  const inProgress = activeStateIdx >= 0 && !errored && !live
+
+  const accent = tone ?? (errored ? RED : live ? GREEN : ACCENT)
+
+  return (
+    <YStack gap="$3" aria-label={label ? `Deployment: ${label}` : 'Deployment pipeline'}>
+      {label ? (
+        <XStack items="center" gap="$2">
+          <YStack width={9} height={9} rounded="$10" style={{ backgroundColor: accent }} className={animate && !reduced && inProgress ? 'hz-pipe-dot' : undefined} />
+          <Text fontSize="$3" fontWeight="700" color="$color12">
+            {label}
+          </Text>
+        </XStack>
+      ) : null}
+      <Track stages={stages} activeIndex={activeIndex} inProgress={inProgress} reduced={reduced || !animate} tone={accent} />
+    </YStack>
+  )
+}
+
+// ── The SVG track + aligned labels ───────────────────────────────────────────
+
+function Track({ stages, activeIndex, inProgress, reduced, tone }: { stages: PipelineStage[]; activeIndex: number; inProgress: boolean; reduced: boolean; tone: string }) {
+  const { ref, w } = useContainerWidth()
+  const n = stages.length
+  const H = 60
+  const padX = 24
+  const trackY = 28
+  const usable = Math.max(1, w - padX * 2)
+  const x = (i: number) => padX + (n <= 1 ? 0 : (i / (n - 1)) * usable)
+
+  const fillTo = activeIndex < 0 ? x(0) : x(activeIndex)
+  const flowing = !reduced && inProgress && activeIndex >= 0 && activeIndex < n - 1
+  const flowStart = x(Math.max(0, activeIndex))
+  const flowEnd = x(Math.min(activeIndex + 1, n - 1))
+
+  return (
+    <div ref={ref} style={{ width: '100%' }}>
+      {w > 0 ? (
+        <>
+          <svg width={w} height={H} style={{ display: 'block', overflow: 'visible' }} role="presentation">
+            <defs>
+              <linearGradient id="hz-pipe-grad" x1="0" y1="0" x2="1" y2="0">
+                <stop offset="0%" stopColor={tone} stopOpacity="0.15" />
+                <stop offset="50%" stopColor={tone} stopOpacity="1" />
+                <stop offset="100%" stopColor={tone} stopOpacity="0.15" />
+              </linearGradient>
+            </defs>
+
+            {/* base track */}
+            <line x1={x(0)} y1={trackY} x2={x(n - 1)} y2={trackY} stroke={MUTED} strokeWidth={4} strokeLinecap="round" />
+
+            {/* filled (completed) track */}
+            {fillTo > x(0) ? <line x1={x(0)} y1={trackY} x2={fillTo} y2={trackY} stroke={tone} strokeWidth={4} strokeLinecap="round" /> : null}
+
+            {/* flowing gradient on the active leg */}
+            {flowing ? (
+              <line x1={flowStart} y1={trackY} x2={flowEnd} y2={trackY} stroke="url(#hz-pipe-grad)" strokeWidth={4} strokeLinecap="round" className="hz-pipe-flow" />
+            ) : null}
+
+            {/* stages */}
+            {stages.map((st, i) => (
+              <Stage key={st.name} cx={x(i)} cy={trackY} state={st.state} tone={tone} reduced={reduced} />
+            ))}
+          </svg>
+
+          {/* labels aligned under each stage */}
+          <div style={{ position: 'relative', width: w, height: 30, marginTop: 2 }}>
+            {stages.map((st, i) => (
+              <div
+                key={st.name}
+                style={{
+                  position: 'absolute',
+                  left: x(i),
+                  transform: i === 0 ? 'translateX(0)' : i === n - 1 ? 'translateX(-100%)' : 'translateX(-50%)',
+                  textAlign: i === 0 ? 'left' : i === n - 1 ? 'right' : 'center',
+                  maxWidth: 110,
+                }}
+              >
+                <StageLabel name={st.name} state={st.state} />
+              </div>
+            ))}
+          </div>
+        </>
+      ) : (
+        <div style={{ height: H + 30 }} />
+      )}
+    </div>
+  )
+}
+
+function StageLabel({ name, state }: { name: string; state: StageState }) {
+  const sub = state === 'active' ? 'in progress' : state === 'error' ? 'failed' : state === 'done' ? 'done' : ''
+  return (
+    <YStack gap="$0.5">
+      <Text fontSize="$1" fontWeight={state === 'active' || state === 'error' ? '800' : '600'} color={state === 'pending' ? '$color9' : '$color12'} numberOfLines={1}>
+        {name}
+      </Text>
+      <Text fontSize="$1" style={state === 'error' ? { color: RED } : undefined} color={state === 'error' ? undefined : '$color10'}>
+        {sub || ' '}
+      </Text>
+    </YStack>
+  )
+}
+
+function Stage({ cx, cy, state, tone, reduced }: { cx: number; cy: number; state: StageState; tone: string; reduced: boolean }) {
+  const r = 11
+  if (state === 'done') {
+    return (
+      <g>
+        <circle cx={cx} cy={cy} r={r} fill={tone} />
+        <path d={`M${cx - 4.5},${cy + 0.5} L${cx - 1.5},${cy + 3.5} L${cx + 4.5},${cy - 3.5}`} fill="none" stroke="#fff" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+    )
+  }
+  if (state === 'error') {
+    return (
+      <g>
+        <circle cx={cx} cy={cy} r={r} fill={RED} />
+        <path d={`M${cx - 3.5},${cy - 3.5} L${cx + 3.5},${cy + 3.5} M${cx + 3.5},${cy - 3.5} L${cx - 3.5},${cy + 3.5}`} stroke="#fff" strokeWidth={2} strokeLinecap="round" />
+      </g>
+    )
+  }
+  if (state === 'active') {
+    return (
+      <g>
+        {!reduced ? <circle cx={cx} cy={cy} r={r} fill={tone} className="hz-pipe-pulse" /> : null}
+        <circle cx={cx} cy={cy} r={r} fill="var(--color2, #14161a)" stroke={tone} strokeWidth={3} />
+        <circle cx={cx} cy={cy} r={4} fill={tone} />
+      </g>
+    )
+  }
+  // pending
+  return <circle cx={cx} cy={cy} r={r} fill="var(--color2, #14161a)" stroke={MUTED} strokeWidth={2} />
+}

package/src/pipeline/stages.ts

@@ -0,0 +1,156 @@
+/**
+ * Deploy-stage pipeline domain logic — PURE, no UI, no I/O, unit-testable.
+ *
+ * A deploy moves through four stages: Queued → Building → Deploying → Live. This
+ * maps a REAL app/deployment status string (building | deploying | live | error |
+ * queued | …) onto that pipeline and decides, per stage, whether it is done /
+ * active / pending / errored, plus an overall progress fraction and an honest
+ * status label.
+ *
+ * Honesty: this never fabricates progress. The stage is derived from the real
+ * status, and the caller passes the FURTHEST stage it has actually OBSERVED
+ * (monotonic across polls) so an `error` marks the stage the deploy truly reached —
+ * not a guess.
+ */
+
+/** The four pipeline stages, in order. */
+export const PIPELINE_STAGES = ['Queued', 'Building', 'Deploying', 'Live'] as const
+export type PipelineStageName = (typeof PIPELINE_STAGES)[number]
+
+/** Canonical pipeline phase, normalized from any backend status string. */
+export type PipelinePhase = 'idle' | 'queued' | 'building' | 'deploying' | 'live' | 'error'
+
+/** Per-stage render state. */
+export type StageState = 'done' | 'active' | 'error' | 'pending'
+
+/** One stage in the rendered pipeline. */
+export type PipelineStage = { name: string; state: StageState }
+
+/** The full derived model a `Pipeline` renders from. */
+export type PipelineModel = {
+  phase: PipelinePhase
+  /** Index (0..3) of the current stage; -1 when idle (nothing deploying). */
+  activeIndex: number
+  /** Reached the final stage. */
+  live: boolean
+  /** The deploy failed. */
+  errored: boolean
+  /** True while actively progressing (has a stage to animate toward). */
+  inProgress: boolean
+  stages: PipelineStage[]
+  /** 0..1 fraction of the line filled (static progress / aria-valuenow). */
+  progress: number
+  /** A short, honest status label ("Building…", "Live", "Failed while deploying"). */
+  label: string
+}
+
+const N = PIPELINE_STAGES.length
+
+const QUEUED = new Set(['queued', 'queue', 'waiting', 'accepted', 'created', 'pending'])
+const BUILDING = new Set(['building', 'build', 'in_progress', 'inprogress', 'compiling'])
+const DEPLOYING = new Set(['deploying', 'deploy', 'rollout', 'rolling', 'releasing', 'provisioning'])
+const LIVE = new Set(['live', 'ready', 'running', 'available', 'succeeded', 'success', 'active', 'healthy', 'superseded'])
+const ERROR = new Set(['error', 'errored', 'failed', 'failure', 'crashed', 'canceled', 'cancelled', 'timeout'])
+const IDLE = new Set(['', 'draft', 'stopped', 'paused', 'idle', 'unknown', 'none', 'new'])
+
+/** Normalize any app/deployment status string to a canonical pipeline phase. */
+export function pipelinePhase(status?: string | null): PipelinePhase {
+  const s = (status ?? '').trim().toLowerCase()
+  if (ERROR.has(s)) return 'error'
+  if (LIVE.has(s)) return 'live'
+  if (DEPLOYING.has(s)) return 'deploying'
+  if (BUILDING.has(s)) return 'building'
+  if (QUEUED.has(s)) return 'queued'
+  if (IDLE.has(s)) return 'idle'
+  return 'idle'
+}
+
+/** The stage index (0..3) a phase sits at; -1 for idle/error (error uses `furthest`). */
+export function stageIndex(phase: PipelinePhase): number {
+  switch (phase) {
+    case 'queued':
+      return 0
+    case 'building':
+      return 1
+    case 'deploying':
+      return 2
+    case 'live':
+      return N - 1
+    default:
+      return -1
+  }
+}
+
+/** Terminal phases (live or error) — the poller stops here. */
+export function isTerminalPhase(phase: PipelinePhase): boolean {
+  return phase === 'live' || phase === 'error'
+}
+
+/** A short, honest status label for the pipeline. */
+function pipelineLabel(phase: PipelinePhase, activeIndex: number, status?: string | null): string {
+  switch (phase) {
+    case 'live':
+      return 'Live'
+    case 'queued':
+      return 'Queued'
+    case 'building':
+      return 'Building…'
+    case 'deploying':
+      return 'Deploying…'
+    case 'error': {
+      if (activeIndex <= 0) return 'Failed in queue'
+      const at = PIPELINE_STAGES[Math.min(activeIndex, N - 1)].toLowerCase()
+      return `Failed while ${at}`
+    }
+    default: {
+      const s = (status ?? '').trim()
+      if (!s || s.toLowerCase() === 'draft' || s.toLowerCase() === 'new') return 'Not deployed'
+      return s.charAt(0).toUpperCase() + s.slice(1)
+    }
+  }
+}
+
+/**
+ * Build the pipeline model from a status string and the FURTHEST stage index
+ * observed so far (monotonic across polls; default -1 = none observed). The furthest
+ * index makes an `error` mark the stage the deploy actually reached, and keeps
+ * completed stages filled even if a later poll returns a transient earlier status.
+ */
+export function pipelineModel(status?: string | null, furthestReached = -1): PipelineModel {
+  const phase = pipelinePhase(status)
+  const idx = stageIndex(phase)
+  const reached = Math.max(furthestReached, idx)
+
+  const live = phase === 'live'
+  const errored = phase === 'error'
+
+  let activeIndex: number
+  if (live) activeIndex = N - 1
+  else if (errored) activeIndex = reached >= 0 ? Math.min(reached, N - 1) : 0
+  else if (phase === 'idle') activeIndex = -1 // nothing deploying — a neutral pipeline
+  else activeIndex = Math.min(reached, N - 1) // active: monotonic (never backslides)
+
+  const stages: PipelineStage[] = PIPELINE_STAGES.map((name, i): PipelineStage => {
+    if (live) return { name, state: 'done' }
+    if (errored) {
+      if (i < activeIndex) return { name, state: 'done' }
+      if (i === activeIndex) return { name, state: 'error' }
+      return { name, state: 'pending' }
+    }
+    if (activeIndex < 0) return { name, state: 'pending' } // idle: nothing started
+    if (i < activeIndex) return { name, state: 'done' }
+    if (i === activeIndex) return { name, state: 'active' }
+    return { name, state: 'pending' }
+  })
+
+  const progress = live ? 1 : activeIndex < 0 ? 0 : activeIndex / (N - 1)
+  const inProgress = !live && !errored && activeIndex >= 0
+  const label = pipelineLabel(phase, activeIndex, status)
+
+  return { phase, activeIndex, live, errored, inProgress, stages, progress, label }
+}
+
+/** The accent tone for a model: red on failure, green on live, else the accent. */
+export function pipelineTone(model: Pick<PipelineModel, 'live' | 'errored'>, accent = '#7c5cff'): string {
+  return model.errored ? '#ff5d8f' : model.live ? '#23c562' : accent
+}

package/src/types.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared cross-module types for @hanzo/dashboard.
+ */
+import type { ComponentType } from 'react'
+
+/**
+ * A lucide-style icon component — the shape the dashboard passes around for
+ * consumer-supplied product/tile/action icons. Structural (not tied to a specific
+ * icon package) so the config types stay pure and any `size`/`color` icon fits
+ * (e.g. `@hanzogui/lucide-icons-2` or `lucide-react` icons).
+ */
+export type IconComponent = ComponentType<{ size?: number | string; color?: string; opacity?: number }>

package/readme.md

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

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

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

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