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

feat(agents): Replace gateway selection with searchable dropdown and improve UI for board creation

Browse Source
This commit is contained in:
Abhimanyu Saharan
2026-02-05 00:08:18 +05:30
parent 28bc773f72
commit 1889ac997e
3 changed files with 208 additions and 792 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,26 +4,16 @@ 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 {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import SearchableSelect from "@/components/ui/searchable-select";
import { getApiBaseUrl } from "@/lib/api-base";
const apiBase = getApiBaseUrl();
const DEFAULT_MAIN_SESSION_KEY = "agent:main:main";
const DEFAULT_WORKSPACE_ROOT = "~/.openclaw";
type Board = {
id: string;
name: string;
@@ -35,27 +25,8 @@ 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();
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) =>
@@ -76,34 +47,20 @@ export default function EditBoardPage() {
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(
DEFAULT_MAIN_SESSION_KEY
);
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"
>("idle");
const [gatewayCheckMessage, setGatewayCheckMessage] = useState<string | null>(
null
);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const isFormReady = Boolean(name.trim() && gatewayId);
const selectedGateway = useMemo(
() => gateways.find((gateway) => gateway.id === gatewayId) || null,
[gateways, gatewayId]
);
const gatewayOptions = useMemo(
() => gateways.map((gateway) => ({ value: gateway.id, label: gateway.name })),
[gateways]
);
const loadGateways = async (): Promise<Gateway[]> => {
if (!isSignedIn) return [];
@@ -119,25 +76,6 @@ export default function EditBoardPage() {
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 {
@@ -178,76 +116,6 @@ export default function EditBoardPage() {
// 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);
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/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 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);
};
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (!isSignedIn || !boardId) return;
@@ -255,80 +123,15 @@ export default function EditBoardPage() {
setError("Board name is required.");
return;
}
if (!createNewGateway && !gatewayId) {
if (!gatewayId) {
setError("Select a gateway before saving.");
return;
}
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;
} 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",
@@ -339,7 +142,7 @@ export default function EditBoardPage() {
body: JSON.stringify({
name: name.trim(),
slug: slugify(name.trim()),
gateway_id: configId || null,
gateway_id: gatewayId || null,
}),
});
if (!response.ok) {
@@ -405,173 +208,26 @@ export default function EditBoardPage() {
<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>
<SearchableSelect
ariaLabel="Select gateway"
value={gatewayId}
onValueChange={setGatewayId}
options={gatewayOptions}
placeholder="Select gateway"
searchPlaceholder="Search gateways..."
emptyMessage="No gateways found."
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
contentClassName="rounded-xl border border-slate-200 shadow-lg"
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
/>
</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}
{gateways.length === 0 ? (
<div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
<p>No gateways available. Create one in Gateways to continue.</p>
</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={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>
<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 justify-between gap-3 rounded-lg border border-slate-200 px-4 py-3">
<div>
<p className="text-sm font-medium text-slate-900">
Skyll dynamic skills
</p>
<a
href="https://www.skyll.app"
target="_blank"
rel="noreferrer"
className="text-xs font-medium text-blue-600 hover:text-blue-700"
>
skyll.app
</a>
</div>
<button
type="button"
role="switch"
aria-checked={skyllEnabled}
onClick={() => setSkyllEnabled((prev) => !prev)}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition ${
skyllEnabled ? "bg-blue-600" : "bg-slate-200"
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition ${
skyllEnabled ? "translate-x-5" : "translate-x-1"
}`}
/>
</button>
</div>
</div>
</div>
</div>
) : null}
{error ? <p className="text-sm text-red-500">{error}</p> : null}
@@ -584,7 +240,7 @@ export default function EditBoardPage() {
>
Cancel
</Button>
<Button type="submit" disabled={isLoading || !board}>
<Button type="submit" disabled={isLoading || !board || !isFormReady}>
{isLoading ? "Saving…" : "Save changes"}
</Button>
</div>

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

@@ -1,27 +1,18 @@
"use client";
import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
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 {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import SearchableSelect from "@/components/ui/searchable-select";
import { getApiBaseUrl } from "@/lib/api-base";
const DEFAULT_MAIN_SESSION_KEY = "agent:main:main";
const DEFAULT_WORKSPACE_ROOT = "~/.openclaw";
const apiBase = getApiBaseUrl();
type Board = {
@@ -35,27 +26,8 @@ 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();
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) =>
@@ -72,34 +44,20 @@ export default function NewBoardPage() {
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(
DEFAULT_MAIN_SESSION_KEY
);
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"
>("idle");
const [gatewayCheckMessage, setGatewayCheckMessage] = useState<string | null>(
null
);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const isFormReady = Boolean(name.trim() && gatewayId);
const selectedGateway = useMemo(
() => gateways.find((gateway) => gateway.id === gatewayId) || null,
[gateways, gatewayId]
);
const gatewayOptions = useMemo(
() => gateways.map((gateway) => ({ value: gateway.id, label: gateway.name })),
[gateways]
);
const loadGateways = async () => {
if (!isSignedIn) return;
@@ -113,9 +71,7 @@ export default function NewBoardPage() {
}
const data = (await response.json()) as Gateway[];
setGateways(data);
if (data.length === 0) {
setCreateNewGateway(true);
} else if (!createNewGateway && !gatewayId) {
if (!gatewayId && data.length > 0) {
setGatewayId(data[0].id);
}
} catch (err) {
@@ -128,62 +84,6 @@ export default function NewBoardPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [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 (gatewayMainSessionKey.trim()) {
params.set("gateway_main_session_key", gatewayMainSessionKey.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 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;
@@ -192,65 +92,20 @@ export default function NewBoardPage() {
setError("Board name is required.");
return;
}
if (!createNewGateway && !gatewayId) {
if (!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: trimmedName,
slug: slugify(trimmedName),
gateway_id: configId || null,
gateway_id: gatewayId || null,
};
const response = await fetch(`${apiBase}/api/v1/boards`, {
@@ -325,206 +180,37 @@ export default function NewBoardPage() {
<label className="text-sm font-medium text-slate-900">
Gateway <span className="text-red-500">*</span>
</label>
<Select
value={createNewGateway ? "new" : gatewayId}
onValueChange={handleGatewaySelection}
<SearchableSelect
ariaLabel="Select gateway"
value={gatewayId}
onValueChange={setGatewayId}
options={gatewayOptions}
placeholder="Select gateway"
searchPlaceholder="Search gateways..."
emptyMessage="No gateways found."
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
contentClassName="rounded-xl border border-slate-200 shadow-lg"
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
/>
</div>
</div>
</div>
{gateways.length === 0 ? (
<div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
<p>
No gateways available. Create one in{" "}
<Link
href="/gateways"
className="font-medium text-blue-600 hover:text-blue-700"
>
<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
Gateways
</Link>{" "}
to continue.
</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>
<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 justify-between gap-3 rounded-lg border border-slate-200 px-4 py-3">
<div>
<p className="text-sm font-medium text-slate-900">
Skyll dynamic skills
</p>
<a
href="https://www.skyll.app"
target="_blank"
rel="noreferrer"
className="text-xs font-medium text-blue-600 hover:text-blue-700"
>
skyll.app
</a>
</div>
<button
type="button"
role="switch"
aria-checked={skyllEnabled}
onClick={() => setSkyllEnabled((prev) => !prev)}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition ${
skyllEnabled ? "bg-blue-600" : "bg-slate-200"
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition ${
skyllEnabled ? "translate-x-5" : "translate-x-1"
}`}
/>
</button>
</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>
<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>
) : (
<p className="text-sm text-slate-500">
Select a gateway or create a new one.
</p>
)}
</div>
) : null}
{error ? <p className="text-sm text-red-500">{error}</p> : null}
@@ -537,7 +223,7 @@ export default function NewBoardPage() {
>
Cancel
</Button>
<Button type="submit" disabled={isLoading}>
<Button type="submit" disabled={isLoading || !isFormReady}>
{isLoading ? "Creating…" : "Create board"}
</Button>
</div>

210
frontend/src/app/boards/page.tsx
View File

@@ -2,7 +2,6 @@
import { useMemo, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { SignInButton, SignedIn, SignedOut } from "@clerk/nextjs";
import {
@@ -15,7 +14,7 @@ import { useQueryClient } from "@tanstack/react-query";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { Button } from "@/components/ui/button";
import { Button, buttonVariants } from "@/components/ui/button";
import { apiRequest, useAuthedMutation, useAuthedQuery } from "@/lib/api-query";
import {
Dialog,
@@ -30,11 +29,23 @@ type Board = {
id: string;
name: string;
slug: string;
updated_at: string;
};
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 BoardsPage() {
const queryClient = useQueryClient();
const router = useRouter();
const [deleteTarget, setDeleteTarget] = useState<Board | null>(null);
const boardsQuery = useAuthedQuery<Board[]>(["boards"], "/api/v1/boards", {
@@ -89,33 +100,35 @@ export default function BoardsPage() {
accessorKey: "name",
header: "Board",
cell: ({ row }) => (
<div>
<p className="font-medium text-strong">{row.original.name}</p>
</div>
<Link href={`/boards/${row.original.id}`} className="group block">
<p className="text-sm font-medium text-slate-900 group-hover:text-blue-600">
{row.original.name}
</p>
</Link>
),
},
{
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 items-center justify-end gap-2"
onClick={(event) => event.stopPropagation()}
>
<Link
href={`/boards/${row.original.id}`}
className="inline-flex h-8 items-center justify-center rounded-md border border-slate-200 px-3 text-xs font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900"
>
Open
</Link>
<div className="flex items-center justify-end gap-2">
<Link
href={`/boards/${row.original.id}/edit`}
className="inline-flex h-8 items-center justify-center rounded-md border border-slate-200 px-3 text-xs font-medium text-slate-600 transition hover:border-slate-300 hover:text-slate-900"
className={buttonVariants({ variant: "ghost", size: "sm" })}
>
Edit
</Link>
<Button
variant="outline"
variant="ghost"
size="sm"
onClick={() => setDeleteTarget(row.original)}
>
@@ -153,49 +166,41 @@ export default function BoardsPage() {
<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 flex-wrap items-center justify-between gap-4">
<div>
<h2 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
Boards
</h2>
<p className="mt-1 text-sm text-slate-500">
{sortedBoards.length} board
{sortedBoards.length === 1 ? "" : "s"} total.
</p>
<div className="sticky top-0 z-30 border-b border-slate-200 bg-white">
<div className="px-8 py-6">
<div className="flex flex-wrap items-center justify-between gap-4">
<div>
<h1 className="text-2xl font-semibold tracking-tight text-slate-900">
Boards
</h1>
<p className="mt-1 text-sm text-slate-500">
Manage boards and task workflows. {sortedBoards.length} board
{sortedBoards.length === 1 ? "" : "s"} total.
</p>
</div>
{sortedBoards.length > 0 ? (
<Link
href="/boards/new"
className={buttonVariants({ size: "md", variant: "primary" })}
>
Create board
</Link>
) : null}
</div>
{sortedBoards.length > 0 ? (
<Button onClick={() => router.push("/boards/new")}>
New board
</Button>
) : null}
</div>
</div>
<div className="p-8">
{boardsQuery.error && (
<div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
{boardsQuery.error.message}
</div>
)}
{sortedBoards.length === 0 && !boardsQuery.isLoading ? (
<div className="flex flex-1 flex-col items-center justify-center gap-4 rounded-xl border border-dashed border-slate-200 bg-white/70 p-10 text-center text-sm text-slate-500">
<p>No boards yet. Create your first board to get started.</p>
<Button onClick={() => router.push("/boards/new")}>
Create your first board
</Button>
</div>
) : (
<div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
<table className="min-w-full divide-y divide-slate-200 text-sm">
<thead className="bg-slate-50">
<div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
<div className="overflow-x-auto">
<table className="w-full text-left text-sm">
<thead className="sticky top-0 z-10 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-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500"
className="px-6 py-3 text-left font-semibold"
>
{header.isPlaceholder
? null
@@ -208,27 +213,96 @@ export default function BoardsPage() {
</tr>
))}
</thead>
<tbody className="divide-y divide-slate-200 bg-white">
{table.getRowModel().rows.map((row) => (
<tr
key={row.id}
className="cursor-pointer transition hover:bg-slate-50"
onClick={() => router.push(`/boards/${row.original.id}`)}
>
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="px-4 py-3 align-top">
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
))}
<tbody className="divide-y divide-slate-100">
{boardsQuery.isLoading ? (
<tr>
<td colSpan={columns.length} className="px-6 py-8">
<span className="text-sm text-slate-500">Loading…</span>
</td>
</tr>
))}
) : table.getRowModel().rows.length ? (
table.getRowModel().rows.map((row) => (
<tr
key={row.id}
className="transition hover:bg-slate-50"
>
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="px-6 py-4 align-top">
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
))}
</tr>
))
) : (
<tr>
<td colSpan={columns.length} className="px-6 py-16">
<div className="flex flex-col items-center justify-center text-center">
<div className="mb-4 rounded-full bg-slate-50 p-4">
<svg
className="h-16 w-16 text-slate-300"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect
x="3"
y="3"
width="7"
height="7"
/>
<rect
x="14"
y="3"
width="7"
height="7"
/>
<rect
x="14"
y="14"
width="7"
height="7"
/>
<rect
x="3"
y="14"
width="7"
height="7"
/>
</svg>
</div>
<h3 className="mb-2 text-lg font-semibold text-slate-900">
No boards yet
</h3>
<p className="mb-6 max-w-md text-sm text-slate-500">
Create your first board to start routing tasks and
monitoring work across agents.
</p>
<Link
href="/boards/new"
className={buttonVariants({ size: "md", variant: "primary" })}
>
Create your first board
</Link>
</div>
</td>
</tr>
)}
</tbody>
</table>
</div>
)}
</div>
{boardsQuery.error ? (
<p className="mt-4 text-sm text-red-500">
{boardsQuery.error.message}
</p>
) : null}
</div>
</main>
</SignedIn>