feat: tenants admin surface

Adds the first admin screen — /tenants — listing tenants from
GET /api/v1/admin/tenants with search, status badges, plan, created
date, and a per-row menu with suspend / activate / deactivate actions.

Hand-typed shapes in app/lib/arcadia/tenants.ts because arcadia's admin
endpoints aren't yet covered by /api/openapi (same 'ok'-placeholder
issue documented in lib-arcadia-client/scripts/sync-spec.mjs). When
the spec gains coverage, switch to arcadia.typed.GET(...) and drop the
manual types.

Trims the inherited consumer-app sidenav (Resources / Assistant / AI /
Library) down to admin-shaped items: Overview, Tenants, Audit log,
Settings. The unused route files stay in place; they just aren't linked.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/components/layout/app-shell.tsx

@@ -7,6 +7,7 @@ import {
   LayoutDashboard,
   Boxes,
   Activity,
+  Building2,
   Sparkles,
   Bot,
   BookOpen,
@@ -86,11 +87,8 @@ type NavItem = {
 
 const navItems: NavItem[] = [
   { to: "/", icon: LayoutDashboard, label: "Overview", end: true },
-  { to: "/resources", icon: Boxes, label: "Resources" },
+  { to: "/tenants", icon: Building2, label: "Tenants" },
-  { to: "/activity", icon: Activity, label: "Activity" },
+  { to: "/activity", icon: Activity, label: "Audit log" },
-  { to: "/assistant", icon: Sparkles, label: "Assistant" },
-  { to: "/ai", icon: Bot, label: "AI" },
-  { to: "/library", icon: BookOpen, label: "Library" },
   { to: "/settings", icon: Settings, label: "Settings" },
   // CREMA:NAV-ITEMS
 ]

app/lib/arcadia/tenants.ts

@@ -0,0 +1,93 @@
+// Arcadia tenants API helpers.
+//
+// Hand-rolled because /api/v1/admin/tenants isn't covered by arcadia's
+// OpenAPI spec (controller hasn't been wired into OpenApiSpex yet — same
+// "ok"-placeholder issue as some other admin endpoints). When the spec
+// gains coverage, switch to `arcadia.typed.GET("/api/v1/admin/tenants", ...)`
+// and drop these manual types.
+
+import type { ArcadiaClient } from "@crema/arcadia-client"
+
+export type TenantStatus = "active" | "suspended" | "deactivated" | string
+
+export interface TenantPlan {
+  name: string
+  limits: Record<string, unknown>
+}
+
+export interface TenantBranding {
+  logo_url: string | null
+  favicon_url: string | null
+  primary_color: string | null
+  secondary_color: string | null
+  accent_color: string | null
+  custom_css: string | null
+  settings: Record<string, unknown>
+}
+
+export interface TenantSettings {
+  timezone?: string
+  currency?: string
+  [key: string]: unknown
+}
+
+export interface TenantLocalization {
+  locale: string
+  timezone: string
+  currency: string
+  settings: Record<string, unknown>
+}
+
+export interface Tenant {
+  id: string
+  slug: string
+  name: string
+  status: TenantStatus
+  plan: TenantPlan
+  branding: TenantBranding
+  settings: TenantSettings
+  localization: TenantLocalization
+  email_settings: Record<string, unknown>
+  notification_settings: Record<string, unknown>
+  metadata: Record<string, unknown>
+  inserted_at: string
+  updated_at: string
+}
+
+export interface TenantListParams {
+  q?: string
+  status?: TenantStatus
+  page?: number
+  per_page?: number
+}
+
+export async function listTenants(
+  arcadia: ArcadiaClient,
+  params?: TenantListParams,
+): Promise<Tenant[]> {
+  const queryParams: Record<string, string | number | boolean | null | undefined> | undefined = params
+    ? { q: params.q, status: params.status, page: params.page, per_page: params.per_page }
+    : undefined
+  const res = await arcadia.GET<{ data: Tenant[] }>("/api/v1/admin/tenants", { params: queryParams })
+  return res.data
+}
+
+export async function getTenant(arcadia: ArcadiaClient, id: string): Promise<Tenant> {
+  const res = await arcadia.GET<{ data: Tenant }>(`/api/v1/admin/tenants/${id}`)
+  return res.data
+}
+
+export async function suspendTenant(arcadia: ArcadiaClient, id: string): Promise<Tenant> {
+  const res = await arcadia.POST<{ data: Tenant }>(`/api/v1/admin/tenants/${id}/suspend`)
+  return res.data
+}
+
+export async function activateTenant(arcadia: ArcadiaClient, id: string): Promise<Tenant> {
+  const res = await arcadia.POST<{ data: Tenant }>(`/api/v1/admin/tenants/${id}/activate`)
+  return res.data
+}
+
+export async function deactivateTenant(arcadia: ArcadiaClient, id: string): Promise<Tenant> {
+  const res = await arcadia.POST<{ data: Tenant }>(`/api/v1/admin/tenants/${id}/deactivate`)
+  return res.data
+}

app/routes.ts

@@ -10,5 +10,6 @@ export default [
   route("settings", "routes/settings.tsx"),
   route("profile", "routes/profile.tsx"),
   route("login", "routes/login.tsx"),
+  route("tenants", "routes/tenants.tsx"),
   // CREMA:ROUTES
 ] satisfies RouteConfig

app/routes/tenants.tsx

@@ -0,0 +1,276 @@
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { Link } from "react-router"
+import { AlertTriangle, Loader2, MoreHorizontal, Pause, Play, Plus, RefreshCw, Search, X } from "lucide-react"
+
+import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-client"
+
+import { AppShell } from "~/components/layout/app-shell"
+import { Badge } from "~/components/ui/badge"
+import { Button } from "~/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu"
+import { Input } from "~/components/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table"
+import { activateTenant, deactivateTenant, listTenants, suspendTenant, type Tenant, type TenantStatus } from "~/lib/arcadia/tenants"
+import { pageTitle } from "~/lib/page-meta"
+import { useSession } from "~/lib/session"
+
+export const meta = () => pageTitle("Tenants")
+
+export default function TenantsRoute() {
+  const session = useSession()
+  const arcadia = useArcadiaClient()
+
+  const [tenants, setTenants] = useState<Tenant[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [query, setQuery] = useState("")
+
+  const refresh = useCallback(async () => {
+    setError(null)
+    setLoading(true)
+    try {
+      const list = await listTenants(arcadia)
+      setTenants(list)
+    } catch (err) {
+      setError(err instanceof ArcadiaError ? err.message : "Failed to load tenants.")
+    } finally {
+      setLoading(false)
+    }
+  }, [arcadia])
+
+  useEffect(() => {
+    if (session) refresh()
+  }, [session, refresh])
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    if (!q) return tenants
+    return tenants.filter(
+      (t) =>
+        t.name.toLowerCase().includes(q) ||
+        t.slug.toLowerCase().includes(q) ||
+        t.id.toLowerCase().includes(q),
+    )
+  }, [tenants, query])
+
+  if (!session) {
+    return (
+      <AppShell title="Tenants">
+        <div className="p-8">
+          <Card className="max-w-md">
+            <CardHeader>
+              <CardTitle>Sign in required</CardTitle>
+              <CardDescription>
+                Tenant administration requires an admin session.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button asChild>
+                <Link to="/login?next=/tenants">Sign in</Link>
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </AppShell>
+    )
+  }
+
+  return (
+    <AppShell title="Tenants">
+      <div className="flex flex-col gap-4 p-6">
+        <header className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h1 className="text-2xl font-semibold tracking-tight">Tenants</h1>
+            <p className="text-sm text-muted-foreground">
+              Multi-tenant workspaces on this arcadia deployment.
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={refresh}
+              disabled={loading}
+              data-action="tenants-refresh"
+            >
+              <RefreshCw className={`size-4 ${loading ? "animate-spin" : ""}`} />
+              Refresh
+            </Button>
+            <Button size="sm" disabled data-action="tenants-create">
+              <Plus className="size-4" />
+              New tenant
+            </Button>
+          </div>
+        </header>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between gap-4">
+            <div className="relative max-w-sm flex-1">
+              <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                data-action="tenants-search"
+                placeholder="Search by name, slug, or ID"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                className="pl-9"
+              />
+              {query ? (
+                <button
+                  type="button"
+                  data-action="tenants-search-clear"
+                  onClick={() => setQuery("")}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  <X className="size-4" />
+                </button>
+              ) : null}
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {filtered.length} of {tenants.length}
+            </div>
+          </CardHeader>
+
+          <CardContent className="p-0">
+            {error ? (
+              <div className="flex items-start gap-2 border-t border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+                <AlertTriangle className="mt-0.5 size-4 shrink-0" />
+                <span>{error}</span>
+              </div>
+            ) : null}
+
+            {loading && tenants.length === 0 ? (
+              <div className="flex items-center justify-center gap-2 p-12 text-sm text-muted-foreground">
+                <Loader2 className="size-4 animate-spin" />
+                Loading tenants…
+              </div>
+            ) : filtered.length === 0 ? (
+              <div className="p-12 text-center text-sm text-muted-foreground">
+                {query ? "No tenants match that search." : "No tenants yet."}
+              </div>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Name</TableHead>
+                    <TableHead>Slug</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead>Plan</TableHead>
+                    <TableHead>Created</TableHead>
+                    <TableHead className="w-10" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filtered.map((t) => (
+                    <TenantRow key={t.id} tenant={t} onChange={refresh} />
+                  ))}
+                </TableBody>
+              </Table>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </AppShell>
+  )
+}
+
+function TenantRow({ tenant, onChange }: { tenant: Tenant; onChange: () => void | Promise<void> }) {
+  const arcadia = useArcadiaClient()
+  const [busy, setBusy] = useState(false)
+
+  const act = async (fn: () => Promise<unknown>) => {
+    setBusy(true)
+    try {
+      await fn()
+      await onChange()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <TableRow data-action={`tenants-row-${tenant.slug}`}>
+      <TableCell className="font-medium">{tenant.name}</TableCell>
+      <TableCell>
+        <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">{tenant.slug}</code>
+      </TableCell>
+      <TableCell>
+        <StatusBadge status={tenant.status} />
+      </TableCell>
+      <TableCell>
+        <span className="text-sm text-muted-foreground">{tenant.plan?.name ?? "—"}</span>
+      </TableCell>
+      <TableCell>
+        <span className="text-xs text-muted-foreground">{formatDate(tenant.inserted_at)}</span>
+      </TableCell>
+      <TableCell>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              disabled={busy}
+              data-action={`tenants-row-${tenant.slug}-menu`}
+            >
+              {busy ? <Loader2 className="size-4 animate-spin" /> : <MoreHorizontal className="size-4" />}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {tenant.status === "active" ? (
+              <DropdownMenuItem onClick={() => act(() => suspendTenant(arcadia, tenant.id))}>
+                <Pause className="size-4" />
+                Suspend
+              </DropdownMenuItem>
+            ) : (
+              <DropdownMenuItem onClick={() => act(() => activateTenant(arcadia, tenant.id))}>
+                <Play className="size-4" />
+                Activate
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => act(() => deactivateTenant(arcadia, tenant.id))}>
+              Deactivate
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </TableCell>
+    </TableRow>
+  )
+}
+
+function StatusBadge({ status }: { status: TenantStatus }) {
+  const variant: "default" | "secondary" | "destructive" | "outline" =
+    status === "active" ? "default" : status === "suspended" ? "secondary" : "outline"
+  return (
+    <Badge variant={variant} className="capitalize">
+      {status}
+    </Badge>
+  )
+}
+
+function formatDate(iso: string): string {
+  try {
+    return new Date(iso).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })
+  } catch {
+    return iso
+  }
+}