feat(gateways): Introduce gateway model and update agent provisioning templates

frontend/src/api/generated/gateway/gateway.ts

@@ -80,8 +80,8 @@ export const getGatewayStatusApiV1GatewayStatusGetUrl = (
   const stringifiedParams = normalizedParams.toString();
 
   return stringifiedParams.length > 0
-    ? `/api/v1/gateway/status?${stringifiedParams}`
-    : `/api/v1/gateway/status`;
+    ? `/api/v1/gateways/status?${stringifiedParams}`
+    : `/api/v1/gateways/status`;
 };
 
 export const gatewayStatusApiV1GatewayStatusGet = async (
@@ -100,7 +100,7 @@ export const gatewayStatusApiV1GatewayStatusGet = async (
 export const getGatewayStatusApiV1GatewayStatusGetQueryKey = (
   params?: GatewayStatusApiV1GatewayStatusGetParams,
 ) => {
-  return [`/api/v1/gateway/status`, ...(params ? [params] : [])] as const;
+  return [`/api/v1/gateways/status`, ...(params ? [params] : [])] as const;
 };
 
 export const getGatewayStatusApiV1GatewayStatusGetQueryOptions = <
@@ -291,8 +291,8 @@ export const getListSessionsApiV1GatewaySessionsGetUrl = (
   const stringifiedParams = normalizedParams.toString();
 
   return stringifiedParams.length > 0
-    ? `/api/v1/gateway/sessions?${stringifiedParams}`
-    : `/api/v1/gateway/sessions`;
+    ? `/api/v1/gateways/sessions?${stringifiedParams}`
+    : `/api/v1/gateways/sessions`;
 };
 
 export const listSessionsApiV1GatewaySessionsGet = async (
@@ -311,7 +311,7 @@ export const listSessionsApiV1GatewaySessionsGet = async (
 export const getListSessionsApiV1GatewaySessionsGetQueryKey = (
   params?: ListSessionsApiV1GatewaySessionsGetParams,
 ) => {
-  return [`/api/v1/gateway/sessions`, ...(params ? [params] : [])] as const;
+  return [`/api/v1/gateways/sessions`, ...(params ? [params] : [])] as const;
 };
 
 export const getListSessionsApiV1GatewaySessionsGetQueryOptions = <
@@ -503,8 +503,8 @@ export const getGetGatewaySessionApiV1GatewaySessionsSessionIdGetUrl = (
   const stringifiedParams = normalizedParams.toString();
 
   return stringifiedParams.length > 0
-    ? `/api/v1/gateway/sessions/${sessionId}?${stringifiedParams}`
-    : `/api/v1/gateway/sessions/${sessionId}`;
+    ? `/api/v1/gateways/sessions/${sessionId}?${stringifiedParams}`
+    : `/api/v1/gateways/sessions/${sessionId}`;
 };
 
 export const getGatewaySessionApiV1GatewaySessionsSessionIdGet = async (
@@ -526,7 +526,7 @@ export const getGetGatewaySessionApiV1GatewaySessionsSessionIdGetQueryKey = (
   params?: GetGatewaySessionApiV1GatewaySessionsSessionIdGetParams,
 ) => {
   return [
-    `/api/v1/gateway/sessions/${sessionId}`,
+    `/api/v1/gateways/sessions/${sessionId}`,
     ...(params ? [params] : []),
   ] as const;
 };
@@ -777,8 +777,8 @@ export const getGetSessionHistoryApiV1GatewaySessionsSessionIdHistoryGetUrl = (
   const stringifiedParams = normalizedParams.toString();
 
   return stringifiedParams.length > 0
-    ? `/api/v1/gateway/sessions/${sessionId}/history?${stringifiedParams}`
-    : `/api/v1/gateway/sessions/${sessionId}/history`;
+    ? `/api/v1/gateways/sessions/${sessionId}/history?${stringifiedParams}`
+    : `/api/v1/gateways/sessions/${sessionId}/history`;
 };
 
 export const getSessionHistoryApiV1GatewaySessionsSessionIdHistoryGet = async (
@@ -804,7 +804,7 @@ export const getGetSessionHistoryApiV1GatewaySessionsSessionIdHistoryGetQueryKey
     params?: GetSessionHistoryApiV1GatewaySessionsSessionIdHistoryGetParams,
   ) => {
     return [
-      `/api/v1/gateway/sessions/${sessionId}/history`,
+      `/api/v1/gateways/sessions/${sessionId}/history`,
       ...(params ? [params] : []),
     ] as const;
   };
@@ -1088,8 +1088,8 @@ export const getSendSessionMessageApiV1GatewaySessionsSessionIdMessagePostUrl =
     const stringifiedParams = normalizedParams.toString();
 
     return stringifiedParams.length > 0
-      ? `/api/v1/gateway/sessions/${sessionId}/message?${stringifiedParams}`
-      : `/api/v1/gateway/sessions/${sessionId}/message`;
+      ? `/api/v1/gateways/sessions/${sessionId}/message?${stringifiedParams}`
+      : `/api/v1/gateways/sessions/${sessionId}/message`;
   };
 
 export const sendSessionMessageApiV1GatewaySessionsSessionIdMessagePost =
@@ -1257,7 +1257,7 @@ export type gatewayCommandsApiV1GatewayCommandsGetResponse =
   gatewayCommandsApiV1GatewayCommandsGetResponseSuccess;
 
 export const getGatewayCommandsApiV1GatewayCommandsGetUrl = () => {
-  return `/api/v1/gateway/commands`;
+  return `/api/v1/gateways/commands`;
 };
 
 export const gatewayCommandsApiV1GatewayCommandsGet = async (
@@ -1273,7 +1273,7 @@ export const gatewayCommandsApiV1GatewayCommandsGet = async (
 };
 
 export const getGatewayCommandsApiV1GatewayCommandsGetQueryKey = () => {
-  return [`/api/v1/gateway/commands`] as const;
+  return [`/api/v1/gateways/commands`] as const;
 };
 
 export const getGatewayCommandsApiV1GatewayCommandsGetQueryOptions = <

frontend/src/api/generated/model/boardCreate.ts

@@ -8,10 +8,5 @@
 export interface BoardCreate {
   name: string;
   slug: string;
-  gateway_url?: string | null;
-  gateway_main_session_key?: string | null;
-  gateway_workspace_root?: string | null;
-  identity_template?: string | null;
-  soul_template?: string | null;
-  gateway_token?: string | null;
+  gateway_id?: string | null;
 }

frontend/src/api/generated/model/boardRead.ts

@@ -8,11 +8,7 @@
 export interface BoardRead {
   name: string;
   slug: string;
-  gateway_url?: string | null;
-  gateway_main_session_key?: string | null;
-  gateway_workspace_root?: string | null;
-  identity_template?: string | null;
-  soul_template?: string | null;
+  gateway_id?: string | null;
   id: string;
   created_at: string;
   updated_at: string;

frontend/src/api/generated/model/boardUpdate.ts

@@ -8,10 +8,5 @@
 export interface BoardUpdate {
   name?: string | null;
   slug?: string | null;
-  gateway_url?: string | null;
-  gateway_token?: string | null;
-  gateway_main_session_key?: string | null;
-  gateway_workspace_root?: string | null;
-  identity_template?: string | null;
-  soul_template?: string | null;
+  gateway_id?: string | null;
 }

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

@@ -9,7 +9,12 @@ 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 { Textarea } from "@/components/ui/textarea";
 import { getApiBaseUrl } from "@/lib/api-base";
+import {
+  DEFAULT_IDENTITY_TEMPLATE,
+  DEFAULT_SOUL_TEMPLATE,
+} from "@/lib/agent-templates";
 import {
   Select,
   SelectContent,
@@ -28,6 +33,8 @@ type Agent = {
     every?: string;
     target?: string;
   } | null;
+  identity_template?: string | null;
+  soul_template?: string | null;
 };
 
 type Board = {
@@ -49,6 +56,10 @@ export default function EditAgentPage() {
   const [boardId, setBoardId] = useState("");
   const [heartbeatEvery, setHeartbeatEvery] = useState("10m");
   const [heartbeatTarget, setHeartbeatTarget] = useState("none");
+  const [identityTemplate, setIdentityTemplate] = useState(
+    DEFAULT_IDENTITY_TEMPLATE
+  );
+  const [soulTemplate, setSoulTemplate] = useState(DEFAULT_SOUL_TEMPLATE);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -93,6 +104,10 @@ export default function EditAgentPage() {
       if (data.heartbeat_config?.target) {
         setHeartbeatTarget(data.heartbeat_config.target);
       }
+      setIdentityTemplate(
+        data.identity_template?.trim() || DEFAULT_IDENTITY_TEMPLATE
+      );
+      setSoulTemplate(data.soul_template?.trim() || DEFAULT_SOUL_TEMPLATE);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Something went wrong.");
     } finally {
@@ -146,6 +161,8 @@ export default function EditAgentPage() {
             every: heartbeatEvery.trim() || "10m",
             target: heartbeatTarget,
           },
+          identity_template: identityTemplate.trim() || null,
+          soul_template: soulTemplate.trim() || null,
         }),
       });
       if (!response.ok) {
@@ -201,7 +218,7 @@ export default function EditAgentPage() {
                 <div className="mt-4 grid gap-6 md:grid-cols-2">
                   <div className="space-y-2">
                     <label className="text-sm font-medium text-slate-900">
-                      Agent name
+                      Agent name <span className="text-red-500">*</span>
                     </label>
                     <Input
                       value={name}
@@ -212,7 +229,7 @@ export default function EditAgentPage() {
                   </div>
                   <div className="space-y-2">
                     <label className="text-sm font-medium text-slate-900">
-                      Board
+                      Board <span className="text-red-500">*</span>
                     </label>
                     <Select
                       value={boardId}
@@ -239,6 +256,36 @@ export default function EditAgentPage() {
                 </div>
               </div>
 
+              <div>
+                <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                  Agent persona
+                </p>
+                <div className="mt-4 space-y-4">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-slate-900">
+                      Identity template
+                    </label>
+                    <Textarea
+                      value={identityTemplate}
+                      onChange={(event) => setIdentityTemplate(event.target.value)}
+                      rows={8}
+                      disabled={isLoading}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-slate-900">
+                      Soul template
+                    </label>
+                    <Textarea
+                      value={soulTemplate}
+                      onChange={(event) => setSoulTemplate(event.target.value)}
+                      rows={10}
+                      disabled={isLoading}
+                    />
+                  </div>
+                </div>
+              </div>
+
               <div>
                 <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
                   Heartbeat settings

frontend/src/app/agents/new/page.tsx

@@ -9,7 +9,12 @@ 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 { Textarea } from "@/components/ui/textarea";
 import { getApiBaseUrl } from "@/lib/api-base";
+import {
+  DEFAULT_IDENTITY_TEMPLATE,
+  DEFAULT_SOUL_TEMPLATE,
+} from "@/lib/agent-templates";
 import {
   Select,
   SelectContent,
@@ -40,6 +45,10 @@ export default function NewAgentPage() {
   const [boardId, setBoardId] = useState<string>("");
   const [heartbeatEvery, setHeartbeatEvery] = useState("10m");
   const [heartbeatTarget, setHeartbeatTarget] = useState("none");
+  const [identityTemplate, setIdentityTemplate] = useState(
+    DEFAULT_IDENTITY_TEMPLATE
+  );
+  const [soulTemplate, setSoulTemplate] = useState(DEFAULT_SOUL_TEMPLATE);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -97,6 +106,8 @@ export default function NewAgentPage() {
             every: heartbeatEvery.trim() || "10m",
             target: heartbeatTarget,
           },
+          identity_template: identityTemplate.trim() || null,
+          soul_template: soulTemplate.trim() || null,
         }),
       });
       if (!response.ok) {
@@ -153,7 +164,7 @@ export default function NewAgentPage() {
                 <div className="mt-4 grid gap-6 md:grid-cols-2">
                   <div className="space-y-2">
                     <label className="text-sm font-medium text-slate-900">
-                      Agent name
+                      Agent name <span className="text-red-500">*</span>
                     </label>
                     <Input
                       value={name}
@@ -164,7 +175,7 @@ export default function NewAgentPage() {
                   </div>
                   <div className="space-y-2">
                     <label className="text-sm font-medium text-slate-900">
-                      Board
+                      Board <span className="text-red-500">*</span>
                     </label>
                     <Select
                       value={boardId}
@@ -191,6 +202,36 @@ export default function NewAgentPage() {
                 </div>
               </div>
 
+              <div>
+                <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                  Agent persona
+                </p>
+                <div className="mt-4 space-y-4">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-slate-900">
+                      Identity template
+                    </label>
+                    <Textarea
+                      value={identityTemplate}
+                      onChange={(event) => setIdentityTemplate(event.target.value)}
+                      rows={8}
+                      disabled={isLoading}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-slate-900">
+                      Soul template
+                    </label>
+                    <Textarea
+                      value={soulTemplate}
+                      onChange={(event) => setSoulTemplate(event.target.value)}
+                      rows={10}
+                      disabled={isLoading}
+                    />
+                  </div>
+                </div>
+              </div>
+
               <div>
                 <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
                   Heartbeat settings

frontend/src/app/agents/page.tsx

@@ -171,7 +171,7 @@ export default function AgentsPage() {
     try {
       const token = await getToken();
       const response = await fetch(
-        `${apiBase}/api/v1/gateway/status?board_id=${boardId}`,
+        `${apiBase}/api/v1/gateways/status?board_id=${boardId}`,
         { headers: { Authorization: token ? `Bearer ${token}` : "" } }
       );
       if (!response.ok) {

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

@@ -1,70 +1,45 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 
 import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { CheckCircle2, RefreshCcw, XCircle } from "lucide-react";
 
 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 { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { getApiBaseUrl } from "@/lib/api-base";
-import { CheckCircle2, RefreshCcw, XCircle } from "lucide-react";
 
 const apiBase = getApiBaseUrl();
 
-const DEFAULT_IDENTITY_TEMPLATE = `# IDENTITY.md
+const DEFAULT_MAIN_SESSION_KEY = "agent:main:main";
+const DEFAULT_WORKSPACE_ROOT = "~/.openclaw";
 
-Name: {{ agent_name }}
+type Board = {
+  id: string;
+  name: string;
+  slug: string;
+  gateway_id?: string | null;
+};
 
-Agent ID: {{ agent_id }}
-
-Creature: AI
-
-Vibe: calm, precise, helpful
-
-Emoji: :gear:
-`;
-
-const DEFAULT_SOUL_TEMPLATE = `# SOUL.md
-
-_You're not a chatbot. You're becoming someone._
-
-## Core Truths
-
-**Be genuinely helpful, not performatively helpful.** Skip the "Great question!" and "I'd be happy to help!" -- just help. Actions speak louder than filler words.
-
-**Have opinions.** You're allowed to disagree, prefer things, find stuff amusing or boring. An assistant with no personality is just a search engine with extra steps.
-
-**Be resourceful before asking.** Try to figure it out. Read the file. Check the context. Search for it. _Then_ ask if you're stuck. The goal is to come back with answers, not questions.
-
-**Earn trust through competence.** Your human gave you access to their stuff. Don't make them regret it. Be careful with external actions (emails, tweets, anything public). Be bold with internal ones (reading, organizing, learning).
-
-**Remember you're a guest.** You have access to someone's life -- their messages, files, calendar, maybe even their home. That's intimacy. Treat it with respect.
-
-## Boundaries
-
-- Private things stay private. Period.
-- When in doubt, ask before acting externally.
-- Never send half-baked replies to messaging surfaces.
-- You're not the user's voice -- be careful in group chats.
-
-## Vibe
-
-Be the assistant you'd actually want to talk to. Concise when needed, thorough when it matters. Not a corporate drone. Not a sycophant. Just... good.
-
-## Continuity
-
-Each session, you wake up fresh. These files _are_ your memory. Read them. Update them. They're how you persist.
-
-If you change this file, tell the user -- it's your soul, and they should know.
-
----
-
-_This file is yours to evolve. As you learn who you are, update it._
-`;
+type Gateway = {
+  id: string;
+  name: string;
+  url: string;
+  token?: string | null;
+  main_session_key: string;
+  workspace_root: string;
+  skyll_enabled?: boolean;
+};
 
 const validateGatewayUrl = (value: string) => {
   const trimmed = value.trim();
@@ -83,17 +58,6 @@ const validateGatewayUrl = (value: string) => {
   }
 };
 
-type Board = {
-  id: string;
-  name: string;
-  slug: string;
-  gateway_url?: string | null;
-  gateway_main_session_key?: string | null;
-  gateway_workspace_root?: string | null;
-  identity_template?: string | null;
-  soul_template?: string | null;
-};
-
 const slugify = (value: string) =>
   value
     .toLowerCase()
@@ -110,16 +74,21 @@ export default function EditBoardPage() {
 
   const [board, setBoard] = useState<Board | null>(null);
   const [name, setName] = useState("");
+  const [gateways, setGateways] = useState<Gateway[]>([]);
+  const [gatewayId, setGatewayId] = useState<string>("");
+  const [createNewGateway, setCreateNewGateway] = useState(false);
+
+  const [gatewayName, setGatewayName] = useState("");
   const [gatewayUrl, setGatewayUrl] = useState("");
   const [gatewayToken, setGatewayToken] = useState("");
-  const [gatewayMainSessionKey, setGatewayMainSessionKey] = useState("");
-  const [gatewayWorkspaceRoot, setGatewayWorkspaceRoot] = useState("");
-  const [identityTemplate, setIdentityTemplate] = useState(
-    DEFAULT_IDENTITY_TEMPLATE
+  const [gatewayMainSessionKey, setGatewayMainSessionKey] = useState(
+    DEFAULT_MAIN_SESSION_KEY
   );
-  const [soulTemplate, setSoulTemplate] = useState(DEFAULT_SOUL_TEMPLATE);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [gatewayWorkspaceRoot, setGatewayWorkspaceRoot] = useState(
+    DEFAULT_WORKSPACE_ROOT
+  );
+  const [skyllEnabled, setSkyllEnabled] = useState(false);
+
   const [gatewayUrlError, setGatewayUrlError] = useState<string | null>(null);
   const [gatewayCheckStatus, setGatewayCheckStatus] = useState<
     "idle" | "checking" | "success" | "error"
@@ -128,6 +97,95 @@ export default function EditBoardPage() {
     null
   );
 
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const selectedGateway = useMemo(
+    () => gateways.find((gateway) => gateway.id === gatewayId) || null,
+    [gateways, gatewayId]
+  );
+
+  const loadGateways = async () => {
+    if (!isSignedIn) return;
+    const token = await getToken();
+    const response = await fetch(`${apiBase}/api/v1/gateways`, {
+      headers: { Authorization: token ? `Bearer ${token}` : "" },
+    });
+    if (!response.ok) {
+      throw new Error("Unable to load gateways.");
+    }
+    const data = (await response.json()) as Gateway[];
+    setGateways(data);
+    return data;
+  };
+
+  const loadGatewayDetails = async (configId: string) => {
+    const token = await getToken();
+    const response = await fetch(`${apiBase}/api/v1/gateways/${configId}`, {
+      headers: { Authorization: token ? `Bearer ${token}` : "" },
+    });
+    if (!response.ok) {
+      throw new Error("Unable to load gateway.");
+    }
+    const config = (await response.json()) as Gateway;
+    setGatewayName(config.name || "");
+    setGatewayUrl(config.url || "");
+    setGatewayToken(config.token || "");
+    setGatewayMainSessionKey(
+      config.main_session_key || DEFAULT_MAIN_SESSION_KEY
+    );
+    setGatewayWorkspaceRoot(config.workspace_root || DEFAULT_WORKSPACE_ROOT);
+    setSkyllEnabled(Boolean(config.skyll_enabled));
+  };
+
+  const loadBoard = async () => {
+    if (!isSignedIn || !boardId) return;
+    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 ?? "");
+      if (data.gateway_id) {
+        setGatewayId(data.gateway_id);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+    }
+  };
+
+  useEffect(() => {
+    loadBoard();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [boardId, isSignedIn]);
+
+  useEffect(() => {
+    if (!isSignedIn) return;
+    loadGateways()
+      .then((configs) => {
+        if (!gatewayId && configs.length > 0) {
+          setGatewayId(configs[0].id);
+        }
+      })
+      .catch((err) => {
+        setError(err instanceof Error ? err.message : "Something went wrong.");
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSignedIn]);
+
+  useEffect(() => {
+    if (!isSignedIn || !gatewayId || createNewGateway) return;
+    loadGatewayDetails(gatewayId).catch((err) => {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [gatewayId, createNewGateway]);
+
   const runGatewayCheck = async () => {
     const validationError = validateGatewayUrl(gatewayUrl);
     setGatewayUrlError(validationError);
@@ -151,12 +209,12 @@ export default function EditBoardPage() {
         params.set("gateway_main_session_key", gatewayMainSessionKey.trim());
       }
       const response = await fetch(
-        `${apiBase}/api/v1/gateway/status?${params.toString()}`,
+        `${apiBase}/api/v1/gateways/status?${params.toString()}`,
         {
           headers: {
             Authorization: token ? `Bearer ${token}` : "",
           },
-        },
+        }
       );
       const data = await response.json();
       if (!response.ok || !data?.connected) {
@@ -174,46 +232,33 @@ export default function EditBoardPage() {
     }
   };
 
-  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);
-      setGatewayUrl(data.gateway_url ?? "");
-      setGatewayMainSessionKey(data.gateway_main_session_key ?? "agent:main:main");
-      setGatewayWorkspaceRoot(data.gateway_workspace_root ?? "~/.openclaw");
-      setIdentityTemplate(data.identity_template ?? DEFAULT_IDENTITY_TEMPLATE);
-      setSoulTemplate(data.soul_template ?? DEFAULT_SOUL_TEMPLATE);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Something went wrong.");
-    } finally {
-      setIsLoading(false);
+  const handleGatewaySelection = (value: string) => {
+    if (value === "new") {
+      setCreateNewGateway(true);
+      setGatewayId("");
+      setGatewayName("");
+      setGatewayUrl("");
+      setGatewayToken("");
+      setGatewayMainSessionKey(DEFAULT_MAIN_SESSION_KEY);
+      setGatewayWorkspaceRoot(DEFAULT_WORKSPACE_ROOT);
+      setSkyllEnabled(false);
+      return;
     }
+    setCreateNewGateway(false);
+    setGatewayId(value);
   };
 
-  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) {
+    if (!name.trim()) {
       setError("Board name is required.");
       return;
     }
+    if (!createNewGateway && !gatewayId) {
+      setError("Select a gateway before saving.");
+      return;
+    }
     const gatewayValidation = validateGatewayUrl(gatewayUrl);
     setGatewayUrlError(gatewayValidation);
     if (gatewayValidation) {
@@ -221,34 +266,87 @@ export default function EditBoardPage() {
       setGatewayCheckMessage(gatewayValidation);
       return;
     }
+    if (!gatewayName.trim()) {
+      setError("Gateway name is required.");
+      return;
+    }
+    if (!gatewayMainSessionKey.trim()) {
+      setError("Main session key is required.");
+      return;
+    }
+    if (!gatewayWorkspaceRoot.trim()) {
+      setError("Workspace root is required.");
+      return;
+    }
+
     setIsLoading(true);
     setError(null);
     try {
       const token = await getToken();
-      const payload: Partial<Board> & { gateway_token?: string | null } = {
-        name: trimmed,
-        slug: board?.slug ?? slugify(trimmed),
-        gateway_url: gatewayUrl.trim() || null,
-        gateway_main_session_key: gatewayMainSessionKey.trim() || null,
-        gateway_workspace_root: gatewayWorkspaceRoot.trim() || null,
-        identity_template: identityTemplate.trim() || null,
-        soul_template: soulTemplate.trim() || null,
-      };
-      if (gatewayToken.trim()) {
-        payload.gateway_token = gatewayToken.trim();
+      let configId = gatewayId;
+
+      if (createNewGateway) {
+        const gatewayResponse = await fetch(`${apiBase}/api/v1/gateways`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: token ? `Bearer ${token}` : "",
+          },
+          body: JSON.stringify({
+            name: gatewayName.trim(),
+            url: gatewayUrl.trim(),
+            token: gatewayToken.trim() || null,
+            main_session_key: gatewayMainSessionKey.trim(),
+            workspace_root: gatewayWorkspaceRoot.trim(),
+            skyll_enabled: skyllEnabled,
+          }),
+        });
+        if (!gatewayResponse.ok) {
+          throw new Error("Unable to create gateway.");
+        }
+        const createdGateway = (await gatewayResponse.json()) as Gateway;
+        configId = createdGateway.id;
+      } else if (gatewayId) {
+        const gatewayResponse = await fetch(
+          `${apiBase}/api/v1/gateways/${gatewayId}`,
+          {
+            method: "PATCH",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: token ? `Bearer ${token}` : "",
+            },
+            body: JSON.stringify({
+              name: gatewayName.trim(),
+              url: gatewayUrl.trim(),
+              token: gatewayToken.trim() || null,
+              main_session_key: gatewayMainSessionKey.trim(),
+              workspace_root: gatewayWorkspaceRoot.trim(),
+              skyll_enabled: skyllEnabled,
+            }),
+          }
+        );
+        if (!gatewayResponse.ok) {
+          throw new Error("Unable to update gateway.");
+        }
       }
+
       const response = await fetch(`${apiBase}/api/v1/boards/${boardId}`, {
         method: "PATCH",
         headers: {
           "Content-Type": "application/json",
           Authorization: token ? `Bearer ${token}` : "",
         },
-        body: JSON.stringify(payload),
+        body: JSON.stringify({
+          name: name.trim(),
+          slug: slugify(name.trim()),
+          gateway_id: configId || null,
+        }),
       });
       if (!response.ok) {
         throw new Error("Unable to update board.");
       }
-      router.push(`/boards/${boardId}`);
+      const updated = (await response.json()) as Board;
+      router.push(`/boards/${updated.id}`);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Something went wrong.");
     } finally {
@@ -278,10 +376,10 @@ export default function EditBoardPage() {
           <div className="border-b border-slate-200 bg-white px-8 py-6">
             <div>
               <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
-                {board?.name ?? "Edit board"}
+                Edit board
               </h1>
               <p className="mt-1 text-sm text-slate-500">
-                Update the board identity and gateway connection.
+                Update board settings and gateway.
               </p>
             </div>
           </div>
@@ -289,174 +387,184 @@ export default function EditBoardPage() {
           <div className="p-8">
             <form
               onSubmit={handleSubmit}
-              className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
+              className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
             >
-              <div>
-                <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
-                  Board identity
-                </p>
-                <div className="mt-4">
+              <div className="grid gap-6 md:grid-cols-2">
+                <div className="space-y-2">
                   <label className="text-sm font-medium text-slate-900">
                     Board name <span className="text-red-500">*</span>
                   </label>
                   <Input
                     value={name}
                     onChange={(event) => setName(event.target.value)}
-                    placeholder="e.g. Product ops"
-                    disabled={isLoading}
-                    className="mt-2"
+                    placeholder="Board name"
+                    disabled={isLoading || !board}
                   />
                 </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-slate-900">
+                    Gateway <span className="text-red-500">*</span>
+                  </label>
+                  <Select
+                    value={createNewGateway ? "new" : gatewayId}
+                    onValueChange={handleGatewaySelection}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a gateway" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {gateways.map((config) => (
+                        <SelectItem key={config.id} value={config.id}>
+                          {config.name}
+                        </SelectItem>
+                      ))}
+                      <SelectItem value="new">+ Create new gateway</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
               </div>
 
-              <div>
-                <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
-                  Gateway connection
-                </p>
-                <div className="mt-4 grid gap-6 md:grid-cols-2">
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium text-slate-900">
-                      Gateway URL <span className="text-red-500">*</span>
-                    </label>
-                    <div className="relative">
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                    Gateway details
+                  </p>
+                  {!createNewGateway && selectedGateway ? (
+                    <span className="text-xs text-slate-500">
+                      {selectedGateway.url}
+                    </span>
+                  ) : null}
+                </div>
+
+                <div className="space-y-5">
+                  <div className="grid gap-6 md:grid-cols-2">
+                    <div className="space-y-2">
+                      <label className="text-sm font-medium text-slate-900">
+                        Gateway name <span className="text-red-500">*</span>
+                      </label>
                       <Input
-                        value={gatewayUrl}
-                        onChange={(event) => setGatewayUrl(event.target.value)}
-                        onBlur={runGatewayCheck}
-                        placeholder="ws://gateway:18789"
+                        value={gatewayName}
+                        onChange={(event) => setGatewayName(event.target.value)}
+                        placeholder="Primary gateway"
                         disabled={isLoading}
-                        className={`pr-12 ${
-                          gatewayUrlError
-                            ? "border-red-500 focus-visible:ring-red-500"
-                            : ""
-                        }`}
                       />
-                      <button
-                        type="button"
-                        onClick={runGatewayCheck}
-                        className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 transition hover:text-slate-600"
-                        aria-label="Check gateway connection"
-                      >
-                        {gatewayCheckStatus === "checking" ? (
-                          <RefreshCcw className="h-4 w-4 animate-spin" />
-                        ) : gatewayCheckStatus === "success" ? (
-                          <CheckCircle2 className="h-4 w-4 text-green-500" />
-                        ) : gatewayCheckStatus === "error" ? (
-                          <XCircle className="h-4 w-4 text-red-500" />
-                        ) : (
-                          <RefreshCcw className="h-4 w-4" />
-                        )}
-                      </button>
                     </div>
-                    {gatewayUrlError ? (
-                      <p className="text-xs text-red-500">{gatewayUrlError}</p>
-                    ) : gatewayCheckMessage ? (
-                      <p
-                        className={`text-xs ${
-                          gatewayCheckStatus === "success"
-                            ? "text-green-600"
-                            : "text-red-500"
-                        }`}
-                      >
-                        {gatewayCheckMessage}
-                      </p>
-                    ) : null}
+                    <div className="space-y-2">
+                      <label className="text-sm font-medium text-slate-900">
+                        Gateway URL <span className="text-red-500">*</span>
+                      </label>
+                      <div className="relative">
+                        <Input
+                          value={gatewayUrl}
+                          onChange={(event) => setGatewayUrl(event.target.value)}
+                          onBlur={runGatewayCheck}
+                          placeholder="ws://gateway:18789"
+                          disabled={isLoading}
+                          className={
+                            gatewayUrlError ? "border-red-500" : undefined
+                          }
+                        />
+                        <button
+                          type="button"
+                          onClick={runGatewayCheck}
+                          className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
+                          aria-label="Check gateway connection"
+                        >
+                          {gatewayCheckStatus === "checking" ? (
+                            <RefreshCcw className="h-4 w-4 animate-spin" />
+                          ) : gatewayCheckStatus === "success" ? (
+                            <CheckCircle2 className="h-4 w-4 text-emerald-500" />
+                          ) : gatewayCheckStatus === "error" ? (
+                            <XCircle className="h-4 w-4 text-red-500" />
+                          ) : (
+                            <RefreshCcw className="h-4 w-4" />
+                          )}
+                        </button>
+                      </div>
+                      {gatewayUrlError ? (
+                        <p className="text-xs text-red-500">{gatewayUrlError}</p>
+                      ) : gatewayCheckMessage ? (
+                        <p
+                          className={
+                            gatewayCheckStatus === "success"
+                              ? "text-xs text-emerald-600"
+                              : "text-xs text-red-500"
+                          }
+                        >
+                          {gatewayCheckMessage}
+                        </p>
+                      ) : null}
+                    </div>
                   </div>
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium text-slate-900">
-                      Gateway token
-                    </label>
-                    <Input
-                      value={gatewayToken}
-                      onChange={(event) => setGatewayToken(event.target.value)}
-                      onBlur={runGatewayCheck}
-                      placeholder="Bearer token"
-                      disabled={isLoading}
-                    />
+
+                  <div className="grid gap-6 md:grid-cols-2">
+                    <div className="space-y-2">
+                      <label className="text-sm font-medium text-slate-900">
+                        Gateway token
+                      </label>
+                      <Input
+                        value={gatewayToken}
+                        onChange={(event) => setGatewayToken(event.target.value)}
+                        onBlur={runGatewayCheck}
+                        placeholder="Bearer token"
+                        disabled={isLoading}
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label className="text-sm font-medium text-slate-900">
+                        Main session key <span className="text-red-500">*</span>
+                      </label>
+                      <Input
+                        value={gatewayMainSessionKey}
+                        onChange={(event) =>
+                          setGatewayMainSessionKey(event.target.value)
+                        }
+                        placeholder={DEFAULT_MAIN_SESSION_KEY}
+                        disabled={isLoading}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="grid gap-6 md:grid-cols-2">
+                    <div className="space-y-2">
+                      <label className="text-sm font-medium text-slate-900">
+                        Workspace root <span className="text-red-500">*</span>
+                      </label>
+                      <Input
+                        value={gatewayWorkspaceRoot}
+                        onChange={(event) =>
+                          setGatewayWorkspaceRoot(event.target.value)
+                        }
+                        placeholder={DEFAULT_WORKSPACE_ROOT}
+                        disabled={isLoading}
+                      />
+                    </div>
+                    <div className="flex items-center gap-3 rounded-lg border border-slate-200 px-4 py-3 text-sm text-slate-700">
+                      <input
+                        type="checkbox"
+                        checked={skyllEnabled}
+                        onChange={(event) => setSkyllEnabled(event.target.checked)}
+                        className="h-4 w-4 rounded border-slate-300 text-slate-900"
+                      />
+                      <span>Enable Skyll dynamic skills</span>
+                    </div>
                   </div>
                 </div>
               </div>
 
-              <div>
-                <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
-                  Agent defaults
-                </p>
-                <div className="mt-4 grid gap-6 md:grid-cols-2">
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium text-slate-900">
-                      Main session key <span className="text-red-500">*</span>
-                    </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-slate-900">
-                      Workspace root <span className="text-red-500">*</span>
-                    </label>
-                    <Input
-                      value={gatewayWorkspaceRoot}
-                      onChange={(event) =>
-                        setGatewayWorkspaceRoot(event.target.value)
-                      }
-                      placeholder="~/.openclaw"
-                      disabled={isLoading}
-                    />
-                  </div>
-                </div>
-              </div>
+              {error ? <p className="text-sm text-red-500">{error}</p> : null}
 
-              <div>
-                <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
-                  Agent templates
-                </p>
-                <div className="mt-4 grid gap-6 lg:grid-cols-2">
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium text-slate-900">
-                      Identity template
-                    </label>
-                    <Textarea
-                      value={identityTemplate}
-                      onChange={(event) => setIdentityTemplate(event.target.value)}
-                      placeholder="Override IDENTITY.md for agents in this board."
-                      className="min-h-[180px]"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium text-slate-900">
-                      Soul template
-                    </label>
-                    <Textarea
-                      value={soulTemplate}
-                      onChange={(event) => setSoulTemplate(event.target.value)}
-                      placeholder="Override SOUL.md for agents in this board."
-                      className="min-h-[180px]"
-                    />
-                  </div>
-                </div>
-              </div>
-
-              {error ? (
-                <div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
-                  {error}
-                </div>
-              ) : null}
-
-              <div className="flex flex-wrap items-center gap-3">
-                <Button type="submit" disabled={isLoading}>
-                  {isLoading ? "Saving…" : "Save changes"}
-                </Button>
+              <div className="flex justify-end gap-3">
                 <Button
-                  variant="outline"
                   type="button"
+                  variant="ghost"
                   onClick={() => router.push(`/boards/${boardId}`)}
+                  disabled={isLoading}
                 >
-                  Back to board
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={isLoading || !board}>
+                  {isLoading ? "Saving…" : "Save changes"}
                 </Button>
               </div>
             </form>

frontend/src/app/boards/new/page.tsx

@@ -1,82 +1,45 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 
 import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { CheckCircle2, RefreshCcw, XCircle } from "lucide-react";
 
 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 { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { getApiBaseUrl } from "@/lib/api-base";
-import { CheckCircle2, RefreshCcw, XCircle } from "lucide-react";
 
-const DEFAULT_IDENTITY_TEMPLATE = `# IDENTITY.md
+const DEFAULT_MAIN_SESSION_KEY = "agent:main:main";
+const DEFAULT_WORKSPACE_ROOT = "~/.openclaw";
 
-Name: {{ agent_name }}
-
-Agent ID: {{ agent_id }}
-
-Creature: AI
-
-Vibe: calm, precise, helpful
-
-Emoji: :gear:
-`;
-
-const DEFAULT_SOUL_TEMPLATE = `# SOUL.md
-
-_You're not a chatbot. You're becoming someone._
-
-## Core Truths
-
-**Be genuinely helpful, not performatively helpful.** Skip the "Great question!" and "I'd be happy to help!" -- just help. Actions speak louder than filler words.
-
-**Have opinions.** You're allowed to disagree, prefer things, find stuff amusing or boring. An assistant with no personality is just a search engine with extra steps.
-
-**Be resourceful before asking.** Try to figure it out. Read the file. Check the context. Search for it. _Then_ ask if you're stuck. The goal is to come back with answers, not questions.
-
-**Earn trust through competence.** Your human gave you access to their stuff. Don't make them regret it. Be careful with external actions (emails, tweets, anything public). Be bold with internal ones (reading, organizing, learning).
-
-**Remember you're a guest.** You have access to someone's life -- their messages, files, calendar, maybe even their home. That's intimacy. Treat it with respect.
-
-## Boundaries
-
-- Private things stay private. Period.
-- When in doubt, ask before acting externally.
-- Never send half-baked replies to messaging surfaces.
-- You're not the user's voice -- be careful in group chats.
-
-## Vibe
-
-Be the assistant you'd actually want to talk to. Concise when needed, thorough when it matters. Not a corporate drone. Not a sycophant. Just... good.
-
-## Continuity
-
-Each session, you wake up fresh. These files _are_ your memory. Read them. Update them. They're how you persist.
-
-If you change this file, tell the user -- it's your soul, and they should know.
-
----
-
-_This file is yours to evolve. As you learn who you are, update it._
-`;
+const apiBase = getApiBaseUrl();
 
 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;
-  identity_template?: string | null;
-  soul_template?: string | null;
+  gateway_id?: string | null;
 };
 
-const apiBase = getApiBaseUrl();
+type Gateway = {
+  id: string;
+  name: string;
+  url: string;
+  token?: string | null;
+  main_session_key: string;
+  workspace_root: string;
+  skyll_enabled?: boolean;
+};
 
 const validateGatewayUrl = (value: string) => {
   const trimmed = value.trim();
@@ -105,19 +68,23 @@ const slugify = (value: string) =>
 export default function NewBoardPage() {
   const router = useRouter();
   const { getToken, isSignedIn } = useAuth();
+
   const [name, setName] = useState("");
+  const [gateways, setGateways] = useState<Gateway[]>([]);
+  const [gatewayId, setGatewayId] = useState<string>("");
+  const [createNewGateway, setCreateNewGateway] = useState(false);
+
+  const [gatewayName, setGatewayName] = useState("");
   const [gatewayUrl, setGatewayUrl] = useState("");
   const [gatewayToken, setGatewayToken] = useState("");
-  const [gatewayMainSessionKey, setGatewayMainSessionKey] =
-    useState("agent:main:main");
-  const [gatewayWorkspaceRoot, setGatewayWorkspaceRoot] =
-    useState("~/.openclaw");
-  const [identityTemplate, setIdentityTemplate] = useState(
-    DEFAULT_IDENTITY_TEMPLATE
+  const [gatewayMainSessionKey, setGatewayMainSessionKey] = useState(
+    DEFAULT_MAIN_SESSION_KEY
   );
-  const [soulTemplate, setSoulTemplate] = useState(DEFAULT_SOUL_TEMPLATE);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [gatewayWorkspaceRoot, setGatewayWorkspaceRoot] = useState(
+    DEFAULT_WORKSPACE_ROOT
+  );
+  const [skyllEnabled, setSkyllEnabled] = useState(false);
+
   const [gatewayUrlError, setGatewayUrlError] = useState<string | null>(null);
   const [gatewayCheckStatus, setGatewayCheckStatus] = useState<
     "idle" | "checking" | "success" | "error"
@@ -126,6 +93,41 @@ export default function NewBoardPage() {
     null
   );
 
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const selectedGateway = useMemo(
+    () => gateways.find((gateway) => gateway.id === gatewayId) || null,
+    [gateways, gatewayId]
+  );
+
+  const loadGateways = async () => {
+    if (!isSignedIn) return;
+    try {
+      const token = await getToken();
+      const response = await fetch(`${apiBase}/api/v1/gateways`, {
+        headers: { Authorization: token ? `Bearer ${token}` : "" },
+      });
+      if (!response.ok) {
+        throw new Error("Unable to load gateways.");
+      }
+      const data = (await response.json()) as Gateway[];
+      setGateways(data);
+      if (data.length === 0) {
+        setCreateNewGateway(true);
+      } else if (!createNewGateway && !gatewayId) {
+        setGatewayId(data[0].id);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+    }
+  };
+
+  useEffect(() => {
+    loadGateways();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSignedIn]);
+
   const runGatewayCheck = async () => {
     const validationError = validateGatewayUrl(gatewayUrl);
     setGatewayUrlError(validationError);
@@ -145,13 +147,16 @@ export default function NewBoardPage() {
       if (gatewayToken.trim()) {
         params.set("gateway_token", gatewayToken.trim());
       }
+      if (gatewayMainSessionKey.trim()) {
+        params.set("gateway_main_session_key", gatewayMainSessionKey.trim());
+      }
       const response = await fetch(
-        `${apiBase}/api/v1/gateway/status?${params.toString()}`,
+        `${apiBase}/api/v1/gateways/status?${params.toString()}`,
         {
           headers: {
             Authorization: token ? `Bearer ${token}` : "",
           },
-        },
+        }
       );
       const data = await response.json();
       if (!response.ok || !data?.connected) {
@@ -169,40 +174,85 @@ export default function NewBoardPage() {
     }
   };
 
+  const handleGatewaySelection = (value: string) => {
+    if (value === "new") {
+      setCreateNewGateway(true);
+      setGatewayId("");
+      return;
+    }
+    setCreateNewGateway(false);
+    setGatewayId(value);
+  };
+
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (!isSignedIn) return;
-    const trimmed = name.trim();
-    if (!trimmed) return;
-    const gatewayValidation = validateGatewayUrl(gatewayUrl);
-    setGatewayUrlError(gatewayValidation);
-    if (gatewayValidation) {
-      setGatewayCheckStatus("error");
-      setGatewayCheckMessage(gatewayValidation);
+    const trimmedName = name.trim();
+    if (!trimmedName) {
+      setError("Board name is required.");
       return;
     }
+    if (!createNewGateway && !gatewayId) {
+      setError("Select a gateway before creating a board.");
+      return;
+    }
+    if (createNewGateway) {
+      const gatewayValidation = validateGatewayUrl(gatewayUrl);
+      setGatewayUrlError(gatewayValidation);
+      if (gatewayValidation) {
+        setGatewayCheckStatus("error");
+        setGatewayCheckMessage(gatewayValidation);
+        return;
+      }
+      if (!gatewayName.trim()) {
+        setError("Gateway name is required.");
+        return;
+      }
+      if (!gatewayMainSessionKey.trim()) {
+        setError("Main session key is required.");
+        return;
+      }
+      if (!gatewayWorkspaceRoot.trim()) {
+        setError("Workspace root is required.");
+        return;
+      }
+    }
+
     setIsLoading(true);
     setError(null);
     try {
       const token = await getToken();
+      let configId = gatewayId;
+
+      if (createNewGateway) {
+        const gatewayResponse = await fetch(`${apiBase}/api/v1/gateways`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: token ? `Bearer ${token}` : "",
+          },
+          body: JSON.stringify({
+            name: gatewayName.trim(),
+            url: gatewayUrl.trim(),
+            token: gatewayToken.trim() || null,
+            main_session_key: gatewayMainSessionKey.trim(),
+            workspace_root: gatewayWorkspaceRoot.trim(),
+            skyll_enabled: skyllEnabled,
+          }),
+        });
+        if (!gatewayResponse.ok) {
+          throw new Error("Unable to create gateway.");
+        }
+        const createdGateway = (await gatewayResponse.json()) as Gateway;
+        configId = createdGateway.id;
+      }
+
       const payload: Partial<Board> = {
-        name: trimmed,
-        slug: slugify(trimmed),
+        name: trimmedName,
+        slug: slugify(trimmedName),
+        gateway_id: configId || null,
       };
-      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();
-      }
-      if (identityTemplate.trim()) {
-        payload.identity_template = identityTemplate.trim();
-      }
-      if (soulTemplate.trim()) {
-        payload.soul_template = soulTemplate.trim();
-      }
+
       const response = await fetch(`${apiBase}/api/v1/boards`, {
         method: "POST",
         headers: {
@@ -248,7 +298,7 @@ export default function NewBoardPage() {
                 Create board
               </h1>
               <p className="mt-1 text-sm text-slate-500">
-                Configure the workflow space and gateway defaults for this board.
+                Boards organize tasks and agents by mission context.
               </p>
             </div>
           </div>
@@ -256,175 +306,219 @@ export default function NewBoardPage() {
           <div className="p-8">
             <form
               onSubmit={handleSubmit}
-              className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
+              className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
             >
-              <div>
-                <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
-                  Board identity
-                </p>
-                <div className="mt-4">
-                  <label className="text-sm font-medium text-slate-900">
-                    Board name <span className="text-red-500">*</span>
-                  </label>
-                  <Input
-                    value={name}
-                    onChange={(event) => setName(event.target.value)}
-                    placeholder="e.g. Product ops"
-                    disabled={isLoading}
-                    className="mt-2"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
-                  Gateway connection
-                </p>
-                <div className="mt-4 grid gap-6 md:grid-cols-2">
+              <div className="space-y-4">
+                <div className="grid gap-6 md:grid-cols-2">
                   <div className="space-y-2">
                     <label className="text-sm font-medium text-slate-900">
-                      Gateway URL <span className="text-red-500">*</span>
+                      Board name <span className="text-red-500">*</span>
                     </label>
-                    <div className="relative">
-                      <Input
-                        value={gatewayUrl}
-                        onChange={(event) => setGatewayUrl(event.target.value)}
-                        onBlur={runGatewayCheck}
-                        placeholder="ws://gateway:18789"
-                        disabled={isLoading}
-                        className={`pr-12 ${
-                          gatewayUrlError
-                            ? "border-red-500 focus-visible:ring-red-500"
-                            : ""
-                        }`}
-                      />
-                      <button
-                        type="button"
-                        onClick={runGatewayCheck}
-                        className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 transition hover:text-slate-600"
-                        aria-label="Check gateway connection"
-                      >
-                        {gatewayCheckStatus === "checking" ? (
-                          <RefreshCcw className="h-4 w-4 animate-spin" />
-                        ) : gatewayCheckStatus === "success" ? (
-                          <CheckCircle2 className="h-4 w-4 text-green-500" />
-                        ) : gatewayCheckStatus === "error" ? (
-                          <XCircle className="h-4 w-4 text-red-500" />
-                        ) : (
-                          <RefreshCcw className="h-4 w-4" />
-                        )}
-                      </button>
+                    <Input
+                      value={name}
+                      onChange={(event) => setName(event.target.value)}
+                      placeholder="e.g. Release operations"
+                      disabled={isLoading}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-slate-900">
+                      Gateway <span className="text-red-500">*</span>
+                    </label>
+                    <Select
+                      value={createNewGateway ? "new" : gatewayId}
+                      onValueChange={handleGatewaySelection}
+                    >
+                      <SelectTrigger>
+                      <SelectValue placeholder="Select a gateway" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {gateways.map((config) => (
+                          <SelectItem key={config.id} value={config.id}>
+                            {config.name}
+                          </SelectItem>
+                        ))}
+                        <SelectItem value="new">+ Create new gateway</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+              </div>
+
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+                    Gateway details
+                  </p>
+                  {!createNewGateway && selectedGateway ? (
+                    <span className="text-xs text-slate-500">
+                      {selectedGateway.url}
+                    </span>
+                  ) : null}
+                </div>
+
+                {createNewGateway ? (
+                  <div className="space-y-5">
+                    <div className="grid gap-6 md:grid-cols-2">
+                      <div className="space-y-2">
+                        <label className="text-sm font-medium text-slate-900">
+                          Gateway name <span className="text-red-500">*</span>
+                        </label>
+                        <Input
+                          value={gatewayName}
+                          onChange={(event) => setGatewayName(event.target.value)}
+                          placeholder="Primary gateway"
+                          disabled={isLoading}
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <label className="text-sm font-medium text-slate-900">
+                          Gateway URL <span className="text-red-500">*</span>
+                        </label>
+                        <div className="relative">
+                          <Input
+                            value={gatewayUrl}
+                            onChange={(event) => setGatewayUrl(event.target.value)}
+                            onBlur={runGatewayCheck}
+                            placeholder="ws://gateway:18789"
+                            disabled={isLoading}
+                            className={
+                              gatewayUrlError ? "border-red-500" : undefined
+                            }
+                          />
+                          <button
+                            type="button"
+                            onClick={runGatewayCheck}
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
+                            aria-label="Check gateway connection"
+                          >
+                            {gatewayCheckStatus === "checking" ? (
+                              <RefreshCcw className="h-4 w-4 animate-spin" />
+                            ) : gatewayCheckStatus === "success" ? (
+                              <CheckCircle2 className="h-4 w-4 text-emerald-500" />
+                            ) : gatewayCheckStatus === "error" ? (
+                              <XCircle className="h-4 w-4 text-red-500" />
+                            ) : (
+                              <RefreshCcw className="h-4 w-4" />
+                            )}
+                          </button>
+                        </div>
+                        {gatewayUrlError ? (
+                          <p className="text-xs text-red-500">{gatewayUrlError}</p>
+                        ) : gatewayCheckMessage ? (
+                          <p
+                            className={
+                              gatewayCheckStatus === "success"
+                                ? "text-xs text-emerald-600"
+                                : "text-xs text-red-500"
+                            }
+                          >
+                            {gatewayCheckMessage}
+                          </p>
+                        ) : null}
+                      </div>
                     </div>
-                    {gatewayUrlError ? (
-                      <p className="text-xs text-red-500">{gatewayUrlError}</p>
-                    ) : gatewayCheckMessage ? (
-                      <p
-                        className={`text-xs ${
-                          gatewayCheckStatus === "success"
-                            ? "text-green-600"
-                            : "text-red-500"
-                        }`}
-                      >
-                        {gatewayCheckMessage}
+
+                    <div className="grid gap-6 md:grid-cols-2">
+                      <div className="space-y-2">
+                        <label className="text-sm font-medium text-slate-900">
+                          Gateway token
+                        </label>
+                        <Input
+                          value={gatewayToken}
+                          onChange={(event) => setGatewayToken(event.target.value)}
+                          onBlur={runGatewayCheck}
+                          placeholder="Bearer token"
+                          disabled={isLoading}
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <label className="text-sm font-medium text-slate-900">
+                          Main session key <span className="text-red-500">*</span>
+                        </label>
+                        <Input
+                          value={gatewayMainSessionKey}
+                          onChange={(event) =>
+                            setGatewayMainSessionKey(event.target.value)
+                          }
+                          placeholder={DEFAULT_MAIN_SESSION_KEY}
+                          disabled={isLoading}
+                        />
+                      </div>
+                    </div>
+
+                    <div className="grid gap-6 md:grid-cols-2">
+                      <div className="space-y-2">
+                        <label className="text-sm font-medium text-slate-900">
+                          Workspace root <span className="text-red-500">*</span>
+                        </label>
+                        <Input
+                          value={gatewayWorkspaceRoot}
+                          onChange={(event) =>
+                            setGatewayWorkspaceRoot(event.target.value)
+                          }
+                          placeholder={DEFAULT_WORKSPACE_ROOT}
+                          disabled={isLoading}
+                        />
+                      </div>
+                      <div className="flex items-center gap-3 rounded-lg border border-slate-200 px-4 py-3 text-sm text-slate-700">
+                        <input
+                          type="checkbox"
+                          checked={skyllEnabled}
+                          onChange={(event) => setSkyllEnabled(event.target.checked)}
+                          className="h-4 w-4 rounded border-slate-300 text-slate-900"
+                        />
+                        <span>Enable Skyll dynamic skills</span>
+                      </div>
+                    </div>
+                  </div>
+                ) : selectedGateway ? (
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
+                      <p className="text-xs font-semibold uppercase text-slate-500">
+                        Gateway
                       </p>
-                    ) : null}
+                      <p className="mt-1 text-sm text-slate-900">
+                        {selectedGateway.name}
+                      </p>
+                      <p className="mt-1 text-xs text-slate-500">
+                        {selectedGateway.url}
+                      </p>
+                    </div>
+                    <div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
+                      <p className="text-xs font-semibold uppercase text-slate-500">
+                        Workspace root
+                      </p>
+                      <p className="mt-1 text-sm text-slate-900">
+                        {selectedGateway.workspace_root}
+                      </p>
+                      <p className="mt-1 text-xs text-slate-500">
+                        {selectedGateway.main_session_key}
+                      </p>
+                    </div>
                   </div>
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium text-slate-900">
-                      Gateway token
-                    </label>
-                    <Input
-                      value={gatewayToken}
-                      onChange={(event) => setGatewayToken(event.target.value)}
-                      onBlur={runGatewayCheck}
-                      placeholder="Bearer token"
-                      disabled={isLoading}
-                    />
-                  </div>
-                </div>
+                ) : (
+                  <p className="text-sm text-slate-500">
+                    Select a gateway or create a new one.
+                  </p>
+                )}
               </div>
 
-              <div>
-                <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
-                  Agent defaults
-                </p>
-                <div className="mt-4 grid gap-6 md:grid-cols-2">
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium text-slate-900">
-                      Main session key <span className="text-red-500">*</span>
-                    </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-slate-900">
-                      Workspace root <span className="text-red-500">*</span>
-                    </label>
-                    <Input
-                      value={gatewayWorkspaceRoot}
-                      onChange={(event) =>
-                        setGatewayWorkspaceRoot(event.target.value)
-                      }
-                      placeholder="~/.openclaw"
-                      disabled={isLoading}
-                    />
-                  </div>
-                </div>
-              </div>
+              {error ? <p className="text-sm text-red-500">{error}</p> : null}
 
-              <div>
-                <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
-                  Agent templates
-                </p>
-                <div className="mt-4 grid gap-6 lg:grid-cols-2">
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium text-slate-900">
-                      Identity template
-                    </label>
-                    <Textarea
-                      value={identityTemplate}
-                      onChange={(event) => setIdentityTemplate(event.target.value)}
-                      placeholder="Override IDENTITY.md for agents in this board."
-                      className="min-h-[180px]"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium text-slate-900">
-                      Soul template
-                    </label>
-                    <Textarea
-                      value={soulTemplate}
-                      onChange={(event) => setSoulTemplate(event.target.value)}
-                      placeholder="Override SOUL.md for agents in this board."
-                      className="min-h-[180px]"
-                    />
-                  </div>
-                </div>
-              </div>
-
-              {error ? (
-                <div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
-                  {error}
-                </div>
-              ) : null}
-
-              <div className="flex flex-wrap items-center gap-3">
+              <div className="flex justify-end gap-3">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  onClick={() => router.push("/boards")}
+                  disabled={isLoading}
+                >
+                  Cancel
+                </Button>
                 <Button type="submit" disabled={isLoading}>
                   {isLoading ? "Creating…" : "Create board"}
                 </Button>
-                <Button
-                  variant="outline"
-                  onClick={() => router.push("/boards")}
-                  type="button"
-                >
-                  Back to boards
-                </Button>
               </div>
             </form>
           </div>

frontend/src/app/boards/page.tsx

@@ -108,7 +108,6 @@ export default function BoardsPage() {
         cell: ({ row }) => (
           <div>
             <p className="font-medium text-strong">{row.original.name}</p>
-            <p className="text-xs text-quiet">{row.original.slug}</p>
           </div>
         ),
       },

frontend/src/app/gateways/[gatewayId]/edit/page.tsx

@@ -0,0 +1,368 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { CheckCircle2, RefreshCcw, XCircle } from "lucide-react";
+
+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 { getApiBaseUrl } from "@/lib/api-base";
+
+const apiBase = getApiBaseUrl();
+
+const DEFAULT_MAIN_SESSION_KEY = "agent:main:main";
+const DEFAULT_WORKSPACE_ROOT = "~/.openclaw";
+
+const validateGatewayUrl = (value: string) => {
+  const trimmed = value.trim();
+  if (!trimmed) return "Gateway URL is required.";
+  try {
+    const url = new URL(trimmed);
+    if (url.protocol !== "ws:" && url.protocol !== "wss:") {
+      return "Gateway URL must start with ws:// or wss://.";
+    }
+    if (!url.port) {
+      return "Gateway URL must include an explicit port.";
+    }
+    return null;
+  } catch {
+    return "Enter a valid gateway URL including port.";
+  }
+};
+
+type Gateway = {
+  id: string;
+  name: string;
+  url: string;
+  token?: string | null;
+  main_session_key: string;
+  workspace_root: string;
+  skyll_enabled?: boolean;
+};
+
+export default function EditGatewayPage() {
+  const { getToken, isSignedIn } = useAuth();
+  const router = useRouter();
+  const params = useParams();
+  const gatewayIdParam = params?.gatewayId;
+  const gatewayId = Array.isArray(gatewayIdParam)
+    ? gatewayIdParam[0]
+    : gatewayIdParam;
+
+  const [gateway, setGateway] = useState<Gateway | null>(null);
+  const [name, setName] = useState("");
+  const [gatewayUrl, setGatewayUrl] = useState("");
+  const [gatewayToken, setGatewayToken] = useState("");
+  const [mainSessionKey, setMainSessionKey] = useState(
+    DEFAULT_MAIN_SESSION_KEY
+  );
+  const [workspaceRoot, setWorkspaceRoot] = useState(DEFAULT_WORKSPACE_ROOT);
+  const [skyllEnabled, setSkyllEnabled] = useState(false);
+
+  const [gatewayUrlError, setGatewayUrlError] = useState<string | null>(null);
+  const [gatewayCheckStatus, setGatewayCheckStatus] = useState<
+    "idle" | "checking" | "success" | "error"
+  >("idle");
+  const [gatewayCheckMessage, setGatewayCheckMessage] = useState<string | null>(
+    null
+  );
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isSignedIn || !gatewayId) return;
+    const loadGateway = async () => {
+      try {
+        const token = await getToken();
+        const response = await fetch(
+          `${apiBase}/api/v1/gateways/${gatewayId}`,
+          {
+            headers: { Authorization: token ? `Bearer ${token}` : "" },
+          }
+        );
+        if (!response.ok) {
+          throw new Error("Unable to load gateway.");
+        }
+        const data = (await response.json()) as Gateway;
+        setGateway(data);
+        setName(data.name ?? "");
+        setGatewayUrl(data.url ?? "");
+        setGatewayToken(data.token ?? "");
+        setMainSessionKey(data.main_session_key ?? DEFAULT_MAIN_SESSION_KEY);
+        setWorkspaceRoot(data.workspace_root ?? DEFAULT_WORKSPACE_ROOT);
+        setSkyllEnabled(Boolean(data.skyll_enabled));
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Something went wrong.");
+      }
+    };
+    loadGateway();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [gatewayId, isSignedIn]);
+
+  const runGatewayCheck = async () => {
+    const validationError = validateGatewayUrl(gatewayUrl);
+    setGatewayUrlError(validationError);
+    if (validationError) {
+      setGatewayCheckStatus("error");
+      setGatewayCheckMessage(validationError);
+      return;
+    }
+    if (!isSignedIn) return;
+    setGatewayCheckStatus("checking");
+    setGatewayCheckMessage(null);
+    try {
+      const token = await getToken();
+      const params = new URLSearchParams({
+        gateway_url: gatewayUrl.trim(),
+      });
+      if (gatewayToken.trim()) {
+        params.set("gateway_token", gatewayToken.trim());
+      }
+      if (mainSessionKey.trim()) {
+        params.set("gateway_main_session_key", mainSessionKey.trim());
+      }
+      const response = await fetch(
+        `${apiBase}/api/v1/gateways/status?${params.toString()}`,
+        {
+          headers: { Authorization: token ? `Bearer ${token}` : "" },
+        }
+      );
+      const data = await response.json();
+      if (!response.ok || !data?.connected) {
+        setGatewayCheckStatus("error");
+        setGatewayCheckMessage(data?.error ?? "Unable to reach gateway.");
+        return;
+      }
+      setGatewayCheckStatus("success");
+      setGatewayCheckMessage("Gateway reachable.");
+    } catch (err) {
+      setGatewayCheckStatus("error");
+      setGatewayCheckMessage(
+        err instanceof Error ? err.message : "Unable to reach gateway."
+      );
+    }
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!isSignedIn || !gatewayId) return;
+
+    if (!name.trim()) {
+      setError("Gateway name is required.");
+      return;
+    }
+    const gatewayValidation = validateGatewayUrl(gatewayUrl);
+    setGatewayUrlError(gatewayValidation);
+    if (gatewayValidation) {
+      setGatewayCheckStatus("error");
+      setGatewayCheckMessage(gatewayValidation);
+      return;
+    }
+    if (!mainSessionKey.trim()) {
+      setError("Main session key is required.");
+      return;
+    }
+    if (!workspaceRoot.trim()) {
+      setError("Workspace root is required.");
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const token = await getToken();
+      const response = await fetch(`${apiBase}/api/v1/gateways/${gatewayId}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token ? `Bearer ${token}` : "",
+        },
+        body: JSON.stringify({
+          name: name.trim(),
+          url: gatewayUrl.trim(),
+          token: gatewayToken.trim() || null,
+          main_session_key: mainSessionKey.trim(),
+          workspace_root: workspaceRoot.trim(),
+          skyll_enabled: skyllEnabled,
+        }),
+      });
+      if (!response.ok) {
+        throw new Error("Unable to update gateway.");
+      }
+      const updated = (await response.json()) as Gateway;
+      setGateway(updated);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <DashboardShell>
+      <SignedOut>
+        <div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
+          <div className="rounded-xl border border-slate-200 bg-white px-8 py-6 shadow-sm">
+            <p className="text-sm text-slate-600">Sign in to edit a gateway.</p>
+            <SignInButton
+              mode="modal"
+              forceRedirectUrl={`/gateways/${gatewayId}/edit`}
+            >
+              <Button className="mt-4">Sign in</Button>
+            </SignInButton>
+          </div>
+        </div>
+      </SignedOut>
+      <SignedIn>
+        <DashboardSidebar />
+        <main className="flex-1 overflow-y-auto bg-slate-50">
+          <div className="border-b border-slate-200 bg-white px-8 py-6">
+            <div>
+              <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
+                {gateway ? `Edit gateway — ${gateway.name}` : "Edit gateway"}
+              </h1>
+              <p className="mt-1 text-sm text-slate-500">
+                Update connection settings for this OpenClaw gateway.
+              </p>
+            </div>
+          </div>
+
+          <div className="p-8">
+            <form
+              onSubmit={handleSubmit}
+              className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
+            >
+              <div className="grid gap-6 md:grid-cols-2">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-slate-900">
+                    Gateway name <span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    value={name}
+                    onChange={(event) => setName(event.target.value)}
+                    placeholder="Primary gateway"
+                    disabled={isLoading}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-slate-900">
+                    Gateway URL <span className="text-red-500">*</span>
+                  </label>
+                  <div className="relative">
+                    <Input
+                      value={gatewayUrl}
+                      onChange={(event) => setGatewayUrl(event.target.value)}
+                      onBlur={runGatewayCheck}
+                      placeholder="ws://gateway:18789"
+                      disabled={isLoading}
+                      className={gatewayUrlError ? "border-red-500" : undefined}
+                    />
+                    <button
+                      type="button"
+                      onClick={runGatewayCheck}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
+                      aria-label="Check gateway connection"
+                    >
+                      {gatewayCheckStatus === "checking" ? (
+                        <RefreshCcw className="h-4 w-4 animate-spin" />
+                      ) : gatewayCheckStatus === "success" ? (
+                        <CheckCircle2 className="h-4 w-4 text-emerald-500" />
+                      ) : gatewayCheckStatus === "error" ? (
+                        <XCircle className="h-4 w-4 text-red-500" />
+                      ) : (
+                        <RefreshCcw className="h-4 w-4" />
+                      )}
+                    </button>
+                  </div>
+                  {gatewayUrlError ? (
+                    <p className="text-xs text-red-500">{gatewayUrlError}</p>
+                  ) : gatewayCheckMessage ? (
+                    <p
+                      className={
+                        gatewayCheckStatus === "success"
+                          ? "text-xs text-emerald-600"
+                          : "text-xs text-red-500"
+                      }
+                    >
+                      {gatewayCheckMessage}
+                    </p>
+                  ) : null}
+                </div>
+              </div>
+
+              <div className="grid gap-6 md:grid-cols-2">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-slate-900">
+                    Gateway token
+                  </label>
+                  <Input
+                    value={gatewayToken}
+                    onChange={(event) => setGatewayToken(event.target.value)}
+                    onBlur={runGatewayCheck}
+                    placeholder="Bearer token"
+                    disabled={isLoading}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-slate-900">
+                    Main session key <span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    value={mainSessionKey}
+                    onChange={(event) => setMainSessionKey(event.target.value)}
+                    placeholder={DEFAULT_MAIN_SESSION_KEY}
+                    disabled={isLoading}
+                  />
+                </div>
+              </div>
+
+              <div className="grid gap-6 md:grid-cols-2">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-slate-900">
+                    Workspace root <span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    value={workspaceRoot}
+                    onChange={(event) => setWorkspaceRoot(event.target.value)}
+                    placeholder={DEFAULT_WORKSPACE_ROOT}
+                    disabled={isLoading}
+                  />
+                </div>
+                <div className="flex items-center gap-3 rounded-lg border border-slate-200 px-4 py-3 text-sm text-slate-700">
+                  <input
+                    type="checkbox"
+                    checked={skyllEnabled}
+                    onChange={(event) => setSkyllEnabled(event.target.checked)}
+                    className="h-4 w-4 rounded border-slate-300 text-slate-900"
+                  />
+                  <span>Enable Skyll dynamic skills</span>
+                </div>
+              </div>
+
+              {error ? <p className="text-sm text-red-500">{error}</p> : null}
+
+              <div className="flex justify-end gap-3">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  onClick={() => router.push("/gateways")}
+                  disabled={isLoading}
+                >
+                  Back
+                </Button>
+                <Button type="submit" disabled={isLoading}>
+                  {isLoading ? "Saving…" : "Save changes"}
+                </Button>
+              </div>
+            </form>
+          </div>
+        </main>
+      </SignedIn>
+    </DashboardShell>
+  );
+}

frontend/src/app/gateways/new/page.tsx

@@ -0,0 +1,324 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import { CheckCircle2, RefreshCcw, XCircle } from "lucide-react";
+
+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 { getApiBaseUrl } from "@/lib/api-base";
+
+const apiBase = getApiBaseUrl();
+
+const DEFAULT_MAIN_SESSION_KEY = "agent:main:main";
+const DEFAULT_WORKSPACE_ROOT = "~/.openclaw";
+
+const validateGatewayUrl = (value: string) => {
+  const trimmed = value.trim();
+  if (!trimmed) return "Gateway URL is required.";
+  try {
+    const url = new URL(trimmed);
+    if (url.protocol !== "ws:" && url.protocol !== "wss:") {
+      return "Gateway URL must start with ws:// or wss://.";
+    }
+    if (!url.port) {
+      return "Gateway URL must include an explicit port.";
+    }
+    return null;
+  } catch {
+    return "Enter a valid gateway URL including port.";
+  }
+};
+
+export default function NewGatewayPage() {
+  const { getToken, isSignedIn } = useAuth();
+  const router = useRouter();
+
+  const [name, setName] = useState("");
+  const [gatewayUrl, setGatewayUrl] = useState("");
+  const [gatewayToken, setGatewayToken] = useState("");
+  const [mainSessionKey, setMainSessionKey] = useState(
+    DEFAULT_MAIN_SESSION_KEY
+  );
+  const [workspaceRoot, setWorkspaceRoot] = useState(DEFAULT_WORKSPACE_ROOT);
+  const [skyllEnabled, setSkyllEnabled] = useState(false);
+
+  const [gatewayUrlError, setGatewayUrlError] = useState<string | null>(null);
+  const [gatewayCheckStatus, setGatewayCheckStatus] = useState<
+    "idle" | "checking" | "success" | "error"
+  >("idle");
+  const [gatewayCheckMessage, setGatewayCheckMessage] = useState<string | null>(
+    null
+  );
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setGatewayCheckStatus("idle");
+    setGatewayCheckMessage(null);
+  }, [gatewayToken]);
+
+  const runGatewayCheck = async () => {
+    const validationError = validateGatewayUrl(gatewayUrl);
+    setGatewayUrlError(validationError);
+    if (validationError) {
+      setGatewayCheckStatus("error");
+      setGatewayCheckMessage(validationError);
+      return;
+    }
+    if (!isSignedIn) return;
+    setGatewayCheckStatus("checking");
+    setGatewayCheckMessage(null);
+    try {
+      const token = await getToken();
+      const params = new URLSearchParams({
+        gateway_url: gatewayUrl.trim(),
+      });
+      if (gatewayToken.trim()) {
+        params.set("gateway_token", gatewayToken.trim());
+      }
+      if (mainSessionKey.trim()) {
+        params.set("gateway_main_session_key", mainSessionKey.trim());
+      }
+      const response = await fetch(
+        `${apiBase}/api/v1/gateways/status?${params.toString()}`,
+        {
+          headers: { Authorization: token ? `Bearer ${token}` : "" },
+        }
+      );
+      const data = await response.json();
+      if (!response.ok || !data?.connected) {
+        setGatewayCheckStatus("error");
+        setGatewayCheckMessage(data?.error ?? "Unable to reach gateway.");
+        return;
+      }
+      setGatewayCheckStatus("success");
+      setGatewayCheckMessage("Gateway reachable.");
+    } catch (err) {
+      setGatewayCheckStatus("error");
+      setGatewayCheckMessage(
+        err instanceof Error ? err.message : "Unable to reach gateway."
+      );
+    }
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!isSignedIn) return;
+
+    if (!name.trim()) {
+      setError("Gateway name is required.");
+      return;
+    }
+    const gatewayValidation = validateGatewayUrl(gatewayUrl);
+    setGatewayUrlError(gatewayValidation);
+    if (gatewayValidation) {
+      setGatewayCheckStatus("error");
+      setGatewayCheckMessage(gatewayValidation);
+      return;
+    }
+    if (!mainSessionKey.trim()) {
+      setError("Main session key is required.");
+      return;
+    }
+    if (!workspaceRoot.trim()) {
+      setError("Workspace root is required.");
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const token = await getToken();
+      const response = await fetch(`${apiBase}/api/v1/gateways`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token ? `Bearer ${token}` : "",
+        },
+        body: JSON.stringify({
+          name: name.trim(),
+          url: gatewayUrl.trim(),
+          token: gatewayToken.trim() || null,
+          main_session_key: mainSessionKey.trim(),
+          workspace_root: workspaceRoot.trim(),
+          skyll_enabled: skyllEnabled,
+        }),
+      });
+      if (!response.ok) {
+        throw new Error("Unable to create gateway.");
+      }
+      const created = (await response.json()) as { id: string };
+      router.push(`/gateways/${created.id}/edit`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <DashboardShell>
+      <SignedOut>
+        <div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
+          <div className="rounded-xl border border-slate-200 bg-white px-8 py-6 shadow-sm">
+            <p className="text-sm text-slate-600">Sign in to create a gateway.</p>
+            <SignInButton mode="modal" forceRedirectUrl="/gateways/new">
+              <Button className="mt-4">Sign in</Button>
+            </SignInButton>
+          </div>
+        </div>
+      </SignedOut>
+      <SignedIn>
+        <DashboardSidebar />
+        <main className="flex-1 overflow-y-auto bg-slate-50">
+          <div className="border-b border-slate-200 bg-white px-8 py-6">
+            <div>
+              <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
+                Create gateway
+              </h1>
+              <p className="mt-1 text-sm text-slate-500">
+                Configure an OpenClaw gateway for mission control.
+              </p>
+            </div>
+          </div>
+
+          <div className="p-8">
+            <form
+              onSubmit={handleSubmit}
+              className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
+            >
+              <div className="grid gap-6 md:grid-cols-2">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-slate-900">
+                    Gateway name <span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    value={name}
+                    onChange={(event) => setName(event.target.value)}
+                    placeholder="Primary gateway"
+                    disabled={isLoading}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-slate-900">
+                    Gateway URL <span className="text-red-500">*</span>
+                  </label>
+                  <div className="relative">
+                    <Input
+                      value={gatewayUrl}
+                      onChange={(event) => setGatewayUrl(event.target.value)}
+                      onBlur={runGatewayCheck}
+                      placeholder="ws://gateway:18789"
+                      disabled={isLoading}
+                      className={gatewayUrlError ? "border-red-500" : undefined}
+                    />
+                    <button
+                      type="button"
+                      onClick={runGatewayCheck}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
+                      aria-label="Check gateway connection"
+                    >
+                      {gatewayCheckStatus === "checking" ? (
+                        <RefreshCcw className="h-4 w-4 animate-spin" />
+                      ) : gatewayCheckStatus === "success" ? (
+                        <CheckCircle2 className="h-4 w-4 text-emerald-500" />
+                      ) : gatewayCheckStatus === "error" ? (
+                        <XCircle className="h-4 w-4 text-red-500" />
+                      ) : (
+                        <RefreshCcw className="h-4 w-4" />
+                      )}
+                    </button>
+                  </div>
+                  {gatewayUrlError ? (
+                    <p className="text-xs text-red-500">{gatewayUrlError}</p>
+                  ) : gatewayCheckMessage ? (
+                    <p
+                      className={
+                        gatewayCheckStatus === "success"
+                          ? "text-xs text-emerald-600"
+                          : "text-xs text-red-500"
+                      }
+                    >
+                      {gatewayCheckMessage}
+                    </p>
+                  ) : null}
+                </div>
+              </div>
+
+              <div className="grid gap-6 md:grid-cols-2">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-slate-900">
+                    Gateway token
+                  </label>
+                  <Input
+                    value={gatewayToken}
+                    onChange={(event) => setGatewayToken(event.target.value)}
+                    onBlur={runGatewayCheck}
+                    placeholder="Bearer token"
+                    disabled={isLoading}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-slate-900">
+                    Main session key <span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    value={mainSessionKey}
+                    onChange={(event) => setMainSessionKey(event.target.value)}
+                    placeholder={DEFAULT_MAIN_SESSION_KEY}
+                    disabled={isLoading}
+                  />
+                </div>
+              </div>
+
+              <div className="grid gap-6 md:grid-cols-2">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-slate-900">
+                    Workspace root <span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    value={workspaceRoot}
+                    onChange={(event) => setWorkspaceRoot(event.target.value)}
+                    placeholder={DEFAULT_WORKSPACE_ROOT}
+                    disabled={isLoading}
+                  />
+                </div>
+                <div className="flex items-center gap-3 rounded-lg border border-slate-200 px-4 py-3 text-sm text-slate-700">
+                  <input
+                    type="checkbox"
+                    checked={skyllEnabled}
+                    onChange={(event) => setSkyllEnabled(event.target.checked)}
+                    className="h-4 w-4 rounded border-slate-300 text-slate-900"
+                  />
+                  <span>Enable Skyll dynamic skills</span>
+                </div>
+              </div>
+
+              {error ? <p className="text-sm text-red-500">{error}</p> : null}
+
+              <div className="flex justify-end gap-3">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  onClick={() => router.push("/gateways")}
+                  disabled={isLoading}
+                >
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={isLoading}>
+                  {isLoading ? "Creating…" : "Create gateway"}
+                </Button>
+              </div>
+            </form>
+          </div>
+        </main>
+      </SignedIn>
+    </DashboardShell>
+  );
+}

frontend/src/app/gateways/page.tsx

@@ -0,0 +1,326 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
+import {
+  type ColumnDef,
+  type SortingState,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+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";
+import { getApiBaseUrl } from "@/lib/api-base";
+
+const apiBase = getApiBaseUrl();
+
+type Gateway = {
+  id: string;
+  name: string;
+  url: string;
+  token?: string | null;
+  main_session_key: string;
+  workspace_root: string;
+  skyll_enabled?: boolean;
+  created_at: string;
+  updated_at: string;
+};
+
+const truncate = (value?: string | null, max = 24) => {
+  if (!value) return "—";
+  if (value.length <= max) return value;
+  return `${value.slice(0, max)}…`;
+};
+
+const formatTimestamp = (value?: string | null) => {
+  if (!value) return "—";
+  const date = new Date(`${value}${value.endsWith("Z") ? "" : "Z"}`);
+  if (Number.isNaN(date.getTime())) return "—";
+  return date.toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+
+export default function GatewaysPage() {
+  const { getToken, isSignedIn } = useAuth();
+
+  const [gateways, setGateways] = useState<Gateway[]>([]);
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: "name", desc: false },
+  ]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [deleteTarget, setDeleteTarget] = useState<Gateway | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+
+  const sortedGateways = useMemo(() => [...gateways], [gateways]);
+
+  const loadGateways = async () => {
+    if (!isSignedIn) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const token = await getToken();
+      const response = await fetch(`${apiBase}/api/v1/gateways`, {
+        headers: { Authorization: token ? `Bearer ${token}` : "" },
+      });
+      if (!response.ok) {
+        throw new Error("Unable to load gateways.");
+      }
+      const data = (await response.json()) as Gateway[];
+      setGateways(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadGateways();
+    // 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/gateways/${deleteTarget.id}`,
+        {
+          method: "DELETE",
+          headers: { Authorization: token ? `Bearer ${token}` : "" },
+        }
+      );
+      if (!response.ok) {
+        throw new Error("Unable to delete gateway.");
+      }
+      setGateways((prev) => prev.filter((item) => item.id !== deleteTarget.id));
+      setDeleteTarget(null);
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : "Something went wrong.");
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const columns = useMemo<ColumnDef<Gateway>[]>(
+    () => [
+      {
+        accessorKey: "name",
+        header: "Gateway",
+        cell: ({ row }) => (
+          <div>
+            <p className="text-sm font-medium text-slate-900">
+              {row.original.name}
+            </p>
+            <p className="text-xs text-slate-500">
+              {truncate(row.original.url, 36)}
+            </p>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "main_session_key",
+        header: "Main session",
+        cell: ({ row }) => (
+          <span className="text-sm text-slate-700">
+            {truncate(row.original.main_session_key, 24)}
+          </span>
+        ),
+      },
+      {
+        accessorKey: "workspace_root",
+        header: "Workspace root",
+        cell: ({ row }) => (
+          <span className="text-sm text-slate-700">
+            {truncate(row.original.workspace_root, 28)}
+          </span>
+        ),
+      },
+      {
+        accessorKey: "skyll_enabled",
+        header: "Skyll",
+        cell: ({ row }) => (
+          <span className="text-sm text-slate-700">
+            {row.original.skyll_enabled ? "Enabled" : "Off"}
+          </span>
+        ),
+      },
+      {
+        accessorKey: "updated_at",
+        header: "Updated",
+        cell: ({ row }) => (
+          <span className="text-sm text-slate-700">
+            {formatTimestamp(row.original.updated_at)}
+          </span>
+        ),
+      },
+      {
+        id: "actions",
+        header: "",
+        cell: ({ row }) => (
+          <div className="flex justify-end gap-2">
+            <Button variant="ghost" asChild size="sm">
+              <Link href={`/gateways/${row.original.id}/edit`}>Edit</Link>
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setDeleteTarget(row.original)}
+            >
+              Delete
+            </Button>
+          </div>
+        ),
+      },
+    ],
+    []
+  );
+
+  const table = useReactTable({
+    data: sortedGateways,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  return (
+    <DashboardShell>
+      <SignedOut>
+        <div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
+          <div className="rounded-xl border border-slate-200 bg-white px-8 py-6 shadow-sm">
+            <p className="text-sm text-slate-600">Sign in to view gateways.</p>
+            <SignInButton mode="modal" forceRedirectUrl="/gateways">
+              <Button className="mt-4">Sign in</Button>
+            </SignInButton>
+          </div>
+        </div>
+      </SignedOut>
+      <SignedIn>
+        <DashboardSidebar />
+        <main className="flex-1 overflow-y-auto bg-slate-50">
+          <div className="border-b border-slate-200 bg-white px-8 py-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
+                  Gateways
+                </h1>
+                <p className="mt-1 text-sm text-slate-500">
+                  Manage OpenClaw gateway connections used by boards.
+                </p>
+              </div>
+              <Button asChild>
+                <Link href="/gateways/new">Create gateway</Link>
+              </Button>
+            </div>
+          </div>
+
+          <div className="p-8">
+            <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+              <div className="border-b border-slate-200 px-6 py-4">
+                <div className="flex items-center justify-between">
+                  <p className="text-sm font-semibold text-slate-900">All gateways</p>
+                  {isLoading ? (
+                    <span className="text-xs text-slate-500">Loading…</span>
+                  ) : (
+                    <span className="text-xs text-slate-500">
+                      {gateways.length} total
+                    </span>
+                  )}
+                </div>
+              </div>
+              <div className="overflow-x-auto">
+                <table className="w-full border-collapse text-left text-sm">
+                  <thead className="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
+                    {table.getHeaderGroups().map((headerGroup) => (
+                      <tr key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => (
+                          <th key={header.id} className="px-6 py-3 font-medium">
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext()
+                                )}
+                          </th>
+                        ))}
+                      </tr>
+                    ))}
+                  </thead>
+                  <tbody className="divide-y divide-slate-100">
+                    {table.getRowModel().rows.map((row) => (
+                      <tr key={row.id} className="hover:bg-slate-50">
+                        {row.getVisibleCells().map((cell) => (
+                          <td key={cell.id} className="px-6 py-4">
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext()
+                            )}
+                          </td>
+                        ))}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              {!isLoading && gateways.length === 0 ? (
+                <div className="px-6 py-10 text-center text-sm text-slate-500">
+                  No gateways yet. Create your first gateway to connect boards.
+                </div>
+              ) : null}
+            </div>
+
+            {error ? <p className="mt-4 text-sm text-red-500">{error}</p> : null}
+          </div>
+        </main>
+      </SignedIn>
+
+      <Dialog 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>
+          {deleteError ? (
+            <p className="text-sm text-red-500">{deleteError}</p>
+          ) : null}
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setDeleteTarget(null)}>
+              Cancel
+            </Button>
+            <Button onClick={handleDelete} disabled={isDeleting}>
+              {isDeleting ? "Deleting…" : "Delete"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DashboardShell>
+  );
+}

frontend/src/components/organisms/DashboardSidebar.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { BarChart3, Bot, LayoutGrid } from "lucide-react";
+import { BarChart3, Bot, LayoutGrid, Network } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -28,6 +28,18 @@ export function DashboardSidebar() {
             <BarChart3 className="h-4 w-4" />
             Dashboard
           </Link>
+          <Link
+            href="/gateways"
+            className={cn(
+              "flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
+              pathname.startsWith("/gateways")
+                ? "bg-blue-100 text-blue-800 font-medium"
+                : "hover:bg-slate-100"
+            )}
+          >
+            <Network className="h-4 w-4" />
+            Gateways
+          </Link>
           <Link
             href="/boards"
             className={cn(

frontend/src/lib/agent-templates.ts

@@ -0,0 +1,50 @@
+export const DEFAULT_IDENTITY_TEMPLATE = `# IDENTITY.md
+
+Name: {{ agent_name }}
+
+Agent ID: {{ agent_id }}
+
+Creature: AI
+
+Vibe: calm, precise, helpful
+
+Emoji: :gear:
+`;
+
+export const DEFAULT_SOUL_TEMPLATE = `# SOUL.md
+
+_You're not a chatbot. You're becoming someone._
+
+## Core Truths
+
+**Be genuinely helpful, not performatively helpful.** Skip the "Great question!" and "I'd be happy to help!" -- just help. Actions speak louder than filler words.
+
+**Have opinions.** You're allowed to disagree, prefer things, find stuff amusing or boring. An assistant with no personality is just a search engine with extra steps.
+
+**Be resourceful before asking.** Try to figure it out. Read the file. Check the context. Search for it. _Then_ ask if you're stuck. The goal is to come back with answers, not questions.
+
+**Earn trust through competence.** Your human gave you access to their stuff. Don't make them regret it. Be careful with external actions (emails, tweets, anything public). Be bold with internal ones (reading, organizing, learning).
+
+**Remember you're a guest.** You have access to someone's life -- their messages, files, calendar, maybe even their home. That's intimacy. Treat it with respect.
+
+## Boundaries
+
+- Private things stay private. Period.
+- When in doubt, ask before acting externally.
+- Never send half-baked replies to messaging surfaces.
+- You're not the user's voice -- be careful in group chats.
+
+## Vibe
+
+Be the assistant you'd actually want to talk to. Concise when needed, thorough when it matters. Not a corporate drone. Not a sycophant. Just... good.
+
+## Continuity
+
+Each session, you wake up fresh. These files _are_ your memory. Read them. Update them. They're how you persist.
+
+If you change this file, tell the user -- it's your soul, and they should know.
+
+---
+
+_This file is yours to evolve. As you learn who you are, update it._
+`;