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/routes/webhooks.tsx

@@ -15,7 +15,8 @@ import {
   Webhook as WebhookIcon,
 } from "lucide-react"
 
-import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-core-client"
+import { useArcadiaClient } from "@crema/arcadia-core-client"
+import { useToast } from "@crema/notification-ui"
 import {
   ActionsCell,
   BadgeCell,
@@ -28,9 +29,11 @@ import {
   type Column,
 } from "@crema/table-ui"
 import { SearchInput } from "@crema/search-ui"
-import { AlertBanner, ConfirmDialog, EmptyState, LoadingOverlay } from "@crema/feedback-ui"
+import { ConfirmDialog, EmptyState } from "@crema/feedback-ui"
 
 import { AppShell } from "~/components/layout/app-shell"
+import { DataState, DialogError } from "~/components/data-state"
+import { errorMessage } from "~/lib/errors"
 import { Badge } from "~/components/ui/badge"
 import { Button } from "~/components/ui/button"
 import {
@@ -89,11 +92,12 @@ type EditorState =
 export default function WebhooksRoute() {
   const session = useSession()
   const arcadia = useArcadiaClient()
+  const toast = useToast()
 
   const [webhooks, setWebhooks] = useState<Webhook[]>([])
   const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [info, setInfo] = useState<string | null>(null)
+  // The raw thrown value — `DataState` normalises it into plain language.
+  const [error, setError] = useState<unknown>(null)
   const [search, setSearch] = useState("")
   const [editor, setEditor] = useState<EditorState>(null)
   const [pendingDelete, setPendingDelete] = useState<Webhook | null>(null)
@@ -110,7 +114,7 @@ export default function WebhooksRoute() {
     try {
       setWebhooks(await listWebhooks(arcadia))
     } catch (err) {
-      setError(err instanceof ArcadiaError ? err.message : "Failed to load webhooks.")
+      setError(err)
     } finally {
       setLoading(false)
     }
@@ -200,15 +204,14 @@ export default function WebhooksRoute() {
               setPendingDelete,
               setDeliveriesFor,
               setRevealedSecret,
-              setError,
-              setInfo,
+              toast,
             })}
             triggerDataAction={`webhook-${w.id}-actions`}
           />
         ),
       },
     ],
-    [arcadia, refresh],
+    [arcadia, refresh, toast],
   )
 
   const summary = useMemo(
@@ -274,17 +277,6 @@ export default function WebhooksRoute() {
           </div>
         </header>
 
-        {error ? (
-          <AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
-            {error}
-          </AlertBanner>
-        ) : null}
-        {info ? (
-          <AlertBanner variant="success" dismissible onDismiss={() => setInfo(null)}>
-            {info}
-          </AlertBanner>
-        ) : null}
-
         <Card>
           <CardHeader className="flex flex-row items-center gap-3">
             <SearchInput
@@ -300,38 +292,42 @@ export default function WebhooksRoute() {
           </CardHeader>
 
           <CardContent className="relative p-0">
-            <LoadingOverlay active={loading && webhooks.length === 0} label="Loading webhooks…" />
-            {table.total === 0 && !loading ? (
-              <EmptyState
-                icon={<WebhookIcon className="size-6" />}
-                title={search ? "No webhooks match." : "No webhooks yet."}
-                description={
-                  search
-                    ? "Try a different search."
-                    : "Add an endpoint to receive event notifications from arcadia."
-                }
-                className="py-12"
+            <DataState
+              loading={loading}
+              error={error}
+              isEmpty={table.total === 0}
+              onRetry={refresh}
+              loadingLabel="Loading webhooks…"
+              empty={
+                <EmptyState
+                  icon={<WebhookIcon className="size-6" />}
+                  title={search ? "No webhooks match." : "No webhooks yet."}
+                  description={
+                    search
+                      ? "Try a different search."
+                      : "Add an endpoint to receive event notifications from arcadia."
+                  }
+                  className="py-12"
+                />
+              }
+            >
+              <DataTable
+                columns={columns}
+                rows={table.pageRows}
+                getRowId={(w) => w.id}
+                sort={table.sort}
+                onSortToggle={table.toggleSort}
+                loading={loading && webhooks.length > 0}
+                stickyHeader
               />
-            ) : (
-              <>
-                <DataTable
-                  columns={columns}
-                  rows={table.pageRows}
-                  getRowId={(w) => w.id}
-                  sort={table.sort}
-                  onSortToggle={table.toggleSort}
-                  loading={loading && webhooks.length > 0}
-                  stickyHeader
-                />
-                <Pagination
-                  page={table.page}
-                  pageSize={table.pageSize}
-                  total={table.total}
-                  onPageChange={table.setPage}
-                  onPageSizeChange={table.setPageSize}
-                />
-              </>
-            )}
+              <Pagination
+                page={table.page}
+                pageSize={table.pageSize}
+                total={table.total}
+                onPageChange={table.setPage}
+                onPageSizeChange={table.setPageSize}
+              />
+            </DataState>
           </CardContent>
         </Card>
       </div>
@@ -349,14 +345,15 @@ export default function WebhooksRoute() {
         variant="danger"
         onConfirm={async () => {
           if (!pendingDelete) return
+          const target = pendingDelete
           try {
-            await deleteWebhook(arcadia, pendingDelete.id)
+            await deleteWebhook(arcadia, target.id)
             setPendingDelete(null)
-            setInfo("Webhook deleted.")
             await refresh()
+            toast.success(`Deleted webhook ${target.url}`)
           } catch (err) {
-            setError(err instanceof ArcadiaError ? err.message : "Delete failed.")
             setPendingDelete(null)
+            toast.error(errorMessage(err, `delete webhook ${target.url}`))
           }
         }}
       />
@@ -364,21 +361,19 @@ export default function WebhooksRoute() {
       <WebhookEditorDialog
         state={editor}
         onClose={() => setEditor(null)}
-        onSaved={async (created) => {
+        onSaved={async (saved, wasEdit) => {
           setEditor(null)
-          if (created?.secret) {
-            setRevealedSecret({ webhookId: created.id, secret: created.secret, isNew: true })
+          if (saved?.secret) {
+            setRevealedSecret({ webhookId: saved.id, secret: saved.secret, isNew: true })
           }
           await refresh()
+          toast.success(
+            wasEdit ? `Saved webhook ${saved.url}` : `Created webhook ${saved.url}`,
+          )
         }}
-        onError={setError}
       />
 
-      <DeliveriesDialog
-        webhook={deliveriesFor}
-        onClose={() => setDeliveriesFor(null)}
-        onError={setError}
-      />
+      <DeliveriesDialog webhook={deliveriesFor} onClose={() => setDeliveriesFor(null)} />
 
       <RevealSecretDialog reveal={revealedSecret} onClose={() => setRevealedSecret(null)} />
     </AppShell>
@@ -402,8 +397,7 @@ function rowActions(
     setRevealedSecret: (
       r: { webhookId: string; secret: string; isNew?: boolean } | null,
     ) => void
-    setError: (m: string | null) => void
-    setInfo: (m: string | null) => void
+    toast: ReturnType<typeof useToast>
   },
 ): ActionItem[] {
   const {
@@ -413,8 +407,7 @@ function rowActions(
     setPendingDelete,
     setDeliveriesFor,
     setRevealedSecret,
-    setError,
-    setInfo,
+    toast,
   } = ctx
   const items: ActionItem[] = []
 
@@ -439,9 +432,17 @@ function rowActions(
     onSelect: async () => {
       try {
         const r = await testWebhook(arcadia, w.id)
-        setInfo(r.ok === false ? r.message ?? "Test failed." : "Test event sent.")
+        // A 200 from arcadia can still carry a failed delivery — the endpoint
+        // answered, the *webhook* didn't. Say which.
+        if (r.ok === false) {
+          toast.error(`Test event to ${w.url} failed`, {
+            description: r.message ?? undefined,
+          })
+        } else {
+          toast.success(`Sent test event to ${w.url}`)
+        }
       } catch (err) {
-        setError(err instanceof ArcadiaError ? err.message : "Test failed.")
+        toast.error(errorMessage(err, `send a test event to ${w.url}`))
       }
     },
   })
@@ -455,10 +456,10 @@ function rowActions(
       onSelect: async () => {
         try {
           await pauseWebhook(arcadia, w.id)
-          setInfo("Webhook paused.")
           await refresh()
+          toast.success(`Paused webhook ${w.url}`)
         } catch (err) {
-          setError(err instanceof ArcadiaError ? err.message : "Pause failed.")
+          toast.error(errorMessage(err, `pause webhook ${w.url}`))
         }
       },
     })
@@ -471,10 +472,10 @@ function rowActions(
       onSelect: async () => {
         try {
           await resumeWebhook(arcadia, w.id)
-          setInfo("Webhook resumed.")
           await refresh()
+          toast.success(`Resumed webhook ${w.url}`)
         } catch (err) {
-          setError(err instanceof ArcadiaError ? err.message : "Resume failed.")
+          toast.error(errorMessage(err, `resume webhook ${w.url}`))
         }
       },
     })
@@ -492,8 +493,9 @@ function rowActions(
           setRevealedSecret({ webhookId: updated.id, secret: updated.secret })
         }
         await refresh()
+        toast.success(`Regenerated the secret for ${w.url}`)
       } catch (err) {
-        setError(err instanceof ArcadiaError ? err.message : "Regenerate failed.")
+        toast.error(errorMessage(err, `regenerate the secret for ${w.url}`))
       }
     },
   })
@@ -514,17 +516,18 @@ function WebhookEditorDialog({
   state,
   onClose,
   onSaved,
-  onError,
 }: {
   state: EditorState
   onClose: () => void
-  onSaved: (created?: Webhook) => Promise<void>
-  onError: (msg: string | null) => void
+  onSaved: (saved: Webhook, wasEdit: boolean) => Promise<void>
 }) {
   const arcadia = useArcadiaClient()
   const open = state !== null
   const isEdit = state?.mode === "edit"
   const initial = isEdit ? state.webhook : null
+  // A failed submit speaks inside the dialog — a page banner would sit behind
+  // the scrim, dimmed and unread.
+  const [error, setError] = useState<unknown>(null)
 
   const [url, setUrl] = useState("")
   const [description, setDescription] = useState("")
@@ -535,7 +538,11 @@ function WebhookEditorDialog({
   const [saving, setSaving] = useState(false)
 
   useEffect(() => {
-    if (!open) return
+    if (!open) {
+      setError(null)
+      return
+    }
+    setError(null)
     if (initial) {
       setUrl(initial.url)
       setDescription(initial.description ?? "")
@@ -558,7 +565,7 @@ function WebhookEditorDialog({
   }, [open, initial])
 
   const submit = async () => {
-    onError(null)
+    setError(null)
     setSaving(true)
     try {
       const events = eventsText
@@ -583,19 +590,15 @@ function WebhookEditorDialog({
       }
       if (isEdit && initial) {
         const updated = await updateWebhook(arcadia, initial.id, input)
-        await onSaved(updated)
+        await onSaved(updated, true)
       } else {
         const created = await createWebhook(arcadia, input)
-        await onSaved(created)
+        await onSaved(created, false)
       }
     } catch (err) {
-      onError(
-        err instanceof ArcadiaError
-          ? err.message
-          : err instanceof Error
-            ? err.message
-            : "Save failed.",
-      )
+      // Keep the dialog open with the form intact so the operator can fix and
+      // resubmit without retyping.
+      setError(err)
     } finally {
       setSaving(false)
     }
@@ -713,6 +716,13 @@ function WebhookEditorDialog({
           </div>
         </div>
 
+        {error ? (
+          <DialogError
+            error={error}
+            context={isEdit ? "save the webhook" : "create the webhook"}
+          />
+        ) : null}
+
         <DialogFooter>
           <Button variant="outline" onClick={onClose} disabled={saving} data-action="webhook-form-cancel">
             Cancel
@@ -730,30 +740,36 @@ function WebhookEditorDialog({
 function DeliveriesDialog({
   webhook,
   onClose,
-  onError,
 }: {
   webhook: Webhook | null
   onClose: () => void
-  onError: (msg: string | null) => void
 }) {
   const arcadia = useArcadiaClient()
   const [deliveries, setDeliveries] = useState<WebhookDelivery[]>([])
   const [loading, setLoading] = useState(true)
+  // A failed deliveries load is not an empty delivery log — say which one it is.
+  const [error, setError] = useState<unknown>(null)
+  const [reloadKey, setReloadKey] = useState(0)
 
   useEffect(() => {
     if (!webhook) return
     let mounted = true
     setLoading(true)
+    setError(null)
     listWebhookDeliveries(arcadia, webhook.id, { limit: 50 })
-      .then((d) => mounted && setDeliveries(d))
-      .catch((err) =>
-        onError(err instanceof ArcadiaError ? err.message : "Failed to load deliveries."),
-      )
-      .finally(() => mounted && setLoading(false))
+      .then((d) => {
+        if (mounted) setDeliveries(d)
+      })
+      .catch((err) => {
+        if (mounted) setError(err)
+      })
+      .finally(() => {
+        if (mounted) setLoading(false)
+      })
     return () => {
       mounted = false
     }
-  }, [arcadia, webhook, onError])
+  }, [arcadia, webhook, reloadKey])
 
   if (!webhook) return null
 
@@ -767,15 +783,18 @@ function DeliveriesDialog({
           </DialogDescription>
         </DialogHeader>
 
-        {loading ? (
-          <p className="py-6 text-center text-sm text-muted-foreground">
-            <RefreshCw className="mr-1 inline size-3.5 animate-spin" /> Loading…
-          </p>
-        ) : deliveries.length === 0 ? (
-          <p className="py-6 text-center text-sm text-muted-foreground">
-            No deliveries recorded yet.
-          </p>
-        ) : (
+        <DataState
+          loading={loading}
+          error={error}
+          isEmpty={deliveries.length === 0}
+          onRetry={() => setReloadKey((n) => n + 1)}
+          loadingLabel="Loading deliveries…"
+          empty={
+            <p className="py-6 text-center text-sm text-muted-foreground">
+              No deliveries recorded yet.
+            </p>
+          }
+        >
           <ul className="flex flex-col divide-y rounded-md border">
             {deliveries.map((d) => (
               <li key={d.id} className="flex items-start justify-between gap-3 px-3 py-2 text-sm">
@@ -825,7 +844,7 @@ function DeliveriesDialog({
               </li>
             ))}
           </ul>
-        )}
+        </DataState>
 
         <DialogFooter>
           <Button variant="outline" onClick={onClose} data-action="webhook-deliveries-close">
@@ -898,3 +917,5 @@ function countBy<T>(arr: T[], key: (x: T) => string): Record<string, number> {
     return acc
   }, {})
 }
+
+export { RouteErrorBoundary as ErrorBoundary } from "~/components/route-error"