feat: replace Dialog component with ConfirmActionDialog for improved confirmation handling

frontend/src/app/agents/page.tsx

@@ -20,14 +20,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { StatusPill } from "@/components/atoms/StatusPill";
 import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
 import { Button, buttonVariants } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { ConfirmActionDialog } from "@/components/ui/confirm-action-dialog";
 import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state";
 
 import { ApiError } from "@/api/mutator";
@@ -341,37 +334,25 @@ export default function AgentsPage() {
         ) : null}
       </DashboardPageLayout>
 
-      <Dialog
+      <ConfirmActionDialog
         open={!!deleteTarget}
-        onOpenChange={(nextOpen) => {
-          if (!nextOpen) {
+        onOpenChange={(open) => {
+          if (!open) {
             setDeleteTarget(null);
           }
         }}
-      >
-        <DialogContent aria-label="Delete agent">
-          <DialogHeader>
-            <DialogTitle>Delete agent</DialogTitle>
-            <DialogDescription>
-              This will remove {deleteTarget?.name}. This action cannot be
-              undone.
-            </DialogDescription>
-          </DialogHeader>
-          {deleteMutation.error ? (
-            <div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
-              {deleteMutation.error.message}
-            </div>
-          ) : null}
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setDeleteTarget(null)}>
-              Cancel
-            </Button>
-            <Button onClick={handleDelete} disabled={deleteMutation.isPending}>
-              {deleteMutation.isPending ? "Deleting…" : "Delete"}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        ariaLabel="Delete agent"
+        title="Delete agent"
+        description={
+          <>
+            This will remove {deleteTarget?.name}. This action cannot be
+            undone.
+          </>
+        }
+        errorMessage={deleteMutation.error?.message}
+        onConfirm={handleDelete}
+        isConfirming={deleteMutation.isPending}
+      />
     </>
   );
 }

frontend/src/app/board-groups/page.tsx

@@ -24,14 +24,7 @@ import {
 import type { BoardGroupRead } from "@/api/generated/model";
 import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
 import { Button, buttonVariants } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { ConfirmActionDialog } from "@/components/ui/confirm-action-dialog";
 import { formatTimestamp } from "@/lib/formatters";
 import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state";
 
@@ -268,37 +261,25 @@ export default function BoardGroupsPage() {
           <p className="mt-4 text-sm text-red-500">{groupsQuery.error.message}</p>
         ) : null}
       </DashboardPageLayout>
-      <Dialog
+      <ConfirmActionDialog
         open={!!deleteTarget}
-        onOpenChange={(nextOpen) => {
-          if (!nextOpen) {
+        onOpenChange={(open) => {
+          if (!open) {
             setDeleteTarget(null);
           }
         }}
-      >
-        <DialogContent aria-label="Delete board group">
-          <DialogHeader>
-            <DialogTitle>Delete board group</DialogTitle>
-            <DialogDescription>
-              This will remove {deleteTarget?.name}. Boards will be ungrouped.
-              This action cannot be undone.
-            </DialogDescription>
-          </DialogHeader>
-          {deleteMutation.error ? (
-            <div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
-              {deleteMutation.error.message}
-            </div>
-          ) : null}
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setDeleteTarget(null)}>
-              Cancel
-            </Button>
-            <Button onClick={handleDelete} disabled={deleteMutation.isPending}>
-              {deleteMutation.isPending ? "Deleting…" : "Delete"}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        ariaLabel="Delete board group"
+        title="Delete board group"
+        description={
+          <>
+            This will remove {deleteTarget?.name}. Boards will be ungrouped.
+            This action cannot be undone.
+          </>
+        }
+        errorMessage={deleteMutation.error?.message}
+        onConfirm={handleDelete}
+        isConfirming={deleteMutation.isPending}
+      />
     </>
   );
 }

frontend/src/app/boards/page.tsx

@@ -30,14 +30,7 @@ import { useOrganizationMembership } from "@/lib/use-organization-membership";
 import type { BoardGroupRead, BoardRead } from "@/api/generated/model";
 import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
 import { Button, buttonVariants } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { ConfirmActionDialog } from "@/components/ui/confirm-action-dialog";
 import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state";
 
 const compactId = (value: string) =>
@@ -322,37 +315,25 @@ export default function BoardsPage() {
           <p className="mt-4 text-sm text-red-500">{boardsQuery.error.message}</p>
         ) : null}
       </DashboardPageLayout>
-      <Dialog
+      <ConfirmActionDialog
         open={!!deleteTarget}
-        onOpenChange={(nextOpen) => {
-          if (!nextOpen) {
+        onOpenChange={(open) => {
+          if (!open) {
             setDeleteTarget(null);
           }
         }}
-      >
-        <DialogContent aria-label="Delete board">
-          <DialogHeader>
-            <DialogTitle>Delete board</DialogTitle>
-            <DialogDescription>
-              This will remove {deleteTarget?.name}. This action cannot be
-              undone.
-            </DialogDescription>
-          </DialogHeader>
-          {deleteMutation.error ? (
-            <div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
-              {deleteMutation.error.message}
-            </div>
-          ) : null}
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setDeleteTarget(null)}>
-              Cancel
-            </Button>
-            <Button onClick={handleDelete} disabled={deleteMutation.isPending}>
-              {deleteMutation.isPending ? "Deleting…" : "Delete"}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        ariaLabel="Delete board"
+        title="Delete board"
+        description={
+          <>
+            This will remove {deleteTarget?.name}. This action cannot be
+            undone.
+          </>
+        }
+        errorMessage={deleteMutation.error?.message}
+        onConfirm={handleDelete}
+        isConfirming={deleteMutation.isPending}
+      />
     </>
   );
 }

frontend/src/app/gateways/page.tsx

@@ -18,14 +18,7 @@ import { useQueryClient } from "@tanstack/react-query";
 
 import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
 import { Button, buttonVariants } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { ConfirmActionDialog } from "@/components/ui/confirm-action-dialog";
 import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state";
 
 import { ApiError } from "@/api/mutator";
@@ -294,33 +287,22 @@ export default function GatewaysPage() {
       ) : null}
       </DashboardPageLayout>
 
-      <Dialog
+      <ConfirmActionDialog
         open={Boolean(deleteTarget)}
         onOpenChange={() => setDeleteTarget(null)}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Delete gateway?</DialogTitle>
-            <DialogDescription>
-              This removes the gateway connection from Mission Control. Boards
-              using it will need a new gateway assigned.
-            </DialogDescription>
-          </DialogHeader>
-          {deleteMutation.error ? (
-            <p className="text-sm text-red-500">
-              {deleteMutation.error.message}
-            </p>
-          ) : null}
-          <DialogFooter>
-            <Button variant="ghost" onClick={() => setDeleteTarget(null)}>
-              Cancel
-            </Button>
-            <Button onClick={handleDelete} disabled={deleteMutation.isPending}>
-              {deleteMutation.isPending ? "Deleting…" : "Delete"}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        title="Delete gateway?"
+        description={
+          <>
+            This removes the gateway connection from Mission Control. Boards
+            using it will need a new gateway assigned.
+          </>
+        }
+        errorMessage={deleteMutation.error?.message}
+        errorStyle="text"
+        cancelVariant="ghost"
+        onConfirm={handleDelete}
+        isConfirming={deleteMutation.isPending}
+      />
     </>
   );
 }

frontend/src/components/ui/confirm-action-dialog.tsx

@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+
+import { Button, type ButtonProps } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+type ConfirmActionDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: ReactNode;
+  onConfirm: () => void;
+  isConfirming: boolean;
+  errorMessage?: string | null;
+  confirmLabel?: string;
+  confirmingLabel?: string;
+  cancelLabel?: string;
+  cancelVariant?: NonNullable<ButtonProps["variant"]>;
+  errorStyle?: "text" | "panel";
+  ariaLabel?: string;
+};
+
+export function ConfirmActionDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  onConfirm,
+  isConfirming,
+  errorMessage,
+  confirmLabel = "Delete",
+  confirmingLabel = "Deleting…",
+  cancelLabel = "Cancel",
+  cancelVariant = "outline",
+  errorStyle = "panel",
+  ariaLabel,
+}: ConfirmActionDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent aria-label={ariaLabel}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        {errorMessage ? (
+          errorStyle === "text" ? (
+            <p className="text-sm text-red-500">{errorMessage}</p>
+          ) : (
+            <div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
+              {errorMessage}
+            </div>
+          )
+        ) : null}
+        <DialogFooter>
+          <Button variant={cancelVariant} onClick={() => onOpenChange(false)}>
+            {cancelLabel}
+          </Button>
+          <Button onClick={onConfirm} disabled={isConfirming}>
+            {isConfirming ? confirmingLabel : confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}