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/route-error.tsx

@@ -0,0 +1,104 @@
+import { isRouteErrorResponse, useNavigate, useRouteError } from "react-router"
+import { AlertTriangle, RefreshCw, Home } from "lucide-react"
+
+import { AppShell } from "~/components/layout/app-shell"
+import { Button } from "~/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card"
+
+/**
+ * Route-level error boundary.
+ *
+ * Re-export this as `ErrorBoundary` from any route and a crash in that route
+ * degrades to a single explained card *inside the shell* — the nav, the theme
+ * and every other screen stay reachable. The root boundary in `root.tsx` still
+ * exists as the last resort, but it replaces the whole app with an unstyled
+ * stack trace, which strands an operator mid-incident with no way out.
+ *
+ *     export { RouteErrorBoundary as ErrorBoundary } from "~/components/route-error"
+ */
+export function RouteErrorBoundary() {
+  const error = useRouteError()
+  const navigate = useNavigate()
+
+  let title = "This screen hit an error"
+  let description =
+    "Something on this page failed to render. The rest of the console still works — you can retry, or head back to the overview."
+
+  if (isRouteErrorResponse(error)) {
+    if (error.status === 404) {
+      title = "That page doesn't exist"
+      description = "The link may be stale, or the screen may have been renamed."
+    } else {
+      title = `Request failed (${error.status})`
+      description =
+        error.statusText ||
+        "The server rejected this request. Retry, and if it keeps failing check the service logs."
+    }
+  }
+
+  // The message is useful to an operator even in prod — it's their own platform.
+  // The stack is noise unless you're the one fixing it, so it stays in dev.
+  const message = error instanceof Error ? error.message : null
+  const stack =
+    import.meta.env.DEV && error instanceof Error ? error.stack : undefined
+
+  return (
+    <AppShell>
+      <Card>
+        <CardHeader>
+          <div className="flex items-start gap-3">
+            <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-destructive/10 text-destructive">
+              <AlertTriangle className="size-5" />
+            </div>
+            <div className="min-w-0">
+              <CardTitle>{title}</CardTitle>
+              <CardDescription>{description}</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          {message ? (
+            <p className="rounded-md border bg-muted/30 px-3 py-2 font-mono text-xs text-muted-foreground">
+              {message}
+            </p>
+          ) : null}
+
+          <div className="flex flex-wrap items-center gap-2">
+            <Button
+              data-action="route-error-retry"
+              onClick={() => window.location.reload()}
+            >
+              <RefreshCw className="size-4" />
+              Retry
+            </Button>
+            <Button
+              data-action="route-error-home"
+              variant="outline"
+              onClick={() => navigate("/")}
+            >
+              <Home className="size-4" />
+              Back to overview
+            </Button>
+          </div>
+
+          {stack ? (
+            <details className="rounded-md border bg-muted/20 px-3 py-2 text-sm">
+              <summary className="cursor-pointer text-muted-foreground">
+                Stack trace (dev only)
+              </summary>
+              <pre className="mt-2 overflow-x-auto text-xs">
+                <code>{stack}</code>
+              </pre>
+            </details>
+          ) : null}
+        </CardContent>
+      </Card>
+    </AppShell>
+  )
+}