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>
2026-02-04 16:04:52 +05:30
parent 12698d0781
commit 4dea771545
20 changed files with 827 additions and 196 deletions
--- a/frontend/src/app/agents/[agentId]/edit/page.tsx
+++ b/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}
--- a/frontend/src/app/agents/[agentId]/page.tsx
+++ b/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
--- a/frontend/src/app/agents/new/page.tsx
+++ b/frontend/src/app/agents/new/page.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";

 import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
@@ -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(/\/+$/, "") ||
@@ -19,14 +26,47 @@ type Agent = {
  name: string;
 };

+type Board = {
+  id: string;
+  name: string;
+  slug: string;
+};
+
 export default function NewAgentPage() {
  const router = useRouter();
  const { getToken, isSignedIn } = useAuth();

  const [name, setName] = useState("");
+  const [boards, setBoards] = useState<Board[]>([]);
+  const [boardId, setBoardId] = useState<string>("");
  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.");
+    }
+  };
+
+  useEffect(() => {
+    loadBoards();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSignedIn]);
+
  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!isSignedIn) return;
@@ -35,6 +75,10 @@ export default function NewAgentPage() {
      setError("Agent name is required.");
      return;
    }
+    if (!boardId) {
+      setError("Select a board before creating an agent.");
+      return;
+    }
    setIsLoading(true);
    setError(null);
    try {
@@ -45,7 +89,7 @@ export default function NewAgentPage() {
          "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 create agent.");
@@ -97,6 +141,30 @@ export default function NewAgentPage() {
                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 adding 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}
--- a/frontend/src/app/agents/page.tsx
+++ b/frontend/src/app/agents/page.tsx
@@ -26,6 +26,13 @@ import {
  DialogHeader,
  DialogTitle,
 } from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";

 const apiBase =
  process.env.NEXT_PUBLIC_API_URL?.replace(/\/+$/, "") ||
@@ -39,6 +46,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 GatewayStatus = {
@@ -84,6 +98,8 @@ export default function AgentsPage() {
  const router = useRouter();

  const [agents, setAgents] = useState<Agent[]>([]);
+  const [boards, setBoards] = useState<Board[]>([]);
+  const [boardId, setBoardId] = useState("");
  const [sorting, setSorting] = useState<SortingState>([
    { id: "name", desc: false },
  ]);
@@ -98,6 +114,26 @@ export default function AgentsPage() {

  const sortedAgents = useMemo(() => [...agents], [agents]);

+  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 loadAgents = async () => {
    if (!isSignedIn) return;
    setIsLoading(true);
@@ -122,13 +158,14 @@ export default function AgentsPage() {
  };

  const loadGatewayStatus = async () => {
-    if (!isSignedIn) return;
+    if (!isSignedIn || !boardId) return;
    setGatewayError(null);
    try {
      const token = await getToken();
-      const response = await fetch(`${apiBase}/api/v1/gateway/status`, {
-        headers: { Authorization: token ? `Bearer ${token}` : "" },
-      });
+      const response = await fetch(
+        `${apiBase}/api/v1/gateway/status?board_id=${boardId}`,
+        { headers: { Authorization: token ? `Bearer ${token}` : "" } }
+      );
      if (!response.ok) {
        throw new Error("Unable to load gateway status.");
      }
@@ -140,11 +177,18 @@ export default function AgentsPage() {
  };

  useEffect(() => {
+    loadBoards();
    loadAgents();
-    loadGatewayStatus();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isSignedIn]);

+  useEffect(() => {
+    if (boardId) {
+      loadGatewayStatus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [boardId, isSignedIn]);
+
  const handleDelete = async () => {
    if (!deleteTarget || !isSignedIn) return;
    setIsDeleting(true);
@@ -169,85 +213,107 @@ export default function AgentsPage() {
    }
  };

+  const handleRefresh = async () => {
+    await loadBoards();
+    await loadAgents();
+    await loadGatewayStatus();
+  };
+
  const columns = useMemo<ColumnDef<Agent>[]>(
-    () => [
-      {
-        accessorKey: "name",
-        header: "Agent",
-        cell: ({ row }) => (
-          <div>
-            <p className="font-medium text-strong">{row.original.name}</p>
-            <p className="text-xs text-quiet">ID {row.original.id}</p>
-          </div>
-        ),
-      },
-      {
-        accessorKey: "status",
-        header: "Status",
-        cell: ({ row }) => <StatusPill status={row.original.status} />,
-      },
-      {
-        accessorKey: "openclaw_session_id",
-        header: "Session",
-        cell: ({ row }) => (
-          <span className="text-xs text-muted">
-            {truncate(row.original.openclaw_session_id)}
-          </span>
-        ),
-      },
-      {
-        accessorKey: "last_seen_at",
-        header: "Last seen",
-        cell: ({ row }) => (
-          <div className="text-xs text-muted">
-            <p className="font-medium text-strong">
-              {formatRelative(row.original.last_seen_at)}
-            </p>
-            <p className="text-quiet">{formatTimestamp(row.original.last_seen_at)}</p>
-          </div>
-        ),
-      },
-      {
-        accessorKey: "updated_at",
-        header: "Updated",
-        cell: ({ row }) => (
-          <span className="text-xs text-muted">
-            {formatTimestamp(row.original.updated_at)}
-          </span>
-        ),
-      },
-      {
-        id: "actions",
-        header: "",
-        cell: ({ row }) => (
-          <div
-            className="flex items-center justify-end gap-2"
-            onClick={(event) => event.stopPropagation()}
-          >
-            <Link
-              href={`/agents/${row.original.id}`}
-              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)]"
+    () => {
+      const resolveBoardName = (agent: Agent) =>
+        boards.find((board) => board.id === agent.board_id)?.name ?? "—";
+
+      return [
+        {
+          accessorKey: "name",
+          header: "Agent",
+          cell: ({ row }) => (
+            <div>
+              <p className="font-medium text-strong">{row.original.name}</p>
+              <p className="text-xs text-quiet">ID {row.original.id}</p>
+            </div>
+          ),
+        },
+        {
+          accessorKey: "status",
+          header: "Status",
+          cell: ({ row }) => <StatusPill status={row.original.status} />,
+        },
+        {
+          accessorKey: "openclaw_session_id",
+          header: "Session",
+          cell: ({ row }) => (
+            <span className="text-xs text-muted">
+              {truncate(row.original.openclaw_session_id)}
+            </span>
+          ),
+        },
+        {
+          accessorKey: "board_id",
+          header: "Board",
+          cell: ({ row }) => (
+            <span className="text-xs text-muted">
+              {resolveBoardName(row.original)}
+            </span>
+          ),
+        },
+        {
+          accessorKey: "last_seen_at",
+          header: "Last seen",
+          cell: ({ row }) => (
+            <div className="text-xs text-muted">
+              <p className="font-medium text-strong">
+                {formatRelative(row.original.last_seen_at)}
+              </p>
+              <p className="text-quiet">
+                {formatTimestamp(row.original.last_seen_at)}
+              </p>
+            </div>
+          ),
+        },
+        {
+          accessorKey: "updated_at",
+          header: "Updated",
+          cell: ({ row }) => (
+            <span className="text-xs text-muted">
+              {formatTimestamp(row.original.updated_at)}
+            </span>
+          ),
+        },
+        {
+          id: "actions",
+          header: "",
+          cell: ({ row }) => (
+            <div
+              className="flex items-center justify-end gap-2"
+              onClick={(event) => event.stopPropagation()}
            >
-              View
-            </Link>
-            <Link
-              href={`/agents/${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>
-        ),
-      },
-    ],
-    []
+              <Link
+                href={`/agents/${row.original.id}`}
+                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)]"
+              >
+                View
+              </Link>
+              <Link
+                href={`/agents/${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>
+          ),
+        },
+      ];
+    },
+    [boards]
  );

  const table = useReactTable({
@@ -284,7 +350,11 @@ export default function AgentsPage() {
              </p>
            </div>
            <div className="flex items-center gap-2">
-              <Button variant="outline" onClick={loadAgents} disabled={isLoading}>
+              <Button
+                variant="outline"
+                onClick={handleRefresh}
+                disabled={isLoading}
+              >
                Refresh
              </Button>
              <Button onClick={() => router.push("/agents/new")}>
@@ -360,6 +430,22 @@ export default function AgentsPage() {
                </p>
              </div>
              <div className="flex items-center gap-3">
+                <Select
+                  value={boardId}
+                  onValueChange={(value) => setBoardId(value)}
+                  disabled={boards.length === 0}
+                >
+                  <SelectTrigger className="h-8 w-[200px]">
+                    <SelectValue placeholder="Select board" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {boards.map((board) => (
+                      <SelectItem key={board.id} value={board.id}>
+                        {board.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
                <StatusPill status={gatewayStatus?.connected ? "online" : "offline"} />
                <span className="text-xs text-quiet">
                  {gatewayStatus?.sessions_count ?? 0} sessions