feat(boards): Store gateway config per board

Move gateway configuration into board settings and wire agent\nprovisioning, heartbeat templates, and gateway status lookups\nto use board-specific gateway settings. Adds board_id on agents\nand UI updates for board-scoped selection.\n\nCo-Authored-By: Claude <noreply@anthropic.com>

frontend/src/app/agents/[agentId]/edit/page.tsx

@@ -9,6 +9,13 @@ import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
 import { DashboardShell } from "@/components/templates/DashboardShell";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 const apiBase =
   process.env.NEXT_PUBLIC_API_URL?.replace(/\/+$/, "") ||
@@ -17,6 +24,13 @@ const apiBase =
 type Agent = {
   id: string;
   name: string;
+  board_id?: string | null;
+};
+
+type Board = {
+  id: string;
+  name: string;
+  slug: string;
 };
 
 export default function EditAgentPage() {
@@ -28,9 +42,31 @@ export default function EditAgentPage() {
 
   const [agent, setAgent] = useState<Agent | null>(null);
   const [name, setName] = useState("");
+  const [boards, setBoards] = useState<Board[]>([]);
+  const [boardId, setBoardId] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  const loadBoards = async () => {
+    if (!isSignedIn) return;
+    try {
+      const token = await getToken();
+      const response = await fetch(`${apiBase}/api/v1/boards`, {
+        headers: { Authorization: token ? `Bearer ${token}` : "" },
+      });
+      if (!response.ok) {
+        throw new Error("Unable to load boards.");
+      }
+      const data = (await response.json()) as Board[];
+      setBoards(data);
+      if (!boardId && data.length > 0) {
+        setBoardId(data[0].id);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+    }
+  };
+
   const loadAgent = async () => {
     if (!isSignedIn || !agentId) return;
     setIsLoading(true);
@@ -46,6 +82,9 @@ export default function EditAgentPage() {
       const data = (await response.json()) as Agent;
       setAgent(data);
       setName(data.name);
+      if (data.board_id) {
+        setBoardId(data.board_id);
+      }
     } catch (err) {
       setError(err instanceof Error ? err.message : "Something went wrong.");
     } finally {
@@ -54,6 +93,7 @@ export default function EditAgentPage() {
   };
 
   useEffect(() => {
+    loadBoards();
     loadAgent();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSignedIn, agentId]);
@@ -66,6 +106,10 @@ export default function EditAgentPage() {
       setError("Agent name is required.");
       return;
     }
+    if (!boardId) {
+      setError("Select a board before saving.");
+      return;
+    }
     setIsLoading(true);
     setError(null);
     try {
@@ -76,7 +120,7 @@ export default function EditAgentPage() {
           "Content-Type": "application/json",
           Authorization: token ? `Bearer ${token}` : "",
         },
-        body: JSON.stringify({ name: trimmed }),
+        body: JSON.stringify({ name: trimmed, board_id: boardId }),
       });
       if (!response.ok) {
         throw new Error("Unable to update agent.");
@@ -127,6 +171,30 @@ export default function EditAgentPage() {
                 disabled={isLoading}
               />
             </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-strong">Board</label>
+              <Select
+                value={boardId}
+                onValueChange={(value) => setBoardId(value)}
+                disabled={boards.length === 0}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select board" />
+                </SelectTrigger>
+                <SelectContent>
+                  {boards.map((board) => (
+                    <SelectItem key={board.id} value={board.id}>
+                      {board.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {boards.length === 0 ? (
+                <p className="text-xs text-quiet">
+                  Create a board before assigning agents.
+                </p>
+              ) : null}
+            </div>
             {error ? (
               <div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
                 {error}

frontend/src/app/agents/[agentId]/page.tsx

@@ -31,6 +31,13 @@ type Agent = {
   last_seen_at: string;
   created_at: string;
   updated_at: string;
+  board_id?: string | null;
+};
+
+type Board = {
+  id: string;
+  name: string;
+  slug: string;
 };
 
 type ActivityEvent = {
@@ -74,6 +81,7 @@ export default function AgentDetailPage() {
 
   const [agent, setAgent] = useState<Agent | null>(null);
   const [events, setEvents] = useState<ActivityEvent[]>([]);
+  const [boards, setBoards] = useState<Board[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -92,13 +100,16 @@ export default function AgentDetailPage() {
     setError(null);
     try {
       const token = await getToken();
-      const [agentResponse, activityResponse] = await Promise.all([
+      const [agentResponse, activityResponse, boardsResponse] = await Promise.all([
         fetch(`${apiBase}/api/v1/agents/${agentId}`, {
           headers: { Authorization: token ? `Bearer ${token}` : "" },
         }),
         fetch(`${apiBase}/api/v1/activity?limit=200`, {
           headers: { Authorization: token ? `Bearer ${token}` : "" },
         }),
+        fetch(`${apiBase}/api/v1/boards`, {
+          headers: { Authorization: token ? `Bearer ${token}` : "" },
+        }),
       ]);
       if (!agentResponse.ok) {
         throw new Error("Unable to load agent.");
@@ -106,10 +117,15 @@ export default function AgentDetailPage() {
       if (!activityResponse.ok) {
         throw new Error("Unable to load activity.");
       }
+      if (!boardsResponse.ok) {
+        throw new Error("Unable to load boards.");
+      }
       const agentData = (await agentResponse.json()) as Agent;
       const eventsData = (await activityResponse.json()) as ActivityEvent[];
+      const boardsData = (await boardsResponse.json()) as Board[];
       setAgent(agentData);
       setEvents(eventsData);
+      setBoards(boardsData);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Something went wrong.");
     } finally {
@@ -233,6 +249,15 @@ export default function AgentDetailPage() {
                         {agent.openclaw_session_id ?? "—"}
                       </p>
                     </div>
+                    <div>
+                      <p className="text-xs font-semibold uppercase tracking-[0.2em] text-quiet">
+                        Board
+                      </p>
+                      <p className="mt-1 text-sm text-strong">
+                        {boards.find((board) => board.id === agent.board_id)?.name ??
+                          "—"}
+                      </p>
+                    </div>
                     <div>
                       <p className="text-xs font-semibold uppercase tracking-[0.2em] text-quiet">
                         Last seen