@harbinger-ai/harbinger 0.1.2 → 0.1.4

package/lib/chat/components/mcp-page.js

@@ -1,9 +1,9 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { motion } from "framer-motion";
-import { PlugIcon, RefreshIcon, SpinnerIcon, ChevronDownIcon, WrenchIcon, CheckIcon, XIcon } from "./icons.js";
-import { getMcpServers, getMcpStatus, getOwnMcpServerInfo, testMcpTool, reloadMcpClient } from "../../mcp/actions.js";
+import { motion, AnimatePresence } from "framer-motion";
+import { PlugIcon, RefreshIcon, SpinnerIcon, ChevronDownIcon, WrenchIcon, CheckIcon, XIcon, SearchIcon, PlusIcon, TrashIcon, DownloadIcon } from "./icons.js";
+import { getMcpServers, getMcpStatus, getOwnMcpServerInfo, testMcpTool, reloadMcpClient, getMcpRegistry, addMcpServer, removeMcpServer, toggleMcpServer } from "../../mcp/actions.js";
 const cardVariants = {
   hidden: { opacity: 0, y: 12 },
   visible: (i) => ({
@@ -12,6 +12,19 @@ const cardVariants = {
     transition: { delay: i * 0.05, duration: 0.3, ease: "easeOut" }
   })
 };
+const CATEGORY_COLORS = {
+  search: { bg: "bg-blue-500/10", text: "text-blue-500", border: "border-blue-500/20" },
+  web: { bg: "bg-orange-500/10", text: "text-orange-500", border: "border-orange-500/20" },
+  dev: { bg: "bg-purple-500/10", text: "text-purple-500", border: "border-purple-500/20" },
+  communication: { bg: "bg-green-500/10", text: "text-green-500", border: "border-green-500/20" },
+  system: { bg: "bg-gray-500/10", text: "text-gray-500", border: "border-gray-500/20" },
+  database: { bg: "bg-cyan-500/10", text: "text-cyan-500", border: "border-cyan-500/20" },
+  monitoring: { bg: "bg-yellow-500/10", text: "text-yellow-500", border: "border-yellow-500/20" },
+  cloud: { bg: "bg-indigo-500/10", text: "text-indigo-500", border: "border-indigo-500/20" }
+};
+function getCatStyle(cat) {
+  return CATEGORY_COLORS[cat] || { bg: "bg-white/5", text: "text-muted-foreground", border: "border-white/10" };
+}
 function SectionHeader({ label, count }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-6 pb-2", children: [
     /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider", children: label }),
@@ -39,9 +52,104 @@ function ItemCard({ name, description, badge, index = 0 }) {
     }
   );
 }
-function ServerCard({ server, index = 0 }) {
+function RegistryCard({ server, installed, onInstall, installing, index }) {
+  const [apiKey, setApiKey] = useState("");
+  const [showKeyInput, setShowKeyInput] = useState(false);
+  const cat = getCatStyle(server.category);
+  function handleAdd() {
+    if (server.requiresKey && !apiKey && !showKeyInput) {
+      setShowKeyInput(true);
+      return;
+    }
+    const config = {
+      name: server.name,
+      url: server.url || "",
+      transport: server.transport || "http",
+      enabled: true
+    };
+    if (apiKey && server.keyEnvVar) {
+      config.headers = { Authorization: `Bearer ${apiKey}` };
+    }
+    if (server.npmPackage) {
+      config.command = "npx";
+      config.args = ["-y", server.npmPackage];
+      config.transport = "stdio";
+    }
+    onInstall(config);
+  }
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 8 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.25, delay: index * 0.02 },
+      className: "group rounded-lg border border-white/[0.06] bg-[--card] hover:border-[--cyan]/20 transition-colors overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#ff5f57]" }),
+            /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#febc2e]" }),
+            /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#28c840]" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium truncate", children: server.name }),
+            /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5 line-clamp-1 font-mono", children: server.description })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: `shrink-0 inline-flex rounded-full px-2 py-0.5 text-[10px] font-mono font-medium border ${cat.bg} ${cat.text} ${cat.border}`, children: server.category }),
+          installed ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 inline-flex items-center gap-1 rounded-full bg-green-500/10 text-green-500 border border-green-500/20 px-2 py-0.5 text-[10px] font-mono font-medium", children: [
+            /* @__PURE__ */ jsx(CheckIcon, { size: 10 }),
+            " added"
+          ] }) : /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: handleAdd,
+              disabled: installing,
+              className: "shrink-0 inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors disabled:opacity-50",
+              children: [
+                installing ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(DownloadIcon, { size: 12 }),
+                "Add"
+              ]
+            }
+          )
+        ] }),
+        showKeyInput && !installed && /* @__PURE__ */ jsxs("div", { className: "border-t border-white/[0.06] px-3 py-2.5 flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "password",
+              value: apiKey,
+              onChange: (e) => setApiKey(e.target.value),
+              placeholder: `${server.keyEnvVar || "API_KEY"}...`,
+              className: "flex-1 text-xs border border-white/[0.06] rounded-md px-2.5 py-1.5 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors",
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleAdd,
+              disabled: !apiKey,
+              className: "inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors disabled:opacity-50",
+              children: "Add"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ServerCard({ server, onToggle, onRemove, index = 0 }) {
   const [expanded, setExpanded] = useState(false);
+  const [confirming, setConfirming] = useState(false);
   const disabled = server.enabled === false;
+  function handleRemove() {
+    if (!confirming) {
+      setConfirming(true);
+      setTimeout(() => setConfirming(false), 3e3);
+      return;
+    }
+    onRemove(server.name);
+  }
   return /* @__PURE__ */ jsxs(
     motion.div,
     {
@@ -63,31 +171,161 @@ function ServerCard({ server, index = 0 }) {
                 /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5 font-mono truncate", children: server.url })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
-                /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-mono font-medium ${server.transport === "http" ? "bg-blue-500/10 text-blue-400 border border-blue-500/20" : "bg-orange-500/10 text-orange-400 border border-orange-500/20"}`, children: server.transport || "http" }),
+                /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-mono font-medium ${server.transport === "http" ? "bg-blue-500/10 text-blue-400 border border-blue-500/20" : server.transport === "sse" ? "bg-orange-500/10 text-orange-400 border border-orange-500/20" : "bg-purple-500/10 text-purple-400 border border-purple-500/20"}`, children: server.transport || "http" }),
                 /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-mono font-medium ${disabled ? "bg-white/[0.04] text-muted-foreground border border-white/[0.06]" : "bg-[--success]/10 text-[--success] border border-[--success]/20"}`, children: disabled ? "disabled" : "enabled" }),
                 /* @__PURE__ */ jsx("span", { className: `transition-transform ${expanded ? "rotate-180" : ""}`, children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 }) })
               ] })
             ]
           }
         ),
-        expanded && /* @__PURE__ */ jsx("div", { className: "border-t border-white/[0.06] px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-muted-foreground uppercase tracking-wider", children: "URL" }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-foreground/80", children: server.url })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-muted-foreground uppercase tracking-wider", children: "Transport" }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-foreground/80", children: server.transport || "http" })
-          ] }),
-          server.headers && Object.keys(server.headers).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-muted-foreground uppercase tracking-wider", children: "Headers" }),
-            /* @__PURE__ */ jsx("pre", { className: "text-[11px] bg-black/30 rounded-md p-2.5 mt-1 font-mono overflow-auto max-h-24 text-foreground/80 border border-white/[0.04]", children: JSON.stringify(server.headers, null, 2) })
-          ] })
-        ] }) })
+        /* @__PURE__ */ jsx(AnimatePresence, { children: expanded && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: "auto", opacity: 1 },
+            exit: { height: 0, opacity: 0 },
+            transition: { duration: 0.2 },
+            className: "overflow-hidden",
+            children: /* @__PURE__ */ jsxs("div", { className: "border-t border-white/[0.06] px-4 py-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                server.url && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-muted-foreground uppercase tracking-wider w-16 shrink-0", children: "URL" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-foreground/80", children: server.url })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-muted-foreground uppercase tracking-wider w-16 shrink-0", children: "Transport" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-foreground/80", children: server.transport || "http" })
+                ] }),
+                server.headers && Object.keys(server.headers).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-muted-foreground uppercase tracking-wider", children: "Headers" }),
+                  /* @__PURE__ */ jsx("pre", { className: "text-[11px] bg-black/30 rounded-md p-2.5 mt-1 font-mono overflow-auto max-h-24 text-foreground/80 border border-white/[0.04]", children: JSON.stringify(server.headers, null, 2) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-3", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onToggle(server.name);
+                    },
+                    className: "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] transition-colors",
+                    children: disabled ? "Enable" : "Disable"
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleRemove();
+                    },
+                    className: `text-xs font-mono transition-colors ${confirming ? "text-[--destructive]" : "text-muted-foreground hover:text-[--destructive]"}`,
+                    children: confirming ? "Confirm remove" : "Remove"
+                  }
+                )
+              ] })
+            ] })
+          }
+        ) })
       ]
     }
   );
 }
+function AddServerForm({ onAdd }) {
+  const [name, setName] = useState("");
+  const [url, setUrl] = useState("");
+  const [transport, setTransport] = useState("http");
+  const [headers, setHeaders] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState(null);
+  async function handleAdd() {
+    if (!name || !url) return;
+    setLoading(true);
+    setResult(null);
+    let headerObj = {};
+    if (headers) {
+      try {
+        headerObj = JSON.parse(headers);
+      } catch {
+        setResult({ error: "Invalid JSON headers" });
+        setLoading(false);
+        return;
+      }
+    }
+    const res = await onAdd({ name, url, transport, headers: headerObj, enabled: true });
+    setResult(res);
+    if (!res.error) {
+      setName("");
+      setUrl("");
+      setHeaders("");
+    }
+    setLoading(false);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-white/[0.06] bg-[--card] p-4 mb-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+      /* @__PURE__ */ jsx(PlusIcon, { size: 14 }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium text-[--cyan]", children: "Add Custom Server" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          placeholder: "Server name",
+          value: name,
+          onChange: (e) => setName(e.target.value),
+          className: "text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          placeholder: "https://mcp.example.com/sse",
+          value: url,
+          onChange: (e) => setUrl(e.target.value),
+          className: "text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: transport,
+          onChange: (e) => setTransport(e.target.value),
+          className: "text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors appearance-none",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "http", children: "HTTP" }),
+            /* @__PURE__ */ jsx("option", { value: "sse", children: "SSE" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          placeholder: '{"Authorization": "Bearer ..."}',
+          value: headers,
+          onChange: (e) => setHeaders(e.target.value),
+          className: "text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: handleAdd,
+          disabled: loading || !name || !url,
+          className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors disabled:opacity-50",
+          children: [
+            loading ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(PlusIcon, { size: 12 }),
+            " Add Server"
+          ]
+        }
+      ),
+      result && /* @__PURE__ */ jsx("p", { className: `text-xs font-mono ${result.error ? "text-[--destructive]" : "text-green-500"}`, children: result.error || "Added successfully" })
+    ] })
+  ] });
+}
 function ToolCard({ tool, index = 0 }) {
   const [testing, setTesting] = useState(false);
   const [result, setResult] = useState(null);
@@ -156,16 +394,22 @@ function McpPage() {
   const [servers, setServers] = useState([]);
   const [status, setStatus] = useState(null);
   const [serverInfo, setServerInfo] = useState(null);
+  const [registry, setRegistry] = useState({ servers: [], categories: [] });
+  const [search, setSearch] = useState("");
+  const [installing, setInstalling] = useState(false);
+  const [tab, setTab] = useState("servers");
   async function load() {
     try {
-      const [s, st, info] = await Promise.all([
+      const [s, st, info, reg] = await Promise.all([
         getMcpServers(),
         getMcpStatus(),
-        getOwnMcpServerInfo()
+        getOwnMcpServerInfo(),
+        getMcpRegistry()
       ]);
       setServers(s);
       setStatus(st);
       setServerInfo(info);
+      setRegistry(reg);
     } catch {
     }
     setLoading(false);
@@ -182,11 +426,41 @@ function McpPage() {
     }
     setReloading(false);
   }
+  async function handleAddFromRegistry(config) {
+    setInstalling(true);
+    await addMcpServer(config);
+    await load();
+    setInstalling(false);
+  }
+  async function handleAddCustom(config) {
+    const result = await addMcpServer(config);
+    if (!result.error) await load();
+    return result;
+  }
+  async function handleToggle(name) {
+    await toggleMcpServer(name);
+    await load();
+  }
+  async function handleRemove(name) {
+    await removeMcpServer(name);
+    await load();
+  }
   if (loading) {
     return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-20 animate-shimmer rounded-lg border border-white/[0.06] bg-[--card]" }, i)) });
   }
   const enabledServers = servers.filter((s) => s.enabled !== false);
   const disabledServers = servers.filter((s) => s.enabled === false);
+  const serverNames = new Set(servers.map((s) => s.name));
+  const filteredRegistry = registry.servers.filter((s) => {
+    if (!search) return true;
+    const q = search.toLowerCase();
+    return s.name.toLowerCase().includes(q) || s.description.toLowerCase().includes(q) || s.category.toLowerCase().includes(q);
+  });
+  const tabs = [
+    { id: "servers", label: "SERVERS", count: servers.length },
+    { id: "hub", label: "MCP HUB", count: registry.servers.length },
+    { id: "tools", label: "TOOLS", count: status?.toolCount || 0 }
+  ];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3 mb-6", children: [
       /* @__PURE__ */ jsx(StatsCard, { label: "External Tools", value: status?.toolCount || 0 }),
@@ -214,44 +488,98 @@ function McpPage() {
         }
       )
     ] }),
-    serverInfo && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { label: "Server \u2014 Exposed to External Clients", count: serverInfo.tools.length + serverInfo.resources.length }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
-        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-md bg-[--card] border border-white/[0.06] px-2.5 py-1 text-[11px] font-mono text-muted-foreground", children: "/api/mcp" }),
-        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-[--success]" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 mb-2", children: [
-        serverInfo.tools.map((t, i) => /* @__PURE__ */ jsx(ItemCard, { name: t.name, description: t.description, badge: "tool", index: i }, t.name)),
-        serverInfo.resources.map((r, i) => /* @__PURE__ */ jsx(ItemCard, { name: r.uri, description: r.description, badge: "resource", index: serverInfo.tools.length + i }, r.uri)),
-        serverInfo.prompts.map((p, i) => /* @__PURE__ */ jsx(ItemCard, { name: p.name, description: p.description, badge: "prompt", index: serverInfo.tools.length + serverInfo.resources.length + i }, p.name))
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(SectionHeader, { label: "Client \u2014 External MCP Servers", count: servers.length }),
-    servers.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center rounded-lg border border-white/[0.06] bg-[--card]", children: [
-      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-[--cyan]/10 p-4 mb-4", children: /* @__PURE__ */ jsx(PlugIcon, { size: 24, className: "text-[--cyan]" }) }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-1 text-foreground", children: "No external MCP servers configured" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground max-w-sm", children: [
-        "Add servers by editing ",
-        /* @__PURE__ */ jsx("span", { className: "font-mono text-[--cyan]", children: "config/MCP_SERVERS.json" }),
-        " in your project."
-      ] })
-    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-      enabledServers.length > 0 && enabledServers.map((s, i) => /* @__PURE__ */ jsx(ServerCard, { server: s, index: i }, `enabled-${i}`)),
-      disabledServers.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2 pb-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-muted-foreground uppercase tracking-wider", children: "Disabled" }),
-          /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex gap-1 border-b border-white/[0.06] mb-4", children: tabs.map((t) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setTab(t.id),
+        className: `px-4 py-2.5 text-[11px] font-mono font-medium uppercase tracking-wider border-b-2 transition-colors ${tab === t.id ? "border-[--cyan] text-[--cyan]" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+        children: [
+          t.label,
+          " ",
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
             "(",
-            disabledServers.length,
+            t.count,
             ")"
           ] })
+        ]
+      },
+      t.id
+    )) }),
+    /* @__PURE__ */ jsxs(AnimatePresence, { mode: "wait", children: [
+      tab === "servers" && /* @__PURE__ */ jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: [
+        serverInfo && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(SectionHeader, { label: "Server \u2014 Exposed to External Clients", count: serverInfo.tools.length + serverInfo.resources.length }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-md bg-[--card] border border-white/[0.06] px-2.5 py-1 text-[11px] font-mono text-muted-foreground", children: "/api/mcp" }),
+            /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-[--success]" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 mb-2", children: [
+            serverInfo.tools.map((t, i) => /* @__PURE__ */ jsx(ItemCard, { name: t.name, description: t.description, badge: "tool", index: i }, t.name)),
+            serverInfo.resources.map((r, i) => /* @__PURE__ */ jsx(ItemCard, { name: r.uri, description: r.description, badge: "resource", index: serverInfo.tools.length + i }, r.uri)),
+            serverInfo.prompts.map((p, i) => /* @__PURE__ */ jsx(ItemCard, { name: p.name, description: p.description, badge: "prompt", index: serverInfo.tools.length + serverInfo.resources.length + i }, p.name))
+          ] })
         ] }),
-        disabledServers.map((s, i) => /* @__PURE__ */ jsx(ServerCard, { server: s, index: i }, `disabled-${i}`))
-      ] })
-    ] }),
-    status?.tools?.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { label: "Loaded External Tools", count: status.tools.length }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: status.tools.map((t, i) => /* @__PURE__ */ jsx(ToolCard, { tool: t, index: i }, t.name)) })
+        /* @__PURE__ */ jsx(SectionHeader, { label: "Client \u2014 External MCP Servers", count: servers.length }),
+        /* @__PURE__ */ jsx(AddServerForm, { onAdd: handleAddCustom }),
+        servers.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center rounded-lg border border-white/[0.06] bg-[--card]", children: [
+          /* @__PURE__ */ jsx("div", { className: "rounded-full bg-[--cyan]/10 p-4 mb-4", children: /* @__PURE__ */ jsx(PlugIcon, { size: 24, className: "text-[--cyan]" }) }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-1 text-foreground", children: "No external MCP servers configured" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground max-w-sm", children: [
+            "Add servers from the ",
+            /* @__PURE__ */ jsx("button", { onClick: () => setTab("hub"), className: "text-[--cyan] hover:underline", children: "MCP Hub" }),
+            " or add a custom server above."
+          ] })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+          enabledServers.map((s, i) => /* @__PURE__ */ jsx(ServerCard, { server: s, onToggle: handleToggle, onRemove: handleRemove, index: i }, `enabled-${s.name}-${i}`)),
+          disabledServers.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2 pb-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-muted-foreground uppercase tracking-wider", children: "Disabled" }),
+              /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-muted-foreground", children: [
+                "(",
+                disabledServers.length,
+                ")"
+              ] })
+            ] }),
+            disabledServers.map((s, i) => /* @__PURE__ */ jsx(ServerCard, { server: s, onToggle: handleToggle, onRemove: handleRemove, index: i }, `disabled-${s.name}-${i}`))
+          ] })
+        ] })
+      ] }, "servers"),
+      tab === "hub" && /* @__PURE__ */ jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative mb-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsx(SearchIcon, { size: 14 }) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              placeholder: "Search MCP servers...",
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              className: "w-full text-sm border border-white/[0.06] rounded-md pl-9 pr-3 py-2 bg-black/20 font-mono placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          filteredRegistry.map((s, i) => /* @__PURE__ */ jsx(
+            RegistryCard,
+            {
+              server: s,
+              installed: serverNames.has(s.name),
+              onInstall: handleAddFromRegistry,
+              installing,
+              index: i
+            },
+            s.id
+          )),
+          filteredRegistry.length === 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-12 text-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "rounded-full bg-white/[0.04] border border-white/[0.06] p-4 mb-4", children: /* @__PURE__ */ jsx(SearchIcon, { size: 24 }) }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-mono text-muted-foreground", children: "No servers match your search." })
+          ] })
+        ] })
+      ] }, "hub"),
+      tab === "tools" && /* @__PURE__ */ jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: status?.tools?.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: status.tools.map((t, i) => /* @__PURE__ */ jsx(ToolCard, { tool: t, index: i }, t.name)) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "rounded-full bg-white/[0.04] border border-white/[0.06] p-4 mb-4", children: /* @__PURE__ */ jsx(WrenchIcon, { size: 24 }) }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium mb-1", children: "No tools loaded" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground font-mono", children: "Add MCP servers to load external tools." })
+      ] }) }, "tools")
     ] })
   ] });
 }