fix(boards): Cascade board deletion

Delete board-owned tasks, agents, and activity events before\nremoving the board. Adds board edit page with gateway settings\nand edit/delete actions in the boards table.\n\nCo-Authored-By: Claude <noreply@anthropic.com>

frontend/src/app/boards/[boardId]/edit/page.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+
+import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
+import { DashboardShell } from "@/components/templates/DashboardShell";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+const apiBase =
+  process.env.NEXT_PUBLIC_API_URL?.replace(/\/+$/, "") ||
+  "http://localhost:8000";
+
+type Board = {
+  id: string;
+  name: string;
+  slug: string;
+  gateway_url?: string | null;
+  gateway_main_session_key?: string | null;
+  gateway_workspace_root?: string | null;
+};
+
+const slugify = (value: string) =>
+  value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "") || "board";
+
+export default function EditBoardPage() {
+  const { getToken, isSignedIn } = useAuth();
+  const router = useRouter();
+  const params = useParams();
+  const boardIdParam = params?.boardId;
+  const boardId = Array.isArray(boardIdParam) ? boardIdParam[0] : boardIdParam;
+
+  const [board, setBoard] = useState<Board | null>(null);
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [gatewayUrl, setGatewayUrl] = useState("");
+  const [gatewayToken, setGatewayToken] = useState("");
+  const [gatewayMainSessionKey, setGatewayMainSessionKey] = useState("");
+  const [gatewayWorkspaceRoot, setGatewayWorkspaceRoot] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadBoard = async () => {
+    if (!isSignedIn || !boardId) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const token = await getToken();
+      const response = await fetch(`${apiBase}/api/v1/boards/${boardId}`, {
+        headers: { Authorization: token ? `Bearer ${token}` : "" },
+      });
+      if (!response.ok) {
+        throw new Error("Unable to load board.");
+      }
+      const data = (await response.json()) as Board;
+      setBoard(data);
+      setName(data.name);
+      setSlug(data.slug);
+      setGatewayUrl(data.gateway_url ?? "");
+      setGatewayMainSessionKey(data.gateway_main_session_key ?? "");
+      setGatewayWorkspaceRoot(data.gateway_workspace_root ?? "");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadBoard();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSignedIn, boardId]);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!isSignedIn || !boardId) return;
+    const trimmed = name.trim();
+    if (!trimmed) {
+      setError("Board name is required.");
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const token = await getToken();
+      const payload: Partial<Board> & { gateway_token?: string | null } = {
+        name: trimmed,
+        slug: slug.trim() || slugify(trimmed),
+        gateway_url: gatewayUrl.trim() || null,
+        gateway_main_session_key: gatewayMainSessionKey.trim() || null,
+        gateway_workspace_root: gatewayWorkspaceRoot.trim() || null,
+      };
+      if (gatewayToken.trim()) {
+        payload.gateway_token = gatewayToken.trim();
+      }
+      const response = await fetch(`${apiBase}/api/v1/boards/${boardId}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token ? `Bearer ${token}` : "",
+        },
+        body: JSON.stringify(payload),
+      });
+      if (!response.ok) {
+        throw new Error("Unable to update board.");
+      }
+      router.push(`/boards/${boardId}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <DashboardShell>
+      <SignedOut>
+        <div className="flex h-full flex-col items-center justify-center gap-4 rounded-2xl surface-panel p-10 text-center lg:col-span-2">
+          <p className="text-sm text-muted">Sign in to edit boards.</p>
+          <SignInButton
+            mode="modal"
+            forceRedirectUrl={`/boards/${boardId}/edit`}
+            signUpForceRedirectUrl={`/boards/${boardId}/edit`}
+          >
+            <Button>Sign in</Button>
+          </SignInButton>
+        </div>
+      </SignedOut>
+      <SignedIn>
+        <DashboardSidebar />
+        <div className="flex h-full flex-col justify-center rounded-2xl surface-panel p-8">
+          <div className="mb-6 space-y-2">
+            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-quiet">
+              Edit board
+            </p>
+            <h1 className="text-2xl font-semibold text-strong">
+              {board?.name ?? "Board"}
+            </h1>
+            <p className="text-sm text-muted">
+              Update the board identity and gateway connection.
+            </p>
+          </div>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-strong">Board name</label>
+              <Input
+                value={name}
+                onChange={(event) => setName(event.target.value)}
+                placeholder="e.g. Product ops"
+                disabled={isLoading}
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-strong">Slug</label>
+              <Input
+                value={slug}
+                onChange={(event) => setSlug(event.target.value)}
+                placeholder="product-ops"
+                disabled={isLoading}
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-strong">
+                Gateway URL
+              </label>
+              <Input
+                value={gatewayUrl}
+                onChange={(event) => setGatewayUrl(event.target.value)}
+                placeholder="ws://gateway:18789"
+                disabled={isLoading}
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-strong">
+                Gateway token
+              </label>
+              <Input
+                value={gatewayToken}
+                onChange={(event) => setGatewayToken(event.target.value)}
+                placeholder="Leave blank to keep current token"
+                disabled={isLoading}
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-strong">
+                Main session key
+              </label>
+              <Input
+                value={gatewayMainSessionKey}
+                onChange={(event) => setGatewayMainSessionKey(event.target.value)}
+                placeholder="agent:main:main"
+                disabled={isLoading}
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-strong">
+                Workspace root
+              </label>
+              <Input
+                value={gatewayWorkspaceRoot}
+                onChange={(event) => setGatewayWorkspaceRoot(event.target.value)}
+                placeholder="~/.openclaw/workspaces"
+                disabled={isLoading}
+              />
+            </div>
+            {error ? (
+              <div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
+                {error}
+              </div>
+            ) : null}
+            <Button type="submit" className="w-full" disabled={isLoading}>
+              {isLoading ? "Saving…" : "Save changes"}
+            </Button>
+          </form>
+          <Button
+            variant="outline"
+            className="mt-4"
+            onClick={() => router.push(`/boards/${boardId}`)}
+          >
+            Back to board
+          </Button>
+        </div>
+      </SignedIn>
+    </DashboardShell>
+  );
+}

frontend/src/app/boards/[boardId]/page.tsx

@@ -31,10 +31,6 @@ type Board = {
   id: string;
   name: string;
   slug: string;
-  gateway_url?: string | null;
-  gateway_token?: string | null;
-  gateway_main_session_key?: string | null;
-  gateway_workspace_root?: string | null;
 };
 
 type Task = {
@@ -74,13 +70,6 @@ export default function BoardDetailPage() {
   const [priority, setPriority] = useState("medium");
   const [createError, setCreateError] = useState<string | null>(null);
   const [isCreating, setIsCreating] = useState(false);
-  const [gatewayUrl, setGatewayUrl] = useState("");
-  const [gatewayToken, setGatewayToken] = useState("");
-  const [gatewayMainSessionKey, setGatewayMainSessionKey] = useState("");
-  const [gatewayWorkspaceRoot, setGatewayWorkspaceRoot] = useState("");
-  const [isSaving, setIsSaving] = useState(false);
-  const [saveError, setSaveError] = useState<string | null>(null);
-  const [saveSuccess, setSaveSuccess] = useState(false);
 
   const titleLabel = useMemo(
     () => (board ? `${board.name} board` : "Board"),
@@ -117,9 +106,6 @@ export default function BoardDetailPage() {
       const taskData = (await tasksResponse.json()) as Task[];
       setBoard(boardData);
       setTasks(taskData);
-      setGatewayUrl(boardData.gateway_url ?? "");
-      setGatewayMainSessionKey(boardData.gateway_main_session_key ?? "");
-      setGatewayWorkspaceRoot(boardData.gateway_workspace_root ?? "");
     } catch (err) {
       setError(err instanceof Error ? err.message : "Something went wrong.");
     } finally {
@@ -179,46 +165,6 @@ export default function BoardDetailPage() {
     }
   };
 
-  const handleSaveSettings = async () => {
-    if (!isSignedIn || !boardId) return;
-    setIsSaving(true);
-    setSaveError(null);
-    setSaveSuccess(false);
-    try {
-      const token = await getToken();
-      const payload: Partial<Board> = {
-        gateway_url: gatewayUrl.trim() || null,
-        gateway_main_session_key: gatewayMainSessionKey.trim() || null,
-        gateway_workspace_root: gatewayWorkspaceRoot.trim() || null,
-      };
-      if (gatewayToken.trim()) {
-        payload.gateway_token = gatewayToken.trim();
-      }
-      const response = await fetch(`${apiBase}/api/v1/boards/${boardId}`, {
-        method: "PATCH",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: token ? `Bearer ${token}` : "",
-        },
-        body: JSON.stringify(payload),
-      });
-      if (!response.ok) {
-        throw new Error("Unable to update board settings.");
-      }
-      const updated = (await response.json()) as Board;
-      setBoard(updated);
-      setGatewayUrl(updated.gateway_url ?? "");
-      setGatewayMainSessionKey(updated.gateway_main_session_key ?? "");
-      setGatewayWorkspaceRoot(updated.gateway_workspace_root ?? "");
-      setGatewayToken("");
-      setSaveSuccess(true);
-      setTimeout(() => setSaveSuccess(false), 2500);
-    } catch (err) {
-      setSaveError(err instanceof Error ? err.message : "Something went wrong.");
-    } finally {
-      setIsSaving(false);
-    }
-  };
 
   return (
     <DashboardShell>
@@ -268,88 +214,11 @@ export default function BoardDetailPage() {
               Loading {titleLabel}…
             </div>
           ) : (
-            <>
-              <TaskBoard
-                tasks={tasks}
-                onCreateTask={() => setIsDialogOpen(true)}
-                isCreateDisabled={isCreating}
-              />
-              <div className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)] p-6">
-                <div className="mb-4 space-y-1">
-                  <p className="text-xs font-semibold uppercase tracking-[0.3em] text-quiet">
-                    Gateway settings
-                  </p>
-                  <h2 className="text-lg font-semibold text-strong">
-                    Connect this board to an OpenClaw gateway.
-                  </h2>
-                  <p className="text-sm text-muted">
-                    Used when provisioning agents and checking gateway status for
-                    this board.
-                  </p>
-                </div>
-                <div className="grid gap-4 lg:grid-cols-2">
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium text-strong">
-                      Gateway URL
-                    </label>
-                    <Input
-                      value={gatewayUrl}
-                      onChange={(event) => setGatewayUrl(event.target.value)}
-                      placeholder="ws://gateway:18789"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium text-strong">
-                      Gateway token
-                    </label>
-                    <Input
-                      value={gatewayToken}
-                      onChange={(event) => setGatewayToken(event.target.value)}
-                      placeholder="Leave blank to keep current token"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium text-strong">
-                      Main session key
-                    </label>
-                    <Input
-                      value={gatewayMainSessionKey}
-                      onChange={(event) =>
-                        setGatewayMainSessionKey(event.target.value)
-                      }
-                      placeholder="agent:main:main"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium text-strong">
-                      Workspace root
-                    </label>
-                    <Input
-                      value={gatewayWorkspaceRoot}
-                      onChange={(event) =>
-                        setGatewayWorkspaceRoot(event.target.value)
-                      }
-                      placeholder="~/.openclaw/workspaces"
-                    />
-                  </div>
-                </div>
-                {saveError ? (
-                  <div className="mt-4 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
-                    {saveError}
-                  </div>
-                ) : null}
-                {saveSuccess ? (
-                  <div className="mt-4 text-xs text-[color:var(--success)]">
-                    Gateway settings saved.
-                  </div>
-                ) : null}
-                <div className="mt-4 flex justify-end">
-                  <Button onClick={handleSaveSettings} disabled={isSaving}>
-                    {isSaving ? "Saving…" : "Save settings"}
-                  </Button>
-                </div>
-              </div>
-            </>
+            <TaskBoard
+              tasks={tasks}
+              onCreateTask={() => setIsDialogOpen(true)}
+              isCreateDisabled={isCreating}
+            />
           )}
         </div>
       </SignedIn>

frontend/src/app/boards/page.tsx

@@ -15,6 +15,14 @@ import {
 import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
 import { DashboardShell } from "@/components/templates/DashboardShell";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 
 type Board = {
   id: string;
@@ -32,6 +40,9 @@ export default function BoardsPage() {
   const [boards, setBoards] = useState<Board[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<Board | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
 
   const sortedBoards = useMemo(
     () => [...boards].sort((a, b) => a.name.localeCompare(b.name)),
@@ -66,6 +77,30 @@ export default function BoardsPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSignedIn]);
 
+  const handleDelete = async () => {
+    if (!deleteTarget || !isSignedIn) return;
+    setIsDeleting(true);
+    setDeleteError(null);
+    try {
+      const token = await getToken();
+      const response = await fetch(`${apiBase}/api/v1/boards/${deleteTarget.id}`, {
+        method: "DELETE",
+        headers: {
+          Authorization: token ? `Bearer ${token}` : "",
+        },
+      });
+      if (!response.ok) {
+        throw new Error("Unable to delete board.");
+      }
+      setBoards((prev) => prev.filter((board) => board.id !== deleteTarget.id));
+      setDeleteTarget(null);
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : "Something went wrong.");
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
   const columns = useMemo<ColumnDef<Board>[]>(
     () => [
       {
@@ -83,7 +118,7 @@ export default function BoardsPage() {
         header: "",
         cell: ({ row }) => (
           <div
-            className="flex items-center justify-end"
+            className="flex items-center justify-end gap-2"
             onClick={(event) => event.stopPropagation()}
           >
             <Link
@@ -92,6 +127,19 @@ export default function BoardsPage() {
             >
               Open
             </Link>
+            <Link
+              href={`/boards/${row.original.id}/edit`}
+              className="inline-flex h-8 items-center justify-center rounded-lg border border-[color:var(--border)] px-3 text-xs font-medium text-muted transition hover:border-[color:var(--accent)] hover:text-[color:var(--accent)]"
+            >
+              Edit
+            </Link>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setDeleteTarget(row.original)}
+            >
+              Delete
+            </Button>
           </div>
         ),
       },
@@ -190,6 +238,38 @@ export default function BoardsPage() {
           )}
         </div>
       </SignedIn>
+
+      <Dialog
+        open={!!deleteTarget}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) {
+            setDeleteTarget(null);
+            setDeleteError(null);
+          }
+        }}
+      >
+        <DialogContent aria-label="Delete board">
+          <DialogHeader>
+            <DialogTitle>Delete board</DialogTitle>
+            <DialogDescription>
+              This will remove {deleteTarget?.name}. This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          {deleteError ? (
+            <div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
+              {deleteError}
+            </div>
+          ) : null}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteTarget(null)}>
+              Cancel
+            </Button>
+            <Button onClick={handleDelete} disabled={isDeleting}>
+              {isDeleting ? "Deleting…" : "Delete"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </DashboardShell>
   );
 }