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

feat(agents): Refactor gateway configuration handling and enhance UI for agent creation and editing

Browse Source
This commit is contained in:
Abhimanyu Saharan
2026-02-04 21:44:21 +05:30
parent 1a1efc2d5a
commit 1297c12a73
5 changed files with 968 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
backend/app/api/gateway.py
View File

@@ -24,11 +24,19 @@ from app.models.boards import Board
router = APIRouter(prefix="/gateway", tags=["gateway"]) router = APIRouter(prefix="/gateway", tags=["gateway"])
def _require_board_config(session: Session, board_id: str | None) -> tuple[Board, GatewayConfig]: def _resolve_gateway_config(
session: Session,
board_id: str | None,
gateway_url: str | None,
gateway_token: str | None,
gateway_main_session_key: str | None,
) -> tuple[Board | None, GatewayConfig, str | None]:
if gateway_url:
return None, GatewayConfig(url=gateway_url, token=gateway_token), gateway_main_session_key
if not board_id: if not board_id:
raise HTTPException( raise HTTPException(
status_code=status.HTTP_422_UNPROCESSABLE_ENTITY, status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
detail="board_id is required", detail="board_id or gateway_url is required",
) )
board = session.get(Board, board_id) board = session.get(Board, board_id)
if board is None: if board is None:
@@ -38,28 +46,31 @@ def _require_board_config(session: Session, board_id: str | None) -> tuple[Board
status_code=status.HTTP_422_UNPROCESSABLE_ENTITY, status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
detail="Board gateway_url is required", detail="Board gateway_url is required",
) )
if not board.gateway_main_session_key: return board, GatewayConfig(url=board.gateway_url, token=board.gateway_token), board.gateway_main_session_key
raise HTTPException(
status_code=status.HTTP_422_UNPROCESSABLE_ENTITY,
detail="Board gateway_main_session_key is required",
)
return board, GatewayConfig(url=board.gateway_url, token=board.gateway_token)
@router.get("/status") @router.get("/status")
async def gateway_status( async def gateway_status(
board_id: str | None = Query(default=None), board_id: str | None = Query(default=None),
gateway_url: str | None = Query(default=None),
gateway_token: str | None = Query(default=None),
gateway_main_session_key: str | None = Query(default=None),
session: Session = Depends(get_session), session: Session = Depends(get_session),
auth: AuthContext = Depends(require_admin_auth), auth: AuthContext = Depends(require_admin_auth),
) -> dict[str, object]: ) -> dict[str, object]:
board, config = _require_board_config(session, board_id) board, config, main_session = _resolve_gateway_config(
session,
board_id,
gateway_url,
gateway_token,
gateway_main_session_key,
)
try: try:
sessions = await openclaw_call("sessions.list", config=config) sessions = await openclaw_call("sessions.list", config=config)
if isinstance(sessions, dict): if isinstance(sessions, dict):
sessions_list = list(sessions.get("sessions") or []) sessions_list = list(sessions.get("sessions") or [])
else: else:
sessions_list = list(sessions or []) sessions_list = list(sessions or [])
main_session = board.gateway_main_session_key
main_session_entry: object | None = None main_session_entry: object | None = None
main_session_error: str | None = None main_session_error: str | None = None
if main_session: if main_session:
@@ -73,7 +84,7 @@ async def gateway_status(
main_session_error = str(exc) main_session_error = str(exc)
return { return {
"connected": True, "connected": True,
"gateway_url": board.gateway_url, "gateway_url": config.url,
"sessions_count": len(sessions_list), "sessions_count": len(sessions_list),
"sessions": sessions_list, "sessions": sessions_list,
"main_session_key": main_session, "main_session_key": main_session,
@@ -83,7 +94,7 @@ async def gateway_status(
except OpenClawGatewayError as exc: except OpenClawGatewayError as exc:
return { return {
"connected": False, "connected": False,
"gateway_url": board.gateway_url, "gateway_url": config.url,
"error": str(exc), "error": str(exc),
} }
@@ -94,7 +105,13 @@ async def list_sessions(
session: Session = Depends(get_session), session: Session = Depends(get_session),
auth: AuthContext = Depends(require_admin_auth), auth: AuthContext = Depends(require_admin_auth),
) -> dict[str, object]: ) -> dict[str, object]:
board, config = _require_board_config(session, board_id) board, config, main_session = _resolve_gateway_config(
session,
board_id,
None,
None,
None,
)
try: try:
sessions = await openclaw_call("sessions.list", config=config) sessions = await openclaw_call("sessions.list", config=config)
except OpenClawGatewayError as exc: except OpenClawGatewayError as exc:
@@ -104,7 +121,6 @@ async def list_sessions(
else: else:
sessions_list = list(sessions or []) sessions_list = list(sessions or [])
main_session = board.gateway_main_session_key
main_session_entry: object | None = None main_session_entry: object | None = None
if main_session: if main_session:
try: try:
@@ -130,7 +146,13 @@ async def get_gateway_session(
session: Session = Depends(get_session), session: Session = Depends(get_session),
auth: AuthContext = Depends(require_admin_auth), auth: AuthContext = Depends(require_admin_auth),
) -> dict[str, object]: ) -> dict[str, object]:
board, config = _require_board_config(session, board_id) board, config, main_session = _resolve_gateway_config(
session,
board_id,
None,
None,
None,
)
try: try:
sessions = await openclaw_call("sessions.list", config=config) sessions = await openclaw_call("sessions.list", config=config)
except OpenClawGatewayError as exc: except OpenClawGatewayError as exc:

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

@@ -162,34 +162,47 @@ export default function EditAgentPage() {
return ( return (
<DashboardShell> <DashboardShell>
<SignedOut> <SignedOut>
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-2xl surface-panel p-10 text-center lg:col-span-2"> <div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
<p className="text-sm text-muted">Sign in to edit agents.</p> <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 agents.</p>
<SignInButton <SignInButton
mode="modal" mode="modal"
forceRedirectUrl={`/agents/${agentId}/edit`} forceRedirectUrl={`/agents/${agentId}/edit`}
signUpForceRedirectUrl={`/agents/${agentId}/edit`} signUpForceRedirectUrl={`/agents/${agentId}/edit`}
> >
<Button>Sign in</Button> <Button className="mt-4">Sign in</Button>
</SignInButton> </SignInButton>
</div> </div>
</div>
</SignedOut> </SignedOut>
<SignedIn> <SignedIn>
<DashboardSidebar /> <DashboardSidebar />
<div className="flex h-full flex-col justify-center rounded-2xl surface-panel p-8"> <main className="flex-1 overflow-y-auto bg-slate-50">
<div className="mb-6 space-y-2"> <div className="border-b border-slate-200 bg-white px-8 py-6">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-quiet"> <div>
Edit agent <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
</p> {agent?.name ?? "Edit agent"}
<h1 className="text-2xl font-semibold text-strong">
{agent?.name ?? "Agent"}
</h1> </h1>
<p className="text-sm text-muted"> <p className="mt-1 text-sm text-slate-500">
Status is controlled by agent heartbeat. Status is controlled by agent heartbeat.
</p> </p>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-4"> </div>
<div className="p-8">
<form
onSubmit={handleSubmit}
className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
>
<div>
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
Agent identity
</p>
<div className="mt-4 grid gap-6 md:grid-cols-2">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium text-strong">Agent name</label> <label className="text-sm font-medium text-slate-900">
Agent name
</label>
<Input <Input
value={name} value={name}
onChange={(event) => setName(event.target.value)} onChange={(event) => setName(event.target.value)}
@@ -198,7 +211,9 @@ export default function EditAgentPage() {
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium text-strong">Board</label> <label className="text-sm font-medium text-slate-900">
Board
</label>
<Select <Select
value={boardId} value={boardId}
onValueChange={(value) => setBoardId(value)} onValueChange={(value) => setBoardId(value)}
@@ -216,14 +231,22 @@ export default function EditAgentPage() {
</SelectContent> </SelectContent>
</Select> </Select>
{boards.length === 0 ? ( {boards.length === 0 ? (
<p className="text-xs text-quiet"> <p className="text-xs text-slate-500">
Create a board before assigning agents. Create a board before assigning agents.
</p> </p>
) : null} ) : null}
</div> </div>
</div>
</div>
<div>
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
Heartbeat settings
</p>
<div className="mt-4 grid gap-6 md:grid-cols-2">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Heartbeat interval Interval
</label> </label>
<Input <Input
value={heartbeatEvery} value={heartbeatEvery}
@@ -231,13 +254,13 @@ export default function EditAgentPage() {
placeholder="e.g. 10m" placeholder="e.g. 10m"
disabled={isLoading} disabled={isLoading}
/> />
<p className="text-xs text-quiet"> <p className="text-xs text-slate-500">
Set how often this agent runs HEARTBEAT.md. Set how often this agent runs HEARTBEAT.md.
</p> </p>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Heartbeat target Target
</label> </label>
<Select <Select
value={heartbeatTarget} value={heartbeatTarget}
@@ -248,28 +271,37 @@ export default function EditAgentPage() {
<SelectValue placeholder="Select target" /> <SelectValue placeholder="Select target" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="none">None (no outbound message)</SelectItem> <SelectItem value="none">
None (no outbound message)
</SelectItem>
<SelectItem value="last">Last channel</SelectItem> <SelectItem value="last">Last channel</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div>
</div>
{error ? ( {error ? (
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted"> <div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
{error} {error}
</div> </div>
) : null} ) : null}
<Button type="submit" className="w-full" disabled={isLoading}>
<div className="flex flex-wrap items-center gap-3">
<Button type="submit" disabled={isLoading}>
{isLoading ? "Saving…" : "Save changes"} {isLoading ? "Saving…" : "Save changes"}
</Button> </Button>
</form>
<Button <Button
variant="outline" variant="outline"
className="mt-4" type="button"
onClick={() => router.push(`/agents/${agentId}`)} onClick={() => router.push(`/agents/${agentId}`)}
> >
Back to agent Back to agent
</Button> </Button>
</div> </div>
</form>
</div>
</main>
</SignedIn> </SignedIn>
</DashboardShell> </DashboardShell>
); );

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

@@ -114,34 +114,47 @@ export default function NewAgentPage() {
return ( return (
<DashboardShell> <DashboardShell>
<SignedOut> <SignedOut>
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-2xl surface-panel p-10 text-center lg:col-span-2"> <div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
<p className="text-sm text-muted">Sign in to create an agent.</p> <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 an agent.</p>
<SignInButton <SignInButton
mode="modal" mode="modal"
forceRedirectUrl="/agents/new" forceRedirectUrl="/agents/new"
signUpForceRedirectUrl="/agents/new" signUpForceRedirectUrl="/agents/new"
> >
<Button>Sign in</Button> <Button className="mt-4">Sign in</Button>
</SignInButton> </SignInButton>
</div> </div>
</div>
</SignedOut> </SignedOut>
<SignedIn> <SignedIn>
<DashboardSidebar /> <DashboardSidebar />
<div className="flex h-full flex-col justify-center rounded-2xl surface-panel p-8"> <main className="flex-1 overflow-y-auto bg-slate-50">
<div className="mb-6 space-y-2"> <div className="border-b border-slate-200 bg-white px-8 py-6">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-quiet"> <div>
New agent <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
</p> Create agent
<h1 className="text-2xl font-semibold text-strong">
Register an agent.
</h1> </h1>
<p className="text-sm text-muted"> <p className="mt-1 text-sm text-slate-500">
Agents start in provisioning until they check in. Agents start in provisioning until they check in.
</p> </p>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-4"> </div>
<div className="p-8">
<form
onSubmit={handleSubmit}
className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
>
<div>
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
Agent identity
</p>
<div className="mt-4 grid gap-6 md:grid-cols-2">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium text-strong">Agent name</label> <label className="text-sm font-medium text-slate-900">
Agent name
</label>
<Input <Input
value={name} value={name}
onChange={(event) => setName(event.target.value)} onChange={(event) => setName(event.target.value)}
@@ -150,7 +163,9 @@ export default function NewAgentPage() {
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium text-strong">Board</label> <label className="text-sm font-medium text-slate-900">
Board
</label>
<Select <Select
value={boardId} value={boardId}
onValueChange={(value) => setBoardId(value)} onValueChange={(value) => setBoardId(value)}
@@ -168,14 +183,22 @@ export default function NewAgentPage() {
</SelectContent> </SelectContent>
</Select> </Select>
{boards.length === 0 ? ( {boards.length === 0 ? (
<p className="text-xs text-quiet"> <p className="text-xs text-slate-500">
Create a board before adding agents. Create a board before adding agents.
</p> </p>
) : null} ) : null}
</div> </div>
</div>
</div>
<div>
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
Heartbeat settings
</p>
<div className="mt-4 grid gap-6 md:grid-cols-2">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Heartbeat interval Interval
</label> </label>
<Input <Input
value={heartbeatEvery} value={heartbeatEvery}
@@ -183,13 +206,13 @@ export default function NewAgentPage() {
placeholder="e.g. 10m" placeholder="e.g. 10m"
disabled={isLoading} disabled={isLoading}
/> />
<p className="text-xs text-quiet"> <p className="text-xs text-slate-500">
Set how often this agent runs HEARTBEAT.md (e.g. 10m, 30m, 2h). How often this agent runs HEARTBEAT.md (10m, 30m, 2h).
</p> </p>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Heartbeat target Target
</label> </label>
<Select <Select
value={heartbeatTarget} value={heartbeatTarget}
@@ -200,28 +223,37 @@ export default function NewAgentPage() {
<SelectValue placeholder="Select target" /> <SelectValue placeholder="Select target" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="none">None (no outbound message)</SelectItem> <SelectItem value="none">
None (no outbound message)
</SelectItem>
<SelectItem value="last">Last channel</SelectItem> <SelectItem value="last">Last channel</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div>
</div>
{error ? ( {error ? (
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted"> <div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
{error} {error}
</div> </div>
) : null} ) : null}
<Button type="submit" className="w-full" disabled={isLoading}>
<div className="flex flex-wrap items-center gap-3">
<Button type="submit" disabled={isLoading}>
{isLoading ? "Creating…" : "Create agent"} {isLoading ? "Creating…" : "Create agent"}
</Button> </Button>
</form>
<Button <Button
variant="outline" variant="outline"
className="mt-4" type="button"
onClick={() => router.push("/agents")} onClick={() => router.push("/agents")}
> >
Back to agents Back to agents
</Button> </Button>
</div> </div>
</form>
</div>
</main>
</SignedIn> </SignedIn>
</DashboardShell> </DashboardShell>
); );

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

@@ -11,9 +11,78 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { getApiBaseUrl } from "@/lib/api-base"; import { getApiBaseUrl } from "@/lib/api-base";
import { CheckCircle2, RefreshCcw, XCircle } from "lucide-react";
const apiBase = getApiBaseUrl(); const apiBase = getApiBaseUrl();
const DEFAULT_IDENTITY_TEMPLATE = `# IDENTITY.md
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 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 Board = { type Board = {
id: string; id: string;
name: string; name: string;
@@ -41,15 +110,69 @@ export default function EditBoardPage() {
const [board, setBoard] = useState<Board | null>(null); const [board, setBoard] = useState<Board | null>(null);
const [name, setName] = useState(""); const [name, setName] = useState("");
const [slug, setSlug] = useState("");
const [gatewayUrl, setGatewayUrl] = useState(""); const [gatewayUrl, setGatewayUrl] = useState("");
const [gatewayToken, setGatewayToken] = useState(""); const [gatewayToken, setGatewayToken] = useState("");
const [gatewayMainSessionKey, setGatewayMainSessionKey] = useState(""); const [gatewayMainSessionKey, setGatewayMainSessionKey] = useState("");
const [gatewayWorkspaceRoot, setGatewayWorkspaceRoot] = useState(""); const [gatewayWorkspaceRoot, setGatewayWorkspaceRoot] = useState("");
const [identityTemplate, setIdentityTemplate] = useState(""); const [identityTemplate, setIdentityTemplate] = useState(
const [soulTemplate, setSoulTemplate] = useState(""); DEFAULT_IDENTITY_TEMPLATE
);
const [soulTemplate, setSoulTemplate] = useState(DEFAULT_SOUL_TEMPLATE);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [gatewayUrlError, setGatewayUrlError] = useState<string | null>(null);
const [gatewayCheckStatus, setGatewayCheckStatus] = useState<
"idle" | "checking" | "success" | "error"
>("idle");
const [gatewayCheckMessage, setGatewayCheckMessage] = useState<string | null>(
null
);
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 (gatewayMainSessionKey.trim()) {
params.set("gateway_main_session_key", gatewayMainSessionKey.trim());
}
const response = await fetch(
`${apiBase}/api/v1/gateway/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 loadBoard = async () => { const loadBoard = async () => {
if (!isSignedIn || !boardId) return; if (!isSignedIn || !boardId) return;
@@ -66,12 +189,11 @@ export default function EditBoardPage() {
const data = (await response.json()) as Board; const data = (await response.json()) as Board;
setBoard(data); setBoard(data);
setName(data.name); setName(data.name);
setSlug(data.slug);
setGatewayUrl(data.gateway_url ?? ""); setGatewayUrl(data.gateway_url ?? "");
setGatewayMainSessionKey(data.gateway_main_session_key ?? ""); setGatewayMainSessionKey(data.gateway_main_session_key ?? "agent:main:main");
setGatewayWorkspaceRoot(data.gateway_workspace_root ?? ""); setGatewayWorkspaceRoot(data.gateway_workspace_root ?? "~/.openclaw");
setIdentityTemplate(data.identity_template ?? ""); setIdentityTemplate(data.identity_template ?? DEFAULT_IDENTITY_TEMPLATE);
setSoulTemplate(data.soul_template ?? ""); setSoulTemplate(data.soul_template ?? DEFAULT_SOUL_TEMPLATE);
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : "Something went wrong."); setError(err instanceof Error ? err.message : "Something went wrong.");
} finally { } finally {
@@ -92,13 +214,20 @@ export default function EditBoardPage() {
setError("Board name is required."); setError("Board name is required.");
return; return;
} }
const gatewayValidation = validateGatewayUrl(gatewayUrl);
setGatewayUrlError(gatewayValidation);
if (gatewayValidation) {
setGatewayCheckStatus("error");
setGatewayCheckMessage(gatewayValidation);
return;
}
setIsLoading(true); setIsLoading(true);
setError(null); setError(null);
try { try {
const token = await getToken(); const token = await getToken();
const payload: Partial<Board> & { gateway_token?: string | null } = { const payload: Partial<Board> & { gateway_token?: string | null } = {
name: trimmed, name: trimmed,
slug: slug.trim() || slugify(trimmed), slug: board?.slug ?? slugify(trimmed),
gateway_url: gatewayUrl.trim() || null, gateway_url: gatewayUrl.trim() || null,
gateway_main_session_key: gatewayMainSessionKey.trim() || null, gateway_main_session_key: gatewayMainSessionKey.trim() || null,
gateway_workspace_root: gatewayWorkspaceRoot.trim() || null, gateway_workspace_root: gatewayWorkspaceRoot.trim() || null,
@@ -130,133 +259,209 @@ export default function EditBoardPage() {
return ( return (
<DashboardShell> <DashboardShell>
<SignedOut> <SignedOut>
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-2xl surface-panel p-10 text-center lg:col-span-2"> <div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
<p className="text-sm text-muted">Sign in to edit boards.</p> <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 boards.</p>
<SignInButton <SignInButton
mode="modal" mode="modal"
forceRedirectUrl={`/boards/${boardId}/edit`} forceRedirectUrl={`/boards/${boardId}/edit`}
signUpForceRedirectUrl={`/boards/${boardId}/edit`} signUpForceRedirectUrl={`/boards/${boardId}/edit`}
> >
<Button>Sign in</Button> <Button className="mt-4">Sign in</Button>
</SignInButton> </SignInButton>
</div> </div>
</div>
</SignedOut> </SignedOut>
<SignedIn> <SignedIn>
<DashboardSidebar /> <DashboardSidebar />
<div className="flex h-full flex-col justify-center rounded-2xl surface-panel p-8"> <main className="flex-1 overflow-y-auto bg-slate-50">
<div className="mb-6 space-y-2"> <div className="border-b border-slate-200 bg-white px-8 py-6">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-quiet"> <div>
Edit board <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
</p> {board?.name ?? "Edit board"}
<h1 className="text-2xl font-semibold text-strong">
{board?.name ?? "Board"}
</h1> </h1>
<p className="text-sm text-muted"> <p className="mt-1 text-sm text-slate-500">
Update the board identity and gateway connection. Update the board identity and gateway connection.
</p> </p>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-4"> </div>
<div className="space-y-2">
<label className="text-sm font-medium text-strong">Board name</label> <div className="p-8">
<form
onSubmit={handleSubmit}
className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
>
<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 <Input
value={name} value={name}
onChange={(event) => setName(event.target.value)} onChange={(event) => setName(event.target.value)}
placeholder="e.g. Product ops" placeholder="e.g. Product ops"
disabled={isLoading} disabled={isLoading}
className="mt-2"
/> />
</div> </div>
<div className="space-y-2">
<label className="text-sm font-medium text-strong">Slug</label>
<Input
value={slug}
onChange={(event) => setSlug(event.target.value)}
placeholder="product-ops"
disabled={isLoading}
/>
</div> </div>
<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"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Gateway URL Gateway URL <span className="text-red-500">*</span>
</label> </label>
<div className="relative">
<Input <Input
value={gatewayUrl} value={gatewayUrl}
onChange={(event) => setGatewayUrl(event.target.value)} onChange={(event) => setGatewayUrl(event.target.value)}
onBlur={runGatewayCheck}
placeholder="ws://gateway:18789" placeholder="ws://gateway:18789"
disabled={isLoading} 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> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Gateway token Gateway token
</label> </label>
<Input <Input
value={gatewayToken} value={gatewayToken}
onChange={(event) => setGatewayToken(event.target.value)} onChange={(event) => setGatewayToken(event.target.value)}
placeholder="Leave blank to keep current token" onBlur={runGatewayCheck}
placeholder="Bearer token"
disabled={isLoading} disabled={isLoading}
/> />
</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"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Main session key Main session key <span className="text-red-500">*</span>
</label> </label>
<Input <Input
value={gatewayMainSessionKey} value={gatewayMainSessionKey}
onChange={(event) => setGatewayMainSessionKey(event.target.value)} onChange={(event) =>
setGatewayMainSessionKey(event.target.value)
}
placeholder="agent:main:main" placeholder="agent:main:main"
disabled={isLoading} disabled={isLoading}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Workspace root Workspace root <span className="text-red-500">*</span>
</label> </label>
<Input <Input
value={gatewayWorkspaceRoot} value={gatewayWorkspaceRoot}
onChange={(event) => setGatewayWorkspaceRoot(event.target.value)} onChange={(event) =>
setGatewayWorkspaceRoot(event.target.value)
}
placeholder="~/.openclaw" placeholder="~/.openclaw"
disabled={isLoading} disabled={isLoading}
/> />
</div> </div>
</div>
</div>
<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"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Identity template (optional) Identity template
</label> </label>
<Textarea <Textarea
value={identityTemplate} value={identityTemplate}
onChange={(event) => setIdentityTemplate(event.target.value)} onChange={(event) => setIdentityTemplate(event.target.value)}
placeholder="Override IDENTITY.md for agents in this board." placeholder="Override IDENTITY.md for agents in this board."
className="min-h-[140px]" className="min-h-[180px]"
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Soul template (optional) Soul template
</label> </label>
<Textarea <Textarea
value={soulTemplate} value={soulTemplate}
onChange={(event) => setSoulTemplate(event.target.value)} onChange={(event) => setSoulTemplate(event.target.value)}
placeholder="Override SOUL.md for agents in this board." placeholder="Override SOUL.md for agents in this board."
className="min-h-[160px]" className="min-h-[180px]"
/> />
</div> </div>
</div>
</div>
{error ? ( {error ? (
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted"> <div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
{error} {error}
</div> </div>
) : null} ) : null}
<Button type="submit" className="w-full" disabled={isLoading}>
<div className="flex flex-wrap items-center gap-3">
<Button type="submit" disabled={isLoading}>
{isLoading ? "Saving…" : "Save changes"} {isLoading ? "Saving…" : "Save changes"}
</Button> </Button>
</form>
<Button <Button
variant="outline" variant="outline"
className="mt-4" type="button"
onClick={() => router.push(`/boards/${boardId}`)} onClick={() => router.push(`/boards/${boardId}`)}
> >
Back to board Back to board
</Button> </Button>
</div> </div>
</form>
</div>
</main>
</SignedIn> </SignedIn>
</DashboardShell> </DashboardShell>
); );

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

@@ -11,6 +11,58 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { getApiBaseUrl } from "@/lib/api-base"; import { getApiBaseUrl } from "@/lib/api-base";
import { CheckCircle2, RefreshCcw, XCircle } from "lucide-react";
const DEFAULT_IDENTITY_TEMPLATE = `# IDENTITY.md
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._
`;
type Board = { type Board = {
id: string; id: string;
@@ -26,6 +78,23 @@ type Board = {
const apiBase = getApiBaseUrl(); const apiBase = getApiBaseUrl();
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.";
}
};
const slugify = (value: string) => const slugify = (value: string) =>
value value
.toLowerCase() .toLowerCase()
@@ -39,18 +108,79 @@ export default function NewBoardPage() {
const [name, setName] = useState(""); const [name, setName] = useState("");
const [gatewayUrl, setGatewayUrl] = useState(""); const [gatewayUrl, setGatewayUrl] = useState("");
const [gatewayToken, setGatewayToken] = useState(""); const [gatewayToken, setGatewayToken] = useState("");
const [gatewayMainSessionKey, setGatewayMainSessionKey] = useState(""); const [gatewayMainSessionKey, setGatewayMainSessionKey] =
const [gatewayWorkspaceRoot, setGatewayWorkspaceRoot] = useState(""); useState("agent:main:main");
const [identityTemplate, setIdentityTemplate] = useState(""); const [gatewayWorkspaceRoot, setGatewayWorkspaceRoot] =
const [soulTemplate, setSoulTemplate] = useState(""); useState("~/.openclaw");
const [identityTemplate, setIdentityTemplate] = useState(
DEFAULT_IDENTITY_TEMPLATE
);
const [soulTemplate, setSoulTemplate] = useState(DEFAULT_SOUL_TEMPLATE);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [gatewayUrlError, setGatewayUrlError] = useState<string | null>(null);
const [gatewayCheckStatus, setGatewayCheckStatus] = useState<
"idle" | "checking" | "success" | "error"
>("idle");
const [gatewayCheckMessage, setGatewayCheckMessage] = useState<string | null>(
null
);
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());
}
const response = await fetch(
`${apiBase}/api/v1/gateway/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>) => { const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault(); event.preventDefault();
if (!isSignedIn) return; if (!isSignedIn) return;
const trimmed = name.trim(); const trimmed = name.trim();
if (!trimmed) return; if (!trimmed) return;
const gatewayValidation = validateGatewayUrl(gatewayUrl);
setGatewayUrlError(gatewayValidation);
if (gatewayValidation) {
setGatewayCheckStatus("error");
setGatewayCheckMessage(gatewayValidation);
return;
}
setIsLoading(true); setIsLoading(true);
setError(null); setError(null);
try { try {
@@ -96,133 +226,209 @@ export default function NewBoardPage() {
return ( return (
<DashboardShell> <DashboardShell>
<SignedOut> <SignedOut>
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-2xl surface-panel p-10 text-center lg:col-span-2"> <div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
<p className="text-sm text-muted">Sign in to create a board.</p> <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 board.</p>
<SignInButton <SignInButton
mode="modal" mode="modal"
forceRedirectUrl="/boards/new" forceRedirectUrl="/boards/new"
signUpForceRedirectUrl="/boards/new" signUpForceRedirectUrl="/boards/new"
> >
<Button>Sign in</Button> <Button className="mt-4">Sign in</Button>
</SignInButton> </SignInButton>
</div> </div>
</div>
</SignedOut> </SignedOut>
<SignedIn> <SignedIn>
<DashboardSidebar /> <DashboardSidebar />
<div className="flex h-full flex-col justify-center rounded-2xl surface-panel p-8"> <main className="flex-1 overflow-y-auto bg-slate-50">
<div className="mb-6 space-y-2"> <div className="border-b border-slate-200 bg-white px-8 py-6">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-quiet"> <div>
New board <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
</p> Create board
<h1 className="text-2xl font-semibold text-strong">
Spin up a board.
</h1> </h1>
<p className="text-sm text-muted"> <p className="mt-1 text-sm text-slate-500">
Boards are where tasks live and move through your workflow. Configure the workflow space and gateway defaults for this board.
</p> </p>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-4"> </div>
<div className="space-y-2">
<label className="text-sm font-medium text-strong"> <div className="p-8">
Board name <form
onSubmit={handleSubmit}
className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
>
<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> </label>
<Input <Input
value={name} value={name}
onChange={(event) => setName(event.target.value)} onChange={(event) => setName(event.target.value)}
placeholder="e.g. Product ops" placeholder="e.g. Product ops"
disabled={isLoading} disabled={isLoading}
className="mt-2"
/> />
</div> </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"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Gateway URL Gateway URL <span className="text-red-500">*</span>
</label> </label>
<div className="relative">
<Input <Input
value={gatewayUrl} value={gatewayUrl}
onChange={(event) => setGatewayUrl(event.target.value)} onChange={(event) => setGatewayUrl(event.target.value)}
onBlur={runGatewayCheck}
placeholder="ws://gateway:18789" placeholder="ws://gateway:18789"
disabled={isLoading} disabled={isLoading}
className={`pr-12 ${
gatewayUrlError
? "border-red-500 focus-visible:ring-red-500"
: ""
}`}
/> />
<p className="text-xs text-quiet"> <button
Required to provision agents for this board. 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> </p>
) : null}
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Gateway token Gateway token
</label> </label>
<Input <Input
value={gatewayToken} value={gatewayToken}
onChange={(event) => setGatewayToken(event.target.value)} onChange={(event) => setGatewayToken(event.target.value)}
placeholder="Optional bearer token" onBlur={runGatewayCheck}
placeholder="Bearer token"
disabled={isLoading} disabled={isLoading}
/> />
</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"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Main session key Main session key <span className="text-red-500">*</span>
</label> </label>
<Input <Input
value={gatewayMainSessionKey} value={gatewayMainSessionKey}
onChange={(event) => setGatewayMainSessionKey(event.target.value)} onChange={(event) =>
setGatewayMainSessionKey(event.target.value)
}
placeholder="agent:main:main" placeholder="agent:main:main"
disabled={isLoading} disabled={isLoading}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Workspace root Workspace root <span className="text-red-500">*</span>
</label> </label>
<Input <Input
value={gatewayWorkspaceRoot} value={gatewayWorkspaceRoot}
onChange={(event) => setGatewayWorkspaceRoot(event.target.value)} onChange={(event) =>
setGatewayWorkspaceRoot(event.target.value)
}
placeholder="~/.openclaw" placeholder="~/.openclaw"
disabled={isLoading} disabled={isLoading}
/> />
</div> </div>
</div>
</div>
<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"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Identity template (optional) Identity template
</label> </label>
<Textarea <Textarea
value={identityTemplate} value={identityTemplate}
onChange={(event) => setIdentityTemplate(event.target.value)} onChange={(event) => setIdentityTemplate(event.target.value)}
placeholder="Override IDENTITY.md for agents in this board." placeholder="Override IDENTITY.md for agents in this board."
className="min-h-[140px]" className="min-h-[180px]"
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium text-strong"> <label className="text-sm font-medium text-slate-900">
Soul template (optional) Soul template
</label> </label>
<Textarea <Textarea
value={soulTemplate} value={soulTemplate}
onChange={(event) => setSoulTemplate(event.target.value)} onChange={(event) => setSoulTemplate(event.target.value)}
placeholder="Override SOUL.md for agents in this board." placeholder="Override SOUL.md for agents in this board."
className="min-h-[160px]" className="min-h-[180px]"
/> />
</div> </div>
</div>
</div>
{error ? ( {error ? (
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted"> <div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
{error} {error}
</div> </div>
) : null} ) : null}
<Button
type="submit" <div className="flex flex-wrap items-center gap-3">
className="w-full" <Button type="submit" disabled={isLoading}>
disabled={isLoading}
>
{isLoading ? "Creating…" : "Create board"} {isLoading ? "Creating…" : "Create board"}
</Button> </Button>
</form>
<Button <Button
variant="outline" variant="outline"
className="mt-4"
onClick={() => router.push("/boards")} onClick={() => router.push("/boards")}
type="button"
> >
Back to boards Back to boards
</Button> </Button>
</div> </div>
</form>
</div>
</main>
</SignedIn> </SignedIn>
</DashboardShell> </DashboardShell>
); );