feat(web): MS23-P3-003 OpenClaw provider config UI

apps/web/src/app/(authenticated)/settings/agent-providers/page.tsx

@@ -0,0 +1,528 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type ChangeEvent,
+  type ReactElement,
+  type SyntheticEvent,
+} from "react";
+import { Pencil, Trash2 } from "lucide-react";
+import { FleetSettingsNav } from "@/components/settings/FleetSettingsNav";
+import {
+  createAgentProvider,
+  deleteAgentProvider,
+  fetchAgentProviders,
+  updateAgentProvider,
+  type AgentProviderConfig,
+  type CreateAgentProviderRequest,
+  type UpdateAgentProviderRequest,
+} from "@/lib/api/agent-providers";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+
+interface ProviderFormData {
+  name: string;
+  provider: "openclaw";
+  gatewayUrl: string;
+  apiToken: string;
+  isActive: boolean;
+}
+
+const NAME_PATTERN = /^[a-zA-Z0-9-]+$/;
+
+const INITIAL_FORM: ProviderFormData = {
+  name: "",
+  provider: "openclaw",
+  gatewayUrl: "",
+  apiToken: "",
+  isActive: true,
+};
+
+function getErrorMessage(error: unknown, fallback: string): string {
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error.message;
+  }
+
+  return fallback;
+}
+
+function isValidHttpsUrl(value: string): boolean {
+  try {
+    const parsed = new URL(value);
+    return parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+function formatCreatedDate(value: string): string {
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) {
+    return "Unknown";
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  }).format(parsed);
+}
+
+function validateForm(form: ProviderFormData, isEditing: boolean): string | null {
+  const name = form.name.trim();
+  if (name.length === 0) {
+    return "Name is required.";
+  }
+
+  if (!NAME_PATTERN.test(name)) {
+    return "Name must contain only letters, numbers, and hyphens.";
+  }
+
+  const gatewayUrl = form.gatewayUrl.trim();
+  if (gatewayUrl.length === 0) {
+    return "Gateway URL is required.";
+  }
+
+  if (!isValidHttpsUrl(gatewayUrl)) {
+    return "Gateway URL must be a valid https:// URL.";
+  }
+
+  if (!isEditing && form.apiToken.trim().length === 0) {
+    return "API token is required when creating a provider.";
+  }
+
+  return null;
+}
+
+export default function AgentProvidersSettingsPage(): ReactElement {
+  const [providers, setProviders] = useState<AgentProviderConfig[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
+  const [editingProvider, setEditingProvider] = useState<AgentProviderConfig | null>(null);
+  const [form, setForm] = useState<ProviderFormData>(INITIAL_FORM);
+  const [formError, setFormError] = useState<string | null>(null);
+  const [isSaving, setIsSaving] = useState<boolean>(false);
+
+  const [deleteTarget, setDeleteTarget] = useState<AgentProviderConfig | null>(null);
+  const [isDeleting, setIsDeleting] = useState<boolean>(false);
+
+  const loadProviders = useCallback(async (showLoadingState: boolean): Promise<void> => {
+    if (showLoadingState) {
+      setIsLoading(true);
+    } else {
+      setIsRefreshing(true);
+    }
+
+    try {
+      const data = await fetchAgentProviders();
+      setProviders(data);
+      setError(null);
+    } catch (loadError: unknown) {
+      setError(getErrorMessage(loadError, "Failed to load agent providers."));
+    } finally {
+      setIsLoading(false);
+      setIsRefreshing(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadProviders(true);
+  }, [loadProviders]);
+
+  function openCreateDialog(): void {
+    setEditingProvider(null);
+    setForm(INITIAL_FORM);
+    setFormError(null);
+    setIsDialogOpen(true);
+  }
+
+  function openEditDialog(provider: AgentProviderConfig): void {
+    setEditingProvider(provider);
+    setForm({
+      name: provider.name,
+      provider: "openclaw",
+      gatewayUrl: provider.gatewayUrl,
+      apiToken: "",
+      isActive: provider.isActive,
+    });
+    setFormError(null);
+    setIsDialogOpen(true);
+  }
+
+  function closeDialog(): void {
+    if (isSaving) {
+      return;
+    }
+
+    setIsDialogOpen(false);
+    setEditingProvider(null);
+    setForm(INITIAL_FORM);
+    setFormError(null);
+  }
+
+  async function handleSubmit(event: SyntheticEvent): Promise<void> {
+    event.preventDefault();
+    setFormError(null);
+    setSuccessMessage(null);
+
+    const validationError = validateForm(form, editingProvider !== null);
+    if (validationError !== null) {
+      setFormError(validationError);
+      return;
+    }
+
+    const name = form.name.trim();
+    const gatewayUrl = form.gatewayUrl.trim();
+    const apiToken = form.apiToken.trim();
+
+    try {
+      setIsSaving(true);
+
+      if (editingProvider) {
+        const updatePayload: UpdateAgentProviderRequest = {
+          name,
+          provider: form.provider,
+          gatewayUrl,
+          isActive: form.isActive,
+        };
+
+        if (apiToken.length > 0) {
+          updatePayload.credentials = { apiToken };
+        }
+
+        await updateAgentProvider(editingProvider.id, updatePayload);
+        setSuccessMessage(`Updated provider "${name}".`);
+      } else {
+        const createPayload: CreateAgentProviderRequest = {
+          name,
+          provider: form.provider,
+          gatewayUrl,
+          credentials: { apiToken },
+          isActive: form.isActive,
+        };
+
+        await createAgentProvider(createPayload);
+        setSuccessMessage(`Added provider "${name}".`);
+      }
+
+      setIsDialogOpen(false);
+      setEditingProvider(null);
+      setForm(INITIAL_FORM);
+      await loadProviders(false);
+    } catch (saveError: unknown) {
+      setFormError(getErrorMessage(saveError, "Unable to save agent provider."));
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  async function handleDeleteProvider(): Promise<void> {
+    if (!deleteTarget) {
+      return;
+    }
+
+    try {
+      setIsDeleting(true);
+      await deleteAgentProvider(deleteTarget.id);
+      setSuccessMessage(`Deleted provider "${deleteTarget.name}".`);
+      setDeleteTarget(null);
+      await loadProviders(false);
+    } catch (deleteError: unknown) {
+      setError(getErrorMessage(deleteError, "Failed to delete agent provider."));
+    } finally {
+      setIsDeleting(false);
+    }
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto p-6 space-y-6">
+      <div className="space-y-4">
+        <div>
+          <h1 className="text-3xl font-bold">Agent Providers</h1>
+          <p className="text-muted-foreground mt-1">
+            Register OpenClaw gateways and API tokens used for external agent sessions.
+          </p>
+        </div>
+        <FleetSettingsNav />
+      </div>
+
+      <Card>
+        <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <CardTitle>OpenClaw Gateways</CardTitle>
+            <CardDescription>
+              Add one or more OpenClaw gateway endpoints and control which ones are active.
+            </CardDescription>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              onClick={() => {
+                void loadProviders(false);
+              }}
+              disabled={isLoading || isRefreshing}
+            >
+              {isRefreshing ? "Refreshing..." : "Refresh"}
+            </Button>
+            <Button onClick={openCreateDialog}>Add Provider</Button>
+          </div>
+        </CardHeader>
+
+        <CardContent className="space-y-3">
+          {error ? (
+            <p className="text-sm text-destructive" role="alert">
+              {error}
+            </p>
+          ) : null}
+
+          {successMessage ? <p className="text-sm text-emerald-600">{successMessage}</p> : null}
+
+          {isLoading ? (
+            <p className="text-sm text-muted-foreground">Loading agent providers...</p>
+          ) : providers.length === 0 ? (
+            <p className="text-sm text-muted-foreground">
+              No agent providers configured yet. Add one to register an OpenClaw gateway.
+            </p>
+          ) : (
+            providers.map((provider) => (
+              <div
+                key={provider.id}
+                className="rounded-lg border p-4 flex flex-col gap-4 md:flex-row md:items-start md:justify-between"
+              >
+                <div className="space-y-2 min-w-0">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <p className="font-semibold truncate">{provider.name}</p>
+                    <Badge variant={provider.isActive ? "default" : "secondary"}>
+                      {provider.isActive ? "Active" : "Inactive"}
+                    </Badge>
+                    <Badge variant="outline">{provider.provider}</Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground break-all">
+                    Gateway URL: {provider.gatewayUrl}
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                    Created: {formatCreatedDate(provider.createdAt)}
+                  </p>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      openEditDialog(provider);
+                    }}
+                  >
+                    <Pencil className="h-4 w-4 mr-2" />
+                    Edit
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    onClick={() => {
+                      setDeleteTarget(provider);
+                    }}
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Delete
+                  </Button>
+                </div>
+              </div>
+            ))
+          )}
+        </CardContent>
+      </Card>
+
+      <Dialog
+        open={isDialogOpen}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) {
+            closeDialog();
+            return;
+          }
+
+          setIsDialogOpen(true);
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {editingProvider ? "Edit Agent Provider" : "Add Agent Provider"}
+            </DialogTitle>
+            <DialogDescription>
+              Configure an OpenClaw gateway URL and API token for agent provider registration.
+            </DialogDescription>
+          </DialogHeader>
+
+          <form onSubmit={(event) => void handleSubmit(event)} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="agent-provider-name">Name</Label>
+              <Input
+                id="agent-provider-name"
+                value={form.name}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                  setForm((previous) => ({ ...previous, name: event.target.value }));
+                }}
+                placeholder="openclaw-primary"
+                maxLength={100}
+                disabled={isSaving}
+                required
+              />
+              <p className="text-xs text-muted-foreground">
+                Use letters, numbers, and hyphens only.
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="agent-provider-type">Provider Type</Label>
+              <Select
+                value={form.provider}
+                onValueChange={(value) => {
+                  if (value === "openclaw") {
+                    setForm((previous) => ({ ...previous, provider: value }));
+                  }
+                }}
+                disabled={isSaving}
+              >
+                <SelectTrigger id="agent-provider-type">
+                  <SelectValue placeholder="Select provider type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="openclaw">openclaw</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="agent-provider-gateway-url">Gateway URL</Label>
+              <Input
+                id="agent-provider-gateway-url"
+                value={form.gatewayUrl}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                  setForm((previous) => ({ ...previous, gatewayUrl: event.target.value }));
+                }}
+                placeholder="https://my-openclaw.example.com"
+                disabled={isSaving}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="agent-provider-api-token">API Token</Label>
+              <Input
+                id="agent-provider-api-token"
+                type="password"
+                value={form.apiToken}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                  setForm((previous) => ({ ...previous, apiToken: event.target.value }));
+                }}
+                placeholder={
+                  editingProvider ? "Leave blank to keep existing token" : "Enter API token"
+                }
+                autoComplete="new-password"
+                disabled={isSaving}
+              />
+              <p className="text-xs text-muted-foreground">
+                {editingProvider
+                  ? "Leave blank to keep the currently stored token."
+                  : "Required when creating a provider."}
+              </p>
+            </div>
+
+            <div className="flex items-center justify-between rounded-md border px-3 py-2">
+              <div>
+                <Label htmlFor="agent-provider-active">Provider Status</Label>
+                <p className="text-xs text-muted-foreground">
+                  Inactive providers remain saved but are excluded from routing.
+                </p>
+              </div>
+              <Switch
+                id="agent-provider-active"
+                checked={form.isActive}
+                onCheckedChange={(checked) => {
+                  setForm((previous) => ({ ...previous, isActive: checked }));
+                }}
+                disabled={isSaving}
+              />
+            </div>
+
+            {formError ? (
+              <p className="text-sm text-destructive" role="alert">
+                {formError}
+              </p>
+            ) : null}
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={closeDialog} disabled={isSaving}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSaving}>
+                {isSaving ? "Saving..." : editingProvider ? "Save Changes" : "Create Provider"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open && !isDeleting) {
+            setDeleteTarget(null);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Agent Provider</AlertDialogTitle>
+            <AlertDialogDescription>
+              Delete provider "{deleteTarget?.name}"? This permanently removes its gateway and token
+              configuration.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDeleteProvider} disabled={isDeleting}>
+              {isDeleting ? "Deleting..." : "Delete Provider"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

apps/web/src/app/(authenticated)/settings/page.tsx

@@ -227,6 +227,33 @@ const categories: CategoryConfig[] = [
       </svg>
     ),
   },
+  {
+    title: "Agent Providers",
+    description:
+      "Register OpenClaw gateway URLs and API tokens for external agent provider routing.",
+    href: "/settings/agent-providers",
+    accent: "var(--ms-blue-400)",
+    iconBg: "rgba(47, 128, 255, 0.12)",
+    icon: (
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M4 6.5h12" />
+        <path d="M6.5 10h7" />
+        <path d="M4 13.5h12" />
+        <circle cx="5.5" cy="10" r="1.5" />
+        <circle cx="14.5" cy="10" r="1.5" />
+      </svg>
+    ),
+  },
   {
     title: "Agent Config",
     description: "Choose primary and fallback models, plus optional personality/SOUL instructions.",

apps/web/src/components/settings/FleetSettingsNav.tsx

@@ -11,6 +11,7 @@ interface FleetSettingsLink {
 
 const FLEET_SETTINGS_LINKS: FleetSettingsLink[] = [
   { href: "/settings/providers", label: "Providers" },
+  { href: "/settings/agent-providers", label: "Agent Providers" },
   { href: "/settings/agent-config", label: "Agent Config" },
   { href: "/settings/auth", label: "Authentication" },
 ];

apps/web/src/lib/api/agent-providers.test.ts

@@ -0,0 +1,79 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import * as client from "./client";
+import {
+  createAgentProvider,
+  deleteAgentProvider,
+  fetchAgentProviders,
+  updateAgentProvider,
+} from "./agent-providers";
+
+vi.mock("./client");
+
+beforeEach((): void => {
+  vi.clearAllMocks();
+});
+
+describe("fetchAgentProviders", (): void => {
+  it("calls provider list endpoint", async (): Promise<void> => {
+    vi.mocked(client.apiGet).mockResolvedValueOnce([] as never);
+
+    await fetchAgentProviders();
+
+    expect(client.apiGet).toHaveBeenCalledWith("/api/agent-providers");
+  });
+});
+
+describe("createAgentProvider", (): void => {
+  it("posts create payload", async (): Promise<void> => {
+    vi.mocked(client.apiPost).mockResolvedValueOnce({ id: "provider-1" } as never);
+
+    await createAgentProvider({
+      name: "openclaw-primary",
+      provider: "openclaw",
+      gatewayUrl: "https://openclaw.example.com",
+      credentials: {
+        apiToken: "top-secret",
+      },
+      isActive: true,
+    });
+
+    expect(client.apiPost).toHaveBeenCalledWith("/api/agent-providers", {
+      name: "openclaw-primary",
+      provider: "openclaw",
+      gatewayUrl: "https://openclaw.example.com",
+      credentials: {
+        apiToken: "top-secret",
+      },
+      isActive: true,
+    });
+  });
+});
+
+describe("updateAgentProvider", (): void => {
+  it("sends PUT request with update payload", async (): Promise<void> => {
+    vi.mocked(client.apiRequest).mockResolvedValueOnce({ id: "provider-1" } as never);
+
+    await updateAgentProvider("provider-1", {
+      gatewayUrl: "https://new-openclaw.example.com",
+      isActive: false,
+    });
+
+    expect(client.apiRequest).toHaveBeenCalledWith("/api/agent-providers/provider-1", {
+      method: "PUT",
+      body: JSON.stringify({
+        gatewayUrl: "https://new-openclaw.example.com",
+        isActive: false,
+      }),
+    });
+  });
+});
+
+describe("deleteAgentProvider", (): void => {
+  it("calls delete endpoint", async (): Promise<void> => {
+    vi.mocked(client.apiDelete).mockResolvedValueOnce(undefined as never);
+
+    await deleteAgentProvider("provider-1");
+
+    expect(client.apiDelete).toHaveBeenCalledWith("/api/agent-providers/provider-1");
+  });
+});

apps/web/src/lib/api/agent-providers.ts

@@ -0,0 +1,61 @@
+import { apiDelete, apiGet, apiPost, apiRequest } from "./client";
+
+export type AgentProviderType = "openclaw";
+
+export interface AgentProviderCredentials {
+  apiToken?: string;
+}
+
+export interface AgentProviderConfig {
+  id: string;
+  workspaceId: string;
+  name: string;
+  provider: AgentProviderType;
+  gatewayUrl: string;
+  credentials: AgentProviderCredentials | null;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateAgentProviderRequest {
+  name: string;
+  provider: AgentProviderType;
+  gatewayUrl: string;
+  credentials: {
+    apiToken: string;
+  };
+  isActive: boolean;
+}
+
+export interface UpdateAgentProviderRequest {
+  name?: string;
+  provider?: AgentProviderType;
+  gatewayUrl?: string;
+  credentials?: AgentProviderCredentials;
+  isActive?: boolean;
+}
+
+export async function fetchAgentProviders(): Promise<AgentProviderConfig[]> {
+  return apiGet<AgentProviderConfig[]>("/api/agent-providers");
+}
+
+export async function createAgentProvider(
+  data: CreateAgentProviderRequest
+): Promise<AgentProviderConfig> {
+  return apiPost<AgentProviderConfig>("/api/agent-providers", data);
+}
+
+export async function updateAgentProvider(
+  providerId: string,
+  data: UpdateAgentProviderRequest
+): Promise<AgentProviderConfig> {
+  return apiRequest<AgentProviderConfig>(`/api/agent-providers/${providerId}`, {
+    method: "PUT",
+    body: JSON.stringify(data),
+  });
+}
+
+export async function deleteAgentProvider(providerId: string): Promise<void> {
+  await apiDelete<unknown>(`/api/agent-providers/${providerId}`);
+}

apps/web/src/lib/api/index.ts

@@ -18,4 +18,5 @@ export * from "./projects";
 export * from "./workspaces";
 export * from "./admin";
 export * from "./fleet-settings";
+export * from "./agent-providers";
 export * from "./activity";