From 8d8b92e9c96cd8785e9f81992345cb09b950ff73 Mon Sep 17 00:00:00 2001
From: Trezy <tre@trezy.com>
Date: Tue, 23 Jun 2026 13:52:08 -0500
Subject: [PATCH] fix: port service entry design optimisations to other pages

Signed-off-by: Trezy <tre@trezy.com>

Signed-off-by: Trezy <tre@trezy.com>
---
 web/src/app/dashboard/backfill/page.tsx       |  20 +--
 web/src/app/dashboard/dead-letters/page.tsx   |  95 +++++++++++---
 web/src/app/dashboard/lexicons/page.tsx       |  61 ++++++---
 web/src/app/dashboard/records/page.tsx        | 119 +++++++++++-------
 .../dashboard/settings/api-clients/page.tsx   |  64 ++++++----
 .../app/dashboard/settings/api-keys/page.tsx  |  75 +++++------
 .../dashboard/settings/env-variables/page.tsx |  65 +++++++---
 .../app/dashboard/settings/labelers/page.tsx  |  68 +++++-----
 .../app/dashboard/settings/scripts/page.tsx   |  61 ++++++---
 web/src/app/dashboard/settings/users/page.tsx |  85 ++++++++-----
 10 files changed, 455 insertions(+), 258 deletions(-)

diff --git a/web/src/app/dashboard/backfill/page.tsx b/web/src/app/dashboard/backfill/page.tsx
index 27e007b..3a7807d 100644
--- a/web/src/app/dashboard/backfill/page.tsx
+++ b/web/src/app/dashboard/backfill/page.tsx
@@ -2,8 +2,10 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
+import { toast } from "sonner";
 
 import { useCurrentUser } from "@/hooks/use-current-user";
+import { toastError } from "@/lib/format";
 import {
   cancelBackfillJob,
   pauseBackfillJob,
@@ -377,13 +379,12 @@ function ProfileRow({ did, profile, suffix }: {
 export default function BackfillPage() {
   const { hasPermission } = useCurrentUser();
   const [jobs, setJobs] = useState<BackfillJob[]>([]);
-  const [error, setError] = useState<string | null>(null);
   const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
 
   const load = useCallback(() => {
     getBackfillJobs()
       .then(setJobs)
-      .catch((e) => setError(e.message));
+      .catch((e) => toastError("Failed to load backfill jobs", e));
   }, []);
 
   useEffect(() => {
@@ -404,8 +405,6 @@ export default function BackfillPage() {
     <>
       <SiteHeader title="Backfill" />
       <div className="flex flex-1 flex-col gap-4 p-4 md:p-6">
-        {error && <p className="text-destructive text-sm">{error}</p>}
-
         <div className="flex items-center justify-between">
           <h2 className="text-lg font-semibold">Backfill Jobs</h2>
           <div className="flex items-center gap-2">
@@ -425,6 +424,7 @@ export default function BackfillPage() {
                     <AlertDialogCancel>Cancel</AlertDialogCancel>
                     <AlertDialogAction onClick={async () => {
                       await flushAllBackfillDetails();
+                      toast.success("All job details cleared");
                       setSelectedJobId(null);
                       load();
                     }}>Clear</AlertDialogAction>
@@ -456,7 +456,7 @@ export default function BackfillPage() {
                     colSpan={5}
                     className="text-muted-foreground text-center"
                   >
-                    No backfill jobs yet.
+                    No backfill jobs yet. Create a job to import historical records from the AT Protocol network.
                   </TableCell>
                 </TableRow>
               )}
@@ -608,6 +608,7 @@ function JobDetail({
     setCancelling(true);
     try {
       await onCancel();
+      toast.success("Backfill job cancelled");
     } finally {
       setCancelling(false);
     }
@@ -617,6 +618,7 @@ function JobDetail({
     setPausing(true);
     try {
       await onPause();
+      toast.success("Backfill job paused");
     } finally {
       setPausing(false);
     }
@@ -626,6 +628,7 @@ function JobDetail({
     setResuming(true);
     try {
       await onResume();
+      toast.success("Backfill job resumed");
     } finally {
       setResuming(false);
     }
@@ -923,6 +926,7 @@ function JobDetail({
                 <AlertDialogCancel>Cancel</AlertDialogCancel>
                 <AlertDialogAction onClick={async () => {
                   await flushBackfillDetails(job.id);
+                  toast.success("Job details cleared");
                   setDiscoveredRepos([]);
                   setDiscoveredCursor(null);
                   setDiscoveredLoaded(false);
@@ -1134,7 +1138,6 @@ function ProgressRow({
 function CreateDialog({ onSuccess }: { onSuccess: () => void }) {
   const [collection, setCollection] = useState<string | null>(null);
   const [did, setDid] = useState("");
-  const [error, setError] = useState<string | null>(null);
   const [open, setOpen] = useState(false);
   const [recordLexicons, setRecordLexicons] = useState<string[]>([]);
 
@@ -1154,18 +1157,18 @@ function CreateDialog({ onSuccess }: { onSuccess: () => void }) {
   }, [open]);
 
   async function handleCreate() {
-    setError(null);
     try {
       await createBackfillJob({
         collection: collection || undefined,
         did: did || undefined,
       });
+      toast.success("Backfill job created");
       setCollection(null);
       setDid("");
       setOpen(false);
       onSuccess();
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError("Failed to create backfill job", e);
     }
   }
 
@@ -1194,7 +1197,6 @@ function CreateDialog({ onSuccess }: { onSuccess: () => void }) {
           </ResponsiveDialogDescription>
         </ResponsiveDialogHeader>
         <div className="flex flex-col gap-4">
-          {error && <p className="text-destructive text-sm">{error}</p>}
           <div className="flex flex-col gap-2">
             <Label>Collection (optional)</Label>
             <Combobox
diff --git a/web/src/app/dashboard/dead-letters/page.tsx b/web/src/app/dashboard/dead-letters/page.tsx
index d871d5d..f1acbe9 100644
--- a/web/src/app/dashboard/dead-letters/page.tsx
+++ b/web/src/app/dashboard/dead-letters/page.tsx
@@ -9,7 +9,9 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
+import { toast } from "sonner";
 
+import { toastError } from "@/lib/format";
 import {
   getDeadLetters,
   getDeadLetter,
@@ -27,6 +29,17 @@ import { DataTableToolbar } from "@/components/data-table/data-table-toolbar";
 import { CodeBlock } from "@/components/code-block";
 import { MonacoEditor } from "@/components/monaco-editor";
 import { SiteHeader } from "@/components/site-header";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -155,12 +168,12 @@ function DetailBody({ detail }: { detail: DeadLetterDetail }) {
 
 export default function DeadLettersPage() {
   const [items, setItems] = useState<DeadLetterSummary[]>([]);
-  const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
   const [viewDetail, setViewDetail] = useState<DeadLetterDetail | null>(null);
   const [actionLoading, setActionLoading] = useState(false);
   const [resolvedFilter, setResolvedFilter] = useState("false");
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [dismissAllOpen, setDismissAllOpen] = useState(false);
 
   const [cursorStack, setCursorStack] = useState<string[]>([]);
   const [nextCursor, setNextCursor] = useState<string | null>(null);
@@ -191,7 +204,6 @@ export default function DeadLettersPage() {
   const fetchItems = useCallback(
     async (cursor?: string) => {
       setLoading(true);
-      setError(null);
       try {
         const data = await getDeadLetters({
           collection: collectionFilter,
@@ -203,7 +215,7 @@ export default function DeadLettersPage() {
         setNextCursor(data.cursor);
         setRowSelection({});
       } catch (e: unknown) {
-        setError(e instanceof Error ? e.message : String(e));
+        toastError("Failed to load dead letters", e);
         setItems([]);
         setNextCursor(null);
       } finally {
@@ -218,6 +230,21 @@ export default function DeadLettersPage() {
     fetchItems();
   }, [fetchItems]);
 
+  useEffect(() => {
+    if (Object.keys(rowSelection).length === 0) return;
+    const validIds = new Set(items.map((item) => item.id));
+    const pruned: RowSelectionState = {};
+    let changed = false;
+    for (const [id, selected] of Object.entries(rowSelection)) {
+      if (validIds.has(id)) {
+        pruned[id] = selected;
+      } else {
+        changed = true;
+      }
+    }
+    if (changed) setRowSelection(pruned);
+  }, [items]);
+
   function handleNext() {
     if (!nextCursor) return;
     setCursorStack((prev) => [...prev, nextCursor]);
@@ -237,8 +264,8 @@ export default function DeadLettersPage() {
     try {
       const detail = await getDeadLetter(row.id);
       setViewDetail(detail);
-    } catch {
-      setError("Failed to load detail");
+    } catch (e: unknown) {
+      toastError("Failed to load dead letter detail", e);
     }
   }
 
@@ -249,10 +276,11 @@ export default function DeadLettersPage() {
       if (action === "retry") await retryDeadLetter(viewDetail.id);
       else if (action === "reindex") await reindexDeadLetter(viewDetail.id);
       else await dismissDeadLetter(viewDetail.id);
+      toast.success(action === "retry" ? "Dead letter retried" : action === "reindex" ? "Dead letter re-indexed" : "Dead letter dismissed");
       setViewDetail(null);
       fetchItems();
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError(`Failed to ${action} dead letter`, e);
     } finally {
       setActionLoading(false);
     }
@@ -269,6 +297,7 @@ export default function DeadLettersPage() {
   ) {
     setLoading(true);
     try {
+      const count = selectedIds.length;
       const body =
         scope === "all"
           ? { all: true, collection: collectionFilter }
@@ -276,10 +305,14 @@ export default function DeadLettersPage() {
       if (action === "retry") await bulkRetryDeadLetters(body);
       else if (action === "reindex") await bulkReindexDeadLetters(body);
       else await bulkDismissDeadLetters(body);
+      const verb = action === "retry" ? "retried" : action === "reindex" ? "re-indexed" : "dismissed";
+      toast.success(scope === "all"
+        ? `All matching dead letters ${verb}`
+        : `${count} dead ${count === 1 ? "letter" : "letters"} ${verb}`);
       setRowSelection({});
       fetchItems();
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError(`Failed to ${action} dead letters`, e);
     } finally {
       setLoading(false);
     }
@@ -442,8 +475,6 @@ export default function DeadLettersPage() {
     <>
       <SiteHeader title="Dead Letters" />
       <div className="flex flex-1 flex-col gap-4 p-4 md:p-6">
-        {error && <p className="text-destructive text-sm">{error}</p>}
-
         <div className="flex items-center gap-2">
           <DataTableToolbar table={table} />
           <Select value={resolvedFilter} onValueChange={setResolvedFilter}>
@@ -481,15 +512,26 @@ export default function DeadLettersPage() {
               <RefreshCw className="mr-1 size-3.5" />
               Re-index
             </Button>
-            <Button
-              size="sm"
-              variant="ghost"
-              disabled={loading}
-              onClick={() => handleBulkAction("dismiss", "selected")}
-            >
-              <XCircle className="mr-1 size-3.5" />
-              Dismiss
-            </Button>
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button size="sm" variant="ghost" disabled={loading}>
+                  <XCircle className="mr-1 size-3.5" />
+                  Dismiss
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Dismiss {selectedIds.length} dead {selectedIds.length === 1 ? "letter" : "letters"}?</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    Dismissed dead letters will be marked as resolved and will not be retried.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogAction variant="destructive" onClick={() => handleBulkAction("dismiss", "selected")}>Dismiss</AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button size="sm" variant="ghost" disabled={loading}>
@@ -509,7 +551,7 @@ export default function DeadLettersPage() {
                   Re-index all matching
                 </DropdownMenuItem>
                 <DropdownMenuItem
-                  onClick={() => handleBulkAction("dismiss", "all")}
+                  onClick={() => setDismissAllOpen(true)}
                 >
                   Dismiss all matching
                 </DropdownMenuItem>
@@ -610,6 +652,21 @@ export default function DeadLettersPage() {
             )}
           </SheetContent>
         </Sheet>
+
+        <AlertDialog open={dismissAllOpen} onOpenChange={setDismissAllOpen}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Dismiss all matching dead letters?</AlertDialogTitle>
+              <AlertDialogDescription>
+                All dead letters matching the current filters will be marked as resolved. This action cannot be undone.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction variant="destructive" onClick={() => handleBulkAction("dismiss", "all")}>Dismiss All</AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
       </div>
     </>
   );
diff --git a/web/src/app/dashboard/lexicons/page.tsx b/web/src/app/dashboard/lexicons/page.tsx
index ae2a352..732197b 100644
--- a/web/src/app/dashboard/lexicons/page.tsx
+++ b/web/src/app/dashboard/lexicons/page.tsx
@@ -18,13 +18,27 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
+import { toast } from "sonner";
+
 import { useCurrentUser } from "@/hooks/use-current-user";
+import { toastError } from "@/lib/format";
 import {
   deleteLexicon,
   deleteNetworkLexicon,
   getLexicons,
 } from "@/lib/api";
 import type { LexiconSummary } from "@/types/lexicons";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { DataTable } from "@/components/data-table/data-table";
 import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header";
 import { DataTableToolbar } from "@/components/data-table/data-table-toolbar";
@@ -37,12 +51,11 @@ export default function LexiconsPage() {
   const { hasPermission } = useCurrentUser();
   const router = useRouter();
   const [lexicons, setLexicons] = useState<LexiconSummary[]>([]);
-  const [error, setError] = useState<string | null>(null);
 
   const load = useCallback(() => {
     getLexicons()
       .then(setLexicons)
-      .catch((e) => setError(e.message));
+      .catch((e) => toastError("Failed to load lexicons", e));
   }, []);
 
   useEffect(() => {
@@ -56,9 +69,10 @@ export default function LexiconsPage() {
       } else {
         await deleteLexicon(lex.id);
       }
+      toast.success("Lexicon deleted");
       load();
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError("Failed to delete lexicon", e);
     }
   }
 
@@ -209,19 +223,32 @@ export default function LexiconsPage() {
             </Button>
 
             {hasPermission("lexicons:delete") && (
-              <Button
-                variant="destructive"
-                size="icon"
-                className="size-8 text-muted-foreground hover:text-destructive"
-                title="Delete lexicon"
-                aria-label="Delete lexicon"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleDelete(row.original);
-                }}
-              >
-                <Trash2 className="size-4" />
-              </Button>
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button
+                    variant="destructive"
+                    size="icon"
+                    className="size-8 text-muted-foreground hover:text-destructive"
+                    title="Delete lexicon"
+                    aria-label="Delete lexicon"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <Trash2 className="size-4" />
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Delete lexicon?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This will permanently remove the lexicon and its associated routes. This action cannot be undone.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction variant="destructive" onClick={() => handleDelete(row.original)}>Delete</AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
             )}
           </div>
         ),
@@ -273,8 +300,6 @@ export default function LexiconsPage() {
     <>
       <SiteHeader title="Lexicons" />
       <div className="flex flex-1 flex-col gap-4 p-4 md:p-6">
-        {error && <p className="text-destructive text-sm">{error}</p>}
-
         <DataTable
           table={table}
           onRowClick={(lex) =>
diff --git a/web/src/app/dashboard/records/page.tsx b/web/src/app/dashboard/records/page.tsx
index 166a94f..c011364 100644
--- a/web/src/app/dashboard/records/page.tsx
+++ b/web/src/app/dashboard/records/page.tsx
@@ -8,9 +8,11 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
+import { toast } from "sonner";
 
 import { useSearchParams } from "next/navigation";
 import { useCurrentUser } from "@/hooks/use-current-user";
+import { toastError } from "@/lib/format";
 import {
   getCollections,
   getAdminRecords,
@@ -18,6 +20,16 @@ import {
   deleteCollectionRecords,
 } from "@/lib/api";
 import type { AdminRecord } from "@/types/records";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   ResponsiveDialog,
   ResponsiveDialogClose,
@@ -88,7 +100,6 @@ export default function RecordsPage() {
   const [cursorStack, setCursorStack] = useState<string[]>([]);
   const [nextCursor, setNextCursor] = useState<string | undefined>();
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   const [viewRecord, setViewRecord] = useState<AdminRecord | null>(null);
   const [deleting, setDeleting] = useState(false);
   const [deleteUri, setDeleteUri] = useState<string | null>(null);
@@ -105,9 +116,24 @@ export default function RecordsPage() {
   useEffect(() => {
     getCollections()
       .then((data) => setCollections(data.collections))
-      .catch((e) => setError(e.message));
+      .catch((e) => toastError("Failed to load collections", e));
   }, []);
 
+  useEffect(() => {
+    if (Object.keys(rowSelection).length === 0) return;
+    const validUris = new Set(records.map((r) => r.uri));
+    const pruned: RowSelectionState = {};
+    let changed = false;
+    for (const [uri, selected] of Object.entries(rowSelection)) {
+      if (validUris.has(uri)) {
+        pruned[uri] = selected;
+      } else {
+        changed = true;
+      }
+    }
+    if (changed) setRowSelection(pruned);
+  }, [records]);
+
   // Auto-select collection from URL search param on initial load.
   useEffect(() => {
     if (appliedInitial.current || !initialCollection || collections.length === 0)
@@ -122,13 +148,12 @@ export default function RecordsPage() {
   const fetchRecords = useCallback(
     async (collection: string, cursor?: string) => {
       setLoading(true);
-      setError(null);
       try {
         const data = await getAdminRecords(collection, 20, cursor);
         setRecords(data.records);
         setNextCursor(data.cursor);
       } catch (e: unknown) {
-        setError(e instanceof Error ? e.message : String(e));
+        toastError("Failed to load records", e);
         setRecords([]);
         setNextCursor(undefined);
       } finally {
@@ -145,6 +170,7 @@ export default function RecordsPage() {
         await deleteRecord(uri);
         setDeleteUri(null);
         setViewRecord(null);
+        toast.success("Record deleted");
         if (selectedCollection) {
           const currentCursor =
             cursorStack.length > 0
@@ -153,7 +179,7 @@ export default function RecordsPage() {
           fetchRecords(selectedCollection, currentCursor);
         }
       } catch (e: unknown) {
-        setError(e instanceof Error ? e.message : String(e));
+        toastError("Failed to delete record", e);
       } finally {
         setDeleting(false);
       }
@@ -170,7 +196,7 @@ export default function RecordsPage() {
       setBulkDeleteMode("selected");
       setBulkDeleteConfirm("");
       setRowSelection({});
-      // Refresh collections and records
+      toast.success("All records deleted");
       const data = await getCollections();
       setCollections(data.collections);
       setCursorStack([]);
@@ -178,7 +204,7 @@ export default function RecordsPage() {
       setRecords([]);
       setSelectedCollection("");
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError("Failed to delete collection", e);
     } finally {
       setDeletingAll(false);
     }
@@ -186,25 +212,31 @@ export default function RecordsPage() {
 
   const handleBulkDelete = useCallback(async () => {
     setDeleting(true);
-    try {
-      const selectedUris = Object.keys(rowSelection);
-      for (const uri of selectedUris) {
-        await deleteRecord(uri);
-      }
-      setRowSelection({});
-      setBulkDeleteOpen(false);
-      if (selectedCollection) {
-        const currentCursor =
-          cursorStack.length > 0
-            ? cursorStack[cursorStack.length - 1]
-            : undefined;
-        fetchRecords(selectedCollection, currentCursor);
-      }
-    } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setDeleting(false);
+    const selectedUris = Object.keys(rowSelection);
+    const results = await Promise.allSettled(selectedUris.map((uri) => deleteRecord(uri)));
+    const succeeded = selectedUris.filter((_, i) => results[i].status === "fulfilled");
+    const failed = selectedUris.length - succeeded.length;
+
+    if (failed === 0) {
+      toast.success(`Deleted ${succeeded.length} ${succeeded.length === 1 ? "record" : "records"}`);
+    } else if (succeeded.length === 0) {
+      toast.error("Failed to delete records");
+    } else {
+      toast.warning(`Deleted ${succeeded.length} of ${selectedUris.length} records`, {
+        description: `${failed} ${failed === 1 ? "record" : "records"} failed to delete.`,
+      });
+    }
+
+    setRowSelection({});
+    setBulkDeleteOpen(false);
+    if (selectedCollection) {
+      const currentCursor =
+        cursorStack.length > 0
+          ? cursorStack[cursorStack.length - 1]
+          : undefined;
+      fetchRecords(selectedCollection, currentCursor);
     }
+    setDeleting(false);
   }, [rowSelection, selectedCollection, cursorStack, fetchRecords]);
 
   // Build columns dynamically from the union of all record keys
@@ -351,8 +383,6 @@ export default function RecordsPage() {
     <>
       <SiteHeader title="Records" />
       <div className="flex flex-1 flex-col gap-4 p-4 md:p-6">
-        {error && <p className="text-destructive text-sm">{error}</p>}
-
         <DataTable
           table={table}
           showPagination={false}
@@ -517,30 +547,23 @@ export default function RecordsPage() {
           </SheetContent>
         </Sheet>
 
-        <ResponsiveDialog
-          open={!!deleteUri}
-          onOpenChange={(open) => {
-            if (!open) setDeleteUri(null);
-          }}
-        >
-          <ResponsiveDialogContent>
-            <ResponsiveDialogHeader>
-              <ResponsiveDialogTitle>Delete record?</ResponsiveDialogTitle>
-              <ResponsiveDialogDescription>
+        <AlertDialog open={!!deleteUri} onOpenChange={(open) => { if (!open) setDeleteUri(null); }}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Delete record?</AlertDialogTitle>
+              <AlertDialogDescription>
                 This will permanently delete the record. This action cannot be
                 undone.
-              </ResponsiveDialogDescription>
-            </ResponsiveDialogHeader>
+              </AlertDialogDescription>
+            </AlertDialogHeader>
             {deleteUri && (
               <code className="text-muted-foreground block truncate text-xs">
                 {deleteUri}
               </code>
             )}
-            <ResponsiveDialogFooter>
-              <ResponsiveDialogClose asChild>
-                <Button variant="outline" disabled={deleting}>Cancel</Button>
-              </ResponsiveDialogClose>
-              <Button
+            <AlertDialogFooter>
+              <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
+              <AlertDialogAction
                 variant="destructive"
                 disabled={deleting}
                 onClick={() => {
@@ -548,10 +571,10 @@ export default function RecordsPage() {
                 }}
               >
                 {deleting ? "Deleting..." : "Delete"}
-              </Button>
-            </ResponsiveDialogFooter>
-          </ResponsiveDialogContent>
-        </ResponsiveDialog>
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
 
         <ResponsiveDialog
           open={bulkDeleteOpen}
diff --git a/web/src/app/dashboard/settings/api-clients/page.tsx b/web/src/app/dashboard/settings/api-clients/page.tsx
index 15cfbe8..41a5a38 100644
--- a/web/src/app/dashboard/settings/api-clients/page.tsx
+++ b/web/src/app/dashboard/settings/api-clients/page.tsx
@@ -9,9 +9,11 @@ import {
   X,
   ExternalLink,
 } from "lucide-react";
+import { toast } from "sonner";
 
 import { useConfig } from "@/lib/config-context";
 import { useCurrentUser } from "@/hooks/use-current-user";
+import { toastError } from "@/lib/format";
 import {
   getApiClients,
   createApiClient,
@@ -23,6 +25,17 @@ import type {
   CreateApiClientResponse,
 } from "@/types/api-clients";
 import { SiteHeader } from "@/components/site-header";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -130,12 +143,11 @@ function MultiInput({
 export default function ApiClientsPage() {
   const { hasPermission } = useCurrentUser();
   const [clients, setClients] = useState<ApiClientSummary[]>([]);
-  const [error, setError] = useState<string | null>(null);
 
   const load = useCallback(() => {
     getApiClients()
       .then(setClients)
-      .catch((e) => setError(e.message));
+      .catch((e) => toastError("Failed to load API clients", e));
   }, []);
 
   useEffect(() => {
@@ -146,8 +158,6 @@ export default function ApiClientsPage() {
     <>
       <SiteHeader title="API Clients" />
       <div className="flex flex-1 flex-col gap-4 p-4 md:p-6">
-        {error && <p className="text-destructive text-sm">{error}</p>}
-
         <div className="flex items-center justify-between">
           <div>
             <h2 className="text-lg font-semibold">API Clients</h2>
@@ -183,7 +193,7 @@ export default function ApiClientsPage() {
                     colSpan={10}
                     className="text-muted-foreground text-center"
                   >
-                    No API clients yet.
+                    No API clients yet. Register an application to enable OAuth authentication through this AppView.
                   </TableCell>
                 </TableRow>
               )}
@@ -347,7 +357,7 @@ function CreateApiClientDialog({ onSuccess }: { onSuccess: () => void }) {
       });
       setCreated(result);
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError("Failed to create API client", e);
     }
   }
 
@@ -779,10 +789,11 @@ function EditApiClientDialog({
           ? Number(rateLimitRefillRate)
           : null,
       });
+      toast.success("API client updated");
       setOpen(false);
       onSuccess();
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError("Failed to update API client", e);
     } finally {
       setSaving(false);
     }
@@ -966,16 +977,19 @@ function DeleteApiClientDialog({
     setDeleting(true);
     try {
       await deleteApiClient(client.id);
+      toast.success("API client deleted");
       setOpen(false);
       onSuccess();
+    } catch (e: unknown) {
+      toastError("Failed to delete API client", e);
     } finally {
       setDeleting(false);
     }
   }
 
   return (
-    <ResponsiveDialog open={open} onOpenChange={setOpen}>
-      <ResponsiveDialogTrigger asChild>
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
         <Button
           variant="ghost"
           size="icon"
@@ -985,31 +999,27 @@ function DeleteApiClientDialog({
         >
           <Trash2 className="size-4" />
         </Button>
-      </ResponsiveDialogTrigger>
-      <ResponsiveDialogContent>
-        <ResponsiveDialogHeader>
-          <ResponsiveDialogTitle>Delete API Client</ResponsiveDialogTitle>
-          <ResponsiveDialogDescription>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete API client?</AlertDialogTitle>
+          <AlertDialogDescription>
             This will permanently delete &ldquo;{client.name}&rdquo; and revoke
             its OAuth identity. Any applications using this client will lose the
             ability to authenticate.
-          </ResponsiveDialogDescription>
-        </ResponsiveDialogHeader>
-        <ResponsiveDialogFooter>
-          <ResponsiveDialogClose asChild>
-            <Button variant="outline" disabled={deleting}>
-              Cancel
-            </Button>
-          </ResponsiveDialogClose>
-          <Button
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
             variant="destructive"
             disabled={deleting}
             onClick={handleConfirm}
           >
             {deleting ? "Deleting..." : "Delete"}
-          </Button>
-        </ResponsiveDialogFooter>
-      </ResponsiveDialogContent>
-    </ResponsiveDialog>
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 }
diff --git a/web/src/app/dashboard/settings/api-keys/page.tsx b/web/src/app/dashboard/settings/api-keys/page.tsx
index d310b2a..806009c 100644
--- a/web/src/app/dashboard/settings/api-keys/page.tsx
+++ b/web/src/app/dashboard/settings/api-keys/page.tsx
@@ -2,8 +2,10 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { Copy, Check } from "lucide-react";
+import { toast } from "sonner";
 
 import { useCurrentUser } from "@/hooks/use-current-user";
+import { toastError } from "@/lib/format";
 import {
   getApiKeys,
   createApiKey,
@@ -11,6 +13,17 @@ import {
 } from "@/lib/api";
 import type { ApiKeySummary, CreateApiKeyResponse } from "@/types/api-keys";
 import { SiteHeader } from "@/components/site-header";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import {
   ResponsiveDialog,
@@ -55,12 +68,11 @@ const ALL_PERMISSIONS = Object.values(PERMISSION_CATEGORIES).flat();
 export default function ApiKeysPage() {
   const { hasPermission } = useCurrentUser();
   const [keys, setKeys] = useState<ApiKeySummary[]>([]);
-  const [error, setError] = useState<string | null>(null);
 
   const load = useCallback(() => {
     getApiKeys()
       .then(setKeys)
-      .catch((e) => setError(e.message));
+      .catch((e) => toastError("Failed to load API keys", e));
   }, []);
 
   useEffect(() => {
@@ -70,9 +82,10 @@ export default function ApiKeysPage() {
   async function handleRevoke(id: string) {
     try {
       await revokeApiKey(id);
+      toast.success("API key revoked");
       load();
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError("Failed to revoke API key", e);
     }
   }
 
@@ -80,8 +93,6 @@ export default function ApiKeysPage() {
     <>
       <SiteHeader title="API Keys" />
       <div className="flex flex-1 flex-col gap-4 p-4 md:p-6">
-        {error && <p className="text-destructive text-sm">{error}</p>}
-
         <div className="flex items-center justify-between">
           <h2 className="text-lg font-semibold">API Keys</h2>
           {hasPermission("api-keys:create") && (
@@ -108,7 +119,7 @@ export default function ApiKeysPage() {
                     colSpan={6}
                     className="text-muted-foreground text-center"
                   >
-                    No API keys yet.
+                    No API keys yet. Create an API key to allow external services to authenticate with this AppView.
                   </TableCell>
                 </TableRow>
               )}
@@ -140,38 +151,32 @@ export default function ApiKeysPage() {
                   </TableCell>
                   <TableCell className="w-10 sticky right-0 bg-inherit z-[1]">
                     {!key.revoked_at && hasPermission("api-keys:delete") && (
-                      <ResponsiveDialog>
-                        <ResponsiveDialogTrigger asChild>
+                      <AlertDialog>
+                        <AlertDialogTrigger asChild>
                           <Button variant="outline" size="sm">
                             Revoke
                           </Button>
-                        </ResponsiveDialogTrigger>
-                        <ResponsiveDialogContent>
-                          <ResponsiveDialogHeader>
-                            <ResponsiveDialogTitle>
-                              Revoke API Key
-                            </ResponsiveDialogTitle>
-                            <ResponsiveDialogDescription>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent>
+                          <AlertDialogHeader>
+                            <AlertDialogTitle>Revoke API key?</AlertDialogTitle>
+                            <AlertDialogDescription>
                               This will permanently revoke the key &ldquo;
                               {key.name}&rdquo;. Any services using this key
                               will lose access.
-                            </ResponsiveDialogDescription>
-                          </ResponsiveDialogHeader>
-                          <ResponsiveDialogFooter>
-                            <ResponsiveDialogClose asChild>
-                              <Button variant="outline">Cancel</Button>
-                            </ResponsiveDialogClose>
-                            <ResponsiveDialogClose asChild>
-                              <Button
-                                variant="destructive"
-                                onClick={() => handleRevoke(key.id)}
-                              >
-                                Revoke
-                              </Button>
-                            </ResponsiveDialogClose>
-                          </ResponsiveDialogFooter>
-                        </ResponsiveDialogContent>
-                      </ResponsiveDialog>
+                            </AlertDialogDescription>
+                          </AlertDialogHeader>
+                          <AlertDialogFooter>
+                            <AlertDialogCancel>Cancel</AlertDialogCancel>
+                            <AlertDialogAction
+                              variant="destructive"
+                              onClick={() => handleRevoke(key.id)}
+                            >
+                              Revoke
+                            </AlertDialogAction>
+                          </AlertDialogFooter>
+                        </AlertDialogContent>
+                      </AlertDialog>
                     )}
                   </TableCell>
                 </TableRow>
@@ -192,7 +197,6 @@ function CreateApiKeyDialog({
   const [name, setName] = useState("");
   const [selectedPermissions, setSelectedPermissions] =
     useState<string[]>(ALL_PERMISSIONS);
-  const [error, setError] = useState<string | null>(null);
   const [open, setOpen] = useState(false);
   const [createdKey, setCreatedKey] = useState<CreateApiKeyResponse | null>(
     null
@@ -204,7 +208,6 @@ function CreateApiKeyDialog({
     if (!nextOpen) {
       setName("");
       setSelectedPermissions(ALL_PERMISSIONS);
-      setError(null);
       if (createdKey) {
         setCreatedKey(null);
         onSuccess();
@@ -231,7 +234,6 @@ function CreateApiKeyDialog({
   }
 
   async function handleCreate() {
-    setError(null);
     try {
       const result = await createApiKey({
         name,
@@ -240,7 +242,7 @@ function CreateApiKeyDialog({
       setCreatedKey(result);
       setCopied(false);
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError("Failed to create API key", e);
     }
   }
 
@@ -298,7 +300,6 @@ function CreateApiKeyDialog({
           </div>
         ) : (
           <div className="flex flex-col gap-4">
-            {error && <p className="text-destructive text-sm">{error}</p>}
             <div className="flex flex-col gap-2">
               <Label htmlFor="api-key-name">Name</Label>
               <Input
diff --git a/web/src/app/dashboard/settings/env-variables/page.tsx b/web/src/app/dashboard/settings/env-variables/page.tsx
index 482461b..ff2b0f3 100644
--- a/web/src/app/dashboard/settings/env-variables/page.tsx
+++ b/web/src/app/dashboard/settings/env-variables/page.tsx
@@ -2,8 +2,10 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { Trash2, Pencil } from "lucide-react";
+import { toast } from "sonner";
 
 import { useCurrentUser } from "@/hooks/use-current-user";
+import { toastError } from "@/lib/format";
 import {
   getScriptVariables,
   upsertScriptVariable,
@@ -11,6 +13,17 @@ import {
 } from "@/lib/api";
 import type { ScriptVariableSummary } from "@/types/script-variables";
 import { SiteHeader } from "@/components/site-header";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import {
   ResponsiveDialog,
@@ -37,12 +50,11 @@ import {
 export default function EnvVariablesPage() {
   const { hasPermission } = useCurrentUser();
   const [vars, setVars] = useState<ScriptVariableSummary[]>([]);
-  const [error, setError] = useState<string | null>(null);
 
   const load = useCallback(() => {
     getScriptVariables()
       .then(setVars)
-      .catch((e) => setError(e.message));
+      .catch((e) => toastError("Failed to load variables", e));
   }, []);
 
   useEffect(() => {
@@ -52,9 +64,10 @@ export default function EnvVariablesPage() {
   async function handleDeleteVar(key: string) {
     try {
       await deleteScriptVariable(key);
+      toast.success("Variable deleted");
       load();
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError("Failed to delete variable", e);
     }
   }
 
@@ -62,8 +75,6 @@ export default function EnvVariablesPage() {
     <>
       <SiteHeader title="ENV Variables" />
       <div className="flex flex-1 flex-col gap-4 p-4 md:p-6">
-        {error && <p className="text-destructive text-sm">{error}</p>}
-
         <div className="flex items-center justify-between">
           <div>
             <h2 className="text-lg font-semibold">Script Variables</h2>
@@ -94,7 +105,7 @@ export default function EnvVariablesPage() {
                     colSpan={4}
                     className="text-muted-foreground text-center"
                   >
-                    No script variables yet.
+                    No script variables yet. Variables defined here are accessible to Lua scripts via the env global table.
                   </TableCell>
                 </TableRow>
               )}
@@ -116,16 +127,37 @@ export default function EnvVariablesPage() {
                         editKey={v.key}
                       />
                       {hasPermission("script-variables:delete") && (
-                        <Button
-                          variant="destructive"
-                          size="icon"
-                          className="size-8 text-muted-foreground hover:text-destructive"
-                          title="Delete variable"
-                          aria-label="Delete variable"
-                          onClick={() => handleDeleteVar(v.key)}
-                        >
-                          <Trash2 className="size-4" />
-                        </Button>
+                        <AlertDialog>
+                          <AlertDialogTrigger asChild>
+                            <Button
+                              variant="destructive"
+                              size="icon"
+                              className="size-8 text-muted-foreground hover:text-destructive"
+                              title="Delete variable"
+                              aria-label="Delete variable"
+                            >
+                              <Trash2 className="size-4" />
+                            </Button>
+                          </AlertDialogTrigger>
+                          <AlertDialogContent>
+                            <AlertDialogHeader>
+                              <AlertDialogTitle>Delete variable?</AlertDialogTitle>
+                              <AlertDialogDescription>
+                                This will permanently remove the variable. Scripts
+                                using this variable will fail on next execution.
+                              </AlertDialogDescription>
+                            </AlertDialogHeader>
+                            <AlertDialogFooter>
+                              <AlertDialogCancel>Cancel</AlertDialogCancel>
+                              <AlertDialogAction
+                                variant="destructive"
+                                onClick={() => handleDeleteVar(v.key)}
+                              >
+                                Delete
+                              </AlertDialogAction>
+                            </AlertDialogFooter>
+                          </AlertDialogContent>
+                        </AlertDialog>
                       )}
                     </div>
                   </TableCell>
@@ -160,6 +192,7 @@ function UpsertVariableDialog({
         key: isEdit ? editKey : key,
         value,
       });
+      toast.success(isEdit ? "Variable updated" : "Variable created");
       setKey(editKey ?? "");
       setValue("");
       setOpen(false);
diff --git a/web/src/app/dashboard/settings/labelers/page.tsx b/web/src/app/dashboard/settings/labelers/page.tsx
index 7175eb8..39da8ab 100644
--- a/web/src/app/dashboard/settings/labelers/page.tsx
+++ b/web/src/app/dashboard/settings/labelers/page.tsx
@@ -2,8 +2,10 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { Trash2, Pause, Play } from "lucide-react";
+import { toast } from "sonner";
 
 import { useCurrentUser } from "@/hooks/use-current-user";
+import { toastError } from "@/lib/format";
 import {
   getLabelers,
   addLabeler,
@@ -12,6 +14,16 @@ import {
 } from "@/lib/api";
 import type { LabelerSummary } from "@/types/labelers";
 import { SiteHeader } from "@/components/site-header";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -39,14 +51,13 @@ export default function LabelersPage() {
   const { hasPermission } = useCurrentUser();
   const [labelers, setLabelers] = useState<LabelerSummary[]>([]);
   const [handles, setHandles] = useState<Record<string, string>>({});
-  const [error, setError] = useState<string | null>(null);
   const [deleteDid, setDeleteDid] = useState<string | null>(null);
   const [deleting, setDeleting] = useState(false);
 
   const load = useCallback(() => {
     getLabelers()
       .then(setLabelers)
-      .catch((e) => setError(e.message));
+      .catch((e) => toastError("Failed to load labelers", e));
   }, []);
 
   useEffect(() => {
@@ -77,9 +88,10 @@ export default function LabelersPage() {
     try {
       const newStatus = labeler.status === "active" ? "paused" : "active";
       await updateLabeler(labeler.did, { status: newStatus });
+      toast.success(labeler.status === "active" ? "Labeler paused" : "Labeler resumed");
       load();
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError("Failed to update labeler status", e);
     }
   }
 
@@ -88,9 +100,10 @@ export default function LabelersPage() {
     try {
       await deleteLabeler(did);
       setDeleteDid(null);
+      toast.success("Labeler deleted");
       load();
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError("Failed to delete labeler", e);
     } finally {
       setDeleting(false);
     }
@@ -100,8 +113,6 @@ export default function LabelersPage() {
     <>
       <SiteHeader title="Labelers" />
       <div className="flex flex-1 flex-col gap-4 p-4 md:p-6">
-        {error && <p className="text-destructive text-sm">{error}</p>}
-
         <div className="flex items-center justify-between">
           <div>
             <h2 className="text-lg font-semibold">Labeler Subscriptions</h2>
@@ -133,7 +144,7 @@ export default function LabelersPage() {
                     colSpan={6}
                     className="text-muted-foreground text-center"
                   >
-                    No labeler subscriptions yet.
+                    No labeler subscriptions yet. Add a labeler to subscribe to external content labeling services.
                   </TableCell>
                 </TableRow>
               )}
@@ -208,43 +219,32 @@ export default function LabelersPage() {
         </div>
       </div>
 
-      <ResponsiveDialog
-        open={!!deleteDid}
-        onOpenChange={(open) => {
-          if (!open) setDeleteDid(null);
-        }}
-      >
-        <ResponsiveDialogContent>
-          <ResponsiveDialogHeader>
-            <ResponsiveDialogTitle>Delete labeler?</ResponsiveDialogTitle>
-            <ResponsiveDialogDescription>
+      <AlertDialog open={!!deleteDid} onOpenChange={(open) => { if (!open) setDeleteDid(null); }}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete labeler?</AlertDialogTitle>
+            <AlertDialogDescription>
               This will remove the labeler subscription and delete all labels it
               has emitted. This action cannot be undone.
-            </ResponsiveDialogDescription>
-          </ResponsiveDialogHeader>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
           {deleteDid && (
             <code className="text-muted-foreground block truncate text-xs">
               {deleteDid}
             </code>
           )}
-          <ResponsiveDialogFooter>
-            <ResponsiveDialogClose asChild>
-              <Button variant="outline" disabled={deleting}>
-                Cancel
-              </Button>
-            </ResponsiveDialogClose>
-            <Button
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
               variant="destructive"
               disabled={deleting}
-              onClick={() => {
-                if (deleteDid) handleDelete(deleteDid);
-              }}
+              onClick={() => { if (deleteDid) handleDelete(deleteDid); }}
             >
               {deleting ? "Deleting..." : "Delete"}
-            </Button>
-          </ResponsiveDialogFooter>
-        </ResponsiveDialogContent>
-      </ResponsiveDialog>
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </>
   );
 }
@@ -262,10 +262,12 @@ function AddLabelerDialog({
     setError(null);
     try {
       await addLabeler({ did });
+      toast.success("Labeler added");
       setDid("");
       setOpen(false);
       onSuccess();
     } catch (e: unknown) {
+      toastError("Failed to add labeler", e);
       setError(e instanceof Error ? e.message : String(e));
     }
   }
diff --git a/web/src/app/dashboard/settings/scripts/page.tsx b/web/src/app/dashboard/settings/scripts/page.tsx
index 36e993a..2bc127e 100644
--- a/web/src/app/dashboard/settings/scripts/page.tsx
+++ b/web/src/app/dashboard/settings/scripts/page.tsx
@@ -18,8 +18,10 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { ExternalLink, Eye, Trash2 } from "lucide-react";
+import { toast } from "sonner";
 
 import { useCurrentUser } from "@/hooks/use-current-user";
+import { toastError } from "@/lib/format";
 import { deleteScript, getScripts } from "@/lib/api";
 import type { Script } from "@/types/scripts";
 import {
@@ -34,6 +36,17 @@ import { DataTable } from "@/components/data-table/data-table";
 import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header";
 import { DataTableToolbar } from "@/components/data-table/data-table-toolbar";
 import { SiteHeader } from "@/components/site-header";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 
@@ -47,12 +60,11 @@ export default function ScriptsPage() {
   const { hasPermission } = useCurrentUser();
   const router = useRouter();
   const [scripts, setScripts] = useState<Script[]>([]);
-  const [error, setError] = useState<string | null>(null);
 
   const load = useCallback(() => {
     getScripts()
       .then(setScripts)
-      .catch((e) => setError(e instanceof Error ? e.message : String(e)));
+      .catch((e) => toastError("Failed to load scripts", e));
   }, []);
 
   useEffect(() => {
@@ -74,12 +86,12 @@ export default function ScriptsPage() {
   );
 
   async function handleDelete(id: string) {
-    if (!confirm(`Delete script '${id}'?`)) return;
     try {
       await deleteScript(id);
+      toast.success("Script deleted");
       load();
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError("Failed to delete script", e);
     }
   }
 
@@ -224,19 +236,32 @@ export default function ScriptsPage() {
               </Link>
             </Button>
             {hasPermission("scripts:manage") && (
-              <Button
-                variant="destructive"
-                size="icon"
-                className="size-8 text-muted-foreground hover:text-destructive"
-                title="Delete script"
-                aria-label="Delete script"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleDelete(row.original.id);
-                }}
-              >
-                <Trash2 className="size-4" />
-              </Button>
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button
+                    variant="destructive"
+                    size="icon"
+                    className="size-8 text-muted-foreground hover:text-destructive"
+                    title="Delete script"
+                    aria-label="Delete script"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <Trash2 className="size-4" />
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Delete script?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This will permanently remove the script. This action cannot be undone.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction variant="destructive" onClick={() => handleDelete(row.original.id)}>Delete</AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
             )}
           </div>
         ),
@@ -288,8 +313,6 @@ export default function ScriptsPage() {
     <>
       <SiteHeader title="Scripts" />
       <div className="flex flex-1 flex-col gap-4 p-4 md:p-6">
-        {error && <p className="text-destructive text-sm">{error}</p>}
-
         <DataTable
           table={table}
           onRowClick={(row) =>
diff --git a/web/src/app/dashboard/settings/users/page.tsx b/web/src/app/dashboard/settings/users/page.tsx
index f3d06b3..23096c9 100644
--- a/web/src/app/dashboard/settings/users/page.tsx
+++ b/web/src/app/dashboard/settings/users/page.tsx
@@ -5,6 +5,7 @@ import { ChevronRight, Search, Shield, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
 import { useAuth } from "@/lib/auth-context";
+import { toastError } from "@/lib/format";
 import {
   getUsers,
   addUser,
@@ -15,6 +16,17 @@ import {
 } from "@/lib/api";
 import type { PermissionEntry, PermissionTemplate } from "@/lib/api";
 import type { UserSummary } from "@/types/users";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { SiteHeader } from "@/components/site-header";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -77,7 +89,6 @@ export default function UsersPage() {
   const { did: currentDid } = useAuth();
   const [users, setUsers] = useState<UserSummary[]>([]);
   const [handles, setHandles] = useState<Record<string, string>>({});
-  const [error, setError] = useState<string | null>(null);
   const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
   const [pendingPermissions, setPendingPermissions] = useState<string[]>([]);
   const [saving, setSaving] = useState(false);
@@ -124,7 +135,7 @@ export default function UsersPage() {
   const load = useCallback(() => {
     getUsers()
       .then(setUsers)
-      .catch((e) => setError(e instanceof Error ? e.message : String(e)));
+      .catch((e) => toastError("Failed to load users", e));
   }, []);
 
   useEffect(() => {
@@ -134,7 +145,7 @@ export default function UsersPage() {
         setPermissionEntries(catalog.permissions);
         setTemplates(catalog.templates);
       })
-      .catch((e) => setError(e instanceof Error ? e.message : String(e)));
+      .catch((e) => toastError("Failed to load permissions", e));
   }, [load]);
 
   // Resolve DIDs to handles via PLC directory
@@ -190,9 +201,10 @@ export default function UsersPage() {
   async function handleDelete(id: string) {
     try {
       await deleteUser(id);
+      toast.success("User deleted");
       load();
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError("Failed to delete user", e);
     }
   }
 
@@ -253,7 +265,7 @@ export default function UsersPage() {
       toast.success("Permissions updated");
       load();
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError("Failed to save permissions", e);
     } finally {
       setSaving(false);
     }
@@ -262,9 +274,10 @@ export default function UsersPage() {
   async function handleTransferSuper(targetUserId: string) {
     try {
       await transferSuper({ target_user_id: targetUserId });
+      toast.success("Ownership transferred");
       load();
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError("Failed to transfer ownership", e);
     }
   }
 
@@ -272,8 +285,6 @@ export default function UsersPage() {
     <>
       <SiteHeader title="Users" />
       <div className="flex flex-1 flex-col gap-4 p-4 md:p-6">
-        {error && <p className="text-destructive text-sm">{error}</p>}
-
         <div className="flex items-center justify-between">
           <h2 className="text-lg font-semibold">Users</h2>
           {(isCurrentUserSuper ||
@@ -304,7 +315,7 @@ export default function UsersPage() {
                     colSpan={5}
                     className="text-muted-foreground text-center"
                   >
-                    No users yet.
+                    No users yet. The first authenticated user is automatically granted owner permissions.
                   </TableCell>
                 </TableRow>
               )}
@@ -550,25 +561,37 @@ export default function UsersPage() {
 
                           <SheetFooter className="border-t flex-row">
                             <div className="flex items-center gap-2">
-                              <Button
-                                variant="destructive"
-                                size="sm"
-                                disabled={
-                                  selectedUser.is_super ||
-                                  selectedUser.did === currentDid ||
-                                  (!isCurrentUserSuper &&
-                                    !currentUser?.permissions.includes(
-                                      "users:delete",
-                                    ))
-                                }
-                                onClick={() => {
-                                  handleDelete(selectedUser.id);
-                                  setSelectedUserId(null);
-                                }}
-                              >
-                                <Trash2 className="mr-1 size-3.5" />
-                                Delete User
-                              </Button>
+                              <AlertDialog>
+                                <AlertDialogTrigger asChild>
+                                  <Button
+                                    variant="destructive"
+                                    size="sm"
+                                    disabled={
+                                      selectedUser.is_super ||
+                                      selectedUser.did === currentDid ||
+                                      (!isCurrentUserSuper &&
+                                        !currentUser?.permissions.includes(
+                                          "users:delete",
+                                        ))
+                                    }
+                                  >
+                                    <Trash2 className="mr-1 size-3.5" />
+                                    Delete User
+                                  </Button>
+                                </AlertDialogTrigger>
+                                <AlertDialogContent>
+                                  <AlertDialogHeader>
+                                    <AlertDialogTitle>Delete user?</AlertDialogTitle>
+                                    <AlertDialogDescription>
+                                      This will permanently remove the user and revoke all their permissions. This action cannot be undone.
+                                    </AlertDialogDescription>
+                                  </AlertDialogHeader>
+                                  <AlertDialogFooter>
+                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                    <AlertDialogAction variant="destructive" onClick={() => { handleDelete(selectedUser.id); setSelectedUserId(null); }}>Delete</AlertDialogAction>
+                                  </AlertDialogFooter>
+                                </AlertDialogContent>
+                              </AlertDialog>
                               {isCurrentUserSuper && (
                                 <TransferOwnershipDialog
                                   user={selectedUser}
@@ -768,21 +791,20 @@ function AddUserDialog({
 }) {
   const [did, setDid] = useState("");
   const [template, setTemplate] = useState<string>("");
-  const [error, setError] = useState<string | null>(null);
   const [open, setOpen] = useState(false);
 
   async function handleAdd() {
-    setError(null);
     try {
       const body: { did: string; template?: string } = { did };
       if (template) body.template = template;
       await addUser(body);
+      toast.success("User added");
       setDid("");
       setTemplate("");
       setOpen(false);
       onSuccess();
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e));
+      toastError("Failed to add user", e);
     }
   }
 
@@ -800,7 +822,6 @@ function AddUserDialog({
           </ResponsiveDialogDescription>
         </ResponsiveDialogHeader>
         <div className="flex flex-col gap-4">
-          {error && <p className="text-destructive text-sm">{error}</p>}
           <div className="flex flex-col gap-2">
             <Label htmlFor="user-did">DID</Label>
             <Input
-- 
2.51.2