Admin UX overhaul: P0 fixes, error-UX foundations, nav cleanup, tenant detail page

From the 2026-07-14 UI/UX audit (17/40). Four phases:

P1 — Settings route crashed on Agents→Edit (Input/Textarea used but never
imported). Added imports + a shared route-level error boundary
(components/route-error.tsx) re-exported from all shell routes, so one
crashing panel degrades to an explained card with the nav intact instead of
replacing the whole app with a stack trace. Corrected the stale CLAUDE.md
claim that `npm run typecheck` crashes — it works, and would have caught the
missing import.

P2 — Error/empty/feedback foundations. Fixed useSession identity churn that
fired ~3x duplicate fetches per screen and self-inflicted 429s (referentially
stable snapshot). New lib/errors.ts (describeError → plain-language + the fix)
and components/data-state.tsx (DataState renders exactly one of
error/loading/empty/content, so a failed load never shows as "empty";
DialogError for in-dialog failures; 429 auto-retry). Rolled across all 15
list routes; every mutation now toasts. Surfaced+fixed two silent-failure
bugs (sso + buckets-CORS swallowed load errors; the latter could wipe rules
on save).

P3 — Nav IA + trust cleanup. Default-expanded rail; regrouped into 7 coherent
sections; collapsed the Apps/Plan/Entitlements stub triplication into one
honest /billing page; deleted fabricated seeded notifications and the dead
Help menu item; fixed the 403 copy (referenced a tenant switcher that doesn't
exist); removed orphan /assistant + /library routes; gated dev-seed login
hints behind DEV; renamed /activity → /audit-log with a redirect.

P4 — Tenant detail page (routes/tenants.$id.tsx + components/tenant-detail/*),
closing the provision→configure gap. 8 tabs (Overview, Plan & quotas,
Branding, Localization, Email & SMS, Feature flags, IP rules, Inbound
webhooks), each verified saving to the real backend. Row name links to detail.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/components/data-state.tsx

@@ -0,0 +1,183 @@
+import { useEffect, useState, type ReactNode } from "react"
+import { AlertTriangle, RefreshCw, ShieldOff, WifiOff } from "lucide-react"
+import { LoadingOverlay } from "@crema/feedback-ui"
+
+import { Button } from "~/components/ui/button"
+import { describeError, type LoadError } from "~/lib/errors"
+
+/**
+ * The load-state discriminator every list screen renders through.
+ *
+ * The rule it enforces: **a failed load is never an empty one.** Screens used
+ * to render their "No events match those filters — loosen the filter set…"
+ * empty state underneath a red "Too Many Requests" banner, so an operator
+ * couldn't tell a quiet audit log from a broken one. Exactly one of
+ * error / loading / empty / content renders here, ever.
+ */
+export function DataState({
+  loading,
+  error,
+  isEmpty,
+  empty,
+  onRetry,
+  loadingLabel = "Loading…",
+  children,
+}: {
+  loading: boolean
+  /** The raw thrown value; normalised for display here. */
+  error: unknown
+  isEmpty: boolean
+  /** What to show when the load succeeded and there is genuinely nothing. */
+  empty: ReactNode
+  onRetry: () => void
+  loadingLabel?: string
+  children: ReactNode
+}) {
+  if (error) return <ErrorState error={error} onRetry={onRetry} />
+
+  // First load: nothing to show yet. Subsequent refreshes keep the table on
+  // screen and let the table's own `loading` prop dim it, so the page doesn't
+  // flash empty every time an operator hits Refresh.
+  if (loading && isEmpty)
+    return (
+      <div className="relative min-h-40">
+        <LoadingOverlay active label={loadingLabel} />
+      </div>
+    )
+
+  if (isEmpty) return <>{empty}</>
+
+  return <>{children}</>
+}
+
+export function ErrorState({
+  error,
+  onRetry,
+}: {
+  error: unknown
+  onRetry: () => void
+}) {
+  const d: LoadError = describeError(error)
+  const Icon =
+    d.status === 403 || d.status === 401
+      ? ShieldOff
+      : d.title === "Can't reach arcadia"
+        ? WifiOff
+        : AlertTriangle
+
+  return (
+    <div className="flex flex-col items-center gap-3 px-6 py-12 text-center">
+      <div className="flex size-10 items-center justify-center rounded-lg bg-destructive/10 text-destructive">
+        <Icon className="size-5" />
+      </div>
+
+      <div className="max-w-md space-y-1">
+        <p className="font-medium">{d.title}</p>
+        {d.detail ? (
+          <p className="text-sm text-muted-foreground">{d.detail}</p>
+        ) : null}
+        {d.fields?.length ? (
+          <ul className="mt-1 space-y-0.5 text-sm text-muted-foreground">
+            {d.fields.map((f) => (
+              <li key={f}>{f}</li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+
+      {d.retryable ? (
+        d.retryAfterSec ? (
+          <AutoRetry seconds={d.retryAfterSec} onRetry={onRetry} />
+        ) : (
+          <Button
+            data-action="data-state-retry"
+            variant="outline"
+            size="sm"
+            onClick={onRetry}
+          >
+            <RefreshCw className="size-4" />
+            Retry
+          </Button>
+        )
+      ) : null}
+    </div>
+  )
+}
+
+/**
+ * An error raised while a dialog is open, rendered *inside* that dialog.
+ *
+ * Page-level banners are invisible here: the modal scrim dims them and the
+ * dialog covers them. A failed submit has to speak where the operator is
+ * looking — right above the buttons they just pressed.
+ */
+export function DialogError({
+  error,
+  context = "save",
+}: {
+  error: unknown
+  context?: string
+}) {
+  const d = describeError(error, context)
+
+  return (
+    <div
+      role="alert"
+      className="flex items-start gap-2.5 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2.5"
+    >
+      <AlertTriangle className="mt-0.5 size-4 shrink-0 text-destructive" />
+      <div className="min-w-0 space-y-0.5 text-sm">
+        <p className="font-medium text-destructive">{d.title}</p>
+        {d.detail ? <p className="text-muted-foreground">{d.detail}</p> : null}
+        {d.fields?.length ? (
+          <ul className="space-y-0.5 text-muted-foreground">
+            {d.fields.map((f) => (
+              <li key={f}>{f}</li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+/** 429s resolve on their own — count down, retry, and say so. Nagging the
+ *  operator to click Retry into a rate limiter would just extend it. */
+function AutoRetry({
+  seconds,
+  onRetry,
+}: {
+  seconds: number
+  onRetry: () => void
+}) {
+  const [left, setLeft] = useState(seconds)
+
+  useEffect(() => {
+    if (left <= 0) {
+      onRetry()
+      return
+    }
+    const t = setTimeout(() => setLeft((n) => n - 1), 1000)
+    return () => clearTimeout(t)
+    // `onRetry` is intentionally excluded: routes hand us a fresh closure each
+    // render, and depending on it would reset the countdown forever.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [left])
+
+  return (
+    <div className="flex items-center gap-2">
+      <Button
+        data-action="data-state-retry"
+        variant="outline"
+        size="sm"
+        onClick={onRetry}
+      >
+        <RefreshCw className="size-4" />
+        Retry now
+      </Button>
+      <span className="text-xs text-muted-foreground" aria-live="polite">
+        retrying in {left}s
+      </span>
+    </div>
+  )
+}