@mcpjam/inspector 0.3.5 → 0.3.6

package/client/dist/assets/{index-DQYTYcqe.js → index-Bgrnc5s2.js}

@@ -22663,7 +22663,7 @@ function createChatConfig(options = {}) {
     "Explain a concept to me"
   ];
   const config = {
-    title: `Chat`,
+    title: "LLM Playground",
     suggestions: [...baseSuggestions, ...options.additionalSuggestions || []]
   };
   if (options.subtitle) {
@@ -26843,6 +26843,13 @@ const ChevronLeft = createLucideIcon("ChevronLeft", [
 const ChevronRight = createLucideIcon("ChevronRight", [
   ["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
 ]);
+/**
+ * @license lucide-react v0.447.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -29235,7 +29242,7 @@ const ClientLogsTab = ({
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: `flex items-start space-x-3 p-3 rounded-lg border ${config.bgColor} ${config.borderColor} hover:shadow-sm transition-all duration-200`,
+        className: `group flex items-start space-x-3 p-3 rounded-lg border ${config.bgColor} ${config.borderColor} hover:shadow-sm transition-all duration-200`,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-shrink-0 mt-0.5 ${config.iconColor}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconComponent, { className: "w-4 h-4" }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
@@ -29251,7 +29258,7 @@ const ClientLogsTab = ({
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-sm ${config.textColor} font-mono break-words`, children: log.message })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex-shrink-0 mt-0.5 ${config.iconColor}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { value: log.message }) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 mt-0.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { value: log.message }) })
         ]
       }
     );
@@ -29280,11 +29287,33 @@ const TabbedHistoryPanel = ({
   setActiveTab
 }) => {
   const [isToolResultError, setIsToolResultError] = reactExports.useState(false);
+  const { toast: toast2 } = useToast();
   reactExports.useEffect(() => {
     if (toolResult) {
       setIsToolResultError(toolResult.isError === true);
     }
   }, [toolResult]);
+  const handleCopyLogs = async () => {
+    if (clientLogs.length === 0) return;
+    try {
+      const logsText = clientLogs.map((log) => {
+        const timestamp = new Date(log.timestamp).toISOString();
+        return `[${timestamp}] ${log.level.toUpperCase()}: ${log.message}`;
+      }).join("\n");
+      await navigator.clipboard.writeText(logsText);
+      toast2({
+        title: "Logs copied to clipboard",
+        description: `Successfully copied ${clientLogs.length} log entries to clipboard`
+      });
+    } catch (err) {
+      console.error("Failed to copy logs to clipboard:", err);
+      toast2({
+        title: "Failed to copy logs",
+        description: "Could not copy logs to clipboard. Please try again.",
+        variant: "destructive"
+      });
+    }
+  };
   reactExports.useEffect(() => {
     if (clientLogs.length > 0) {
       const isLastLogError = clientLogs[clientLogs.length - 1].level === "error";
@@ -29385,6 +29414,22 @@ const TabbedHistoryPanel = ({
       );
     }
   };
+  const CopyLogsButton = ({
+    onClick,
+    count: count2
+  }) => {
+    if (count2 > 0) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick,
+          className: "p-2 rounded-lg hover:bg-accent/50 hover:text-foreground transition-all duration-200 group",
+          title: "Copy all logs to clipboard",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-5 h-5 text-muted-foreground group-hover:text-foreground" })
+        }
+      );
+    }
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-transparent flex flex-col h-full", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between border-b border-border/20 px-6 py-3", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-1", children: [
@@ -29392,20 +29437,30 @@ const TabbedHistoryPanel = ({
         renderResultsTabButton(),
         renderLogsTabButton()
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { children: activeTab == "activity" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+        activeTab === "activity" && /* @__PURE__ */ jsxRuntimeExports.jsx(
           ClearHistoryButton2,
           {
             onClick: onClearHistory,
             count: requestHistory.length
           }
-        ) : activeTab == "logs" && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ClearHistoryButton2,
-          {
-            onClick: onClearLogs,
-            count: clientLogs.length
-          }
-        ) }),
+        ),
+        activeTab === "logs" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CopyLogsButton,
+            {
+              onClick: handleCopyLogs,
+              count: clientLogs.length
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ClearHistoryButton2,
+            {
+              onClick: onClearLogs,
+              count: clientLogs.length
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -29435,11 +29490,9 @@ const HistoryAndNotifications = ({
   const [activeTab, setActiveTab] = reactExports.useState(null);
   const { height, isDragging, handleDragStart, resetHeight, setCustomHeight } = useDraggablePane(500, "historyPaneHeight");
   const toggleCollapse = reactExports.useCallback(() => {
-    setIsCollapsed((c) => {
-      const next = !c;
-      if (next) {
-        setActiveTab(null);
-      }
+    setIsCollapsed((collapsed) => {
+      const next = !collapsed;
+      if (next) setActiveTab(null);
       return next;
     });
   }, []);
@@ -29447,24 +29500,6 @@ const HistoryAndNotifications = ({
     if (!isCollapsed) resetHeight();
   }, [isCollapsed, resetHeight]);
   reactExports.useEffect(() => {
-    const onKey = (e) => {
-      var _a2;
-      if (isCollapsed) return;
-      const tag = (_a2 = e.target) == null ? void 0 : _a2.tagName.toLowerCase();
-      if (tag === "input" || tag === "textarea") return;
-      if (e.altKey && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
-        e.preventDefault();
-        const inc = e.shiftKey ? 50 : 25;
-        const newH = e.key === "ArrowUp" ? height + inc : height - inc;
-        setCustomHeight(newH);
-      }
-      if (e.altKey && e.key === "r") {
-        e.preventDefault();
-        resetHeight();
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
   }, [isCollapsed, height, setCustomHeight, resetHeight]);
   reactExports.useEffect(() => {
     if (toolResult) {
@@ -29473,11 +29508,24 @@ const HistoryAndNotifications = ({
     }
   }, [toolResult]);
   reactExports.useEffect(() => {
-    if (clientLogs.length && clientLogs[clientLogs.length - 1].level === "error") {
+    if (clientLogs.length > 0 && clientLogs[clientLogs.length - 1].level === "error") {
       setActiveTab("logs");
       setIsCollapsed(false);
     }
   }, [clientLogs]);
+  reactExports.useEffect(() => {
+    if (requestHistory.length === 0) return;
+    const last = requestHistory[requestHistory.length - 1];
+    if (!last.request) return;
+    try {
+      const parsed = JSON.parse(last.request);
+      if (parsed.method === "ping") {
+        setActiveTab("activity");
+        setIsCollapsed(false);
+      }
+    } catch {
+    }
+  }, [requestHistory]);
   const counts = {
     activity: requestHistory.length,
     results: toolResult ? 1 : 0,
@@ -29505,7 +29553,7 @@ const HistoryAndNotifications = ({
           }
         ),
         isCollapsed ? (
-          // Collapsed: tab bar
+          /* Collapsed: tab bar */
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex items-center", children: [
             TAB_CONFIG.map(({ key, label }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "button",
@@ -29530,7 +29578,7 @@ const HistoryAndNotifications = ({
             ) })
           ] })
         ) : (
-          // Expanded: full panel
+          /* Expanded: full panel */
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             TabbedHistoryPanel,
             {
@@ -34040,7 +34088,7 @@ const useTheme = () => {
     [theme, setThemeWithSideEffect]
   );
 };
-const version$1 = "0.3.5";
+const version$1 = "0.3.6";
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -34523,124 +34571,59 @@ const TooltipContent = reactExports.forwardRef(({ className, sideOffset = 4, ...
   }
 ));
 TooltipContent.displayName = Content2$1.displayName;
-const Sidebar = ({
-  mcpAgent,
+class StringUtil {
+  static shorten(str2, maxLength = 30) {
+    return str2.length > maxLength ? str2.substring(0, maxLength - 3) + "..." : str2;
+  }
+}
+const getConnectionStatusIcon = (status) => {
+  switch (status) {
+    case "connected":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Wifi, { className: "w-4 h-4 text-green-500" });
+    case "disconnected":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(WifiOff, { className: "w-4 h-4 text-gray-400" });
+    case "error":
+    case "error-connecting-to-proxy":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "w-4 h-4 text-red-500" });
+    default:
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(WifiOff, { className: "w-4 h-4 text-gray-400" });
+  }
+};
+const getConnectionStatusColor = (status) => {
+  switch (status) {
+    case "connected":
+      return "text-green-600 dark:text-green-400";
+    case "disconnected":
+      return "text-gray-500 dark:text-gray-400";
+    case "error":
+    case "error-connecting-to-proxy":
+      return "text-red-600 dark:text-red-400";
+    default:
+      return "text-gray-500 dark:text-gray-400";
+  }
+};
+const getConnectionDisplayText = (connection) => {
+  var _a2;
+  if (connection.config.transportType === "stdio" && "command" in connection.config) {
+    return `${connection.config.command} ${((_a2 = connection.config.args) == null ? void 0 : _a2.join(" ")) || ""}`;
+  }
+  if ("url" in connection.config && connection.config.url) {
+    return StringUtil.shorten(connection.config.url.toString());
+  }
+  return "Unknown configuration";
+};
+const ConnectionItem = ({
+  connection,
   selectedServerName,
   onServerSelect,
+  onEditClient,
   onRemoveServer,
   onConnectServer,
   onDisconnectServer,
-  onCreateClient,
-  onEditClient,
-  updateTrigger,
-  isExpanded,
-  onToggleExpanded
+  shouldDisableConnection,
+  getConnectTooltipMessage
 }) => {
-  const [theme, setTheme] = useTheme();
-  const serverConnections = React.useMemo(() => {
-    return mcpAgent ? mcpAgent.getAllConnectionInfo() : [];
-  }, [mcpAgent, updateTrigger]);
-  const getLogoSrc = () => {
-    if (theme === "dark") {
-      return "/mcp_jam_dark.png";
-    } else if (theme === "light") {
-      return "/mcp_jam_light.png";
-    } else {
-      const isDarkMode = document.documentElement.classList.contains("dark");
-      return isDarkMode ? "/mcp_jam_dark.png" : "/mcp_jam_light.png";
-    }
-  };
-  const getConnectionStatusIcon = (status) => {
-    switch (status) {
-      case "connected":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(Wifi, { className: "w-4 h-4 text-green-500" });
-      case "disconnected":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(WifiOff, { className: "w-4 h-4 text-gray-400" });
-      case "error":
-      case "error-connecting-to-proxy":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "w-4 h-4 text-red-500" });
-      default:
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(WifiOff, { className: "w-4 h-4 text-gray-400" });
-    }
-  };
-  const getConnectionStatusColor = (status) => {
-    switch (status) {
-      case "connected":
-        return "text-green-600 dark:text-green-400";
-      case "disconnected":
-        return "text-gray-500 dark:text-gray-400";
-      case "error":
-      case "error-connecting-to-proxy":
-        return "text-red-600 dark:text-red-400";
-      default:
-        return "text-gray-500 dark:text-gray-400";
-    }
-  };
-  const shouldDisableConnection = () => {
-    return false;
-  };
-  const getConnectTooltipMessage = () => {
-    return "Connect to this server";
-  };
-  const getConnectionDisplayText = (connection) => {
-    var _a2;
-    if (connection.config.transportType === "stdio" && "command" in connection.config) {
-      return `${connection.config.command} ${((_a2 = connection.config.args) == null ? void 0 : _a2.join(" ")) || ""}`;
-    }
-    if ("url" in connection.config && connection.config.url) {
-      return connection.config.url.toString();
-    }
-    return "Unknown configuration";
-  };
-  const renderHeader = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center space-y-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "img",
-      {
-        src: getLogoSrc(),
-        alt: "MCP Jam",
-        className: "h-6 w-auto object-contain transition-opacity duration-200",
-        onError: (e) => {
-          console.warn("Failed to load MCP Jam logo");
-          e.currentTarget.style.display = "none";
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-muted-foreground opacity-70", children: [
-      "v",
-      version$1
-    ] }) })
-  ] }) });
-  const renderConnectionsHeader = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 border-b border-border/50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Server, { className: "w-4 h-4 text-muted-foreground" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium text-foreground", children: "Connections" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded", children: serverConnections.length })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          onClick: onCreateClient,
-          size: "sm",
-          variant: "ghost",
-          className: "h-7 w-7 p-0 hover:bg-primary/20 hover:text-primary",
-          title: "Create new client",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" })
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: (mcpAgent == null ? void 0 : mcpAgent.hasConnectedRemoteServer()) ? "Note: Creating a remote client will disconnect the current remote connection" : "Create new client" })
-    ] })
-  ] }) });
-  const renderEmptyState = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-8", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Server, { className: "w-12 h-12 text-muted-foreground mx-auto mb-4" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium mb-2", children: "No connections" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground mb-4", children: "Create your first MCP connection to get started" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: onCreateClient, size: "sm", className: "w-full", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4 mr-2" }),
-      "Create Connection"
-    ] })
-  ] }) });
-  const renderConnectionActions = (connection) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-1", children: [
+  const renderConnectionActions = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-1", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Button,
       {
@@ -34668,7 +34651,7 @@ const Sidebar = ({
       }
     )
   ] });
-  const renderConnectionButton = (connection) => {
+  const renderConnectionButton = () => {
     if (connection.connectionStatus === "connected") {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button,
@@ -34702,7 +34685,7 @@ const Sidebar = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: getConnectTooltipMessage() })
     ] });
   };
-  const renderConnectionItem = (connection) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       className: `p-3 rounded-lg border cursor-pointer transition-all hover:bg-muted/50 ${selectedServerName === connection.name ? "border-primary bg-primary/10" : "border-border"}`,
@@ -34713,10 +34696,10 @@ const Sidebar = ({
             getConnectionStatusIcon(connection.connectionStatus),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-sm", children: connection.name }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground", children: getConnectionDisplayText(connection) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-xs text-muted-foreground break-all`, children: getConnectionDisplayText(connection) })
             ] })
           ] }),
-          renderConnectionActions(connection)
+          renderConnectionActions()
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -34726,12 +34709,93 @@ const Sidebar = ({
               children: connection.connectionStatus
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex space-x-1", children: renderConnectionButton(connection) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex space-x-1", children: renderConnectionButton() })
         ] })
       ] })
-    },
-    connection.name
+    }
   );
+};
+const Sidebar = ({
+  mcpAgent,
+  selectedServerName,
+  onServerSelect,
+  onRemoveServer,
+  onConnectServer,
+  onDisconnectServer,
+  onCreateClient,
+  onEditClient,
+  updateTrigger,
+  isExpanded,
+  onToggleExpanded
+}) => {
+  const [theme, setTheme] = useTheme();
+  const serverConnections = React.useMemo(() => {
+    return mcpAgent ? mcpAgent.getAllConnectionInfo() : [];
+  }, [mcpAgent, updateTrigger]);
+  const getLogoSrc = () => {
+    if (theme === "dark") {
+      return "/mcp_jam_dark.png";
+    } else if (theme === "light") {
+      return "/mcp_jam_light.png";
+    } else {
+      const isDarkMode = document.documentElement.classList.contains("dark");
+      return isDarkMode ? "/mcp_jam_dark.png" : "/mcp_jam_light.png";
+    }
+  };
+  const shouldDisableConnection = () => {
+    return false;
+  };
+  const getConnectTooltipMessage = () => {
+    return "Connect to this server";
+  };
+  const renderHeader = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center space-y-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "img",
+      {
+        src: getLogoSrc(),
+        alt: "MCP Jam",
+        className: "h-6 w-auto object-contain transition-opacity duration-200",
+        onError: (e) => {
+          console.warn("Failed to load MCP Jam logo");
+          e.currentTarget.style.display = "none";
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-muted-foreground opacity-70", children: [
+      "v",
+      version$1
+    ] }) })
+  ] }) });
+  const renderConnectionsHeader = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 border-b border-border/50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Server, { className: "w-4 h-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium text-foreground", children: "Connections" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded", children: serverConnections.length })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          onClick: onCreateClient,
+          size: "sm",
+          variant: "ghost",
+          className: "h-7 w-7 p-0 hover:bg-primary/20 hover:text-primary",
+          title: "Create new connection",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: (mcpAgent == null ? void 0 : mcpAgent.hasConnectedRemoteServer()) ? "Note: Creating a remote connection will disconnect the current remote connection" : "Create new connection" })
+    ] })
+  ] }) });
+  const renderEmptyState = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-8", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Server, { className: "w-12 h-12 text-muted-foreground mx-auto mb-4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium mb-2", children: "No connections" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground mb-4", children: "Create your first MCP connection to get started" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: onCreateClient, size: "sm", className: "w-full", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4 mr-2" }),
+      "Create Connection"
+    ] })
+  ] }) });
   const renderThemeSelector = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-t", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
@@ -34811,7 +34875,21 @@ const Sidebar = ({
       renderConnectionsHeader(),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden flex flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto", children: [
         shouldShowCreatePrompt && renderEmptyState(),
-        serverConnections.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 space-y-2", children: serverConnections.map(renderConnectionItem) })
+        serverConnections.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 space-y-2", children: serverConnections.map((connection) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ConnectionItem,
+          {
+            connection,
+            selectedServerName,
+            onServerSelect,
+            onEditClient,
+            onRemoveServer,
+            onConnectServer,
+            onDisconnectServer,
+            shouldDisableConnection,
+            getConnectTooltipMessage
+          },
+          connection.name
+        )) })
       ] }) }) }),
       renderThemeSelector()
     ] });
@@ -34843,7 +34921,7 @@ const Sidebar = ({
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" })
           }
         ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: "Create new client" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: "Create new connection" })
       ] })
     ] }) });
   };
@@ -34879,7 +34957,7 @@ const Tabs = ({
     },
     {
       id: "chat",
-      label: "Chat",
+      label: "Playground",
       icon: Bot,
       disabled: shouldDisableAll
     },
@@ -36480,6 +36558,48 @@ const ConnectionSection = ({
     )
   ] });
 };
+function configToDisplayStrings(config) {
+  var _a2, _b;
+  const argsString = config.transportType === "stdio" && "args" in config ? ((_a2 = config.args) == null ? void 0 : _a2.join(" ")) || "" : "";
+  const urlString = config.transportType !== "stdio" && "url" in config ? ((_b = config.url) == null ? void 0 : _b.toString()) || "" : "";
+  return { argsString, urlString };
+}
+function createStdioConfig(command, args = [], env = {}) {
+  return {
+    transportType: "stdio",
+    command,
+    args,
+    env
+  };
+}
+function createHttpConfig(url, transportType = "sse") {
+  return {
+    transportType,
+    url
+  };
+}
+function updateConfigFromStrings(config, argsString) {
+  if (config.transportType === "stdio") {
+    return {
+      ...config,
+      args: argsString.trim() ? argsString.split(/\s+/) : []
+    };
+  } else {
+    return config;
+  }
+}
+function createDefaultStdioConfig() {
+  return createStdioConfig("npx", ["@modelcontextprotocol/server-everything"]);
+}
+function createDefaultHttpConfig(transportType = "sse") {
+  return createHttpConfig(new URL("https://example.com"), transportType);
+}
+function isStdioConfig(config) {
+  return config.transportType === "stdio";
+}
+function isHttpConfig(config) {
+  return config.transportType !== "stdio";
+}
 var NAME = "Label";
 var Label$1 = reactExports.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -36603,10 +36723,7 @@ function Badge({ className, variant, ...props }) {
 const ClientFormSection = ({
   isCreating,
   editingClientName,
-  clientFormName,
-  setClientFormName,
-  clientFormConfig,
-  setClientFormConfig,
+  initialClient,
   config,
   setConfig,
   bearerToken,
@@ -36615,80 +36732,95 @@ const ClientFormSection = ({
   setHeaderName,
   onSave,
   onCancel,
-  onImportMultipleServers,
-  onSaveMultiple
+  onImportMultipleServers
 }) => {
-  const [argsString, setArgsString] = reactExports.useState("");
-  const [sseUrlString, setSseUrlString] = reactExports.useState("");
-  const [multipleClients, setMultipleClients] = reactExports.useState([]);
-  const [isMultipleMode, setIsMultipleMode] = reactExports.useState(false);
+  const [multipleClients, setMultipleClients] = reactExports.useState(() => {
+    if (initialClient) {
+      return [
+        {
+          id: "editing-client",
+          name: initialClient.name,
+          config: initialClient.config
+        }
+      ];
+    } else {
+      return [
+        {
+          id: "new-client",
+          name: "",
+          config: createDefaultStdioConfig()
+        }
+      ];
+    }
+  });
+  console.log("🔧 multipleClients", multipleClients);
   const [isManualConfigExpanded, setIsManualConfigExpanded] = reactExports.useState(true);
   const { toast: toast2 } = useToast();
   const [showImportDialog, setShowImportDialog] = reactExports.useState(false);
   const [nameError, setNameError] = reactExports.useState("");
   const [isNameTouched, setIsNameTouched] = reactExports.useState(false);
-  reactExports.useEffect(() => {
-    var _a2, _b;
-    if (clientFormConfig.transportType === "stdio" && "args" in clientFormConfig) {
-      setArgsString(((_a2 = clientFormConfig.args) == null ? void 0 : _a2.join(" ")) || "");
-      setSseUrlString("");
-    } else if (clientFormConfig.transportType !== "stdio" && "url" in clientFormConfig) {
-      setArgsString("");
-      setSseUrlString(((_b = clientFormConfig.url) == null ? void 0 : _b.toString()) || "");
-    }
-  }, [clientFormConfig]);
+  const scrollContainerRef = reactExports.useRef(null);
+  const isMultipleMode = multipleClients.length > 1;
+  const currentClient = multipleClients[0] || {
+    id: "default",
+    name: "",
+    config: createDefaultStdioConfig()
+  };
+  const handleUpdateCurrentClient = (updates) => {
+    setMultipleClients(
+      (prev) => prev.map(
+        (client2) => client2.id === currentClient.id ? { ...client2, ...updates } : client2
+      )
+    );
+  };
   reactExports.useEffect(() => {
     if (!isNameTouched) return;
-    if (clientFormName.trim()) {
+    if (currentClient.name.trim()) {
       setNameError("");
     } else {
       setNameError("Client name is required");
     }
-  }, [clientFormName, isNameTouched]);
+  }, [currentClient.name, isNameTouched]);
   const handleArgsChange = (newArgsString) => {
-    setArgsString(newArgsString);
-    if (clientFormConfig.transportType === "stdio") {
-      setClientFormConfig({
-        ...clientFormConfig,
-        args: newArgsString.trim() ? newArgsString.split(/\s+/) : []
-      });
+    if (isStdioConfig(currentClient.config)) {
+      const updatedConfig = updateConfigFromStrings(
+        currentClient.config,
+        newArgsString
+      );
+      handleUpdateCurrentClient({ config: updatedConfig });
     }
   };
   const handleSseUrlChange = (newSseUrlString) => {
-    setSseUrlString(newSseUrlString);
+    if (isHttpConfig(currentClient.config)) {
+      try {
+        const newUrl = new URL(newSseUrlString || "https://example.com");
+        handleUpdateCurrentClient({
+          config: { ...currentClient.config, url: newUrl }
+        });
+      } catch {
+      }
+    }
   };
   const handleImportServers = (servers) => {
-    var _a2, _b;
     if (servers.length > 1) {
-      const clients = servers.map((server, index2) => {
-        var _a3, _b2;
-        return {
-          id: `client-${Date.now()}-${index2}`,
-          name: server.name,
-          config: server.config,
-          argsString: server.config.transportType === "stdio" && "args" in server.config ? ((_a3 = server.config.args) == null ? void 0 : _a3.join(" ")) || "" : "",
-          sseUrlString: server.config.transportType !== "stdio" && "url" in server.config ? ((_b2 = server.config.url) == null ? void 0 : _b2.toString()) || "" : ""
-        };
-      });
+      const clients = servers.map((server, index2) => ({
+        id: `client-${Date.now()}-${index2}`,
+        name: server.name,
+        config: server.config
+      }));
       setMultipleClients(clients);
-      setIsMultipleMode(true);
       toast2({
         title: "Multiple servers imported",
         description: `Imported ${servers.length} server configurations. Configure each client below.`
       });
     } else if (servers.length === 1) {
       const firstServer = servers[0];
-      setClientFormConfig(firstServer.config);
-      if (!clientFormName.trim()) {
-        setClientFormName(firstServer.name);
-      }
-      if (firstServer.config.transportType === "stdio" && "args" in firstServer.config) {
-        setArgsString(((_a2 = firstServer.config.args) == null ? void 0 : _a2.join(" ")) || "");
-        setSseUrlString("");
-      } else if (firstServer.config.transportType !== "stdio" && "url" in firstServer.config) {
-        setArgsString("");
-        setSseUrlString(((_b = firstServer.config.url) == null ? void 0 : _b.toString()) || "");
-      }
+      const updatedClient = {
+        ...currentClient,
+        name: currentClient.name.trim() || firstServer.name,
+        config: firstServer.config
+      };
+      setMultipleClients([updatedClient]);
       toast2({
         title: "Configuration imported",
         description: `Imported configuration for "${firstServer.name}".`
@@ -36697,6 +36829,14 @@ const ClientFormSection = ({
     if (onImportMultipleServers) {
       onImportMultipleServers(servers);
     }
+    setTimeout(() => {
+      if (scrollContainerRef.current) {
+        scrollContainerRef.current.scrollTo({
+          top: scrollContainerRef.current.scrollHeight,
+          behavior: "smooth"
+        });
+      }
+    }, 100);
   };
   const handleUpdateClient = (clientId, updates) => {
     setMultipleClients(
@@ -36714,39 +36854,12 @@ const ClientFormSection = ({
     const newClient = {
       id: `client-${Date.now()}`,
       name: "",
-      config: {
-        transportType: "stdio",
-        command: "npx",
-        args: ["@modelcontextprotocol/server-everything"],
-        env: {}
-      },
-      argsString: "@modelcontextprotocol/server-everything",
-      sseUrlString: ""
+      config: createDefaultStdioConfig()
     };
     setMultipleClients((prev) => [...prev, newClient]);
   };
-  const handleSingleSave = () => {
-    let configToSave = { ...clientFormConfig };
-    if (configToSave.transportType !== "stdio") {
-      try {
-        const url = new URL(sseUrlString);
-        configToSave = {
-          ...configToSave,
-          url
-        };
-      } catch {
-        toast2({
-          title: "Invalid URL",
-          description: "Please enter a valid URL for the client.",
-          variant: "destructive"
-        });
-        return;
-      }
-    }
-    onSave(configToSave);
-  };
-  const handleSaveAll = async () => {
-    if (!onSaveMultiple) return;
+  const handleSave = async () => {
+    var _a2;
     const validClients = multipleClients.filter((c) => c.name.trim());
     if (validClients.length === 0) {
       toast2({
@@ -36756,439 +36869,478 @@ const ClientFormSection = ({
       });
       return;
     }
-    const clientsToSave = validClients.map((client2) => {
-      let configToSave = { ...client2.config };
-      if (configToSave.transportType !== "stdio") {
+    const clientsToSave = [];
+    const configErrors = [];
+    for (const client2 of validClients) {
+      if (isHttpConfig(client2.config)) {
+        if (!client2.config.url) {
+          configErrors.push(
+            `${client2.name}: URL is required for HTTP connections`
+          );
+          continue;
+        }
         try {
-          const url = new URL(client2.sseUrlString);
-          configToSave = {
-            ...configToSave,
-            url
-          };
+          new URL(client2.config.url.toString());
         } catch {
-          throw new Error(`Invalid URL for client "${client2.name}"`);
+          configErrors.push(`${client2.name}: Invalid URL format`);
+          continue;
         }
       }
-      return {
+      if (isStdioConfig(client2.config)) {
+        if (!((_a2 = client2.config.command) == null ? void 0 : _a2.trim())) {
+          configErrors.push(
+            `${client2.name}: Command is required for stdio connections`
+          );
+          continue;
+        }
+      }
+      clientsToSave.push({
         name: client2.name,
-        config: configToSave
-      };
-    });
+        config: client2.config
+      });
+    }
+    if (configErrors.length > 0) {
+      toast2({
+        title: "Configuration errors",
+        description: `Please fix the following errors: ${configErrors.join(", ")}`,
+        variant: "destructive"
+      });
+      return;
+    }
+    console.log("🔧 clientsToSave", clientsToSave);
     try {
-      const result = await onSaveMultiple(clientsToSave);
+      const result = await onSave(clientsToSave);
       if (result.success.length > 0) {
         toast2({
-          title: "Clients created successfully",
-          description: `Successfully created ${result.success.length} connection(s).`
+          title: "Clients saved successfully",
+          description: `Successfully saved ${result.success.length} connection(s).`
         });
       }
       if (result.failed.length > 0) {
         toast2({
-          title: "Some clients failed to create",
-          description: `${result.failed.length} connection(s) failed to create. Check the console for details.`,
+          title: "Some clients failed to save",
+          description: `${result.failed.length} connection(s) failed to save. Check the console for details.`,
           variant: "destructive"
         });
       }
     } catch (error) {
       toast2({
-        title: "Error creating clients",
+        title: "Error saving clients",
         description: error instanceof Error ? error.message : "An unexpected error occurred.",
         variant: "destructive"
       });
     }
   };
   const handleBackToSingle = () => {
-    setIsMultipleMode(false);
-    setMultipleClients([]);
+    setMultipleClients([
+      {
+        id: "new-client",
+        name: "",
+        config: createDefaultStdioConfig()
+      }
+    ]);
   };
   if (isMultipleMode) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col overflow-auto bg-gradient-to-br from-background to-muted/20", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto w-full p-6 space-y-6", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            onClick: handleBackToSingle,
-            className: "h-8 w-8 p-0",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "Create Multiple Clients" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground mt-1", children: "Configure each imported server as a separate client" })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "secondary", className: "ml-auto", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "h-3 w-3 mr-1" }),
-          multipleClients.length,
-          " clients"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-6", children: [
-        multipleClients.map((client2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Card,
-          {
-            className: "border-2 border-border/50 hover:border-border transition-colors",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary font-semibold text-sm", children: index2 + 1 }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "text-lg", children: [
-                      "Client ",
-                      index2 + 1
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        ref: scrollContainerRef,
+        className: "flex-1 flex flex-col overflow-auto bg-gradient-to-br from-background to-muted/20",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto w-full p-6 space-y-6", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: handleBackToSingle,
+                className: "h-8 w-8 p-0",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "Create Multiple Clients" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground mt-1", children: "Configure each imported server as a separate client" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "secondary", className: "ml-auto", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "h-3 w-3 mr-1" }),
+              multipleClients.length,
+              " clients"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-6", children: [
+            multipleClients.map((client2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Card,
+              {
+                className: "border-2 border-border/50 hover:border-border transition-colors",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "pb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary font-semibold text-sm", children: index2 + 1 }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsxs(CardTitle, { className: "text-lg", children: [
+                          "Client ",
+                          index2 + 1
+                        ] }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(CardDescription, { children: client2.name || "Unnamed client" })
+                      ] })
                     ] }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(CardDescription, { children: client2.name || "Unnamed client" })
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "sm",
+                        onClick: () => handleRemoveClient(client2.id),
+                        className: "h-8 w-8 p-0 text-muted-foreground hover:text-destructive",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(X$1, { className: "h-4 w-4" })
+                      }
+                    )
+                  ] }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-6", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Label,
+                        {
+                          htmlFor: `client-name-${client2.id}`,
+                          className: "text-sm font-medium",
+                          children: "Client Name"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Input,
+                        {
+                          id: `client-name-${client2.id}`,
+                          value: client2.name,
+                          onChange: (e) => handleUpdateClient(client2.id, { name: e.target.value }),
+                          placeholder: "Enter a descriptive name for this client",
+                          className: "max-w-md"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(Settings, { className: "h-4 w-4 text-muted-foreground" }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm font-medium", children: "Connection Settings" })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border/50 rounded-lg p-4 bg-muted/30", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        ConnectionSection,
+                        {
+                          connectionStatus: "disconnected",
+                          transportType: client2.config.transportType,
+                          setTransportType: (type2) => {
+                            const newConfig = type2 === "stdio" ? createDefaultStdioConfig() : createDefaultHttpConfig(type2);
+                            handleUpdateClient(client2.id, {
+                              config: newConfig
+                            });
+                          },
+                          command: isStdioConfig(client2.config) ? client2.config.command || "" : "",
+                          setCommand: (command) => {
+                            if (isStdioConfig(client2.config)) {
+                              handleUpdateClient(client2.id, {
+                                config: {
+                                  ...client2.config,
+                                  command
+                                }
+                              });
+                            }
+                          },
+                          args: configToDisplayStrings(client2.config).argsString,
+                          setArgs: (newArgsString) => {
+                            if (isStdioConfig(client2.config)) {
+                              const updatedConfig = updateConfigFromStrings(
+                                client2.config,
+                                newArgsString
+                              );
+                              handleUpdateClient(client2.id, {
+                                config: updatedConfig
+                              });
+                            }
+                          },
+                          sseUrl: configToDisplayStrings(client2.config).urlString,
+                          setSseUrl: (url) => {
+                            if (isHttpConfig(client2.config)) {
+                              try {
+                                const newUrl = new URL(
+                                  url || "https://example.com"
+                                );
+                                handleUpdateClient(client2.id, {
+                                  config: {
+                                    ...client2.config,
+                                    url: newUrl
+                                  }
+                                });
+                              } catch {
+                              }
+                            }
+                          },
+                          env: isStdioConfig(client2.config) ? client2.config.env || {} : {},
+                          setEnv: (env) => {
+                            if (isStdioConfig(client2.config)) {
+                              handleUpdateClient(client2.id, {
+                                config: {
+                                  ...client2.config,
+                                  env
+                                }
+                              });
+                            }
+                          },
+                          config,
+                          setConfig,
+                          bearerToken,
+                          setBearerToken,
+                          headerName,
+                          setHeaderName,
+                          onConnect: () => {
+                          },
+                          onDisconnect: () => {
+                          },
+                          stdErrNotifications: [],
+                          clearStdErrNotifications: () => {
+                          },
+                          logLevel: "debug",
+                          sendLogLevelRequest: async () => {
+                          },
+                          loggingSupported: false,
+                          hideActionButtons: true
+                        }
+                      ) })
+                    ] })
                   ] })
+                ]
+              },
+              client2.id
+            )),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "border-2 border-dashed border-border/50 hover:border-border transition-colors", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Button,
+              {
+                variant: "ghost",
+                onClick: handleAddClient,
+                className: "w-full h-16 text-muted-foreground hover:text-foreground",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "h-5 w-5 mr-2" }),
+                  "Add Another Client"
+                ]
+              }
+            ) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sticky bottom-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-t pt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: multipleClients.some((c) => !c.name.trim()) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-amber-600", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Some clients need names" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: onCancel, children: "Cancel" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                Button,
+                {
+                  onClick: handleSave,
+                  disabled: multipleClients.filter((c) => c.name.trim()).length === 0,
+                  className: "min-w-[200px]",
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "h-4 w-4 mr-2" }),
+                    isCreating ? "Create" : "Update",
+                    " ",
+                    multipleClients.filter((c) => c.name.trim()).length,
+                    " ",
+                    "Connection(s)"
+                  ]
+                }
+              )
+            ] })
+          ] }) })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: scrollContainerRef,
+      className: "flex-1 flex flex-col overflow-auto bg-gradient-to-br from-background to-muted/20",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-5xl mx-auto w-full p-6 space-y-8", children: [
+        isCreating && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "border-2 border-primary/20 bg-gradient-to-r from-primary/5 to-primary/10", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-primary/10 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "h-5 w-5 text-primary" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-lg", children: "Quick Import" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "secondary", className: "ml-auto", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "h-3 w-3 mr-1" }),
+              "Recommended"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground mb-4", children: "Supports the same format used by Claude Desktop and Cursor." }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Button,
+              {
+                onClick: () => setShowImportDialog(true),
+                className: "w-full sm:w-auto",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "w-4 h-4 mr-2" }),
+                  "Import from Configuration File"
+                ]
+              }
+            )
+          ] })
+        ] }),
+        isCreating && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, { className: "w-16" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-muted-foreground", children: "or" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, { className: "w-16" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "border-2 border-border/50", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CardHeader,
+            {
+              className: "cursor-pointer",
+              onClick: () => setIsManualConfigExpanded(!isManualConfigExpanded),
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-muted rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Settings, { className: "h-5 w-5 text-muted-foreground" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-lg", children: isCreating ? "Manual Setup" : `Edit: ${editingClientName}` }) })
                 ] }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button,
                   {
                     variant: "ghost",
                     size: "sm",
-                    onClick: () => handleRemoveClient(client2.id),
-                    className: "h-8 w-8 p-0 text-muted-foreground hover:text-destructive",
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(X$1, { className: "h-4 w-4" })
+                    className: "h-8 w-8 p-0",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setIsManualConfigExpanded(!isManualConfigExpanded);
+                    },
+                    children: isManualConfigExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-4 w-4" })
                   }
                 )
-              ] }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-6", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    Label,
-                    {
-                      htmlFor: `client-name-${client2.id}`,
-                      className: "text-sm font-medium",
-                      children: "Client Name"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    Input,
+              ] })
+            }
+          ),
+          isManualConfigExpanded && /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "client-name", className: "text-sm font-medium", children: "Name*" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Input,
+                {
+                  id: "client-name",
+                  value: currentClient.name,
+                  onChange: (e) => handleUpdateCurrentClient({ name: e.target.value }),
+                  onBlur: () => setIsNameTouched(true),
+                  placeholder: "Enter client name",
+                  className: `max-w-md ${nameError ? "border-red-500 focus:border-red-500 focus:ring-red-500" : ""}`
+                }
+              ),
+              nameError && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-red-500 flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4 cursor-help" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    TooltipContent,
                     {
-                      id: `client-name-${client2.id}`,
-                      value: client2.name,
-                      onChange: (e) => handleUpdateClient(client2.id, { name: e.target.value }),
-                      placeholder: "Enter a descriptive name for this client",
-                      className: "max-w-md"
+                      side: "top",
+                      className: "max-w-sm p-2 text-xs leading-relaxed",
+                      children: [
+                        "A client name is required to help you identify and manage your MCP connections.",
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                        "It ensures clarity when debugging or switching between multiple clients. Leaving it blank makes the connection untraceable within the tool."
+                      ]
                     }
                   )
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(Settings, { className: "h-4 w-4 text-muted-foreground" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm font-medium", children: "Connection Settings" })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border/50 rounded-lg p-4 bg-muted/30", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    ConnectionSection,
-                    {
-                      connectionStatus: "disconnected",
-                      transportType: client2.config.transportType,
-                      setTransportType: (type2) => {
-                        let newConfig;
-                        let newArgsString = "";
-                        if (type2 === "stdio") {
-                          newConfig = {
-                            transportType: type2,
-                            command: "npx",
-                            args: ["@modelcontextprotocol/server-everything"],
-                            env: {}
-                          };
-                          newArgsString = "@modelcontextprotocol/server-everything";
-                        } else {
-                          newConfig = {
-                            transportType: type2,
-                            url: new URL("https://example.com")
-                          };
-                        }
-                        handleUpdateClient(client2.id, {
-                          config: newConfig,
-                          argsString: newArgsString,
-                          sseUrlString: newConfig.transportType !== "stdio" && "url" in newConfig && newConfig.url ? newConfig.url.toString() : ""
-                        });
-                      },
-                      command: client2.config.transportType === "stdio" && "command" in client2.config ? client2.config.command || "" : "",
-                      setCommand: (command) => {
-                        if (client2.config.transportType === "stdio") {
-                          handleUpdateClient(client2.id, {
-                            config: {
-                              ...client2.config,
-                              command
-                            }
-                          });
-                        }
-                      },
-                      args: client2.argsString,
-                      setArgs: (newArgsString) => {
-                        if (client2.config.transportType === "stdio") {
-                          handleUpdateClient(client2.id, {
-                            argsString: newArgsString,
-                            config: {
-                              ...client2.config,
-                              args: newArgsString.trim() ? newArgsString.split(/\s+/) : []
-                            }
-                          });
+                ] }) }),
+                nameError
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm font-medium", children: "Connection" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border/50 rounded-lg p-4 bg-muted/30", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                ConnectionSection,
+                {
+                  connectionStatus: "disconnected",
+                  transportType: currentClient.config.transportType,
+                  setTransportType: (type2) => {
+                    const newConfig = type2 === "stdio" ? createDefaultStdioConfig() : createDefaultHttpConfig(type2);
+                    handleUpdateCurrentClient({ config: newConfig });
+                  },
+                  command: isStdioConfig(currentClient.config) ? currentClient.config.command || "" : "",
+                  setCommand: (command) => {
+                    if (isStdioConfig(currentClient.config)) {
+                      handleUpdateCurrentClient({
+                        config: {
+                          ...currentClient.config,
+                          command
                         }
-                      },
-                      sseUrl: client2.sseUrlString,
-                      setSseUrl: (url) => {
-                        handleUpdateClient(client2.id, { sseUrlString: url });
-                      },
-                      env: client2.config.transportType === "stdio" && "env" in client2.config ? client2.config.env || {} : {},
-                      setEnv: (env) => {
-                        if (client2.config.transportType === "stdio") {
-                          handleUpdateClient(client2.id, {
-                            config: {
-                              ...client2.config,
-                              env
-                            }
-                          });
+                      });
+                    }
+                  },
+                  args: configToDisplayStrings(currentClient.config).argsString,
+                  setArgs: handleArgsChange,
+                  sseUrl: configToDisplayStrings(currentClient.config).urlString,
+                  setSseUrl: handleSseUrlChange,
+                  env: isStdioConfig(currentClient.config) ? currentClient.config.env || {} : {},
+                  setEnv: (env) => {
+                    if (isStdioConfig(currentClient.config)) {
+                      handleUpdateCurrentClient({
+                        config: {
+                          ...currentClient.config,
+                          env
                         }
-                      },
-                      config,
-                      setConfig,
-                      bearerToken,
-                      setBearerToken,
-                      headerName,
-                      setHeaderName,
-                      onConnect: () => {
-                      },
-                      onDisconnect: () => {
-                      },
-                      stdErrNotifications: [],
-                      clearStdErrNotifications: () => {
-                      },
-                      logLevel: "debug",
-                      sendLogLevelRequest: async () => {
-                      },
-                      loggingSupported: false,
-                      hideActionButtons: true
+                      });
                     }
-                  ) })
-                ] })
-              ] })
-            ]
-          },
-          client2.id
-        )),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "border-2 border-dashed border-border/50 hover:border-border transition-colors", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Button,
-          {
-            variant: "ghost",
-            onClick: handleAddClient,
-            className: "w-full h-16 text-muted-foreground hover:text-foreground",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "h-5 w-5 mr-2" }),
-              "Add Another Client"
-            ]
-          }
-        ) }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sticky bottom-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-t pt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: multipleClients.some((c) => !c.name.trim()) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-amber-600", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Some clients need names" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: onCancel, children: "Cancel" }),
+                  },
+                  config,
+                  setConfig,
+                  bearerToken,
+                  setBearerToken,
+                  headerName,
+                  setHeaderName,
+                  onConnect: () => {
+                  },
+                  onDisconnect: () => {
+                  },
+                  stdErrNotifications: [],
+                  clearStdErrNotifications: () => {
+                  },
+                  logLevel: "debug",
+                  sendLogLevelRequest: async () => {
+                  },
+                  loggingSupported: false,
+                  hideActionButtons: true
+                }
+              ) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-3 pt-4", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             Button,
             {
-              onClick: handleSaveAll,
-              disabled: multipleClients.filter((c) => c.name.trim()).length === 0,
-              className: "min-w-[200px]",
+              onClick: handleSave,
+              disabled: !currentClient.name.trim(),
+              className: "min-w-[180px] h-12 text-base font-semibold bg-primary hover:bg-primary/90 shadow-lg hover:shadow-xl transition-all duration-200 border-2 border-primary/20",
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "h-4 w-4 mr-2" }),
-                "Create ",
-                multipleClients.filter((c) => c.name.trim()).length,
-                " ",
-                "Connection(s)"
+                /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheck, { className: "h-5 w-5 mr-2" }),
+                isCreating ? "Create Connection" : "Update Connection"
               ]
             }
-          )
-        ] })
-      ] }) })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col overflow-auto bg-gradient-to-br from-background to-muted/20", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-5xl mx-auto w-full p-6 space-y-8", children: [
-    isCreating && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "border-2 border-primary/20 bg-gradient-to-r from-primary/5 to-primary/10", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-primary/10 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "h-5 w-5 text-primary" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-lg", children: "Quick Import" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "secondary", className: "ml-auto", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "h-3 w-3 mr-1" }),
-          "Recommended"
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground mb-4", children: "Supports the same format used by Claude Desktop and Cursor." }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Button,
-          {
-            onClick: () => setShowImportDialog(true),
-            className: "w-full sm:w-auto",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "w-4 h-4 mr-2" }),
-              "Import from Configuration File"
-            ]
-          }
-        )
-      ] })
-    ] }),
-    isCreating && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, { className: "w-16" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-muted-foreground", children: "or" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, { className: "w-16" })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "border-2 border-border/50", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        CardHeader,
-        {
-          className: "cursor-pointer",
-          onClick: () => setIsManualConfigExpanded(!isManualConfigExpanded),
-          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-muted rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Settings, { className: "h-5 w-5 text-muted-foreground" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-lg", children: isCreating ? "Manual Setup" : `Edit: ${editingClientName}` }) })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "sm",
-                className: "h-8 w-8 p-0",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  setIsManualConfigExpanded(!isManualConfigExpanded);
-                },
-                children: isManualConfigExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-4 w-4" })
-              }
-            )
-          ] })
-        }
-      ),
-      isManualConfigExpanded && /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-6", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "client-name", className: "text-sm font-medium", children: "Name*" }),
+          ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Input,
+            "button",
             {
-              id: "client-name",
-              value: clientFormName,
-              onChange: (e) => setClientFormName(e.target.value),
-              onBlur: () => setIsNameTouched(true),
-              placeholder: "Enter client name",
-              className: `max-w-md ${nameError ? "border-red-500 focus:border-red-500 focus:ring-red-500" : ""}`
+              onClick: onCancel,
+              className: "text-sm text-muted-foreground hover:text-foreground transition-colors underline-offset-4 hover:underline",
+              children: "Cancel"
             }
-          ),
-          nameError && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-red-500 flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-3 w-3" }),
-            nameError
-          ] })
+          )
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm font-medium", children: "Connection" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border/50 rounded-lg p-4 bg-muted/30", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ConnectionSection,
-            {
-              connectionStatus: "disconnected",
-              transportType: clientFormConfig.transportType,
-              setTransportType: (type2) => {
-                if (type2 === "stdio") {
-                  const newConfig = {
-                    transportType: type2,
-                    command: "npx",
-                    args: ["@modelcontextprotocol/server-everything"],
-                    env: {}
-                  };
-                  setClientFormConfig(newConfig);
-                  setArgsString(
-                    "@modelcontextprotocol/server-everything"
-                  );
-                } else {
-                  setClientFormConfig({
-                    transportType: type2,
-                    url: new URL("https://example.com")
-                  });
-                  setArgsString("");
-                }
-              },
-              command: clientFormConfig.transportType === "stdio" && "command" in clientFormConfig ? clientFormConfig.command || "" : "",
-              setCommand: (command) => {
-                if (clientFormConfig.transportType === "stdio") {
-                  setClientFormConfig({
-                    ...clientFormConfig,
-                    command
-                  });
-                }
-              },
-              args: argsString,
-              setArgs: handleArgsChange,
-              sseUrl: sseUrlString,
-              setSseUrl: handleSseUrlChange,
-              env: clientFormConfig.transportType === "stdio" && "env" in clientFormConfig ? clientFormConfig.env || {} : {},
-              setEnv: (env) => {
-                if (clientFormConfig.transportType === "stdio") {
-                  setClientFormConfig({
-                    ...clientFormConfig,
-                    env
-                  });
-                }
-              },
-              config,
-              setConfig,
-              bearerToken,
-              setBearerToken,
-              headerName,
-              setHeaderName,
-              onConnect: () => {
-              },
-              onDisconnect: () => {
-              },
-              stdErrNotifications: [],
-              clearStdErrNotifications: () => {
-              },
-              logLevel: "debug",
-              sendLogLevelRequest: async () => {
-              },
-              loggingSupported: false,
-              hideActionButtons: true
-            }
-          ) })
-        ] })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ConfigImportDialog,
+          {
+            open: showImportDialog,
+            onOpenChange: setShowImportDialog,
+            onImportServers: handleImportServers
+          }
+        )
       ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-3 pt-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Button,
-        {
-          onClick: handleSingleSave,
-          disabled: !clientFormName.trim(),
-          className: "min-w-[180px] h-12 text-base font-semibold bg-primary hover:bg-primary/90 shadow-lg hover:shadow-xl transition-all duration-200 border-2 border-primary/20",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheck, { className: "h-5 w-5 mr-2" }),
-            isCreating ? "Create Connection" : "Update Connection"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          onClick: onCancel,
-          className: "text-sm text-muted-foreground hover:text-foreground transition-colors underline-offset-4 hover:underline",
-          children: "Cancel"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ConfigImportDialog,
-      {
-        open: showImportDialog,
-        onOpenChange: setShowImportDialog,
-        onImportServers: handleImportServers
-      }
-    )
-  ] }) });
+    }
+  );
 };
 const StarGitHubModal = ({
   isOpen,
@@ -37328,6 +37480,7 @@ objectType({
 const SESSION_KEYS = {
   CODE_VERIFIER: "mcp_code_verifier",
   SERVER_URL: "mcp_server_url",
+  TRANSPORT_TYPE: "mcp_transport_type",
   TOKENS: "mcp_tokens",
   CLIENT_INFORMATION: "mcp_client_information",
   SERVER_METADATA: "mcp_server_metadata"
@@ -37360,9 +37513,17 @@ const DEFAULT_INSPECTOR_CONFIG = {
   }
 };
 class InspectorOAuthClientProvider {
-  constructor(serverUrl) {
+  constructor(serverUrl, transportType) {
     this.serverUrl = serverUrl;
+    this.transportType = transportType;
     sessionStorage.setItem(SESSION_KEYS.SERVER_URL, serverUrl);
+    if (transportType) {
+      const transportKey = getServerSpecificKey(
+        SESSION_KEYS.TRANSPORT_TYPE,
+        serverUrl
+      );
+      sessionStorage.setItem(transportKey, transportType);
+    }
   }
   get redirectUrl() {
     return window.location.origin + "/oauth/callback";
@@ -37438,6 +37599,9 @@ class InspectorOAuthClientProvider {
     sessionStorage.removeItem(
       getServerSpecificKey(SESSION_KEYS.CODE_VERIFIER, this.serverUrl)
     );
+    sessionStorage.removeItem(
+      getServerSpecificKey(SESSION_KEYS.TRANSPORT_TYPE, this.serverUrl)
+    );
   }
 }
 class DebugInspectorOAuthClientProvider extends InspectorOAuthClientProvider {
@@ -43492,6 +43656,12 @@ const ToolCallMessage = ({
   toolCall
 }) => {
   const { type: type2, toolName, args, error, message, result } = toolCall;
+  const [isCollapsed, setIsCollapsed] = reactExports.useState(true);
+  const shouldBeCollapsible = reactExports.useMemo(() => {
+    if (type2 !== "tool_result" || !result) return false;
+    return result.length > 200;
+  }, [result, type2]);
+  const toggleCollapse = () => setIsCollapsed((prev) => !prev);
   const getIcon = () => {
     switch (type2) {
       case "tool_call":
@@ -43555,9 +43725,10 @@ const ToolCallMessage = ({
           /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs bg-black/10 dark:bg-white/10 rounded p-2 overflow-x-auto whitespace-pre-wrap", children: error })
         ] }),
         type2 === "tool_warning" && message && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs bg-black/10 dark:bg-white/10 rounded p-2", children: message }) }),
-        type2 === "tool_result" && result && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2", children: [
+        type2 === "tool_result" && result && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 relative", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs opacity-75 mb-1", children: "Result:" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs bg-black/10 dark:bg-white/10 rounded p-2 overflow-x-auto whitespace-pre-wrap", children: result })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs bg-black/10 dark:bg-white/10 rounded p-2 overflow-x-auto whitespace-pre-wrap", children: shouldBeCollapsible && isCollapsed ? result.slice(0, 200) + "..." : result }),
+          shouldBeCollapsible && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center mt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: toggleCollapse, className: "p-1", children: isCollapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }) })
         ] })
       ]
     }
@@ -43895,11 +44066,15 @@ const ToolSelector = ({
   loading = false
 }) => {
   const [showSelector, setShowSelector] = reactExports.useState(false);
+  const [expandedServers, setExpandedServers] = reactExports.useState(
+    /* @__PURE__ */ new Set()
+  );
   const selectorRef = reactExports.useRef(null);
-  const totalTools = tools.length;
+  const availableTools = serverInfo.filter((server) => toolSelection.enabledServers.has(server.name)).flatMap((server) => server.tools);
+  const totalAvailableTools = availableTools.length;
   const enabledToolCount = toolSelection.enabledTools.size;
-  const allToolsEnabled = enabledToolCount === totalTools;
-  const someToolsDisabled = enabledToolCount < totalTools;
+  const allAvailableToolsEnabled = enabledToolCount === totalAvailableTools && totalAvailableTools > 0;
+  const someToolsDisabled = enabledToolCount < totalAvailableTools;
   const toggleServer = (serverName, enabled) => {
     var _a2;
     const newEnabledServers = new Set(toolSelection.enabledServers);
@@ -43930,6 +44105,17 @@ const ToolSelector = ({
       enabledServers: toolSelection.enabledServers
     });
   };
+  const toggleExpandedServer = (serverName) => {
+    setExpandedServers((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(serverName)) {
+        newSet.delete(serverName);
+      } else {
+        newSet.add(serverName);
+      }
+      return newSet;
+    });
+  };
   const toggleAllServers = (enabled) => {
     const newEnabledServers = new Set(serverInfo.map((s) => s.name));
     const newEnabledTools = new Set(tools.map((t) => t.name));
@@ -43965,7 +44151,7 @@ const ToolSelector = ({
           someToolsDisabled && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs px-1.5 py-0.5 bg-amber-100 dark:bg-amber-900/50 text-amber-600 dark:text-amber-400 rounded", children: [
             enabledToolCount,
             "/",
-            totalTools
+            totalAvailableTools
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-3 h-3 text-slate-400" })
         ]
@@ -43979,7 +44165,7 @@ const ToolSelector = ({
           {
             onClick: () => toggleAllServers(),
             className: "text-xs px-2 py-1 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 rounded text-slate-600 dark:text-slate-300",
-            disabled: allToolsEnabled,
+            disabled: allAvailableToolsEnabled,
             children: "All"
           }
         ) })
@@ -43988,44 +44174,55 @@ const ToolSelector = ({
         const serverEnabled = toolSelection.enabledServers.has(
           server.name
         );
+        const serverExpanded = expandedServers.has(server.name);
         const serverTools = server.tools;
         const enabledServerToolCount = serverTools.filter(
           (tool) => toolSelection.enabledTools.has(tool.name)
         ).length;
         const allServerToolsEnabled = enabledServerToolCount === serverTools.length;
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-2 hover:bg-slate-50 dark:hover:bg-slate-800/50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-3 cursor-pointer", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: serverEnabled,
-                  onChange: (e) => toggleServer(server.name, e.target.checked),
-                  className: "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                }
-              ),
-              serverEnabled && allServerToolsEnabled && /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-3 h-3 text-blue-600 absolute top-0.5 left-0.5 pointer-events-none" })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium text-slate-900 dark:text-slate-100", children: server.name }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
-                enabledServerToolCount,
-                "/",
-                serverTools.length,
-                " tools"
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-3 pl-4 pr-12 py-2 min-w-0 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: serverEnabled,
+                    onChange: (e) => toggleServer(server.name, e.target.checked),
+                    className: "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                  }
+                ),
+                serverEnabled && allServerToolsEnabled && /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-3 h-3 text-blue-600 absolute top-0.5 left-0.5 pointer-events-none" })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium break-words text-slate-900 dark:text-slate-100", children: server.name }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
+                  enabledServerToolCount,
+                  "/",
+                  serverTools.length,
+                  " tools"
+                ] })
               ] })
-            ] })
-          ] }) }),
-          serverEnabled && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-8 space-y-1", children: serverTools.map((tool) => {
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                onClick: () => toggleExpandedServer(server.name),
+                className: "absolute top-1/2 right-3 -translate-y-1/2 text-xs p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded text-slate-600 dark:text-slate-300",
+                children: serverExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-3 h-3 text-slate-400" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "w-3 h-3 text-slate-400" })
+              }
+            )
+          ] }),
+          serverExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1", children: serverTools.map((tool) => {
             const toolEnabled = toolSelection.enabledTools.has(
               tool.name
             );
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
-                className: "px-4 py-1.5 hover:bg-slate-50 dark:hover:bg-slate-800/50",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-3 cursor-pointer", children: [
+                className: "hover:bg-slate-50 dark:hover:bg-slate-800/50",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "pl-12 pr-4 py-1.5 flex items-center gap-3 cursor-pointer", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "input",
                     {
@@ -44055,6 +44252,365 @@ const ToolSelector = ({
     ] })
   ] });
 };
+function commonjsRequire(path2) {
+  throw new Error('Could not dynamically require "' + path2 + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
+}
+var pluralize$2 = { exports: {} };
+var pluralize$1 = pluralize$2.exports;
+var hasRequiredPluralize;
+function requirePluralize() {
+  if (hasRequiredPluralize) return pluralize$2.exports;
+  hasRequiredPluralize = 1;
+  (function(module, exports) {
+    (function(root, pluralize2) {
+      if (typeof commonjsRequire === "function" && true && true) {
+        module.exports = pluralize2();
+      } else {
+        root.pluralize = pluralize2();
+      }
+    })(pluralize$1, function() {
+      var pluralRules = [];
+      var singularRules = [];
+      var uncountables = {};
+      var irregularPlurals = {};
+      var irregularSingles = {};
+      function sanitizeRule(rule) {
+        if (typeof rule === "string") {
+          return new RegExp("^" + rule + "$", "i");
+        }
+        return rule;
+      }
+      function restoreCase(word, token) {
+        if (word === token) return token;
+        if (word === word.toLowerCase()) return token.toLowerCase();
+        if (word === word.toUpperCase()) return token.toUpperCase();
+        if (word[0] === word[0].toUpperCase()) {
+          return token.charAt(0).toUpperCase() + token.substr(1).toLowerCase();
+        }
+        return token.toLowerCase();
+      }
+      function interpolate(str2, args) {
+        return str2.replace(/\$(\d{1,2})/g, function(match, index2) {
+          return args[index2] || "";
+        });
+      }
+      function replace(word, rule) {
+        return word.replace(rule[0], function(match, index2) {
+          var result = interpolate(rule[1], arguments);
+          if (match === "") {
+            return restoreCase(word[index2 - 1], result);
+          }
+          return restoreCase(match, result);
+        });
+      }
+      function sanitizeWord(token, word, rules2) {
+        if (!token.length || uncountables.hasOwnProperty(token)) {
+          return word;
+        }
+        var len = rules2.length;
+        while (len--) {
+          var rule = rules2[len];
+          if (rule[0].test(word)) return replace(word, rule);
+        }
+        return word;
+      }
+      function replaceWord(replaceMap, keepMap, rules2) {
+        return function(word) {
+          var token = word.toLowerCase();
+          if (keepMap.hasOwnProperty(token)) {
+            return restoreCase(word, token);
+          }
+          if (replaceMap.hasOwnProperty(token)) {
+            return restoreCase(word, replaceMap[token]);
+          }
+          return sanitizeWord(token, word, rules2);
+        };
+      }
+      function checkWord(replaceMap, keepMap, rules2, bool) {
+        return function(word) {
+          var token = word.toLowerCase();
+          if (keepMap.hasOwnProperty(token)) return true;
+          if (replaceMap.hasOwnProperty(token)) return false;
+          return sanitizeWord(token, token, rules2) === token;
+        };
+      }
+      function pluralize2(word, count2, inclusive) {
+        var pluralized = count2 === 1 ? pluralize2.singular(word) : pluralize2.plural(word);
+        return (inclusive ? count2 + " " : "") + pluralized;
+      }
+      pluralize2.plural = replaceWord(
+        irregularSingles,
+        irregularPlurals,
+        pluralRules
+      );
+      pluralize2.isPlural = checkWord(
+        irregularSingles,
+        irregularPlurals,
+        pluralRules
+      );
+      pluralize2.singular = replaceWord(
+        irregularPlurals,
+        irregularSingles,
+        singularRules
+      );
+      pluralize2.isSingular = checkWord(
+        irregularPlurals,
+        irregularSingles,
+        singularRules
+      );
+      pluralize2.addPluralRule = function(rule, replacement) {
+        pluralRules.push([sanitizeRule(rule), replacement]);
+      };
+      pluralize2.addSingularRule = function(rule, replacement) {
+        singularRules.push([sanitizeRule(rule), replacement]);
+      };
+      pluralize2.addUncountableRule = function(word) {
+        if (typeof word === "string") {
+          uncountables[word.toLowerCase()] = true;
+          return;
+        }
+        pluralize2.addPluralRule(word, "$0");
+        pluralize2.addSingularRule(word, "$0");
+      };
+      pluralize2.addIrregularRule = function(single, plural) {
+        plural = plural.toLowerCase();
+        single = single.toLowerCase();
+        irregularSingles[single] = plural;
+        irregularPlurals[plural] = single;
+      };
+      [
+        // Pronouns.
+        ["I", "we"],
+        ["me", "us"],
+        ["he", "they"],
+        ["she", "they"],
+        ["them", "them"],
+        ["myself", "ourselves"],
+        ["yourself", "yourselves"],
+        ["itself", "themselves"],
+        ["herself", "themselves"],
+        ["himself", "themselves"],
+        ["themself", "themselves"],
+        ["is", "are"],
+        ["was", "were"],
+        ["has", "have"],
+        ["this", "these"],
+        ["that", "those"],
+        // Words ending in with a consonant and `o`.
+        ["echo", "echoes"],
+        ["dingo", "dingoes"],
+        ["volcano", "volcanoes"],
+        ["tornado", "tornadoes"],
+        ["torpedo", "torpedoes"],
+        // Ends with `us`.
+        ["genus", "genera"],
+        ["viscus", "viscera"],
+        // Ends with `ma`.
+        ["stigma", "stigmata"],
+        ["stoma", "stomata"],
+        ["dogma", "dogmata"],
+        ["lemma", "lemmata"],
+        ["schema", "schemata"],
+        ["anathema", "anathemata"],
+        // Other irregular rules.
+        ["ox", "oxen"],
+        ["axe", "axes"],
+        ["die", "dice"],
+        ["yes", "yeses"],
+        ["foot", "feet"],
+        ["eave", "eaves"],
+        ["goose", "geese"],
+        ["tooth", "teeth"],
+        ["quiz", "quizzes"],
+        ["human", "humans"],
+        ["proof", "proofs"],
+        ["carve", "carves"],
+        ["valve", "valves"],
+        ["looey", "looies"],
+        ["thief", "thieves"],
+        ["groove", "grooves"],
+        ["pickaxe", "pickaxes"],
+        ["passerby", "passersby"]
+      ].forEach(function(rule) {
+        return pluralize2.addIrregularRule(rule[0], rule[1]);
+      });
+      [
+        [/s?$/i, "s"],
+        [/[^\u0000-\u007F]$/i, "$0"],
+        [/([^aeiou]ese)$/i, "$1"],
+        [/(ax|test)is$/i, "$1es"],
+        [/(alias|[^aou]us|t[lm]as|gas|ris)$/i, "$1es"],
+        [/(e[mn]u)s?$/i, "$1s"],
+        [/([^l]ias|[aeiou]las|[ejzr]as|[iu]am)$/i, "$1"],
+        [/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, "$1i"],
+        [/(alumn|alg|vertebr)(?:a|ae)$/i, "$1ae"],
+        [/(seraph|cherub)(?:im)?$/i, "$1im"],
+        [/(her|at|gr)o$/i, "$1oes"],
+        [/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|automat|quor)(?:a|um)$/i, "$1a"],
+        [/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)(?:a|on)$/i, "$1a"],
+        [/sis$/i, "ses"],
+        [/(?:(kni|wi|li)fe|(ar|l|ea|eo|oa|hoo)f)$/i, "$1$2ves"],
+        [/([^aeiouy]|qu)y$/i, "$1ies"],
+        [/([^ch][ieo][ln])ey$/i, "$1ies"],
+        [/(x|ch|ss|sh|zz)$/i, "$1es"],
+        [/(matr|cod|mur|sil|vert|ind|append)(?:ix|ex)$/i, "$1ices"],
+        [/\b((?:tit)?m|l)(?:ice|ouse)$/i, "$1ice"],
+        [/(pe)(?:rson|ople)$/i, "$1ople"],
+        [/(child)(?:ren)?$/i, "$1ren"],
+        [/eaux$/i, "$0"],
+        [/m[ae]n$/i, "men"],
+        ["thou", "you"]
+      ].forEach(function(rule) {
+        return pluralize2.addPluralRule(rule[0], rule[1]);
+      });
+      [
+        [/s$/i, ""],
+        [/(ss)$/i, "$1"],
+        [/(wi|kni|(?:after|half|high|low|mid|non|night|[^\w]|^)li)ves$/i, "$1fe"],
+        [/(ar|(?:wo|[ae])l|[eo][ao])ves$/i, "$1f"],
+        [/ies$/i, "y"],
+        [/\b([pl]|zomb|(?:neck|cross)?t|coll|faer|food|gen|goon|group|lass|talk|goal|cut)ies$/i, "$1ie"],
+        [/\b(mon|smil)ies$/i, "$1ey"],
+        [/\b((?:tit)?m|l)ice$/i, "$1ouse"],
+        [/(seraph|cherub)im$/i, "$1"],
+        [/(x|ch|ss|sh|zz|tto|go|cho|alias|[^aou]us|t[lm]as|gas|(?:her|at|gr)o|[aeiou]ris)(?:es)?$/i, "$1"],
+        [/(analy|diagno|parenthe|progno|synop|the|empha|cri|ne)(?:sis|ses)$/i, "$1sis"],
+        [/(movie|twelve|abuse|e[mn]u)s$/i, "$1"],
+        [/(test)(?:is|es)$/i, "$1is"],
+        [/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, "$1us"],
+        [/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|quor)a$/i, "$1um"],
+        [/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)a$/i, "$1on"],
+        [/(alumn|alg|vertebr)ae$/i, "$1a"],
+        [/(cod|mur|sil|vert|ind)ices$/i, "$1ex"],
+        [/(matr|append)ices$/i, "$1ix"],
+        [/(pe)(rson|ople)$/i, "$1rson"],
+        [/(child)ren$/i, "$1"],
+        [/(eau)x?$/i, "$1"],
+        [/men$/i, "man"]
+      ].forEach(function(rule) {
+        return pluralize2.addSingularRule(rule[0], rule[1]);
+      });
+      [
+        // Singular words with no plurals.
+        "adulthood",
+        "advice",
+        "agenda",
+        "aid",
+        "aircraft",
+        "alcohol",
+        "ammo",
+        "analytics",
+        "anime",
+        "athletics",
+        "audio",
+        "bison",
+        "blood",
+        "bream",
+        "buffalo",
+        "butter",
+        "carp",
+        "cash",
+        "chassis",
+        "chess",
+        "clothing",
+        "cod",
+        "commerce",
+        "cooperation",
+        "corps",
+        "debris",
+        "diabetes",
+        "digestion",
+        "elk",
+        "energy",
+        "equipment",
+        "excretion",
+        "expertise",
+        "firmware",
+        "flounder",
+        "fun",
+        "gallows",
+        "garbage",
+        "graffiti",
+        "hardware",
+        "headquarters",
+        "health",
+        "herpes",
+        "highjinks",
+        "homework",
+        "housework",
+        "information",
+        "jeans",
+        "justice",
+        "kudos",
+        "labour",
+        "literature",
+        "machinery",
+        "mackerel",
+        "mail",
+        "media",
+        "mews",
+        "moose",
+        "music",
+        "mud",
+        "manga",
+        "news",
+        "only",
+        "personnel",
+        "pike",
+        "plankton",
+        "pliers",
+        "police",
+        "pollution",
+        "premises",
+        "rain",
+        "research",
+        "rice",
+        "salmon",
+        "scissors",
+        "series",
+        "sewage",
+        "shambles",
+        "shrimp",
+        "software",
+        "species",
+        "staff",
+        "swine",
+        "tennis",
+        "traffic",
+        "transportation",
+        "trout",
+        "tuna",
+        "wealth",
+        "welfare",
+        "whiting",
+        "wildebeest",
+        "wildlife",
+        "you",
+        /pok[eé]mon$/i,
+        // Regexes.
+        /[^aeiou]ese$/i,
+        // "chinese", "japanese"
+        /deer$/i,
+        // "deer", "reindeer"
+        /fish$/i,
+        // "fish", "blowfish", "angelfish"
+        /measles$/i,
+        /o[iu]s$/i,
+        // "carnivorous"
+        /pox$/i,
+        // "chickpox", "smallpox"
+        /sheep$/i
+      ].forEach(pluralize2.addUncountableRule);
+      return pluralize2;
+    });
+  })(pluralize$2);
+  return pluralize$2.exports;
+}
+var pluralizeExports = requirePluralize();
+const pluralize = /* @__PURE__ */ getDefaultExportFromCjs(pluralizeExports);
+function formatPlural(count2, word) {
+  return `${count2} ${pluralize(word, count2)}`;
+}
 const Chat2 = ({
   provider,
   config,
@@ -44407,7 +44963,7 @@ const Chat2 = ({
         ) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-base font-semibold text-slate-900 dark:text-slate-100", children: config.title }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: hasApiKey ? `${serversCount} servers • ${toolSelection.enabledTools.size}/${toolsCount} tools` : "API key required" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: hasApiKey ? `${formatPlural(serversCount, "server")} • ${toolSelection.enabledTools.size}/${formatPlural(toolsCount, "tool")}` : "API key required" })
         ] })
       ] }),
       hasApiKey && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -44605,7 +45161,7 @@ const Chat2 = ({
 };
 const ChatTab = ({ mcpAgent, updateTrigger }) => {
   const config = createChatConfig({
-    subtitle: "Chat with access to tools from all connected servers",
+    subtitle: "LLM Playground with access to tools from all connected servers",
     additionalSuggestions: ["What tools do you have access to?"]
   });
   const getServersCount = () => {
@@ -44635,245 +45191,167 @@ const ChatTab = ({ mcpAgent, updateTrigger }) => {
     }
   );
 };
-const ProviderSection = ({
-  providerName,
+const ProviderCard = ({
+  provider,
   config,
-  keyData,
-  isCollapsed,
+  data: data2,
   disabled = false,
-  onApiKeyChange,
-  onClearApiKey,
-  onToggleShowKey,
-  onToggleCollapse
+  onChange,
+  onClear,
+  onToggleShow
 }) => {
-  console.log("providerName", providerName);
-  console.log("keyData", keyData);
-  const renderCollapsedView = () => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        className: "p-3 bg-green-50/80 dark:bg-green-900/20 backdrop-blur-sm rounded-lg border border-green-200/60 dark:border-green-700/60 shadow-sm",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Key, { className: "w-4 h-4 text-green-600 dark:text-green-400" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheckBig, { className: "w-4 h-4 text-green-600 dark:text-green-400" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm font-medium text-green-700 dark:text-green-300", children: [
-              config.displayName,
-              " API Key Configured"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            Button,
-            {
-              variant: "ghost",
-              size: "sm",
-              onClick: () => onToggleCollapse(providerName),
-              disabled,
-              className: "h-7 px-2 text-green-700 dark:text-green-300 hover:bg-green-100/50 dark:hover:bg-green-800/30",
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-1 text-xs", children: "Manage" })
-              ]
-            }
-          ) })
-        ] })
-      },
-      providerName
-    );
-  };
-  const renderExpandedView = () => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: "p-4 bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-xl border border-slate-200/60 dark:border-slate-700/60 shadow-lg",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Key, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-slate-800 dark:text-slate-200", children: config.displayName }),
-            keyData.isValid && /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheckBig, { className: "w-5 h-5 text-green-600 dark:text-green-400" }),
-            keyData.key.length > 0 && !keyData.isValid && /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "w-5 h-5 text-red-600 dark:text-red-400" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-slate-600 dark:text-slate-400 mb-4", children: config.description }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 relative", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Input,
-                  {
-                    type: keyData.showKey ? "text" : "password",
-                    placeholder: config.placeholder,
-                    value: keyData.key,
-                    onChange: (e) => onApiKeyChange(providerName, e.target.value),
-                    disabled,
-                    className: `font-mono pr-10 ${keyData.key.length > 0 ? keyData.isValid ? "border-green-500 dark:border-green-400" : "border-red-500 dark:border-red-400" : ""}`
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    size: "icon",
-                    className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-8 w-8",
-                    onClick: () => onToggleShowKey(providerName),
-                    disabled,
-                    children: keyData.showKey ? /* @__PURE__ */ jsxRuntimeExports.jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "h-4 w-4" })
-                  }
-                )
-              ] }),
-              keyData.key.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Button,
-                {
-                  variant: "outline",
-                  onClick: () => onClearApiKey(providerName),
-                  disabled,
-                  className: "bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-red-400/60 dark:hover:border-red-500/60 hover:bg-red-50/80 dark:hover:bg-red-900/20",
-                  children: "Clear"
-                }
-              )
-            ] }),
-            keyData.key.length > 0 && !keyData.isValid && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-red-600 dark:text-red-400", children: [
-              "Please enter a valid ",
-              config.displayName,
-              " API key with the correct format"
-            ] }),
-            !keyData.key.length && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-slate-600 dark:text-slate-400", children: [
-              "Enter your ",
-              config.displayName,
-              " API key to enable related functionality. Your key will be securely stored in your browser's local storage."
-            ] }),
-            keyData.isValid && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-green-600 dark:text-green-400", children: [
-              "✓ Valid ",
-              config.displayName,
-              " API key configured."
-            ] })
-          ] })
-        ]
-      },
-      providerName
-    );
-  };
-  return isCollapsed ? renderCollapsedView() : renderExpandedView();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-xl shadow hover:shadow-lg transition p-6 flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center mb-4 -ml-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-8 flex items-center justify-center bg-white rounded-md", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "img",
+        {
+          src: config.logo,
+          alt: `${config.displayName} logo`,
+          className: "w-5 h-5"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100", children: config.displayName })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-4 text-sm", children: config.description }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: data2.showKey ? "text" : "password",
+            value: data2.key,
+            placeholder: config.placeholder,
+            disabled,
+            onChange: (e) => onChange(provider, e.target.value),
+            className: "w-full pr-10 p-2 text-sm border rounded-lg bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-400"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: () => onToggleShow(provider),
+            className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
+            disabled: disabled || !data2.key,
+            children: data2.showKey ? /* @__PURE__ */ jsxRuntimeExports.jsx(EyeOff, { size: 16 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { size: 16 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: () => onChange(provider, data2.key),
+            disabled: disabled || !data2.key,
+            className: "flex-1 bg-gray-600 hover:bg-gray-700 text-white text-sm py-1 rounded transition disabled:opacity-50",
+            children: "Save"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: () => onClear(provider),
+            disabled: disabled || !data2.key,
+            className: "flex-1 border border-gray-400 hover:border-gray-500 text-gray-400 hover:text-gray-600 text-sm py-1 rounded transition disabled:opacity-50",
+            children: "Clear"
+          }
+        )
+      ] })
+    ] })
+  ] });
 };
+const ClaudeLogo = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20shape-rendering='geometricPrecision'%20text-rendering='geometricPrecision'%20image-rendering='optimizeQuality'%20fill-rule='evenodd'%20clip-rule='evenodd'%20viewBox='0%200%20512%20509.64'%3e%3cpath%20fill='%23D77655'%20d='M115.612%200h280.775C459.974%200%20512%2052.026%20512%20115.612v278.415c0%2063.587-52.026%20115.612-115.613%20115.612H115.612C52.026%20509.639%200%20457.614%200%20394.027V115.612C0%2052.026%2052.026%200%20115.612%200z'/%3e%3cpath%20fill='%23FCF2EE'%20fill-rule='nonzero'%20d='M142.27%20316.619l73.655-41.326%201.238-3.589-1.238-1.996-3.589-.001-12.31-.759-42.084-1.138-36.498-1.516-35.361-1.896-8.897-1.895-8.34-10.995.859-5.484%207.482-5.03%2010.717.935%2023.683%201.617%2035.537%202.452%2025.782%201.517%2038.193%203.968h6.064l.86-2.451-2.073-1.517-1.618-1.517-36.776-24.922-39.81-26.338-20.852-15.166-11.273-7.683-5.687-7.204-2.451-15.721%2010.237-11.273%2013.75.935%203.513.936%2013.928%2010.716%2029.749%2023.027%2038.848%2028.612%205.687%204.727%202.275-1.617.278-1.138-2.553-4.271-21.13-38.193-22.546-38.848-10.035-16.101-2.654-9.655c-.935-3.968-1.617-7.304-1.617-11.374l11.652-15.823%206.445-2.073%2015.545%202.073%206.547%205.687%209.655%2022.092%2015.646%2034.78%2024.265%2047.291%207.103%2014.028%203.791%2012.992%201.416%203.968%202.449-.001v-2.275l1.997-26.641%203.69-32.707%203.589-42.084%201.239-11.854%205.863-14.206%2011.652-7.683%209.099%204.348%207.482%2010.716-1.036%206.926-4.449%2028.915-8.72%2045.294-5.687%2030.331h3.313l3.792-3.791%2015.342-20.372%2025.782-32.227%2011.374-12.789%2013.27-14.129%208.517-6.724%2016.1-.001%2011.854%2017.617-5.307%2018.199-16.581%2021.029-13.75%2017.819-19.716%2026.54-12.309%2021.231%201.138%201.694%202.932-.278%2044.536-9.479%2024.062-4.347%2028.714-4.928%2012.992%206.066%201.416%206.167-5.106%2012.613-30.71%207.583-36.018%207.204-53.636%2012.689-.657.48.758.935%2024.164%202.275%2010.337.556h25.301l47.114%203.514%2012.309%208.139%207.381%209.959-1.238%207.583-18.957%209.655-25.579-6.066-59.702-14.205-20.474-5.106-2.83-.001v1.694l17.061%2016.682%2031.266%2028.233%2039.152%2036.397%201.997%208.999-5.03%207.102-5.307-.758-34.401-25.883-13.27-11.651-30.053-25.302-1.996-.001v2.654l6.926%2010.136%2036.574%2054.975%201.895%2016.859-2.653%205.485-9.479%203.311-10.414-1.895-21.408-30.054-22.092-33.844-17.819-30.331-2.173%201.238-10.515%20113.261-4.929%205.788-11.374%204.348-9.478-7.204-5.03-11.652%205.03-23.027%206.066-30.052%204.928-23.886%204.449-29.674%202.654-9.858-.177-.657-2.173.278-22.37%2030.71-34.021%2045.977-26.919%2028.815-6.445%202.553-11.173-5.789%201.037-10.337%206.243-9.2%2037.257-47.392%2022.47-29.371%2014.508-16.961-.101-2.451h-.859l-98.954%2064.251-17.618%202.275-7.583-7.103.936-11.652%203.589-3.791%2029.749-20.474-.101.102.024.101z'/%3e%3c/svg%3e";
+const OpenAILogo = "data:image/svg+xml,%3csvg%20viewBox='0%200%20512%20512'%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20clip-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%3e%3cpath%20d='M474.123%20209.81c11.525-34.577%207.569-72.423-10.838-103.904-27.696-48.168-83.433-72.94-137.794-61.414a127.14%20127.14%200%2000-95.475-42.49c-55.564%200-104.936%2035.781-122.139%2088.593-35.781%207.397-66.574%2029.76-84.637%2061.414-27.868%2048.167-21.503%20108.72%2015.826%20150.007-11.525%2034.578-7.569%2072.424%2010.838%20103.733%2027.696%2048.34%2083.433%2073.111%20137.966%2061.585%2024.084%2027.18%2058.833%2042.835%2095.303%2042.663%2055.564%200%20104.936-35.782%20122.139-88.594%2035.782-7.397%2066.574-29.76%2084.465-61.413%2028.04-48.168%2021.676-108.722-15.654-150.008v-.172zm-39.567-87.218c11.01%2019.267%2015.139%2041.803%2011.354%2063.65-.688-.516-2.064-1.204-2.924-1.72l-101.152-58.49a16.965%2016.965%200%2000-16.687%200L206.621%20194.5v-50.232l97.883-56.597c45.587-26.32%20103.732-10.666%20130.052%2034.921zm-227.935%20104.42l49.888-28.9%2049.887%2028.9v57.63l-49.887%2028.9-49.888-28.9v-57.63zm23.223-191.81c22.364%200%2043.867%207.742%2061.07%2022.02-.688.344-2.064%201.204-3.097%201.72L186.666%20117.26c-5.161%202.925-8.258%208.43-8.258%2014.45v136.934l-43.523-25.116V130.333c0-52.64%2042.491-95.13%2095.131-95.302l-.172.172zM52.14%20168.697c11.182-19.268%2028.557-34.062%2049.544-41.803V247.14c0%206.02%203.097%2011.354%208.258%2014.45l118.354%2068.295-43.695%2025.288-97.711-56.425c-45.415-26.32-61.07-84.465-34.75-130.052zm26.665%20220.71c-11.182-19.095-15.139-41.802-11.354-63.65.688.516%202.064%201.204%202.924%201.72l101.152%2058.49a16.965%2016.965%200%200016.687%200l118.354-68.467v50.232l-97.883%2056.425c-45.587%2026.148-103.732%2010.665-130.052-34.75h.172zm204.54%2087.39c-22.192%200-43.867-7.741-60.898-22.02a62.439%2062.439%200%20003.097-1.72l101.152-58.317c5.16-2.924%208.429-8.43%208.257-14.45V243.527l43.523%2025.116v113.022c0%2052.64-42.663%2095.303-95.131%2095.303v-.172zM461.22%20343.303c-11.182%2019.267-28.729%2034.061-49.544%2041.63V264.687c0-6.021-3.097-11.526-8.257-14.45L284.893%20181.77l43.523-25.116%2097.883%2056.424c45.587%2026.32%2061.07%2084.466%2034.75%20130.053l.172.172z'%20fill-rule='nonzero'/%3e%3c/svg%3e";
+const OllamaLogo = "data:image/svg+xml,%3csvg%20fill='currentColor'%20fill-rule='evenodd'%20height='1em'%20style='flex:none;line-height:1'%20viewBox='0%200%2024%2024'%20width='1em'%20xmlns='http://www.w3.org/2000/svg'%3e%3ctitle%3eOllama%3c/title%3e%3cpath%20d='M7.905%201.09c.216.085.411.225.588.41.295.306.544.744.734%201.263.191.522.315%201.1.362%201.68a5.054%205.054%200%20012.049-.636l.051-.004c.87-.07%201.73.087%202.48.474.101.053.2.11.297.17.05-.569.172-1.134.36-1.644.19-.52.439-.957.733-1.264a1.67%201.67%200%2001.589-.41c.257-.1.53-.118.796-.042.401.114.745.368%201.016.737.248.337.434.769.561%201.287.23.934.27%202.163.115%203.645l.053.04.026.019c.757.576%201.284%201.397%201.563%202.35.435%201.487.216%203.155-.534%204.088l-.018.021.002.003c.417.762.67%201.567.724%202.4l.002.03c.064%201.065-.2%202.137-.814%203.19l-.007.01.01.024c.472%201.157.62%202.322.438%203.486l-.006.039a.651.651%200%2001-.747.536.648.648%200%2001-.54-.742c.167-1.033.01-2.069-.48-3.123a.643.643%200%2001.04-.617l.004-.006c.604-.924.854-1.83.8-2.72-.046-.779-.325-1.544-.8-2.273a.644.644%200%2001.18-.886l.009-.006c.243-.159.467-.565.58-1.12a4.229%204.229%200%2000-.095-1.974c-.205-.7-.58-1.284-1.105-1.683-.595-.454-1.383-.673-2.38-.61a.653.653%200%2001-.632-.371c-.314-.665-.772-1.141-1.343-1.436a3.288%203.288%200%2000-1.772-.332c-1.245.099-2.343.801-2.67%201.686a.652.652%200%2001-.61.425c-1.067.002-1.893.252-2.497.703-.522.39-.878.935-1.066%201.588a4.07%204.07%200%2000-.068%201.886c.112.558.331%201.02.582%201.269l.008.007c.212.207.257.53.109.785-.36.622-.629%201.549-.673%202.44-.05%201.018.186%201.902.719%202.536l.016.019a.643.643%200%2001.095.69c-.576%201.236-.753%202.252-.562%203.052a.652.652%200%2001-1.269.298c-.243-1.018-.078-2.184.473-3.498l.014-.035-.008-.012a4.339%204.339%200%2001-.598-1.309l-.005-.019a5.764%205.764%200%2001-.177-1.785c.044-.91.278-1.842.622-2.59l.012-.026-.002-.002c-.293-.418-.51-.953-.63-1.545l-.005-.024a5.352%205.352%200%2001.093-2.49c.262-.915.777-1.701%201.536-2.269.06-.045.123-.09.186-.132-.159-1.493-.119-2.73.112-3.67.127-.518.314-.95.562-1.287.27-.368.614-.622%201.015-.737.266-.076.54-.059.797.042zm4.116%209.09c.936%200%201.8.313%202.446.855.63.527%201.005%201.235%201.005%201.94%200%20.888-.406%201.58-1.133%202.022-.62.375-1.451.557-2.403.557-1.009%200-1.871-.259-2.493-.734-.617-.47-.963-1.13-.963-1.845%200-.707.398-1.417%201.056-1.946.668-.537%201.55-.849%202.485-.849zm0%20.896a3.07%203.07%200%2000-1.916.65c-.461.37-.722.835-.722%201.25%200%20.428.21.829.61%201.134.455.347%201.124.548%201.943.548.799%200%201.473-.147%201.932-.426.463-.28.7-.686.7-1.257%200-.423-.246-.89-.683-1.256-.484-.405-1.14-.643-1.864-.643zm.662%201.21l.004.004c.12.151.095.37-.056.49l-.292.23v.446a.375.375%200%2001-.376.373.375.375%200%2001-.376-.373v-.46l-.271-.218a.347.347%200%2001-.052-.49.353.353%200%2001.494-.051l.215.172.22-.174a.353.353%200%2001.49.051zm-5.04-1.919c.478%200%20.867.39.867.871a.87.87%200%2001-.868.871.87.87%200%2001-.867-.87.87.87%200%2001.867-.872zm8.706%200c.48%200%20.868.39.868.871a.87.87%200%2001-.868.871.87.87%200%2001-.867-.87.87.87%200%2001.867-.872zM7.44%202.3l-.003.002a.659.659%200%2000-.285.238l-.005.006c-.138.189-.258.467-.348.832-.17.692-.216%201.631-.124%202.782.43-.128.899-.208%201.404-.237l.01-.001.019-.034c.046-.082.095-.161.148-.239.123-.771.022-1.692-.253-2.444-.134-.364-.297-.65-.453-.813a.628.628%200%2000-.107-.09L7.44%202.3zm9.174.04l-.002.001a.628.628%200%2000-.107.09c-.156.163-.32.45-.453.814-.29.794-.387%201.776-.23%202.572l.058.097.008.014h.03a5.184%205.184%200%20011.466.212c.086-1.124.038-2.043-.128-2.722-.09-.365-.21-.643-.349-.832l-.004-.006a.659.659%200%2000-.285-.239h-.004z'%3e%3c/path%3e%3c/svg%3e";
 const PROVIDERS = {
   anthropic: {
     name: "anthropic",
     displayName: "Anthropic (Claude)",
-    placeholder: "Enter your Claude API key (sk-ant-api03-...)",
-    description: "Required for Claude AI chat functionality"
+    placeholder: "sk-ant-…",
+    description: "Enable Claude AI chat functionality",
+    logo: ClaudeLogo
   },
   openai: {
     name: "openai",
     displayName: "OpenAI",
-    placeholder: "Enter your OpenAI API key (sk-...)",
-    description: "Required for GPT models and OpenAI features"
+    placeholder: "sk-…",
+    description: "Enable GPT models & OpenAI features",
+    logo: OpenAILogo
   },
   ollama: {
     name: "ollama",
     displayName: "Ollama",
-    placeholder: "Enter Ollama host URL (optional, defaults to http://127.0.0.1:11434)",
-    description: "Local Ollama installation - requires Ollama to be running. 📥 Download from https://ollama.com/download • 🔧 Pull tool-calling models from https://ollama.com/search?c=tools • 🔄 Models appear dynamically in chat"
+    placeholder: "http://127.0.0.1:11434",
+    description: "Local Ollama—requires Ollama running. Models load dynamically.",
+    logo: OllamaLogo
   }
 };
 const SettingsTab = ({ disabled = false }) => {
-  const [apiKeys, setApiKeys] = reactExports.useState({
-    anthropic: { key: "", isValid: false, showKey: false },
-    openai: { key: "", isValid: false, showKey: false },
-    ollama: { key: "", isValid: false, showKey: false }
-  });
-  const [collapsedSections, setCollapsedSections] = reactExports.useState({});
-  const { toast: toast2 } = useToast();
-  reactExports.useEffect(() => {
-    const newApiKeys = { ...apiKeys };
-    Object.keys(PROVIDERS).forEach((providerName) => {
-      const provider = providerName;
-      const apiKey = providerManager.getApiKey(provider);
-      const isValid2 = providerManager.isProviderReady(provider);
-      newApiKeys[provider] = {
-        key: apiKey,
-        isValid: isValid2,
+  const [apiKeys, setApiKeys] = reactExports.useState(
+    () => Object.keys(PROVIDERS).reduce((acc, p2) => {
+      acc[p2] = {
+        key: "",
+        isValid: false,
         showKey: false
       };
-      if (isValid2) {
-        setCollapsedSections((prev) => ({ ...prev, [providerName]: true }));
-      }
+      return acc;
+    }, {})
+  );
+  const { toast: toast2 } = useToast();
+  reactExports.useEffect(() => {
+    Object.keys(PROVIDERS).forEach((prov) => {
+      const provider = prov;
+      const key = providerManager.getApiKey(provider);
+      const valid = providerManager.isProviderReady(provider);
+      setApiKeys((prev) => ({
+        ...prev,
+        [provider]: { key, isValid: valid, showKey: false }
+      }));
     });
-    setApiKeys(newApiKeys);
   }, []);
-  const handleApiKeyChange = (providerName, value) => {
-    const config = PROVIDERS[providerName];
-    const isValid2 = providerManager.setApiKey(providerName, value);
+  const handleApiKeyChange = (provider, value) => {
+    const cfg = PROVIDERS[provider];
+    const valid = providerManager.setApiKey(provider, value);
     setApiKeys((prev) => ({
       ...prev,
-      [providerName]: {
-        ...prev[providerName],
-        key: value,
-        isValid: isValid2
-      }
+      [provider]: { ...prev[provider], key: value, isValid: valid }
     }));
-    if (isValid2) {
-      setCollapsedSections((prev) => ({ ...prev, [providerName]: true }));
-      toast2({
-        title: "API Key Set",
-        description: `Your ${config.displayName} API key has been saved and configured successfully.`,
-        variant: "default"
-      });
-    } else {
-      setCollapsedSections((prev) => ({ ...prev, [providerName]: false }));
-    }
-  };
-  const clearApiKey = (providerName) => {
-    const config = PROVIDERS[providerName];
-    providerManager.clearApiKey(providerName);
-    setApiKeys((prev) => ({
-      ...prev,
-      [providerName]: {
-        ...prev[providerName],
-        key: "",
-        isValid: false
-      }
-    }));
-    setCollapsedSections((prev) => ({ ...prev, [providerName]: false }));
     toast2({
-      title: "API Key Cleared",
-      description: `Your ${config.displayName} API key has been removed from storage.`,
-      variant: "default"
+      title: valid ? `${cfg.displayName} key saved` : `${cfg.displayName} key invalid`,
+      description: valid ? `Your ${cfg.displayName} API key was saved successfully.` : `Unable to validate your ${cfg.displayName} key.`
     });
   };
-  const toggleShowKey = (providerName) => {
-    setApiKeys((prev) => ({
-      ...prev,
-      [providerName]: {
-        ...prev[providerName],
-        showKey: !prev[providerName].showKey
-      }
+  const handleClear = (provider) => {
+    const cfg = PROVIDERS[provider];
+    providerManager.clearApiKey(provider);
+    setApiKeys((p2) => ({
+      ...p2,
+      [provider]: { ...p2[provider], key: "", isValid: false }
     }));
+    toast2({ title: `${cfg.displayName} key cleared` });
   };
-  const toggleCollapse = (providerName) => {
-    setCollapsedSections((prev) => ({
-      ...prev,
-      [providerName]: !prev[providerName]
+  const toggleShow = (provider) => {
+    setApiKeys((p2) => ({
+      ...p2,
+      [provider]: { ...p2[provider], showKey: !p2[provider].showKey }
     }));
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-6 p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold text-slate-800 dark:text-slate-200 mb-6", children: "API Key Management" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-slate-600 dark:text-slate-400 mb-6", children: "Configure your API keys for different AI providers. Keys are stored securely in your browser's local storage." }),
-    Object.entries(PROVIDERS).map(([providerName, config]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ProviderSection,
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-8 p-8", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-3xl font-bold text-gray-900 dark:text-gray-100", children: "API Key Management" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-600 dark:text-gray-400 max-w-2xl", children: "Enter your API keys below. They’re stored securely in local storage." }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3", children: Object.entries(PROVIDERS).map(([prov, cfg]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ProviderCard,
       {
-        providerName,
-        config,
-        keyData: apiKeys[providerName],
-        isCollapsed: collapsedSections[providerName] && apiKeys[providerName].isValid,
+        provider: prov,
+        config: cfg,
+        data: apiKeys[prov],
         disabled,
-        onApiKeyChange: handleApiKeyChange,
-        onClearApiKey: clearApiKey,
-        onToggleShowKey: toggleShowKey,
-        onToggleCollapse: toggleCollapse
+        onChange: handleApiKeyChange,
+        onClear: handleClear,
+        onToggleShow: toggleShow
       },
-      providerName
-    ))
-  ] }) });
+      prov
+    )) })
+  ] });
 };
 const McpClientContext = reactExports.createContext(null);
 const SERVER_CONFIGS_STORAGE_KEY = "mcpServerConfigs_v1";
@@ -44954,13 +45432,6 @@ const useServerState = () => {
   const [editingClientName, setEditingClientName] = reactExports.useState(
     null
   );
-  const [clientFormConfig, setClientFormConfig] = reactExports.useState({
-    transportType: "stdio",
-    command: "npx",
-    args: ["@modelcontextprotocol/server-everything"],
-    env: {}
-  });
-  const [clientFormName, setClientFormName] = reactExports.useState("");
   reactExports.useEffect(() => {
     try {
       if (Object.keys(serverConfigs).length > 0) {
@@ -44999,27 +45470,14 @@ const useServerState = () => {
   const handleCreateClient = reactExports.useCallback(() => {
     setIsCreatingClient(true);
     setEditingClientName(null);
-    setClientFormName("");
-    setClientFormConfig({
-      transportType: "stdio",
-      command: "npx",
-      args: ["@modelcontextprotocol/server-everything"],
-      env: {}
-    });
   }, []);
-  const handleEditClient = reactExports.useCallback(
-    (serverName, config) => {
-      setIsCreatingClient(false);
-      setEditingClientName(serverName);
-      setClientFormName(serverName);
-      setClientFormConfig(config);
-    },
-    []
-  );
+  const handleEditClient = reactExports.useCallback((serverName) => {
+    setIsCreatingClient(false);
+    setEditingClientName(serverName);
+  }, []);
   const handleCancelClientForm = reactExports.useCallback(() => {
     setIsCreatingClient(false);
     setEditingClientName(null);
-    setClientFormName("");
   }, []);
   return {
     serverConfigs,
@@ -45028,10 +45486,6 @@ const useServerState = () => {
     setSelectedServerName,
     isCreatingClient,
     editingClientName,
-    clientFormConfig,
-    setClientFormConfig,
-    clientFormName,
-    setClientFormName,
     updateServerConfig,
     removeServerConfig,
     handleCreateClient,
@@ -51647,7 +52101,7 @@ class Client extends Protocol {
     return this.notification({ method: "notifications/roots/list_changed" });
   }
 }
-const version = "0.3.5";
+const version = "0.3.6";
 const packageJson = {
   version
 };
@@ -52969,7 +53423,10 @@ class MCPJamClient extends Client {
    */
   createAuthProvider() {
     if (this.serverConfig.transportType !== "stdio" && "url" in this.serverConfig && this.serverConfig.url) {
-      return new InspectorOAuthClientProvider(this.serverConfig.url.toString());
+      return new InspectorOAuthClientProvider(
+        this.serverConfig.url.toString(),
+        this.serverConfig.transportType
+      );
     }
     return null;
   }
@@ -53052,7 +53509,8 @@ class MCPJamClient extends Client {
         "debug"
       );
       const serverAuthProvider = new InspectorOAuthClientProvider(
-        this.serverConfig.url.toString()
+        this.serverConfig.url.toString(),
+        this.serverConfig.transportType
       );
       const token = this.bearerToken || ((_a2 = await serverAuthProvider.tokens()) == null ? void 0 : _a2.access_token);
       if (token) {
@@ -53308,7 +53766,8 @@ class MCPJamClient extends Client {
     this.connectionStatus = "disconnected";
     if (this.serverConfig.transportType !== "stdio") {
       const authProvider = new InspectorOAuthClientProvider(
-        this.serverConfig.url.toString()
+        this.serverConfig.url.toString(),
+        this.serverConfig.transportType
       );
       authProvider.clear();
       this.addClientLog("OAuth tokens cleared", "debug");
@@ -54701,7 +55160,7 @@ const useConnectionState = (addRequestHistory, addClientLog) => {
   const updateServer = reactExports.useCallback(
     async (serverName, config) => {
       if (!mcpAgent) return;
-      await mcpAgent.disconnectFromServer(serverName);
+      await mcpAgent.removeServer(serverName);
       mcpAgent.addServer(serverName, config);
       try {
         await mcpAgent.connectToServer(serverName);
@@ -61655,6 +62114,24 @@ function requireAjv() {
 }
 var ajvExports = requireAjv();
 const Ajv = /* @__PURE__ */ getDefaultExportFromCjs(ajvExports);
+function stripEnumNames(schema) {
+  if (Array.isArray(schema)) {
+    return schema.map(stripEnumNames);
+  }
+  if (typeof schema !== "object" || schema === null) return schema;
+  const { properties: properties2, items: items2, ...rest } = schema;
+  const cleaned = { ...rest };
+  if (properties2) {
+    cleaned.properties = {};
+    for (const key in properties2) {
+      cleaned.properties[key] = stripEnumNames(properties2[key]);
+    }
+  }
+  if (items2) {
+    cleaned.items = stripEnumNames(items2);
+  }
+  return cleaned;
+}
 const ElicitationModal = ({ request, onClose }) => {
   const [formData, setFormData] = reactExports.useState({});
   const [validationError, setValidationError] = reactExports.useState(null);
@@ -61700,7 +62177,8 @@ const ElicitationModal = ({ request, onClose }) => {
         return;
       }
       const ajv2 = new Ajv();
-      const validate2 = ajv2.compile(request.requestedSchema);
+      const cleanedSchema = stripEnumNames(request.requestedSchema);
+      const validate2 = ajv2.compile(cleanedSchema);
       const isValid2 = validate2(formData);
       if (!isValid2) {
         const errorMessage = ajv2.errorsText(validate2.errors);
@@ -61719,7 +62197,7 @@ const ElicitationModal = ({ request, onClose }) => {
     }
   };
   const handleReject = () => {
-    request.resolve({ action: "reject" });
+    request.resolve({ action: "decline" });
     onClose();
   };
   const handleCancel = () => {
@@ -61862,14 +62340,9 @@ const useServerManagement = (serverState, connectionState, configState, mcpOpera
   );
   const handleEditClient = reactExports.useCallback(
     (serverName) => {
-      const serverConnections = connectionState.mcpAgent ? connectionState.mcpAgent.getAllConnectionInfo() : [];
-      const connection = serverConnections.find(
-        (conn) => conn.name === serverName
-      );
-      if (!connection) return;
-      serverState.handleEditClient(serverName, connection.config);
+      serverState.handleEditClient(serverName);
     },
-    [connectionState.mcpAgent, serverState]
+    [serverState]
   );
   const handleConnectServer = reactExports.useCallback(
     async (serverName) => {
@@ -61877,47 +62350,7 @@ const useServerManagement = (serverState, connectionState, configState, mcpOpera
     },
     [connectionState]
   );
-  const handleSaveClient = reactExports.useCallback(
-    async (config) => {
-      if (!serverState.clientFormName.trim()) return;
-      try {
-        if (serverState.isCreatingClient) {
-          await handleAddServer(serverState.clientFormName, config, {
-            autoConnect: true
-          });
-        } else if (serverState.editingClientName) {
-          const oldServerName = serverState.editingClientName;
-          const newServerName = serverState.clientFormName.trim();
-          if (oldServerName !== newServerName) {
-            addClientLog(
-              `🔄 Server name changed from "${oldServerName}" to "${newServerName}"`,
-              "info"
-            );
-            await handleRemoveServer(oldServerName);
-            await handleAddServer(newServerName, config, {
-              autoConnect: true
-            });
-            if (serverState.selectedServerName === oldServerName) {
-              serverState.setSelectedServerName(newServerName);
-            }
-          } else {
-            await handleUpdateServer(serverState.editingClientName, config);
-          }
-        }
-        serverState.handleCancelClientForm();
-      } catch (error) {
-        console.error("Failed to save client:", error);
-      }
-    },
-    [
-      serverState,
-      handleAddServer,
-      handleUpdateServer,
-      handleRemoveServer,
-      addClientLog
-    ]
-  );
-  const handleSaveMultiple = reactExports.useCallback(
+  const saveClients = reactExports.useCallback(
     async (clients) => {
       const results = {
         success: [],
@@ -61925,19 +62358,43 @@ const useServerManagement = (serverState, connectionState, configState, mcpOpera
       };
       for (const client2 of clients) {
         try {
-          console.log(`🔧 Creating client: "${client2.name}"`);
-          await handleAddServer(client2.name, client2.config, {
-            autoConnect: false
-          });
+          if (serverState.editingClientName && clients.length === 1) {
+            const oldServerName = serverState.editingClientName;
+            const newServerName = client2.name.trim();
+            if (oldServerName !== newServerName) {
+              addClientLog(
+                `🔄 Server name changed from "${oldServerName}" to "${newServerName}"`,
+                "info"
+              );
+              await handleRemoveServer(oldServerName);
+              await handleAddServer(newServerName, client2.config, {
+                autoConnect: true
+              });
+              if (serverState.selectedServerName === oldServerName) {
+                serverState.setSelectedServerName(newServerName);
+              }
+            } else {
+              await handleUpdateServer(
+                serverState.editingClientName,
+                client2.config
+              );
+            }
+          } else {
+            console.log(`🔧 Creating client: "${client2.name}"`);
+            await handleAddServer(client2.name, client2.config, {
+              autoConnect: clients.length === 1
+              // Auto-connect only for single client
+            });
+          }
           results.success.push(client2.name);
           addClientLog(
-            `✅ Successfully created client: "${client2.name}"`,
+            `✅ Successfully ${serverState.editingClientName ? "updated" : "created"} client: "${client2.name}"`,
             "info"
           );
         } catch (error) {
           const errorMessage = error instanceof Error ? error.message : String(error);
           addClientLog(
-            `❌ Failed to create client "${client2.name}": ${errorMessage}`,
+            `❌ Failed to ${serverState.editingClientName ? "update" : "create"} client "${client2.name}": ${errorMessage}`,
             "error"
           );
           results.failed.push({ name: client2.name, error: errorMessage });
@@ -61946,19 +62403,25 @@ const useServerManagement = (serverState, connectionState, configState, mcpOpera
       serverState.handleCancelClientForm();
       if (results.success.length > 0) {
         addClientLog(
-          `✅ Successfully created ${results.success.length} client(s): ${results.success.join(", ")}`,
+          `✅ Successfully ${serverState.editingClientName ? "updated" : "created"} ${results.success.length} client(s): ${results.success.join(", ")}`,
           "info"
         );
       }
       if (results.failed.length > 0) {
         addClientLog(
-          `❌ Failed to create ${results.failed.length} client(s): ${results.failed.map(({ name, error }) => `${name}: ${error}`).join(", ")}`,
+          `❌ Failed to ${serverState.editingClientName ? "update" : "create"} ${results.failed.length} client(s): ${results.failed.map(({ name, error }) => `${name}: ${error}`).join(", ")}`,
           "error"
         );
       }
       return results;
     },
-    [handleAddServer, serverState, addClientLog]
+    [
+      handleAddServer,
+      handleUpdateServer,
+      handleRemoveServer,
+      serverState,
+      addClientLog
+    ]
   );
   return {
     handleAddServer,
@@ -61966,8 +62429,7 @@ const useServerManagement = (serverState, connectionState, configState, mcpOpera
     handleUpdateServer,
     handleEditClient,
     handleConnectServer,
-    handleSaveClient,
-    handleSaveMultiple
+    saveClients
   };
 };
 const loadOAuthTokens = async (serverUrl, updateAuthState) => {
@@ -62029,8 +62491,14 @@ const useOAuthHandlers = (serverState, configState, handleAddServer) => {
         }
       }
       const finalServerName = existingServerName || serverName;
+      const transportKey = getServerSpecificKey(
+        SESSION_KEYS.TRANSPORT_TYPE,
+        serverUrl
+      );
+      const storedTransportType = sessionStorage.getItem(transportKey);
+      const transportType = storedTransportType || "sse";
       const serverConfig = {
-        transportType: "sse",
+        transportType,
         url: new URL(serverUrl)
       };
       try {
@@ -62152,15 +62620,73 @@ const useAppEffects = (serverState, connectionState, configState, mcpOperations,
         const proxyAddress = await getMCPProxyAddressAsync(configState.config);
         const response = await fetch(`${proxyAddress}/config`);
         const data2 = await response.json();
-        const currentConfig = serverState.serverConfigs[serverState.selectedServerName];
-        if ((currentConfig == null ? void 0 : currentConfig.transportType) === "stdio") {
-          serverState.setServerConfigs((prev) => ({
-            ...prev,
-            [serverState.selectedServerName]: {
-              ...prev[serverState.selectedServerName],
-              env: data2.defaultEnvironment || {}
+        if (data2.serverConfigs && Object.keys(data2.serverConfigs).length > 0) {
+          console.log("📡 Found CLI server configurations, loading...");
+          const convertedConfigs = {};
+          for (const [serverName, cliConfig] of Object.entries(
+            data2.serverConfigs
+          )) {
+            const config = cliConfig;
+            if (config.type === "sse" && config.url) {
+              convertedConfigs[serverName] = {
+                transportType: "sse",
+                url: new URL(config.url),
+                name: serverName
+              };
+            } else if (config.command) {
+              convertedConfigs[serverName] = {
+                transportType: "stdio",
+                command: config.command,
+                args: config.args || [],
+                env: {
+                  ...data2.defaultEnvironment || {},
+                  ...config.env || {}
+                },
+                name: serverName
+              };
+            } else if (config.url) {
+              convertedConfigs[serverName] = {
+                transportType: "sse",
+                url: new URL(config.url),
+                name: serverName
+              };
+            }
+          }
+          if (Object.keys(convertedConfigs).length > 0) {
+            const existingConfigs = serverState.serverConfigs;
+            const hasExistingConfigs = Object.keys(existingConfigs).length > 0;
+            const mergedConfigs = { ...convertedConfigs, ...existingConfigs };
+            console.log(
+              `✅ Loading ${Object.keys(convertedConfigs).length} servers from CLI config`
+            );
+            if (hasExistingConfigs) {
+              console.log(
+                `📦 Merging with ${Object.keys(existingConfigs).length} existing localStorage servers`
+              );
             }
-          }));
+            serverState.setServerConfigs(mergedConfigs);
+            if (!serverState.selectedServerName || !mergedConfigs[serverState.selectedServerName]) {
+              const firstServerName = Object.keys(convertedConfigs)[0];
+              serverState.setSelectedServerName(firstServerName);
+            }
+            const totalServers = Object.keys(mergedConfigs).length;
+            const cliServers = Object.keys(convertedConfigs).length;
+            addClientLog(
+              `Loaded ${cliServers} servers from CLI configuration (${totalServers} total)`,
+              "info"
+            );
+          }
+        } else {
+          const currentConfig = serverState.serverConfigs[serverState.selectedServerName];
+          if ((currentConfig == null ? void 0 : currentConfig.transportType) === "stdio") {
+            serverState.setServerConfigs((prev) => ({
+              ...prev,
+              [serverState.selectedServerName]: {
+                ...prev[serverState.selectedServerName],
+                env: data2.defaultEnvironment || {}
+              }
+            }));
+          }
         }
       } catch (error) {
         console.error("Error fetching default environment:", error);
@@ -62263,7 +62789,7 @@ const __vitePreload = function preload(baseModule, deps, importerUrl) {
   });
 };
 const renderOAuthCallback = (onOAuthConnect) => {
-  const OAuthCallback = React.lazy(() => __vitePreload(() => import("./OAuthCallback-CaYMoLGO.js"), true ? [] : void 0));
+  const OAuthCallback = React.lazy(() => __vitePreload(() => import("./OAuthCallback-Bgz6lAmx.js"), true ? [] : void 0));
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     reactExports.Suspense,
     {
@@ -62277,7 +62803,7 @@ const renderOAuthCallback = (onOAuthConnect) => {
 };
 const renderOAuthDebugCallback = (onOAuthDebugConnect) => {
   const OAuthDebugCallback = React.lazy(
-    () => __vitePreload(() => import("./OAuthDebugCallback-CBFeYzo9.js"), true ? [] : void 0)
+    () => __vitePreload(() => import("./OAuthDebugCallback-Gd08QO37.js"), true ? [] : void 0)
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     reactExports.Suspense,
@@ -62326,6 +62852,7 @@ const App = () => {
     mcpOperations.addClientLog
   );
   const configState = useConfigState();
+  console.log("🔧 serverState", serverState);
   const rootsRef = reactExports.useRef(mcpOperations.roots);
   const nextRequestId = reactExports.useRef(0);
   const [currentPage, setCurrentPage] = reactExports.useState(() => {
@@ -62390,8 +62917,7 @@ const App = () => {
     handleRemoveServer,
     handleEditClient,
     handleConnectServer,
-    handleSaveClient,
-    handleSaveMultiple,
+    saveClients,
     handleAddServer
   } = useServerManagement(
     serverState,
@@ -62685,23 +63211,23 @@ const App = () => {
   }
   const renderTabs = () => {
     if (serverState.isCreatingClient || serverState.editingClientName) {
+      const initialClient = serverState.editingClientName ? {
+        name: serverState.editingClientName,
+        config: serverState.serverConfigs[serverState.editingClientName]
+      } : void 0;
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         ClientFormSection,
         {
           isCreating: serverState.isCreatingClient,
           editingClientName: serverState.editingClientName,
-          clientFormName: serverState.clientFormName,
-          setClientFormName: serverState.setClientFormName,
-          clientFormConfig: serverState.clientFormConfig,
-          setClientFormConfig: serverState.setClientFormConfig,
+          initialClient,
           config: configState.config,
           setConfig: configState.setConfig,
           bearerToken: configState.bearerToken,
           setBearerToken: configState.setBearerToken,
           headerName: configState.headerName,
           setHeaderName: configState.setHeaderName,
-          onSave: handleSaveClient,
-          onSaveMultiple: handleSaveMultiple,
+          onSave: saveClients,
           onCancel: serverState.handleCancelClientForm
         }
       );
@@ -62733,7 +63259,10 @@ const App = () => {
           Tabs,
           {
             currentPage,
-            onPageChange: setCurrentPage,
+            onPageChange: (page) => {
+              setCurrentPage(page);
+              serverState.handleCancelClientForm();
+            },
             serverCapabilities,
             pendingSampleRequests: mcpOperations.pendingSampleRequests,
             shouldDisableAll: !connectionState.mcpAgent