@nastechai/agent 0.16.0 → 0.17.0

package/src/pages/McpPage.tsx

@@ -0,0 +1,757 @@
+import { useCallback, useEffect, useLayoutEffect, useState } from "react";
+import { Package, Power, Server, Trash2, X, Zap } from "lucide-react";
+import { Badge } from "@nastechai/ui/ui/components/badge";
+import { Button } from "@nastechai/ui/ui/components/button";
+import { Select, SelectOption } from "@nastechai/ui/ui/components/select";
+import { Spinner } from "@nastechai/ui/ui/components/spinner";
+import { H2 } from "@nastechai/ui/ui/components/typography/h2";
+import { api } from "@/lib/api";
+import type {
+  McpCatalogDiagnostic,
+  McpCatalogEntry,
+  McpServer,
+  McpServerCreate,
+  McpTestResult,
+} from "@/lib/api";
+import { DeleteConfirmDialog } from "@/components/DeleteConfirmDialog";
+import { useToast } from "@nastechai/ui/hooks/use-toast";
+import { useConfirmDelete } from "@nastechai/ui/hooks/use-confirm-delete";
+import { useModalBehavior } from "@/hooks/useModalBehavior";
+import { Toast } from "@nastechai/ui/ui/components/toast";
+import { Card, CardContent } from "@nastechai/ui/ui/components/card";
+import { Input } from "@nastechai/ui/ui/components/input";
+import { Label } from "@nastechai/ui/ui/components/label";
+import { usePageHeader } from "@/contexts/usePageHeader";
+import { cn, themedBody } from "@/lib/utils";
+
+type Transport = "http" | "stdio";
+
+function truncateText(value: string, maxLength: number): string {
+  return value.length > maxLength ? value.slice(0, maxLength) + "..." : value;
+}
+
+function parseArgs(raw: string): string[] {
+  return raw
+    .split(/[\s,]+/)
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+function parseEnv(raw: string): Record<string, string> {
+  const env: Record<string, string> = {};
+  raw
+    .split("\n")
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .forEach((line) => {
+      const idx = line.indexOf("=");
+      if (idx === -1) return;
+      const key = line.slice(0, idx).trim();
+      const value = line.slice(idx + 1).trim();
+      if (key) env[key] = value;
+    });
+  return env;
+}
+
+const TRANSPORT_TONE: Record<string, "success" | "warning" | "secondary"> = {
+  http: "success",
+  stdio: "warning",
+  unknown: "secondary",
+};
+
+export default function McpPage() {
+  const [servers, setServers] = useState<McpServer[]>([]);
+  const [catalog, setCatalog] = useState<McpCatalogEntry[]>([]);
+  const [diagnostics, setDiagnostics] = useState<McpCatalogDiagnostic[]>([]);
+  const [loading, setLoading] = useState(true);
+  const { toast, showToast } = useToast();
+  const { setEnd } = usePageHeader();
+
+  // Add server modal state
+  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [transport, setTransport] = useState<Transport>("http");
+  const [url, setUrl] = useState("");
+  const [command, setCommand] = useState("");
+  const [args, setArgs] = useState("");
+  const [env, setEnv] = useState("");
+  const [creating, setCreating] = useState(false);
+  const closeCreateModal = useCallback(() => setCreateModalOpen(false), []);
+  const createModalRef = useModalBehavior({
+    open: createModalOpen,
+    onClose: closeCreateModal,
+  });
+
+  // Test results keyed by server name
+  const [testing, setTesting] = useState<string | null>(null);
+  const [testResults, setTestResults] = useState<
+    Record<string, McpTestResult>
+  >({});
+
+  // Enable/disable state
+  const [togglingName, setTogglingName] = useState<string | null>(null);
+  const [restartNote, setRestartNote] = useState<string | null>(null);
+
+  // Catalog install modal state
+  const [installEntry, setInstallEntry] = useState<McpCatalogEntry | null>(
+    null,
+  );
+  const [installEnv, setInstallEnv] = useState<Record<string, string>>({});
+  const [installingName, setInstallingName] = useState<string | null>(null);
+  const closeInstallModal = useCallback(() => setInstallEntry(null), []);
+  const installModalRef = useModalBehavior({
+    open: installEntry !== null,
+    onClose: closeInstallModal,
+  });
+
+  const loadServers = useCallback(() => {
+    return api
+      .getMcpServers()
+      .then((res) => setServers(res.servers))
+      .catch((e) => showToast(`Error: ${e}`, "error"));
+  }, [showToast]);
+
+  const loadCatalog = useCallback(() => {
+    return api
+      .getMcpCatalog()
+      .then((res) => {
+        setCatalog(res.entries);
+        setDiagnostics(res.diagnostics);
+      })
+      .catch((e) => showToast(`Error: ${e}`, "error"));
+  }, [showToast]);
+
+  useEffect(() => {
+    Promise.all([loadServers(), loadCatalog()]).finally(() =>
+      setLoading(false),
+    );
+  }, [loadServers, loadCatalog]);
+
+  const handleCreate = async () => {
+    if (!name.trim()) {
+      showToast("Name required", "error");
+      return;
+    }
+    if (transport === "http" && !url.trim()) {
+      showToast("URL required", "error");
+      return;
+    }
+    if (transport === "stdio" && !command.trim()) {
+      showToast("Command required", "error");
+      return;
+    }
+    setCreating(true);
+    try {
+      const body: McpServerCreate = { name: name.trim() };
+      if (transport === "http") {
+        body.url = url.trim();
+      } else {
+        body.command = command.trim();
+        const argList = parseArgs(args);
+        if (argList.length) body.args = argList;
+      }
+      const envMap = parseEnv(env);
+      if (Object.keys(envMap).length) body.env = envMap;
+
+      await api.addMcpServer(body);
+      showToast("Add ✓", "success");
+      setName("");
+      setUrl("");
+      setCommand("");
+      setArgs("");
+      setEnv("");
+      setTransport("http");
+      setCreateModalOpen(false);
+      loadServers();
+    } catch (e) {
+      showToast(`Failed to add: ${e}`, "error");
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleTest = async (server: McpServer) => {
+    setTesting(server.name);
+    try {
+      const result = await api.testMcpServer(server.name);
+      setTestResults((prev) => ({ ...prev, [server.name]: result }));
+      if (result.ok) {
+        showToast(`${server.name}: ${result.tools.length} tool(s)`, "success");
+      } else {
+        showToast(`${server.name}: ${result.error ?? "Failed"}`, "error");
+      }
+    } catch (e) {
+      showToast(`Error: ${e}`, "error");
+    } finally {
+      setTesting(null);
+    }
+  };
+
+  const handleToggleEnabled = async (server: McpServer) => {
+    const next = !server.enabled;
+    setTogglingName(server.name);
+    try {
+      await api.setMcpServerEnabled(server.name, next);
+      setServers((prev) =>
+        prev.map((s) =>
+          s.name === server.name ? { ...s, enabled: next } : s,
+        ),
+      );
+      setRestartNote(
+        "Enable/disable takes effect on the next gateway restart.",
+      );
+    } catch (e) {
+      showToast(`Error: ${e}`, "error");
+    } finally {
+      setTogglingName(null);
+    }
+  };
+
+  const serverDelete = useConfirmDelete({
+    onDelete: useCallback(
+      async (serverName: string) => {
+        try {
+          await api.removeMcpServer(serverName);
+          showToast(`Delete: "${truncateText(serverName, 30)}"`, "success");
+          setTestResults((prev) => {
+            const next = { ...prev };
+            delete next[serverName];
+            return next;
+          });
+          loadServers();
+        } catch (e) {
+          showToast(`Error: ${e}`, "error");
+          throw e;
+        }
+      },
+      [loadServers, showToast],
+    ),
+  });
+
+  // ── Catalog install ──────────────────────────────────────────────────
+  const runInstall = useCallback(
+    async (entry: McpCatalogEntry, envMap: Record<string, string>) => {
+      setInstallingName(entry.name);
+      try {
+        const res = await api.installMcpCatalogEntry(entry.name, envMap, true);
+        if (res.background) {
+          showToast("Installing in background…", "success");
+        } else {
+          showToast(`Installed: "${truncateText(entry.name, 30)}"`, "success");
+        }
+        setInstallEntry(null);
+        setInstallEnv({});
+        await Promise.all([loadServers(), loadCatalog()]);
+      } catch (e) {
+        showToast(`Failed to install: ${e}`, "error");
+      } finally {
+        setInstallingName(null);
+      }
+    },
+    [loadServers, loadCatalog, showToast],
+  );
+
+  const handleInstallClick = (entry: McpCatalogEntry) => {
+    if (entry.required_env.length > 0) {
+      const initial: Record<string, string> = {};
+      entry.required_env.forEach((item) => {
+        initial[item.name] = "";
+      });
+      setInstallEnv(initial);
+      setInstallEntry(entry);
+    } else {
+      void runInstall(entry, {});
+    }
+  };
+
+  const handleInstallSubmit = () => {
+    if (!installEntry) return;
+    const missing = installEntry.required_env.filter(
+      (item) => item.required && !(installEnv[item.name] ?? "").trim(),
+    );
+    if (missing.length > 0) {
+      showToast(`${missing[0].prompt} required`, "error");
+      return;
+    }
+    const envMap: Record<string, string> = {};
+    Object.entries(installEnv).forEach(([k, v]) => {
+      if (v.trim()) envMap[k] = v.trim();
+    });
+    void runInstall(installEntry, envMap);
+  };
+
+  // Put "Add Server" button in page header
+  useLayoutEffect(() => {
+    setEnd(
+      <Button
+        className="uppercase"
+        size="sm"
+        onClick={() => setCreateModalOpen(true)}
+      >
+        Add Server
+      </Button>,
+    );
+    return () => {
+      setEnd(null);
+    };
+  }, [setEnd, loading]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-24">
+        <Spinner className="text-2xl text-primary" />
+      </div>
+    );
+  }
+
+  const diagnosticsByName: Record<string, McpCatalogDiagnostic[]> = {};
+  diagnostics.forEach((d) => {
+    (diagnosticsByName[d.name] ??= []).push(d);
+  });
+
+  return (
+    <div className="flex flex-col gap-6">
+      <Toast toast={toast} />
+
+      <DeleteConfirmDialog
+        open={serverDelete.isOpen}
+        onCancel={serverDelete.cancel}
+        onConfirm={serverDelete.confirm}
+        title="Remove MCP server"
+        description={
+          serverDelete.pendingId
+            ? `"${truncateText(serverDelete.pendingId, 40)}" — this will remove the server.`
+            : "This will remove the server."
+        }
+        loading={serverDelete.isDeleting}
+      />
+
+      {/* Add server modal */}
+      {createModalOpen && (
+        <div
+          ref={createModalRef}
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-background/85 backdrop-blur-sm p-4"
+          onClick={(e) =>
+            e.target === e.currentTarget && setCreateModalOpen(false)
+          }
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="create-mcp-title"
+        >
+          <div
+            className={cn(
+              themedBody,
+              "relative w-full max-w-lg border border-border bg-card shadow-2xl flex flex-col",
+            )}
+          >
+            <Button
+              ghost
+              size="icon"
+              onClick={() => setCreateModalOpen(false)}
+              className="absolute right-2 top-2 text-muted-foreground hover:text-foreground"
+              aria-label="Close"
+            >
+              <X />
+            </Button>
+
+            <header className="p-5 pb-3 border-b border-border">
+              <h2
+                id="create-mcp-title"
+                className="font-mondwest text-display text-base tracking-wider"
+              >
+                Add MCP server
+              </h2>
+            </header>
+
+            <div className="p-5 grid gap-4">
+              <div className="grid gap-2">
+                <Label htmlFor="mcp-name">Name</Label>
+                <Input
+                  id="mcp-name"
+                  autoFocus
+                  placeholder="my-server"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                />
+              </div>
+
+              <div className="grid gap-2">
+                <Label htmlFor="mcp-transport">Transport</Label>
+                <Select
+                  id="mcp-transport"
+                  value={transport}
+                  onValueChange={(v) => setTransport(v as Transport)}
+                >
+                  <SelectOption value="http">HTTP/SSE</SelectOption>
+                  <SelectOption value="stdio">stdio</SelectOption>
+                </Select>
+              </div>
+
+              {transport === "http" ? (
+                <div className="grid gap-2">
+                  <Label htmlFor="mcp-url">URL</Label>
+                  <Input
+                    id="mcp-url"
+                    placeholder="https://example.com/mcp"
+                    value={url}
+                    onChange={(e) => setUrl(e.target.value)}
+                  />
+                </div>
+              ) : (
+                <>
+                  <div className="grid gap-2">
+                    <Label htmlFor="mcp-command">Command</Label>
+                    <Input
+                      id="mcp-command"
+                      placeholder="npx"
+                      value={command}
+                      onChange={(e) => setCommand(e.target.value)}
+                    />
+                  </div>
+                  <div className="grid gap-2">
+                    <Label htmlFor="mcp-args">Args</Label>
+                    <Input
+                      id="mcp-args"
+                      placeholder="-y @modelcontextprotocol/server-foo"
+                      value={args}
+                      onChange={(e) => setArgs(e.target.value)}
+                    />
+                  </div>
+                </>
+              )}
+
+              <div className="grid gap-2">
+                <Label htmlFor="mcp-env">Environment (KEY=VALUE per line)</Label>
+                <textarea
+                  id="mcp-env"
+                  className="flex min-h-[80px] w-full border border-border bg-background/40 px-3 py-2 text-sm font-courier shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/30 focus-visible:border-foreground/25"
+                  placeholder={"API_KEY=secret\nDEBUG=1"}
+                  value={env}
+                  onChange={(e) => setEnv(e.target.value)}
+                />
+              </div>
+
+              <div className="flex justify-end">
+                <Button
+                  className="uppercase"
+                  size="sm"
+                  onClick={handleCreate}
+                  disabled={creating}
+                  prefix={creating ? <Spinner /> : undefined}
+                >
+                  {creating ? "Adding..." : "Add"}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Catalog install modal (required env vars) */}
+      {installEntry && (
+        <div
+          ref={installModalRef}
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-background/85 backdrop-blur-sm p-4"
+          onClick={(e) =>
+            e.target === e.currentTarget && setInstallEntry(null)
+          }
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="install-mcp-title"
+        >
+          <div
+            className={cn(
+              themedBody,
+              "relative w-full max-w-lg border border-border bg-card shadow-2xl flex flex-col",
+            )}
+          >
+            <Button
+              ghost
+              size="icon"
+              onClick={() => setInstallEntry(null)}
+              className="absolute right-2 top-2 text-muted-foreground hover:text-foreground"
+              aria-label="Close"
+            >
+              <X />
+            </Button>
+
+            <header className="p-5 pb-3 border-b border-border">
+              <h2
+                id="install-mcp-title"
+                className="font-mondwest text-display text-base tracking-wider"
+              >
+                Install {installEntry.name}
+              </h2>
+            </header>
+
+            <div className="p-5 grid gap-4">
+              <p className="text-xs text-muted-foreground">
+                This MCP requires the following values to be configured.
+              </p>
+              {installEntry.required_env.map((item) => (
+                <div className="grid gap-2" key={item.name}>
+                  <Label htmlFor={`install-env-${item.name}`}>
+                    {item.prompt}
+                    {item.required ? " *" : ""}
+                  </Label>
+                  <Input
+                    id={`install-env-${item.name}`}
+                    type="password"
+                    placeholder={item.name}
+                    value={installEnv[item.name] ?? ""}
+                    onChange={(e) =>
+                      setInstallEnv((prev) => ({
+                        ...prev,
+                        [item.name]: e.target.value,
+                      }))
+                    }
+                  />
+                </div>
+              ))}
+
+              <div className="flex justify-end">
+                <Button
+                  className="uppercase"
+                  size="sm"
+                  onClick={handleInstallSubmit}
+                  disabled={installingName === installEntry.name}
+                  prefix={
+                    installingName === installEntry.name ? (
+                      <Spinner />
+                    ) : undefined
+                  }
+                >
+                  {installingName === installEntry.name
+                    ? "Installing..."
+                    : "Install"}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── Your MCP servers ── */}
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+          <H2
+            variant="sm"
+            className="flex items-center gap-2 text-muted-foreground"
+          >
+            <Server className="h-4 w-4" />
+            Your MCP servers ({servers.length})
+          </H2>
+        </div>
+
+        {restartNote && (
+          <p className="text-xs text-warning">{restartNote}</p>
+        )}
+
+        {servers.length === 0 && (
+          <Card>
+            <CardContent className="py-8 text-center text-sm text-muted-foreground">
+              No MCP servers configured.
+            </CardContent>
+          </Card>
+        )}
+
+        {servers.map((server) => {
+          const envCount = Object.keys(server.env ?? {}).length;
+          const result = testResults[server.name];
+
+          return (
+            <Card key={server.name}>
+              <CardContent
+                className={cn(
+                  "flex items-start gap-4 py-4",
+                  !server.enabled && "opacity-60",
+                )}
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="font-medium text-sm truncate">
+                      {server.name}
+                    </span>
+                    <Badge
+                      tone={TRANSPORT_TONE[server.transport] ?? "secondary"}
+                    >
+                      {server.transport}
+                    </Badge>
+                    {!server.enabled && (
+                      <Badge tone="outline">disabled</Badge>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                    {server.transport === "http" ? (
+                      <span className="font-mono truncate">
+                        {server.url ?? "—"}
+                      </span>
+                    ) : (
+                      <span className="font-mono truncate">
+                        {[server.command, ...(server.args ?? [])]
+                          .filter(Boolean)
+                          .join(" ") || "—"}
+                      </span>
+                    )}
+                    {envCount > 0 && (
+                      <span>
+                        {envCount} env var{envCount === 1 ? "" : "s"}
+                      </span>
+                    )}
+                  </div>
+                  {result && (
+                    <div className="mt-2 text-xs">
+                      {result.ok ? (
+                        <p className="text-success">
+                          {result.tools.length === 0
+                            ? "Connected — no tools"
+                            : `Tools: ${result.tools
+                                .map((tool) => tool.name)
+                                .join(", ")}`}
+                        </p>
+                      ) : (
+                        <p className="text-destructive">
+                          {result.error ?? "Connection failed"}
+                        </p>
+                      )}
+                    </div>
+                  )}
+                </div>
+
+                <div className="flex items-center gap-1 shrink-0">
+                  <Button
+                    ghost
+                    size="sm"
+                    title={server.enabled ? "Disable" : "Enable"}
+                    aria-label={server.enabled ? "Disable" : "Enable"}
+                    onClick={() => handleToggleEnabled(server)}
+                    disabled={togglingName === server.name}
+                    prefix={
+                      togglingName === server.name ? (
+                        <Spinner />
+                      ) : (
+                        <Power />
+                      )
+                    }
+                    className={server.enabled ? "text-success" : undefined}
+                  >
+                    {server.enabled ? "Disable" : "Enable"}
+                  </Button>
+
+                  <Button
+                    ghost
+                    size="icon"
+                    title="Test connection"
+                    aria-label="Test connection"
+                    onClick={() => handleTest(server)}
+                    disabled={testing === server.name}
+                  >
+                    {testing === server.name ? <Spinner /> : <Zap />}
+                  </Button>
+
+                  <Button
+                    ghost
+                    destructive
+                    size="icon"
+                    title="Delete"
+                    aria-label="Delete"
+                    onClick={() => serverDelete.requestDelete(server.name)}
+                  >
+                    <Trash2 />
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      {/* ── Catalog ── */}
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+          <H2
+            variant="sm"
+            className="flex items-center gap-2 text-muted-foreground"
+          >
+            <Package className="h-4 w-4" />
+            Catalog ({catalog.length})
+          </H2>
+        </div>
+
+        <p className="text-xs text-muted-foreground">
+          Browse Nous-approved MCP servers and install them with one click.
+        </p>
+
+        {catalog.length === 0 && (
+          <Card>
+            <CardContent className="py-8 text-center text-sm text-muted-foreground">
+              No catalog entries available.
+            </CardContent>
+          </Card>
+        )}
+
+        {catalog.map((entry) => {
+          const entryDiags = diagnosticsByName[entry.name] ?? [];
+          const isInstalling = installingName === entry.name;
+
+          return (
+            <Card key={entry.name}>
+              <CardContent className="flex items-start gap-4 py-4">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1 flex-wrap">
+                    <span className="font-medium text-sm truncate">
+                      {entry.name}
+                    </span>
+                    <Badge
+                      tone={TRANSPORT_TONE[entry.transport] ?? "secondary"}
+                    >
+                      {entry.transport}
+                    </Badge>
+                    <Badge tone="outline">
+                      {entry.source === "official" ? "official" : entry.source}
+                    </Badge>
+                    {entry.installed && (
+                      <Badge tone="success">Installed</Badge>
+                    )}
+                    {entry.installed && !entry.enabled && (
+                      <Badge tone="outline">disabled</Badge>
+                    )}
+                  </div>
+                  {entry.description && (
+                    <p className="text-xs text-muted-foreground">
+                      {entry.description}
+                    </p>
+                  )}
+                  {entryDiags.map((d, i) => (
+                    <p
+                      key={`${entry.name}-diag-${i}`}
+                      className="text-xs text-warning mt-1"
+                    >
+                      {d.message}
+                    </p>
+                  ))}
+                </div>
+
+                <div className="flex items-center gap-1 shrink-0">
+                  {entry.installed ? (
+                    <Badge tone="success">Installed</Badge>
+                  ) : (
+                    <Button
+                      className="uppercase"
+                      size="sm"
+                      onClick={() => handleInstallClick(entry)}
+                      disabled={isInstalling}
+                      prefix={isInstalling ? <Spinner /> : undefined}
+                    >
+                      {isInstalling ? "Installing..." : "Install"}
+                    </Button>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+}