Add Buckets, Monitoring, Memberships, Networking, SSO, Announcements, Status page

Full set of admin surfaces on top of /platform/* and /admin/* endpoints,
plus a migration of /assistant onto @crema/llm-providers-ui.

Buckets (/buckets):
  S3-level CRUD over /platform/buckets — list, create, delete (with the
  6-digit confirmation flow the backend enforces), per-bucket configure
  for versioning / CORS rules / policy JSON, plus an object browser
  with FileGrid/FileList from @crema/file-ui and presigned-URL reveal.
  Storage-config picker scopes the view to one credential at a time.

Monitoring (/monitoring):
  Live dashboard. Service health board derived from indirect signals
  (status-ui OverallStatus + ComponentRow). KPI tiles for sessions,
  jobs, audit. Tabs: background jobs (Donut + BarChart + retry recent),
  sessions (Sparkline of last 24h sign-ins), audit activity (BarChart
  of severity / top resource types), infrastructure (DO summary +
  WorldMapSvg coloured by droplet region + droplet list + Spaces),
  rate limits. 30s auto-refresh.

Memberships (/memberships):
  M:N glue between users and tenants over /admin/memberships. Add /
  edit / suspend / activate / remove with role multi-select.

Networking (/networking):
  Tabs over /platform/{firewalls,vpcs,domains,floating_ips}.
  Read/delete on firewalls, read on VPCs, full DNS-record CRUD, and
  inline assign/unassign for floating IPs.

SSO (/sso):
  /sso/identity-providers CRUD with PEM cert as write-only field, plus
  /sso/sessions list with destroy.

Announcements (/announcements):
  /admin/announcements CRUD. Platform-wide vs per-tenant audience,
  schedule windows, dismissible + active toggles.

Status page (/status-page):
  /admin/status-page/{components,incidents,subscribers}. Components
  CRUD, incidents with timeline + post-update + resolve flow,
  subscriber list. Public preview at the top using StatusBoard +
  IncidentTimeline from @crema/status-ui.

Assistant migration:
  /assistant now uses @crema/llm-providers-ui (provider catalog +
  vault key resolution) instead of ~/lib/llm-settings. Same async
  buildAdapter() flow used by /ai. The legacy lib file is now
  unreferenced and can be removed when ready.

New sibling libs wired (cloned from CremaUIStudio):
  lib-file-ui, lib-card-ui, lib-dashboard-ui, lib-chart-ui,
  lib-map-ui, lib-status-ui.

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

app/routes/sso.tsx

@@ -0,0 +1,676 @@
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { Link } from "react-router"
+import {
+  CheckCircle2,
+  KeyRound,
+  Plus,
+  RefreshCw,
+  ShieldCheck,
+  Trash2,
+  X,
+} from "lucide-react"
+
+import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-client"
+import {
+  ActionsCell,
+  BadgeCell,
+  DataTable,
+  DateCell,
+  Pagination,
+  useTable,
+  type ActionItem,
+  type BadgeTone,
+  type Column,
+} from "@crema/table-ui"
+import { AlertBanner, ConfirmDialog, EmptyState, LoadingOverlay } from "@crema/feedback-ui"
+
+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 {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog"
+import { Input } from "~/components/ui/input"
+import { Label } from "~/components/ui/label"
+import { Switch } from "~/components/ui/switch"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs"
+import { Textarea } from "~/components/ui/textarea"
+import {
+  createIdentityProvider,
+  deleteIdentityProvider,
+  destroySamlSession,
+  listIdentityProviders,
+  listSamlSessions,
+  updateIdentityProvider,
+  type IdentityProvider,
+  type IdentityProviderInput,
+  type SamlSession,
+} from "~/lib/arcadia/sso"
+import { pageTitle } from "~/lib/page-meta"
+import { useSession } from "~/lib/session"
+import { useRegisterAdminContext } from "~/lib/admin-context"
+
+export const meta = () => pageTitle("SSO")
+
+type Editor =
+  | { kind: "create" }
+  | { kind: "edit"; idp: IdentityProvider }
+  | null
+
+export default function SsoRoute() {
+  const session = useSession()
+  const arcadia = useArcadiaClient()
+
+  const [idps, setIdps] = useState<IdentityProvider[]>([])
+  const [sessions, setSessions] = useState<SamlSession[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [info, setInfo] = useState<string | null>(null)
+  const [editor, setEditor] = useState<Editor>(null)
+  const [pendingDelete, setPendingDelete] = useState<IdentityProvider | null>(null)
+  const [pendingSessionDestroy, setPendingSessionDestroy] = useState<SamlSession | null>(null)
+
+  const refresh = useCallback(async () => {
+    setError(null)
+    setLoading(true)
+    try {
+      const [i, s] = await Promise.all([
+        listIdentityProviders(arcadia).catch(() => [] as IdentityProvider[]),
+        listSamlSessions(arcadia).catch(() => [] as SamlSession[]),
+      ])
+      setIdps(i)
+      setSessions(s)
+    } catch (err) {
+      setError(err instanceof ArcadiaError ? err.message : "Failed to load SSO data.")
+    } finally {
+      setLoading(false)
+    }
+  }, [arcadia])
+
+  useEffect(() => {
+    if (session) refresh()
+  }, [session, refresh])
+
+  useRegisterAdminContext("sso", {
+    identity_providers: idps.length,
+    enabled_idps: idps.filter((i) => i.enabled).length,
+    active_sessions: sessions.length,
+  })
+
+  const idpColumns = useMemo<Column<IdentityProvider>[]>(
+    () => [
+      {
+        id: "name",
+        header: "Name",
+        accessor: "name",
+        sortable: true,
+        cell: (i) => (
+          <div className="flex flex-col">
+            <span className="text-sm font-medium">{i.name}</span>
+            <code className="font-mono text-[10px] text-muted-foreground">{i.entity_id}</code>
+          </div>
+        ),
+      },
+      {
+        id: "enabled",
+        header: "Enabled",
+        accessor: "enabled",
+        sortable: true,
+        cell: (i) => (
+          <BadgeCell label={i.enabled ? "enabled" : "disabled"} tone={i.enabled ? "success" : "default"} />
+        ),
+      },
+      {
+        id: "cert",
+        header: "Certificate",
+        cell: (i) =>
+          i.has_certificate ? (
+            <Badge variant="secondary" className="font-mono text-[10px]">
+              <ShieldCheck className="mr-1 size-3" /> set
+            </Badge>
+          ) : (
+            <Badge variant="outline" className="font-mono text-[10px]">
+              missing
+            </Badge>
+          ),
+      },
+      {
+        id: "sso_url",
+        header: "SSO URL",
+        cell: (i) => (
+          <code className="font-mono text-xs text-muted-foreground">{i.sso_url}</code>
+        ),
+      },
+      {
+        id: "updated",
+        header: "Updated",
+        accessor: "updated_at",
+        sortable: true,
+        cell: (i) => <DateCell value={i.updated_at} format="short" />,
+      },
+      {
+        id: "actions",
+        header: "",
+        align: "right",
+        cell: (i) => {
+          const items: ActionItem[] = [
+            {
+              id: "edit",
+              label: "Edit",
+              dataAction: `idp-${i.id}-edit`,
+              onSelect: () => setEditor({ kind: "edit", idp: i }),
+            },
+            {
+              id: i.enabled ? "disable" : "enable",
+              label: i.enabled ? "Disable" : "Enable",
+              dataAction: `idp-${i.id}-toggle`,
+              onSelect: async () => {
+                try {
+                  await updateIdentityProvider(arcadia, i.id, { enabled: !i.enabled })
+                  setInfo(`${i.name} ${i.enabled ? "disabled" : "enabled"}.`)
+                  await refresh()
+                } catch (err) {
+                  setError(err instanceof ArcadiaError ? err.message : "Toggle failed.")
+                }
+              },
+            },
+            {
+              id: "delete",
+              label: "Delete",
+              icon: <Trash2 className="size-4" />,
+              destructive: true,
+              dataAction: `idp-${i.id}-delete`,
+              onSelect: () => setPendingDelete(i),
+            },
+          ]
+          return <ActionsCell items={items} triggerDataAction={`idp-${i.id}-actions`} />
+        },
+      },
+    ],
+    [arcadia, refresh],
+  )
+
+  const idpTable = useTable<IdentityProvider>({
+    data: idps,
+    columns: idpColumns,
+    getRowId: (i) => i.id,
+    initialPageSize: 25,
+  })
+
+  if (!session) {
+    return (
+      <AppShell title="SSO">
+        <div className="p-8">
+          <Card className="max-w-md">
+            <CardHeader>
+              <CardTitle>Sign in required</CardTitle>
+              <CardDescription>SSO administration requires an admin session.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button asChild>
+                <Link to="/login?next=/sso">Sign in</Link>
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </AppShell>
+    )
+  }
+
+  return (
+    <AppShell title="SSO">
+      <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">Single sign-on</h1>
+            <p className="text-sm text-muted-foreground">
+              SAML identity providers configured for the current tenant, plus the active SAML
+              session pool.
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" onClick={refresh} disabled={loading} data-action="sso-refresh">
+              <RefreshCw className={`size-4 ${loading ? "animate-spin" : ""}`} />
+              Refresh
+            </Button>
+            <Button size="sm" onClick={() => setEditor({ kind: "create" })} data-action="sso-create">
+              <Plus className="size-4" />
+              New IdP
+            </Button>
+          </div>
+        </header>
+
+        {error ? (
+          <AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
+            {error}
+          </AlertBanner>
+        ) : null}
+        {info ? (
+          <AlertBanner variant="success" dismissible onDismiss={() => setInfo(null)}>
+            {info}
+          </AlertBanner>
+        ) : null}
+
+        <Tabs defaultValue="idps">
+          <TabsList>
+            <TabsTrigger value="idps" data-action="sso-tab-idps">
+              Identity providers ({idps.length})
+            </TabsTrigger>
+            <TabsTrigger value="sessions" data-action="sso-tab-sessions">
+              Active sessions ({sessions.length})
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="idps" className="pt-4">
+            <Card>
+              <CardContent className="relative p-0">
+                <LoadingOverlay active={loading && idps.length === 0} label="Loading IdPs…" />
+                {idpTable.total === 0 && !loading ? (
+                  <EmptyState
+                    icon={<KeyRound className="size-6" />}
+                    title="No identity providers."
+                    description="Connect a SAML IdP (Okta, Azure AD, Google Workspace, etc.) to enable SSO for this tenant."
+                    className="py-12"
+                  />
+                ) : (
+                  <>
+                    <DataTable
+                      columns={idpColumns}
+                      rows={idpTable.pageRows}
+                      getRowId={(i) => i.id}
+                      sort={idpTable.sort}
+                      onSortToggle={idpTable.toggleSort}
+                      loading={loading && idps.length > 0}
+                      stickyHeader
+                    />
+                    <Pagination
+                      page={idpTable.page}
+                      pageSize={idpTable.pageSize}
+                      total={idpTable.total}
+                      onPageChange={idpTable.setPage}
+                      onPageSizeChange={idpTable.setPageSize}
+                    />
+                  </>
+                )}
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="sessions" className="pt-4">
+            <Card>
+              <CardContent className="p-0">
+                {sessions.length === 0 ? (
+                  <EmptyState
+                    title="No active SAML sessions."
+                    description="Sessions appear here once users authenticate via the IdP."
+                    className="py-12"
+                  />
+                ) : (
+                  <ul className="divide-y border-y">
+                    {sessions.map((s) => (
+                      <li
+                        key={s.id}
+                        className="flex items-center justify-between gap-3 px-3 py-2 text-sm"
+                      >
+                        <div className="flex flex-col gap-0.5">
+                          <span className="flex items-center gap-2">
+                            <code className="font-mono text-xs">{s.name_id ?? s.user_id}</code>
+                            {s.expires_at && new Date(s.expires_at).getTime() < Date.now() ? (
+                              <Badge variant="destructive">expired</Badge>
+                            ) : (
+                              <Badge>active</Badge>
+                            )}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            session_index: {s.session_index ?? "—"} · idp:{" "}
+                            {s.idp_id.slice(0, 8)}… · started{" "}
+                            {new Date(s.inserted_at).toLocaleString()}
+                            {s.expires_at
+                              ? ` · expires ${new Date(s.expires_at).toLocaleString()}`
+                              : ""}
+                          </span>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => setPendingSessionDestroy(s)}
+                          data-action={`sso-session-${s.id}-destroy`}
+                        >
+                          <X className="size-3.5" />
+                          Destroy
+                        </Button>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      <ConfirmDialog
+        open={pendingDelete !== null}
+        onOpenChange={(o) => !o && setPendingDelete(null)}
+        title="Delete identity provider?"
+        description={
+          pendingDelete
+            ? `${pendingDelete.name} will be removed. Existing SAML sessions remain valid until they expire.`
+            : ""
+        }
+        confirmLabel="Delete"
+        variant="danger"
+        onConfirm={async () => {
+          if (!pendingDelete) return
+          try {
+            await deleteIdentityProvider(arcadia, pendingDelete.id)
+            setPendingDelete(null)
+            setInfo("Identity provider deleted.")
+            await refresh()
+          } catch (err) {
+            setError(err instanceof ArcadiaError ? err.message : "Delete failed.")
+            setPendingDelete(null)
+          }
+        }}
+      />
+
+      <ConfirmDialog
+        open={pendingSessionDestroy !== null}
+        onOpenChange={(o) => !o && setPendingSessionDestroy(null)}
+        title="Destroy SAML session?"
+        description={
+          pendingSessionDestroy
+            ? `Session for ${pendingSessionDestroy.name_id ?? pendingSessionDestroy.user_id} will be revoked.`
+            : ""
+        }
+        confirmLabel="Destroy"
+        variant="danger"
+        onConfirm={async () => {
+          if (!pendingSessionDestroy) return
+          try {
+            await destroySamlSession(arcadia, pendingSessionDestroy.id)
+            setPendingSessionDestroy(null)
+            setInfo("Session destroyed.")
+            await refresh()
+          } catch (err) {
+            setError(err instanceof ArcadiaError ? err.message : "Destroy failed.")
+            setPendingSessionDestroy(null)
+          }
+        }}
+      />
+
+      <IdpEditorDialog
+        state={editor}
+        onClose={() => setEditor(null)}
+        onSaved={async (msg) => {
+          setEditor(null)
+          if (msg) setInfo(msg)
+          await refresh()
+        }}
+        onError={setError}
+      />
+    </AppShell>
+  )
+}
+
+function IdpEditorDialog({
+  state,
+  onClose,
+  onSaved,
+  onError,
+}: {
+  state: Editor
+  onClose: () => void
+  onSaved: (msg?: string) => Promise<void>
+  onError: (msg: string | null) => void
+}) {
+  const arcadia = useArcadiaClient()
+  const open = state !== null
+  const isEdit = state?.kind === "edit"
+  const initial = isEdit ? state.idp : null
+
+  const [name, setName] = useState("")
+  const [entityId, setEntityId] = useState("")
+  const [ssoUrl, setSsoUrl] = useState("")
+  const [sloUrl, setSloUrl] = useState("")
+  const [metadataUrl, setMetadataUrl] = useState("")
+  const [callbackUrl, setCallbackUrl] = useState("")
+  const [signRequests, setSignRequests] = useState(false)
+  const [enabled, setEnabled] = useState(true)
+  const [certificate, setCertificate] = useState("")
+  const [attrJson, setAttrJson] = useState("{}")
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (!open) return
+    if (initial) {
+      setName(initial.name)
+      setEntityId(initial.entity_id)
+      setSsoUrl(initial.sso_url)
+      setSloUrl(initial.slo_url ?? "")
+      setMetadataUrl(initial.metadata_url ?? "")
+      setCallbackUrl(initial.callback_url ?? "")
+      setSignRequests(initial.sign_requests)
+      setEnabled(initial.enabled)
+      setCertificate("") // never pre-fill
+      setAttrJson(JSON.stringify(initial.attribute_mapping ?? {}, null, 2))
+    } else {
+      setName("")
+      setEntityId("")
+      setSsoUrl("")
+      setSloUrl("")
+      setMetadataUrl("")
+      setCallbackUrl("")
+      setSignRequests(false)
+      setEnabled(true)
+      setCertificate("")
+      setAttrJson('{\n  "email": "email",\n  "first_name": "givenName",\n  "last_name": "surname"\n}')
+    }
+  }, [open, initial])
+
+  const submit = async () => {
+    onError(null)
+    setSaving(true)
+    try {
+      let attribute_mapping: Record<string, string> = {}
+      try {
+        attribute_mapping = attrJson.trim() === "" ? {} : JSON.parse(attrJson)
+      } catch {
+        throw new Error("Attribute mapping must be valid JSON (key→value strings).")
+      }
+      const input: IdentityProviderInput = {
+        name,
+        entity_id: entityId,
+        sso_url: ssoUrl,
+        slo_url: sloUrl || null,
+        metadata_url: metadataUrl || null,
+        callback_url: callbackUrl || null,
+        sign_requests: signRequests,
+        enabled,
+        attribute_mapping,
+      }
+      if (certificate.trim()) input.certificate = certificate
+
+      if (isEdit && initial) {
+        await updateIdentityProvider(arcadia, initial.id, input)
+        await onSaved("Identity provider updated.")
+      } else {
+        await createIdentityProvider(arcadia, input)
+        await onSaved("Identity provider created.")
+      }
+    } catch (err) {
+      onError(
+        err instanceof ArcadiaError
+          ? err.message
+          : err instanceof Error
+            ? err.message
+            : "Save failed.",
+      )
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{isEdit ? `Edit ${initial?.name}` : "New identity provider"}</DialogTitle>
+          <DialogDescription>
+            {isEdit
+              ? "Leave the certificate field blank to keep the existing one."
+              : "Paste values from the IdP metadata XML, or supply the metadata URL and let arcadia fetch the rest."}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div className="col-span-2 flex flex-col gap-1.5">
+            <Label htmlFor="idp-name">Name</Label>
+            <Input
+              id="idp-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Okta — Production"
+              data-action="idp-form-name"
+            />
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="idp-entity">Entity ID</Label>
+            <Input
+              id="idp-entity"
+              value={entityId}
+              onChange={(e) => setEntityId(e.target.value)}
+              placeholder="https://idp.example.com/saml"
+              className="font-mono text-xs"
+              data-action="idp-form-entity"
+            />
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="idp-sso">SSO URL</Label>
+            <Input
+              id="idp-sso"
+              value={ssoUrl}
+              onChange={(e) => setSsoUrl(e.target.value)}
+              placeholder="https://idp.example.com/saml/sso"
+              className="font-mono text-xs"
+              data-action="idp-form-sso"
+            />
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="idp-slo">SLO URL (optional)</Label>
+            <Input
+              id="idp-slo"
+              value={sloUrl}
+              onChange={(e) => setSloUrl(e.target.value)}
+              placeholder="https://idp.example.com/saml/slo"
+              className="font-mono text-xs"
+              data-action="idp-form-slo"
+            />
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="idp-metadata">Metadata URL (optional)</Label>
+            <Input
+              id="idp-metadata"
+              value={metadataUrl}
+              onChange={(e) => setMetadataUrl(e.target.value)}
+              placeholder="https://idp.example.com/metadata.xml"
+              className="font-mono text-xs"
+              data-action="idp-form-metadata"
+            />
+          </div>
+
+          <div className="col-span-2 flex flex-col gap-1.5">
+            <Label htmlFor="idp-callback">Callback URL (SP ACS, optional override)</Label>
+            <Input
+              id="idp-callback"
+              value={callbackUrl}
+              onChange={(e) => setCallbackUrl(e.target.value)}
+              placeholder="https://your-arcadia-app/api/v1/auth/saml/callback"
+              className="font-mono text-xs"
+              data-action="idp-form-callback"
+            />
+          </div>
+
+          <div className="col-span-2 flex flex-col gap-1.5">
+            <Label htmlFor="idp-cert">
+              Certificate (PEM){" "}
+              <span className="font-normal text-muted-foreground">
+                {isEdit ? (initial?.has_certificate ? " · current cert kept if blank" : " · required") : " · required"}
+              </span>
+            </Label>
+            <Textarea
+              id="idp-cert"
+              value={certificate}
+              onChange={(e) => setCertificate(e.target.value)}
+              rows={6}
+              placeholder="-----BEGIN CERTIFICATE-----..."
+              className="font-mono text-[11px]"
+              spellCheck={false}
+              data-action="idp-form-certificate"
+            />
+          </div>
+
+          <div className="col-span-2 flex flex-col gap-1.5">
+            <Label htmlFor="idp-attrs">Attribute mapping (JSON: arcadia field → SAML attribute)</Label>
+            <Textarea
+              id="idp-attrs"
+              value={attrJson}
+              onChange={(e) => setAttrJson(e.target.value)}
+              rows={5}
+              className="font-mono text-xs"
+              spellCheck={false}
+              data-action="idp-form-attrs"
+            />
+          </div>
+
+          <div className="flex items-center justify-between rounded-md border px-3 py-2">
+            <Label className="text-sm">Sign requests</Label>
+            <Switch
+              checked={signRequests}
+              onCheckedChange={setSignRequests}
+              data-action="idp-form-sign-requests"
+            />
+          </div>
+          <div className="flex items-center justify-between rounded-md border px-3 py-2">
+            <Label className="text-sm">Enabled</Label>
+            <Switch
+              checked={enabled}
+              onCheckedChange={setEnabled}
+              data-action="idp-form-enabled"
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={saving}>
+            Cancel
+          </Button>
+          <Button
+            onClick={submit}
+            disabled={saving || !name || !entityId || !ssoUrl}
+            data-action="idp-form-save"
+          >
+            {saving ? <RefreshCw className="size-4 animate-spin" /> : <CheckCircle2 className="size-4" />}
+            {isEdit ? "Save" : "Create"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}