unchained/mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(boards): Store gateway config per board

Browse Source 
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>
This commit is contained in:
Abhimanyu Saharan
2026-02-04 16:04:52 +05:30
parent 12698d0781
commit 4dea771545
20 changed files with 827 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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}

27
frontend/src/app/agents/[agentId]/page.tsx
View File

@@ -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

72
frontend/src/app/agents/new/page.tsx
View File

@@ -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}

252
frontend/src/app/agents/page.tsx
View File

@@ -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

142
frontend/src/app/boards/[boardId]/page.tsx
View File

@@ -31,6 +31,10 @@ 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 = {
@@ -70,6 +74,13 @@ 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"),
@@ -106,6 +117,9 @@ 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 {
@@ -165,6 +179,47 @@ 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>
<SignedOut>
@@ -213,11 +268,88 @@ export default function BoardDetailPage() {
Loading {titleLabel}…
</div>
) : (
<TaskBoard
tasks={tasks}
onCreateTask={() => setIsDialogOpen(true)}
isCreateDisabled={isCreating}
/>
<>
<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>
</>
)}
</div>
</SignedIn>

69
frontend/src/app/boards/new/page.tsx
View File

@@ -14,6 +14,10 @@ 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;
};
const apiBase =
@@ -31,6 +35,10 @@ export default function NewBoardPage() {
const router = useRouter();
const { getToken, isSignedIn } = useAuth();
const [name, setName] = 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);
@@ -43,13 +51,25 @@ export default function NewBoardPage() {
setError(null);
try {
const token = await getToken();
const payload: Partial<Board> = {
name: trimmed,
slug: slugify(trimmed),
};
if (gatewayUrl.trim()) payload.gateway_url = gatewayUrl.trim();
if (gatewayToken.trim()) payload.gateway_token = gatewayToken.trim();
if (gatewayMainSessionKey.trim()) {
payload.gateway_main_session_key = gatewayMainSessionKey.trim();
}
if (gatewayWorkspaceRoot.trim()) {
payload.gateway_workspace_root = gatewayWorkspaceRoot.trim();
}
const response = await fetch(`${apiBase}/api/v1/boards`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: token ? `Bearer ${token}` : "",
},
body: JSON.stringify({ name: trimmed, slug: slugify(trimmed) }),
body: JSON.stringify(payload),
});
if (!response.ok) {
throw new Error("Unable to create board.");
@@ -103,6 +123,53 @@ export default function NewBoardPage() {
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}
/>
<p className="text-xs text-quiet">
Required to provision agents for this board.
</p>
</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="Optional bearer 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}