@mcpjam/inspector 0.2.4 → 0.3.1

package/client/dist/assets/{index-CLxTHffA.js → index-kMl05fui.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-DkLMDxkx.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-DaNmVTKt.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-mxRvi54D.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-CjHmkokp.js"])))=>i.map(i=>d[i]);
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -16041,6 +16041,16 @@ const Activity = createLucideIcon("Activity", [
     }
   ]
 ]);
+/**
+ * @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 ArrowLeft = createLucideIcon("ArrowLeft", [
+  ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
+  ["path", { d: "M19 12H5", key: "x3x0zl" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -16074,6 +16084,31 @@ const Bot = createLucideIcon("Bot", [
   ["path", { d: "M15 13v2", key: "1xurst" }],
   ["path", { d: "M9 13v2", key: "rq6x2g" }]
 ]);
+/**
+ * @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 Bug = createLucideIcon("Bug", [
+  ["path", { d: "m8 2 1.88 1.88", key: "fmnt4t" }],
+  ["path", { d: "M14.12 3.88 16 2", key: "qol33r" }],
+  ["path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1", key: "d7y7pr" }],
+  [
+    "path",
+    {
+      d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6",
+      key: "xs1cw7"
+    }
+  ],
+  ["path", { d: "M12 20v-9", key: "1qisl0" }],
+  ["path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5", key: "32zzws" }],
+  ["path", { d: "M6 13H2", key: "82j7cp" }],
+  ["path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4", key: "4p0ekp" }],
+  ["path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4", key: "18gb23" }],
+  ["path", { d: "M22 13h-4", key: "1jl80f" }],
+  ["path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4", key: "k3fwyw" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -16212,6 +16247,18 @@ const CodeXml = createLucideIcon("CodeXml", [
   ["path", { d: "m6 8-4 4 4 4", key: "15zrgr" }],
   ["path", { d: "m14.5 4-5 16", key: "e7oirm" }]
 ]);
+/**
+ * @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 CopyPlus = createLucideIcon("CopyPlus", [
+  ["line", { x1: "15", x2: "15", y1: "12", y2: "18", key: "1p7wdc" }],
+  ["line", { x1: "12", x2: "18", y1: "15", y2: "15", key: "1nscbv" }],
+  ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
+  ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -16377,6 +16424,17 @@ const History = createLucideIcon("History", [
   ["path", { d: "M3 3v5h5", key: "1xhq8a" }],
   ["path", { d: "M12 7v5l4 2", key: "1fdv2h" }]
 ]);
+/**
+ * @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 Info = createLucideIcon("Info", [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 16v-4", key: "1dtifu" }],
+  ["path", { d: "M12 8h.01", key: "e9boi3" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -16563,6 +16621,25 @@ const Settings = createLucideIcon("Settings", [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ]);
+/**
+ * @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 Sparkles = createLucideIcon("Sparkles", [
+  [
+    "path",
+    {
+      d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z",
+      key: "4pj2yx"
+    }
+  ],
+  ["path", { d: "M20 3v4", key: "1olli1" }],
+  ["path", { d: "M22 5h-4", key: "1gvqau" }],
+  ["path", { d: "M4 17v2", key: "vumght" }],
+  ["path", { d: "M5 18H3", key: "zchphs" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -16629,6 +16706,18 @@ const User = createLucideIcon("User", [
   ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
   ["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
 ]);
+/**
+ * @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 Users = createLucideIcon("Users", [
+  ["path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", key: "1yyitq" }],
+  ["circle", { cx: "9", cy: "7", r: "4", key: "nufk8" }],
+  ["path", { d: "M22 21v-2a4 4 0 0 0-3-3.87", key: "kshegd" }],
+  ["path", { d: "M16 3.13a4 4 0 0 1 0 7.75", key: "1da9ce" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -16976,11 +17065,6 @@ class DebugInspectorOAuthClientProvider extends InspectorOAuthClientProvider {
     );
   }
 }
-const auth$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  DebugInspectorOAuthClientProvider,
-  InspectorOAuthClientProvider
-}, Symbol.toStringTag, { value: "Module" }));
 const OAuthStepDetails = ({
   label,
   isComplete,
@@ -18183,7 +18267,11 @@ const JsonNode = reactExports.memo(
   }
 );
 JsonNode.displayName = "JsonNode";
-const RequestHistoryItem = ({ request, index: index2, totalRequests }) => {
+const RequestHistoryItem = ({
+  request,
+  index: index2,
+  totalRequests
+}) => {
   const [isExpanded, setIsExpanded] = reactExports.useState(false);
   const toggleExpansion = () => {
     setIsExpanded(!isExpanded);
@@ -18225,7 +18313,15 @@ const RequestHistoryItem = ({ request, index: index2, totalRequests }) => {
     )
   ] });
 };
-const RequestHeader = ({ requestNumber, method, server, timestamp, latency, isExpanded, onToggle }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+const RequestHeader = ({
+  requestNumber,
+  method,
+  server,
+  timestamp,
+  latency,
+  isExpanded,
+  onToggle
+}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
   "header",
   {
     className: "flex justify-between items-center cursor-pointer group",
@@ -18241,12 +18337,27 @@ const RequestHeader = ({ requestNumber, method, server, timestamp, latency, isEx
     "aria-expanded": isExpanded,
     "aria-label": `Request ${requestNumber}: ${method}`,
     children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(RequestInfo, { requestNumber, method, server, timestamp, latency }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        RequestInfo,
+        {
+          requestNumber,
+          method,
+          server,
+          timestamp,
+          latency
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandIcon, { isExpanded })
     ]
   }
 );
-const RequestInfo = ({ requestNumber, method, server, timestamp, latency }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
+const RequestInfo = ({
+  requestNumber,
+  method,
+  server,
+  timestamp,
+  latency
+}) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
   /* @__PURE__ */ jsxRuntimeExports.jsx(RequestBadge, { number: requestNumber }),
   /* @__PURE__ */ jsxRuntimeExports.jsx(TimeStamp, { timestamp }),
   /* @__PURE__ */ jsxRuntimeExports.jsx(MethodLabel, { method, server }),
@@ -18288,77 +18399,99 @@ const RequestSection = ({ title: title2, data: data2 }) => /* @__PURE__ */ jsxRu
   )
 ] });
 const SectionHeader = ({ title: title2 }) => /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "flex items-center mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-foreground text-sm", children: title2 }) });
+const formatRequestCount = (count2) => {
+  return `${count2} request${count2 !== 1 ? "s" : ""}`;
+};
+const ClearHistoryButton = ({ onClick }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "button",
+  {
+    onClick,
+    className: "p-2 rounded-lg hover:bg-destructive/10 hover:text-destructive transition-all duration-200 group",
+    title: "Clear all activity",
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4 text-muted-foreground group-hover:text-destructive" })
+  }
+);
+const RequestCountBadge = ({ count: count2 }) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-muted-foreground bg-muted/50 px-3 py-1 rounded-full", children: formatRequestCount(count2) });
+const CollapseToggleButton = ({ onClick }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "button",
+  {
+    onClick,
+    className: "p-2 rounded-lg hover:bg-accent/50 transition-all duration-200",
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-5 h-5 text-muted-foreground hover:text-foreground" })
+  }
+);
+const ActivityHeader = ({
+  requestHistory,
+  onClearHistory,
+  onToggleCollapse
+}) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "text-lg font-bold text-foreground flex items-center space-x-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Activity, { className: "w-5 h-5 text-primary" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "All Activity" })
+  ] }),
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
+    requestHistory.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(RequestCountBadge, { count: requestHistory.length }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ClearHistoryButton, { onClick: onClearHistory })
+    ] }),
+    onToggleCollapse && /* @__PURE__ */ jsxRuntimeExports.jsx(CollapseToggleButton, { onClick: onToggleCollapse })
+  ] })
+] });
+const CompactHeader = ({
+  requestHistory,
+  onClearHistory
+}) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx(RequestCountBadge, { count: requestHistory.length }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(ClearHistoryButton, { onClick: onClearHistory })
+] });
+const EmptyState$1 = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx(Activity, { className: "w-12 h-12 text-muted-foreground/40 mb-4" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground text-lg font-medium mb-2", children: "No activity yet" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground/60 text-sm", children: "MCP requests and responses will appear here" })
+] });
+const RequestHistoryList = ({
+  requestHistory
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "space-y-4", children: requestHistory.slice().reverse().map((request, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  RequestHistoryItem,
+  {
+    request,
+    index: index2,
+    totalRequests: requestHistory.length
+  },
+  index2
+)) });
 const ActivityTab = ({
   requestHistory,
   onClearHistory,
   onToggleCollapse,
   showHeader = true
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex-1 overflow-y-auto ${showHeader ? "p-6 border-r border-border/20" : ""}`, children: [
-    showHeader && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "text-lg font-bold text-foreground flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Activity, { className: "w-5 h-5 text-primary" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "All Activity" })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
-        requestHistory.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-muted-foreground bg-muted/50 px-3 py-1 rounded-full", children: [
-            requestHistory.length,
-            " request",
-            requestHistory.length !== 1 ? "s" : ""
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              onClick: onClearHistory,
-              className: "p-2 rounded-lg hover:bg-destructive/10 hover:text-destructive transition-all duration-200 group",
-              title: "Clear all activity",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4 text-muted-foreground group-hover:text-destructive" })
-            }
-          )
-        ] }),
-        onToggleCollapse && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            onClick: onToggleCollapse,
-            className: "p-2 rounded-lg hover:bg-accent/50 transition-all duration-200",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-5 h-5 text-muted-foreground hover:text-foreground" })
-          }
-        )
-      ] })
-    ] }),
-    requestHistory.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Activity, { className: "w-12 h-12 text-muted-foreground/40 mb-4" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground text-lg font-medium mb-2", children: "No activity yet" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground/60 text-sm", children: "MCP requests and responses will appear here" })
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      !showHeader && requestHistory.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-muted-foreground bg-muted/50 px-3 py-1 rounded-full", children: [
-          requestHistory.length,
-          " request",
-          requestHistory.length !== 1 ? "s" : ""
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: `flex-1 overflow-y-auto ${showHeader ? "p-6 border-r border-border/20" : ""}`,
+      children: [
+        showHeader && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ActivityHeader,
           {
-            onClick: onClearHistory,
-            className: "p-2 rounded-lg hover:bg-destructive/10 hover:text-destructive transition-all duration-200 group",
-            title: "Clear all activity",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4 text-muted-foreground group-hover:text-destructive" })
+            requestHistory,
+            onClearHistory,
+            onToggleCollapse
           }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "space-y-4", children: requestHistory.slice().reverse().map((request, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        RequestHistoryItem,
-        {
-          request,
-          index: index2,
-          totalRequests: requestHistory.length
-        },
-        index2
-      )) })
-    ] })
-  ] });
+        ),
+        requestHistory.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyState$1, {}) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          !showHeader && requestHistory.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CompactHeader,
+            {
+              requestHistory,
+              onClearHistory
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(RequestHistoryList, { requestHistory })
+        ] })
+      ]
+    }
+  );
 };
 const ToolResult = ({ toolResult }) => {
   if (!toolResult) return null;
@@ -18412,7 +18545,11 @@ const ToolResult = ({ toolResult }) => {
   }
   return null;
 };
-const ResultsTab = ({ toolResult, onToggleCollapse, showHeader = true }) => {
+const ResultsTab = ({
+  toolResult,
+  onToggleCollapse,
+  showHeader = true
+}) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex-1 overflow-y-auto ${showHeader ? "p-6" : ""}`, children: [
     showHeader && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "text-lg font-bold text-foreground flex items-center space-x-2", children: [
@@ -18435,21 +18572,139 @@ const ResultsTab = ({ toolResult, onToggleCollapse, showHeader = true }) => {
     ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-to-br from-background/80 to-background/60 backdrop-blur-sm p-4 rounded-xl border border-border/30", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ToolResult, { toolResult }) })
   ] });
 };
+const ClientLogsTab = ({
+  clientLogs,
+  onClearLogs,
+  showHeader = true
+}) => {
+  const reversedClientLogs = [...clientLogs].reverse();
+  const formatTimestamp = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString("en-US", {
+      hour12: true,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+  };
+  const getLogLevelConfig = (level) => {
+    switch (level) {
+      case "error":
+        return {
+          icon: CircleAlert,
+          bgColor: "bg-red-50 dark:bg-red-950/20",
+          borderColor: "border-red-200 dark:border-red-800/50",
+          textColor: "text-red-800 dark:text-red-300",
+          iconColor: "text-red-500",
+          label: "ERROR"
+        };
+      case "warn":
+        return {
+          icon: TriangleAlert,
+          bgColor: "bg-yellow-50 dark:bg-yellow-950/20",
+          borderColor: "border-yellow-200 dark:border-yellow-800/50",
+          textColor: "text-yellow-800 dark:text-yellow-300",
+          iconColor: "text-yellow-500",
+          label: "WARN"
+        };
+      case "debug":
+        return {
+          icon: Bug,
+          bgColor: "bg-gray-50 dark:bg-gray-950/20",
+          borderColor: "border-gray-200 dark:border-gray-800/50",
+          textColor: "text-gray-800 dark:text-gray-300",
+          iconColor: "text-gray-500",
+          label: "DEBUG"
+        };
+      case "info":
+      default:
+        return {
+          icon: Info,
+          bgColor: "bg-blue-50 dark:bg-blue-950/20",
+          borderColor: "border-blue-200 dark:border-blue-800/50",
+          textColor: "text-blue-800 dark:text-blue-300",
+          iconColor: "text-blue-500",
+          label: "INFO"
+        };
+    }
+  };
+  const LogEntry = ({ log }) => {
+    const config = getLogLevelConfig(log.level);
+    const IconComponent = config.icon;
+    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`,
+        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: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2 mb-1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "span",
+                {
+                  className: `text-xs font-mono font-semibold px-2 py-0.5 rounded ${config.textColor} ${config.bgColor}`,
+                  children: config.label
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground font-mono", children: formatTimestamp(log.timestamp) })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-sm ${config.textColor} font-mono break-words`, children: log.message })
+          ] })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col", children: [
+    !showHeader && clientLogs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-muted-foreground bg-muted/50 px-3 py-1 rounded-full", children: [
+        clientLogs.length,
+        " log",
+        clientLogs.length !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: onClearLogs,
+          className: "p-2 rounded-lg hover:bg-destructive/10 hover:text-destructive transition-all duration-200 group",
+          title: "Clear all activity",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4 text-muted-foreground group-hover:text-destructive" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden", children: clientLogs.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center p-8", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Bug, { className: "w-12 h-12 text-muted-foreground/50 mb-4" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium text-muted-foreground mb-2", children: "No logs yet" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground/70 max-w-sm", children: "Client logs will appear here when you perform operations. Logs include info, warnings, errors, and debug messages." })
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full overflow-y-auto p-4 space-y-2", children: reversedClientLogs.map((log, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(LogEntry, { log }, `${log.timestamp}-${index2}`)) }) })
+  ] });
+};
 const TabbedHistoryPanel = ({
   requestHistory,
   toolResult,
+  clientLogs,
   onClearHistory,
+  onClearLogs,
   onToggleCollapse
 }) => {
   const [activeTab, setActiveTab] = reactExports.useState("activity");
   const [isToolResultError, setIsToolResultError] = reactExports.useState(false);
   reactExports.useEffect(() => {
     if (toolResult) {
-      console.log("toolResult", toolResult);
       setIsToolResultError(toolResult.isError === true);
       setActiveTab("results");
     }
   }, [toolResult]);
+  reactExports.useEffect(() => {
+    if (clientLogs.length > 0) {
+      const isLastLogError = clientLogs[clientLogs.length - 1].level === "error";
+      const isLastLogToolCall = clientLogs[clientLogs.length - 1].message.includes(
+        "Error calling tool"
+      );
+      if (isLastLogError && !isLastLogToolCall) {
+        setActiveTab("logs");
+      }
+    }
+  }, [clientLogs]);
   const renderActivityTabButton = () => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
@@ -18466,7 +18721,6 @@ const TabbedHistoryPanel = ({
     );
   };
   const renderResultsTabButton = () => {
-    console.log("isToolResultError", isToolResultError);
     const renderCircleIndicator = () => {
       if (toolResult && !isToolResultError) {
         return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" });
@@ -18490,6 +18744,21 @@ const TabbedHistoryPanel = ({
       "results"
     );
   };
+  const renderLogsTabButton = () => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        onClick: () => setActiveTab("logs"),
+        className: `flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 ${activeTab === "logs" ? "bg-primary/10 text-primary border border-primary/20" : "text-muted-foreground hover:text-foreground hover:bg-accent/50"}`,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Bug, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: "Logs" }),
+          clientLogs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 py-1 text-xs bg-primary/10 text-primary rounded-full", children: clientLogs.length })
+        ]
+      },
+      "logs"
+    );
+  };
   const renderTabContent = () => {
     switch (activeTab) {
       case "activity":
@@ -18503,6 +18772,15 @@ const TabbedHistoryPanel = ({
         ) });
       case "results":
         return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full overflow-y-auto p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResultsTab, { toolResult, showHeader: false }) });
+      case "logs":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full overflow-y-auto p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ClientLogsTab,
+          {
+            clientLogs,
+            onClearLogs,
+            showHeader: false
+          }
+        ) });
       default:
         return null;
     }
@@ -18511,7 +18789,8 @@ const TabbedHistoryPanel = ({
     /* @__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: [
         renderActivityTabButton(),
-        renderResultsTabButton()
+        renderResultsTabButton(),
+        renderLogsTabButton()
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
@@ -18528,7 +18807,9 @@ const TabbedHistoryPanel = ({
 const HistoryAndNotifications = ({
   requestHistory,
   toolResult,
-  onClearHistory
+  clientLogs,
+  onClearHistory,
+  onClearLogs
 }) => {
   const [isHistoryCollapsed, setIsHistoryCollapsed] = reactExports.useState(true);
   const {
@@ -18545,6 +18826,15 @@ const HistoryAndNotifications = ({
       setIsHistoryCollapsed(false);
     }
   }, [toolResult, resetHeight]);
+  reactExports.useEffect(() => {
+    if (clientLogs.length > 0) {
+      const isLastError = clientLogs[clientLogs.length - 1].level === "error";
+      if (isLastError) {
+        resetHeight();
+        setIsHistoryCollapsed(false);
+      }
+    }
+  }, [clientLogs, resetHeight]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -18565,7 +18855,9 @@ const HistoryAndNotifications = ({
           {
             requestHistory,
             toolResult,
+            clientLogs,
             onClearHistory,
+            onClearLogs,
             onToggleCollapse: toggleCollapse
           }
         ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -18577,6 +18869,7 @@ const HistoryAndNotifications = ({
               /* @__PURE__ */ jsxRuntimeExports.jsx(History, { className: "w-5 h-5" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: "History & Results" }),
               requestHistory.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 py-1 text-xs bg-primary/10 text-primary rounded-full", children: requestHistory.length }),
+              clientLogs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 py-1 text-xs bg-blue-500/10 text-blue-500 rounded-full", children: clientLogs.length }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4 rotate-180" })
             ] })
           }
@@ -26690,10 +26983,14 @@ const ToolRunCard = ({
       setParams(loadedRequest.parameters);
       setParamsInitialized(true);
       setCurrentRequestId(loadedRequest.id);
-    } else if (selectedTool && !paramsInitialized) {
-      setParams(initializeParams(selectedTool));
-      setParamsInitialized(true);
-      setCurrentRequestId(null);
+    } else if (selectedTool) {
+      if (!paramsInitialized) {
+        setParams(initializeParams(selectedTool));
+        setParamsInitialized(true);
+        setCurrentRequestId(null);
+      } else if (!loadedRequest) {
+        setCurrentRequestId(null);
+      }
     }
   }, [selectedTool, loadedRequest, paramsInitialized]);
   const handleParamChange = (key, value) => {
@@ -26971,7 +27268,7 @@ const ToolsTab = ({
                     variant: "ghost",
                     className: "h-6 w-6 p-0 hover:bg-blue-500/20 hover:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity",
                     title: "Duplicate request",
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-3 h-3" })
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyPlus, { className: "w-3 h-3" })
                   }
                 ),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -28707,7 +29004,7 @@ var ItemText = SelectItemText;
 var ItemIndicator = SelectItemIndicator;
 var ScrollUpButton = SelectScrollUpButton$1;
 var ScrollDownButton = SelectScrollDownButton$1;
-var Separator = SelectSeparator$1;
+var Separator$1 = SelectSeparator$1;
 const Select = Root2;
 const SelectValue = Value;
 const SelectTrigger = reactExports.forwardRef(({ className, children, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -28806,14 +29103,14 @@ const SelectItem = reactExports.forwardRef(({ className, children, ...props }, r
 ));
 SelectItem.displayName = Item.displayName;
 const SelectSeparator = reactExports.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Separator,
+  Separator$1,
   {
     ref: ref2,
     className: cn("-mx-1 my-1 h-px bg-muted", className),
     ...props
   }
 ));
-SelectSeparator.displayName = Separator.displayName;
+SelectSeparator.displayName = Separator$1.displayName;
 const useTheme = () => {
   const [theme, setTheme] = reactExports.useState(() => {
     const savedTheme = localStorage.getItem("theme");
@@ -28853,7 +29150,7 @@ const useTheme = () => {
     [theme, setThemeWithSideEffect]
   );
 };
-const version$1 = "0.2.4";
+const version$1 = "0.3.1";
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -29389,22 +29686,10 @@ const Sidebar = ({
         return "text-gray-500 dark:text-gray-400";
     }
   };
-  const shouldDisableConnection = (connection) => {
-    if (!mcpAgent || connection.connectionStatus === "connected") {
-      return false;
-    }
-    if (connection.config.transportType !== "stdio") {
-      const hasConnectedRemote = mcpAgent.hasConnectedRemoteServer();
-      const connectedRemoteName = mcpAgent.getConnectedRemoteServerName();
-      return hasConnectedRemote && connectedRemoteName !== connection.name;
-    }
+  const shouldDisableConnection = () => {
     return false;
   };
-  const getConnectTooltipMessage = (connection) => {
-    if (shouldDisableConnection(connection)) {
-      const connectedRemoteName = mcpAgent == null ? void 0 : mcpAgent.getConnectedRemoteServerName();
-      return `Cannot connect: "${connectedRemoteName}" is already connected (only one remote server allowed at a time)`;
-    }
+  const getConnectTooltipMessage = () => {
     return "Connect to this server";
   };
   const getConnectionDisplayText = (connection) => {
@@ -29520,11 +29805,11 @@ const Sidebar = ({
           },
           size: "sm",
           className: "h-6 text-xs px-2",
-          disabled: shouldDisableConnection(connection),
+          disabled: shouldDisableConnection(),
           children: "Connect"
         }
       ) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: getConnectTooltipMessage(connection) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: getConnectTooltipMessage() })
     ] });
   };
   const renderConnectionItem = (connection) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -29791,7 +30076,7 @@ const SettingsTab = ({
     } catch (error) {
       console.warn("Failed to load API key from localStorage:", error);
     }
-  }, [onApiKeyChange]);
+  }, []);
   const validateApiKey = (key) => {
     const claudeApiKeyPattern = /^sk-ant-api03-[A-Za-z0-9_-]+$/;
     return claudeApiKeyPattern.test(key) && key.length > 20;
@@ -29926,7 +30211,9 @@ function validateMCPConfigStructure(config) {
     const mcpServers = config.mcpServers;
     const serverNames = Object.keys(mcpServers);
     if (serverNames.length === 0) {
-      errors.push('"mcpServers" object is empty. Please add at least one server configuration');
+      errors.push(
+        '"mcpServers" object is empty. Please add at least one server configuration'
+      );
     }
     return { isGlobal: true, isSingleNamed: false, errors };
   }
@@ -30023,17 +30310,25 @@ function parseConfigFile(jsonString) {
     errors: []
   };
   if (!isValidJSON(jsonString)) {
-    result.errors.push("Invalid JSON format. Please check for missing quotes, commas, or brackets");
+    result.errors.push(
+      "Invalid JSON format. Please check for missing quotes, commas, or brackets"
+    );
     return result;
   }
   let parsedConfig;
   try {
     parsedConfig = JSON.parse(jsonString);
   } catch (error) {
-    result.errors.push(`JSON parsing error: ${error instanceof Error ? error.message : String(error)}`);
+    result.errors.push(
+      `JSON parsing error: ${error instanceof Error ? error.message : String(error)}`
+    );
     return result;
   }
-  const { isGlobal, isSingleNamed, errors: structureErrors } = validateMCPConfigStructure(parsedConfig);
+  const {
+    isGlobal,
+    isSingleNamed,
+    errors: structureErrors
+  } = validateMCPConfigStructure(parsedConfig);
   if (structureErrors.length > 0) {
     result.errors.push(...structureErrors);
     return result;
@@ -30042,7 +30337,9 @@ function parseConfigFile(jsonString) {
   const allErrors = [];
   if (isGlobal) {
     const validConfig = parsedConfig;
-    for (const [serverName, serverConfig] of Object.entries(validConfig.mcpServers)) {
+    for (const [serverName, serverConfig] of Object.entries(
+      validConfig.mcpServers
+    )) {
       if (typeof serverName !== "string" || serverName.trim() === "") {
         allErrors.push("Server names must be non-empty strings");
         continue;
@@ -30067,7 +30364,10 @@ function parseConfigFile(jsonString) {
   } else if (isSingleNamed) {
     const serverConfig = parsedConfig;
     const serverName = Object.keys(serverConfig)[0];
-    const validationErrors = validateServerConfig(serverName, serverConfig[serverName]);
+    const validationErrors = validateServerConfig(
+      serverName,
+      serverConfig[serverName]
+    );
     if (validationErrors.length > 0) {
       allErrors.push(...validationErrors);
     } else {
@@ -30118,7 +30418,9 @@ const ConfigImportDialog = ({
   onImportServers
 }) => {
   const [configText, setConfigText] = reactExports.useState("");
-  const [parseResult, setParseResult] = reactExports.useState(null);
+  const [parseResult, setParseResult] = reactExports.useState(
+    null
+  );
   const [isValidating, setIsValidating] = reactExports.useState(false);
   const { toast: toast2 } = useToast();
   const handleConfigChange = reactExports.useCallback((value) => {
@@ -30142,7 +30444,9 @@ const ConfigImportDialog = ({
       setParseResult({
         success: false,
         servers: [],
-        errors: [`Unexpected error: ${error instanceof Error ? error.message : String(error)}`]
+        errors: [
+          `Unexpected error: ${error instanceof Error ? error.message : String(error)}`
+        ]
       });
     } finally {
       setIsValidating(false);
@@ -30324,18 +30628,10 @@ or
       ] }) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 pt-4 border-t", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Button,
-        {
-          variant: "outline",
-          onClick: handleClose,
-          className: "flex-1",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(X$1, { className: "h-4 w-4 mr-2" }),
-            "Cancel"
-          ]
-        }
-      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "outline", onClick: handleClose, className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(X$1, { className: "h-4 w-4 mr-2" }),
+        "Cancel"
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
         Button,
         {
@@ -30943,6 +31239,95 @@ const ConnectionSection = ({
     )
   ] });
 };
+const Card = reactExports.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "div",
+  {
+    ref: ref2,
+    className: cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+const CardHeader = reactExports.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "div",
+  {
+    ref: ref2,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+const CardTitle = reactExports.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "h3",
+  {
+    ref: ref2,
+    className: cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+const CardDescription = reactExports.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "p",
+  {
+    ref: ref2,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+const CardContent = reactExports.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: ref2, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+const CardFooter = reactExports.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "div",
+  {
+    ref: ref2,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+const Separator = reactExports.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: ref2,
+      role: decorative ? "none" : "separator",
+      "aria-orientation": orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = "Separator";
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
 const ClientFormSection = ({
   isCreating,
   editingClientName,
@@ -30962,16 +31347,30 @@ const ClientFormSection = ({
   onSaveMultiple
 }) => {
   const [argsString, setArgsString] = reactExports.useState("");
+  const [sseUrlString, setSseUrlString] = reactExports.useState("");
   const [multipleClients, setMultipleClients] = reactExports.useState([]);
   const [isMultipleMode, setIsMultipleMode] = reactExports.useState(false);
+  const [isManualConfigExpanded, setIsManualConfigExpanded] = reactExports.useState(false);
   const { toast: toast2 } = useToast();
   const [showImportDialog, setShowImportDialog] = reactExports.useState(false);
+  const [nameError, setNameError] = reactExports.useState("");
   reactExports.useEffect(() => {
-    var _a2;
+    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]);
+  reactExports.useEffect(() => {
+    if (clientFormName.trim()) {
+      setNameError("");
+    } else {
+      setNameError("Client name is required");
+    }
+  }, [clientFormName]);
   const handleArgsChange = (newArgsString) => {
     setArgsString(newArgsString);
     if (clientFormConfig.transportType === "stdio") {
@@ -30981,16 +31380,20 @@ const ClientFormSection = ({
       });
     }
   };
+  const handleSseUrlChange = (newSseUrlString) => {
+    setSseUrlString(newSseUrlString);
+  };
   const handleImportServers = (servers) => {
-    var _a2;
+    var _a2, _b;
     if (servers.length > 1) {
       const clients = servers.map((server, index2) => {
-        var _a3;
+        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(" ")) || "" : ""
+          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()) || "" : ""
         };
       });
       setMultipleClients(clients);
@@ -31007,6 +31410,10 @@ const ClientFormSection = ({
       }
       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()) || "");
       }
       toast2({
         title: "Configuration imported",
@@ -31025,7 +31432,9 @@ const ClientFormSection = ({
     );
   };
   const handleRemoveClient = (clientId) => {
-    setMultipleClients((prev) => prev.filter((client2) => client2.id !== clientId));
+    setMultipleClients(
+      (prev) => prev.filter((client2) => client2.id !== clientId)
+    );
   };
   const handleAddClient = () => {
     const newClient = {
@@ -31037,12 +31446,34 @@ const ClientFormSection = ({
         args: ["@modelcontextprotocol/server-everything"],
         env: {}
       },
-      argsString: "@modelcontextprotocol/server-everything"
+      argsString: "@modelcontextprotocol/server-everything",
+      sseUrlString: ""
     };
     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 () => {
-    const validClients = multipleClients.filter((client2) => client2.name.trim());
+    if (!onSaveMultiple) return;
+    const validClients = multipleClients.filter((c) => c.name.trim());
     if (validClients.length === 0) {
       toast2({
         title: "No valid clients",
@@ -31051,43 +31482,45 @@ const ClientFormSection = ({
       });
       return;
     }
-    const names = validClients.map((c) => c.name.trim());
-    const duplicates = names.filter((name, index2) => names.indexOf(name) !== index2);
-    if (duplicates.length > 0) {
-      toast2({
-        title: "Duplicate client names",
-        description: `Please ensure all client names are unique. Duplicates: ${[...new Set(duplicates)].join(", ")}`,
-        variant: "destructive"
-      });
-      return;
-    }
-    if (onSaveMultiple) {
-      try {
-        const results = await onSaveMultiple(validClients.map((client2) => ({
-          name: client2.name.trim(),
-          config: client2.config
-        })));
-        if (results.success.length > 0) {
-          toast2({
-            title: "Clients created",
-            description: `Successfully created ${results.success.length} client(s): ${results.success.join(", ")}`
-          });
-        }
-        if (results.failed.length > 0) {
-          toast2({
-            title: "Some clients failed",
-            description: `${results.failed.length} client(s) failed to create. Check console for details.`,
-            variant: "destructive"
-          });
+    const clientsToSave = validClients.map((client2) => {
+      let configToSave = { ...client2.config };
+      if (configToSave.transportType !== "stdio") {
+        try {
+          const url = new URL(client2.sseUrlString);
+          configToSave = {
+            ...configToSave,
+            url
+          };
+        } catch {
+          throw new Error(`Invalid URL for client "${client2.name}"`);
         }
-      } catch (error) {
-        console.error("Failed to create clients:", error);
+      }
+      return {
+        name: client2.name,
+        config: configToSave
+      };
+    });
+    try {
+      const result = await onSaveMultiple(clientsToSave);
+      if (result.success.length > 0) {
         toast2({
-          title: "Creation failed",
-          description: `Failed to create clients: ${error instanceof Error ? error.message : String(error)}`,
+          title: "Clients created successfully",
+          description: `Successfully created ${result.success.length} client(s).`
+        });
+      }
+      if (result.failed.length > 0) {
+        toast2({
+          title: "Some clients failed to create",
+          description: `${result.failed.length} client(s) failed to create. Check the console for details.`,
           variant: "destructive"
         });
       }
+    } catch (error) {
+      toast2({
+        title: "Error creating clients",
+        description: error instanceof Error ? error.message : "An unexpected error occurred.",
+        variant: "destructive"
+      });
     }
   };
   const handleBackToSingle = () => {
@@ -31095,110 +31528,335 @@ const ClientFormSection = ({
     setMultipleClients([]);
   };
   if (isMultipleMode) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col overflow-auto p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-6xl mx-auto w-full", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold mb-2", children: "Create Multiple Clients" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground", children: "Configure each imported server as a separate client. You can modify settings individually." })
+    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.jsxs("div", { className: "space-y-6", children: [
-        multipleClients.map((client2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border rounded-lg p-4 space-y-4", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-lg font-semibold", children: [
-              "Client ",
-              index2 + 1
+      /* @__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(
+                  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$1,
+                    {
+                      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$1, { 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+/) : []
+                            }
+                          });
+                        }
+                      },
+                      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
+                            }
+                          });
+                        }
+                      },
+                      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: handleSaveAll,
+              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" }),
+                "Create ",
+                multipleClients.filter((c) => c.name.trim()).length,
+                " ",
+                "Client(s)"
+              ]
+            }
+          )
+        ] })
+      ] }) })
+    ] }) });
+  }
+  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: "outline",
+                variant: "ghost",
                 size: "sm",
-                onClick: () => handleRemoveClient(client2.id),
                 className: "h-8 w-8 p-0",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(X$1, { className: "h-4 w-4" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium mb-2 block", children: "Client Name" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Input,
-              {
-                value: client2.name,
-                onChange: (e) => handleUpdateClient(client2.id, { name: e.target.value }),
-                placeholder: "Enter client name",
-                className: "w-full"
+                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.jsx("div", { className: "border border-border rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ] })
+        }
+      ),
+      isManualConfigExpanded && /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: "client-name", className: "text-sm font-medium", children: "Name" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Input,
+            {
+              id: "client-name",
+              value: clientFormName,
+              onChange: (e) => setClientFormName(e.target.value),
+              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(CircleAlert, { className: "h-3 w-3" }),
+            nameError
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { 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: client2.config.transportType,
+              transportType: clientFormConfig.transportType,
               setTransportType: (type2) => {
-                let newConfig;
-                let newArgsString = "";
                 if (type2 === "stdio") {
-                  newConfig = {
+                  const newConfig = {
                     transportType: type2,
                     command: "npx",
                     args: ["@modelcontextprotocol/server-everything"],
                     env: {}
                   };
-                  newArgsString = "@modelcontextprotocol/server-everything";
+                  setClientFormConfig(newConfig);
+                  setArgsString(
+                    "@modelcontextprotocol/server-everything"
+                  );
                 } else {
-                  newConfig = {
+                  setClientFormConfig({
                     transportType: type2,
                     url: new URL("https://example.com")
-                  };
-                }
-                handleUpdateClient(client2.id, {
-                  config: newConfig,
-                  argsString: newArgsString
-                });
-              },
-              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+/) : []
-                    }
                   });
+                  setArgsString("");
                 }
               },
-              sseUrl: "url" in client2.config && client2.config.url ? client2.config.url.toString() : "",
-              setSseUrl: (url) => {
-                if (client2.config.transportType !== "stdio") {
-                  handleUpdateClient(client2.id, {
-                    config: {
-                      ...client2.config,
-                      url: new URL(url)
-                    }
+              command: clientFormConfig.transportType === "stdio" && "command" in clientFormConfig ? clientFormConfig.command || "" : "",
+              setCommand: (command) => {
+                if (clientFormConfig.transportType === "stdio") {
+                  setClientFormConfig({
+                    ...clientFormConfig,
+                    command
                   });
                 }
               },
-              env: client2.config.transportType === "stdio" && "env" in client2.config ? client2.config.env || {} : {},
+              args: argsString,
+              setArgs: handleArgsChange,
+              sseUrl: sseUrlString,
+              setSseUrl: handleSseUrlChange,
+              env: clientFormConfig.transportType === "stdio" && "env" in clientFormConfig ? clientFormConfig.env || {} : {},
               setEnv: (env) => {
-                if (client2.config.transportType === "stdio") {
-                  handleUpdateClient(client2.id, {
-                    config: {
-                      ...client2.config,
-                      env
-                    }
+                if (clientFormConfig.transportType === "stdio") {
+                  setClientFormConfig({
+                    ...clientFormConfig,
+                    env
                   });
                 }
               },
@@ -31222,191 +31880,30 @@ const ClientFormSection = ({
               hideActionButtons: true
             }
           ) })
-        ] }, client2.id)),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Button,
-          {
-            variant: "outline",
-            onClick: handleAddClient,
-            className: "w-full",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "h-4 w-4 mr-2" }),
-              "Add Another Client"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-3 pt-4 border-t", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            Button,
-            {
-              onClick: handleSaveAll,
-              disabled: multipleClients.filter((c) => c.name.trim()).length === 0,
-              className: "flex-1",
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "h-4 w-4 mr-2" }),
-                "Create ",
-                multipleClients.filter((c) => c.name.trim()).length,
-                " Client(s)"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button,
-            {
-              variant: "outline",
-              onClick: handleBackToSingle,
-              className: "flex-1",
-              children: "Back to Single Mode"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button,
-            {
-              variant: "outline",
-              onClick: onCancel,
-              children: "Cancel"
-            }
-          )
-        ] }),
-        multipleClients.some((c) => !c.name.trim()) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-amber-600 text-sm", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4" }),
-          "Some clients don't have names and won't be created."
         ] })
       ] })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col overflow-auto p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto w-full", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold mb-2", children: isCreating ? "Create New Client" : `Edit Client: ${editingClientName}` }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground", children: "Configure your MCP client connection settings below." })
     ] }),
-    isCreating && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-6 p-4 rounded-lg bg-card border border-border/50 shadow-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-muted rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "h-5 w-5 text-muted-foreground" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-1", children: "Import Configuration" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "Import multiple servers from a configuration file. Supports the same format used by Claude Desktop and Cursor." }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Button,
-          {
-            onClick: () => setShowImportDialog(true),
-            size: "sm",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "w-4 h-4 mr-2" }),
-              "Import from Configuration File"
-            ]
-          }
-        )
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-      isCreating && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t pt-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium mb-1", children: "Manual Configuration" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground mb-4", children: "Or configure a single client manually with the options below." })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium mb-2 block", children: "Client Name" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "input",
-          {
-            type: "text",
-            value: clientFormName,
-            onChange: (e) => setClientFormName(e.target.value),
-            placeholder: "Enter client name",
-            className: "w-full px-3 py-2 border border-border rounded-md bg-background"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ConnectionSection,
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-3 pt-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Button,
         {
-          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: "url" in clientFormConfig && clientFormConfig.url ? clientFormConfig.url.toString() : "",
-          setSseUrl: (url) => {
-            if (clientFormConfig.transportType !== "stdio") {
-              setClientFormConfig({
-                ...clientFormConfig,
-                url: new URL(url)
-              });
-            }
-          },
-          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
+          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 Client" : "Update Client"
+          ]
         }
-      ) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-3 pt-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            onClick: onSave,
-            disabled: !clientFormName.trim(),
-            className: "px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed",
-            children: isCreating ? "Create Client" : "Update Client"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            onClick: onCancel,
-            className: "px-4 py-2 border border-border rounded-md hover:bg-muted",
-            children: "Cancel"
-          }
-        )
-      ] })
+      ),
+      /* @__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,
@@ -31476,33 +31973,39 @@ const StarGitHubModal = ({
 const SERVER_CONFIGS_STORAGE_KEY = "mcpServerConfigs_v1";
 const SELECTED_SERVER_STORAGE_KEY = "selectedServerName_v1";
 const serializeServerConfigs = (configs) => {
-  const serializable = Object.entries(configs).reduce((acc, [name, config]) => {
-    if ("url" in config && config.url) {
-      acc[name] = {
-        ...config,
-        url: config.url.toString()
-      };
-    } else {
-      acc[name] = config;
-    }
-    return acc;
-  }, {});
-  return JSON.stringify(serializable);
-};
-const deserializeServerConfigs = (serialized) => {
-  try {
-    const parsed = JSON.parse(serialized);
-    return Object.entries(parsed).reduce((acc, [name, config]) => {
-      if ("url" in config && config.url && typeof config.url === "string") {
+  const serializable = Object.entries(configs).reduce(
+    (acc, [name, config]) => {
+      if ("url" in config && config.url) {
         acc[name] = {
           ...config,
-          url: new URL(config.url)
+          url: config.url.toString()
         };
       } else {
         acc[name] = config;
       }
       return acc;
-    }, {});
+    },
+    {}
+  );
+  return JSON.stringify(serializable);
+};
+const deserializeServerConfigs = (serialized) => {
+  try {
+    const parsed = JSON.parse(serialized);
+    return Object.entries(parsed).reduce(
+      (acc, [name, config]) => {
+        if ("url" in config && config.url && typeof config.url === "string") {
+          acc[name] = {
+            ...config,
+            url: new URL(config.url)
+          };
+        } else {
+          acc[name] = config;
+        }
+        return acc;
+      },
+      {}
+    );
   } catch (error) {
     console.warn("Failed to deserialize server configs:", error);
     return {};
@@ -41933,7 +42436,7 @@ Anthropic.Models = Models2;
 Anthropic.Beta = Beta;
 const { HUMAN_PROMPT, AI_PROMPT } = Anthropic;
 const readline = {};
-const version = "0.2.4";
+const version = "0.3.1";
 const packageJson = {
   version
 };
@@ -42932,7 +43435,7 @@ const mappedTools = (tools) => {
   });
 };
 class MCPJamClient extends Client {
-  constructor(serverConfig, config, addRequestHistory, bearerToken, headerName, onStdErrNotification, claudeApiKey, onPendingRequest, getRoots) {
+  constructor(serverConfig, config, addRequestHistory, addClientLog, bearerToken, headerName, onStdErrNotification, claudeApiKey, onPendingRequest, getRoots) {
     super(
       { name: "mcpjam-inspector", version: packageJson.version },
       {
@@ -42960,11 +43463,16 @@ class MCPJamClient extends Client {
     __publicField(this, "onPendingRequest");
     __publicField(this, "getRoots");
     __publicField(this, "addRequestHistory");
+    __publicField(this, "addClientLog");
     __publicField(this, "is401Error", (error) => {
       return error instanceof SseError && error.code === 401 || error instanceof Error && error.message.includes("401") || error instanceof Error && error.message.includes("Unauthorized");
     });
     __publicField(this, "handleAuthError", async (error) => {
       if (this.is401Error(error)) {
+        this.addClientLog(
+          "Authentication error detected, attempting OAuth flow",
+          "warn"
+        );
         if (this.serverConfig.transportType !== "stdio" && "url" in this.serverConfig && this.serverConfig.url) {
           const serverAuthProvider = new InspectorOAuthClientProvider(
             this.serverConfig.url.toString()
@@ -42972,6 +43480,11 @@ class MCPJamClient extends Client {
           const result = await auth(serverAuthProvider, {
             serverUrl: this.serverConfig.url.toString()
           });
+          if (result === "AUTHORIZED") {
+            this.addClientLog("OAuth authentication successful", "info");
+          } else {
+            this.addClientLog("OAuth authentication failed", "error");
+          }
           return result === "AUTHORIZED";
         }
       }
@@ -42983,10 +43496,13 @@ class MCPJamClient extends Client {
           apiKey: newApiKey,
           dangerouslyAllowBrowser: true
         });
+        this.addClientLog("Anthropic API key updated", "info");
       }
     });
     __publicField(this, "handleCompletion", async (ref2, argName, value, signal) => {
+      var _a2;
       if (!this.completionsSupported) {
+        this.addClientLog("Completions not supported by server", "debug");
         return [];
       }
       const request = {
@@ -43000,19 +43516,31 @@ class MCPJamClient extends Client {
         }
       };
       try {
+        this.addClientLog(`Requesting completion for ${argName}`, "debug");
         const response = await this.makeRequest(request, CompleteResultSchema, {
           signal,
           suppressToast: true
         });
+        const completionCount = ((_a2 = response == null ? void 0 : response.completion.values) == null ? void 0 : _a2.length) || 0;
+        this.addClientLog(
+          `Received ${completionCount} completion suggestions`,
+          "debug"
+        );
         return (response == null ? void 0 : response.completion.values) || [];
       } catch (e) {
         if (e instanceof McpError && e.code === ErrorCode.MethodNotFound) {
           this.completionsSupported = false;
+          this.addClientLog(
+            "Completions disabled - server does not support them",
+            "warn"
+          );
           return [];
         }
+        const errorMessage = e instanceof Error ? e.message : String(e);
+        this.addClientLog(`Completion request failed: ${errorMessage}`, "error");
         toast({
           title: "Error",
-          description: e instanceof Error ? e.message : String(e),
+          description: errorMessage,
           variant: "destructive"
         });
         throw e;
@@ -43038,6 +43566,7 @@ class MCPJamClient extends Client {
     this.onPendingRequest = onPendingRequest;
     this.getRoots = getRoots;
     this.addRequestHistory = addRequestHistory;
+    this.addClientLog = addClientLog;
   }
   async connectStdio() {
     var _a2;
@@ -43064,13 +43593,27 @@ class MCPJamClient extends Client {
     };
     this.mcpProxyServerUrl = serverUrl;
     try {
+      const command = "command" in this.serverConfig ? this.serverConfig.command : "unknown";
+      this.addClientLog(
+        `Connecting to MCP server via stdio: ${command}`,
+        "info"
+      );
       this.clientTransport = new SSEClientTransport(
         serverUrl,
         transportOptions
       );
       await this.connect(this.clientTransport);
       this.connectionStatus = "connected";
+      this.addClientLog(
+        "Successfully connected to MCP server via stdio",
+        "info"
+      );
     } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      this.addClientLog(
+        `Failed to connect to MCP server via stdio: ${errorMessage}`,
+        "error"
+      );
       console.error("Error connecting to MCP server:", error);
       this.connectionStatus = "error";
       throw error;
@@ -43097,9 +43640,19 @@ class MCPJamClient extends Client {
         transportOptions
       );
       this.mcpProxyServerUrl = serverUrl;
+      this.addClientLog(
+        `Connecting to MCP server via SSE: ${this.serverConfig.url}`,
+        "info"
+      );
       await this.connect(this.clientTransport);
       this.connectionStatus = "connected";
+      this.addClientLog("Successfully connected to MCP server via SSE", "info");
     } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      this.addClientLog(
+        `Failed to connect to MCP server via SSE: ${errorMessage}`,
+        "error"
+      );
       console.error("Error connecting to MCP server:", error);
       this.connectionStatus = "error";
       throw error;
@@ -43129,9 +43682,22 @@ class MCPJamClient extends Client {
         transportOptions
       );
       this.mcpProxyServerUrl = serverUrl;
+      this.addClientLog(
+        `Connecting to MCP server via Streamable HTTP: ${this.serverConfig.url}`,
+        "info"
+      );
       await this.connect(this.clientTransport);
       this.connectionStatus = "connected";
+      this.addClientLog(
+        "Successfully connected to MCP server via Streamable HTTP",
+        "info"
+      );
     } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      this.addClientLog(
+        `Failed to connect to MCP server via Streamable HTTP: ${errorMessage}`,
+        "error"
+      );
       console.error("Error connecting to MCP server:", error);
       this.connectionStatus = "error";
       throw error;
@@ -43142,12 +43708,20 @@ class MCPJamClient extends Client {
       const proxyHealthUrl = new URL(
         `${getMCPProxyAddress(this.inspectorConfig)}/health`
       );
+      this.addClientLog("Checking MCP proxy server health", "debug");
       const proxyHealthResponse = await fetch(proxyHealthUrl);
       const proxyHealth = await proxyHealthResponse.json();
       if ((proxyHealth == null ? void 0 : proxyHealth.status) !== "ok") {
+        this.addClientLog("MCP Proxy Server is not healthy", "error");
         throw new Error("MCP Proxy Server is not healthy");
       }
+      this.addClientLog("MCP proxy server health check passed", "debug");
     } catch (e) {
+      const errorMessage = e instanceof Error ? e.message : String(e);
+      this.addClientLog(
+        `Failed to connect to MCP Proxy Server: ${errorMessage}`,
+        "error"
+      );
       console.error("Couldn't connect to MCP Proxy Server", e);
       throw e;
     }
@@ -43159,11 +43733,20 @@ class MCPJamClient extends Client {
       await this.checkProxyHealth();
     } catch {
       this.connectionStatus = "error-connecting-to-proxy";
+      this.addClientLog("Failed to connect to proxy server", "error");
       return;
     }
     try {
+      this.addClientLog(
+        `Attempting to connect to MCP server (attempt ${retryCount + 1}/${MAX_RETRIES + 1})`,
+        "info"
+      );
       const headers = {};
       if (this.serverConfig.transportType !== "stdio" && "url" in this.serverConfig && this.serverConfig.url) {
+        this.addClientLog(
+          "Setting up OAuth authentication for HTTP transport",
+          "debug"
+        );
         const serverAuthProvider = new InspectorOAuthClientProvider(
           this.serverConfig.url.toString()
         );
@@ -43171,10 +43754,23 @@ class MCPJamClient extends Client {
         if (token) {
           const authHeaderName = this.headerName || "Authorization";
           headers[authHeaderName] = `Bearer ${token}`;
+          this.addClientLog(
+            "Bearer token configured for authentication",
+            "debug"
+          );
+        } else {
+          this.addClientLog(
+            "No bearer token available for authentication",
+            "warn"
+          );
         }
       } else if (this.bearerToken) {
         const authHeaderName = this.headerName || "Authorization";
         headers[authHeaderName] = `Bearer ${this.bearerToken}`;
+        this.addClientLog(
+          "Bearer token configured for stdio transport",
+          "debug"
+        );
       }
       this.headers = { ...this.headers, ...headers };
       if (this.onStdErrNotification) {
@@ -43182,6 +43778,7 @@ class MCPJamClient extends Client {
           StdErrNotificationSchema,
           this.onStdErrNotification
         );
+        this.addClientLog("StdErr notification handler configured", "debug");
       }
       try {
         switch (this.serverConfig.transportType) {
@@ -43196,7 +43793,10 @@ class MCPJamClient extends Client {
             break;
         }
         this.serverCapabilities = this.getServerCapabilities() ?? null;
-        console.log("capabilities", this.serverCapabilities);
+        this.addClientLog(
+          `Server capabilities retrieved: ${JSON.stringify(this.serverCapabilities)}`,
+          "debug"
+        );
         const initializeRequest = {
           method: "initialize"
         };
@@ -43205,7 +43805,13 @@ class MCPJamClient extends Client {
           serverInfo: this.getServerVersion(),
           instructions: this.getInstructions()
         });
+        this.addClientLog("MCP client initialization completed", "info");
       } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        this.addClientLog(
+          `Failed to connect to MCP Server via the MCP Inspector Proxy: ${errorMessage}`,
+          "error"
+        );
         console.error(
           `Failed to connect to MCP Server via the MCP Inspector Proxy: ${this.getMCPProxyServerUrl()}:`,
           error
@@ -43213,14 +43819,19 @@ class MCPJamClient extends Client {
         if (retryCount < MAX_RETRIES) {
           const shouldRetry = await this.handleAuthError(error);
           if (shouldRetry) {
-            console.log(
-              `Retrying connection (attempt ${retryCount + 1}/${MAX_RETRIES})`
+            this.addClientLog(
+              `Retrying connection (attempt ${retryCount + 1}/${MAX_RETRIES})`,
+              "info"
             );
             return this.connectToServer(void 0, retryCount + 1);
           }
         }
         if (this.is401Error(error)) {
           this.connectionStatus = "error";
+          this.addClientLog(
+            "Authentication failed, connection terminated",
+            "error"
+          );
           return;
         }
         throw error;
@@ -43239,9 +43850,16 @@ class MCPJamClient extends Client {
           var _a3;
           return { roots: ((_a3 = this.getRoots) == null ? void 0 : _a3.call(this)) ?? [] };
         });
+        this.addClientLog("Roots request handler configured", "debug");
       }
       this.connectionStatus = "connected";
+      this.addClientLog(
+        "MCP client connection established successfully",
+        "info"
+      );
     } catch (e) {
+      const errorMessage = e instanceof Error ? e.message : String(e);
+      this.addClientLog(`Connection failed: ${errorMessage}`, "error");
       console.error(e);
       this.connectionStatus = "error";
     }
@@ -43254,6 +43872,7 @@ class MCPJamClient extends Client {
   }
   async makeRequest(request, schema, options) {
     console.log("makeRequestTriggered");
+    this.addClientLog(`Making MCP request: ${request.method}`, "debug");
     try {
       const abortController = new AbortController();
       const mcpRequestOptions = {
@@ -43264,14 +43883,20 @@ class MCPJamClient extends Client {
       };
       if (mcpRequestOptions.resetTimeoutOnProgress) {
         mcpRequestOptions.onprogress = (_params) => {
+          this.addClientLog("Progress notification received", "debug");
         };
       }
       let response;
       try {
         response = await this.request(request, schema, mcpRequestOptions);
+        this.addClientLog(`MCP request successful: ${request.method}`, "info");
         this.addRequestHistory(request, response);
       } catch (error) {
         const errorMessage = error instanceof Error ? error.message : String(error);
+        this.addClientLog(
+          `MCP request failed: ${request.method} - ${errorMessage}`,
+          "error"
+        );
         this.addRequestHistory(request, { error: errorMessage });
         throw error;
       }
@@ -43279,6 +43904,10 @@ class MCPJamClient extends Client {
     } catch (e) {
       if (!(options == null ? void 0 : options.suppressToast)) {
         const errorString = e.message ?? String(e);
+        this.addClientLog(
+          `Request error (toast shown): ${errorString}`,
+          "error"
+        );
         toast({
           title: "Error",
           description: errorString,
@@ -43289,10 +43918,13 @@ class MCPJamClient extends Client {
     }
   }
   async tools() {
+    this.addClientLog("Listing available tools", "debug");
     const tools = await this.listTools();
+    this.addClientLog(`Found ${tools.tools.length} tools`, "info");
     return tools;
   }
   async disconnect() {
+    this.addClientLog("Disconnecting from MCP server", "info");
     await this.close();
     this.connectionStatus = "disconnected";
     if (this.serverConfig.transportType !== "stdio") {
@@ -43300,21 +43932,34 @@ class MCPJamClient extends Client {
         this.serverConfig.url.toString()
       );
       authProvider.clear();
+      this.addClientLog("OAuth tokens cleared", "debug");
     }
     this.serverCapabilities = null;
+    this.addClientLog("MCP client disconnected successfully", "info");
   }
   async setServerCapabilities(capabilities) {
     this.serverCapabilities = capabilities;
+    this.addClientLog("Server capabilities updated", "debug");
   }
   async processQuery(query, tools, onUpdate, model = "claude-3-5-sonnet-latest") {
     if (!this.anthropic) {
-      throw new Error("Anthropic client not initialized");
+      const errorMessage = "Anthropic client not initialized";
+      this.addClientLog(errorMessage, "error");
+      throw new Error(errorMessage);
     }
+    this.addClientLog(
+      `Processing query with ${tools.length} tools using model ${model}`,
+      "info"
+    );
     const context = this.initializeQueryContext(query, tools, model);
     const response = await this.makeInitialApiCall(context);
     return this.processIterations(response, context, onUpdate);
   }
   initializeQueryContext(query, tools, model) {
+    this.addClientLog(
+      `Initializing query context with ${tools.length} tools`,
+      "debug"
+    );
     return {
       messages: [{ role: "user", content: query }],
       finalText: [],
@@ -43324,6 +43969,7 @@ class MCPJamClient extends Client {
     };
   }
   async makeInitialApiCall(context) {
+    this.addClientLog("Making initial API call to Anthropic", "debug");
     return this.anthropic.messages.create({
       model: context.model,
       max_tokens: 1e3,
@@ -43336,21 +43982,34 @@ class MCPJamClient extends Client {
     let iteration = 0;
     while (iteration < context.MAX_ITERATIONS) {
       iteration++;
+      this.addClientLog(
+        `Processing iteration ${iteration}/${context.MAX_ITERATIONS}`,
+        "debug"
+      );
       const iterationResult = await this.processIteration(response, context);
       this.sendIterationUpdate(iterationResult.content, onUpdate);
       if (!iterationResult.hasToolUse) {
+        this.addClientLog("No tool use detected, ending iterations", "debug");
         break;
       }
       try {
         response = await this.makeFollowUpApiCall(context);
       } catch (error) {
         const errorMessage = `[API Error: ${error}]`;
+        this.addClientLog(
+          `API error in iteration ${iteration}: ${error}`,
+          "error"
+        );
         context.finalText.push(errorMessage);
         this.sendIterationUpdate(errorMessage, onUpdate);
         break;
       }
     }
     this.handleMaxIterationsWarning(iteration, context, onUpdate);
+    this.addClientLog(
+      `Query processing completed in ${iteration} iterations`,
+      "info"
+    );
     return context.finalText.join("\n");
   }
   async processIteration(response, context) {
@@ -43367,6 +44026,7 @@ class MCPJamClient extends Client {
         );
       } else if (content.type === "tool_use") {
         hasToolUse = true;
+        this.addClientLog(`Tool use detected: ${content.name}`, "debug");
         await this.handleToolUse(
           content,
           iterationContent,
@@ -43391,12 +44051,18 @@ class MCPJamClient extends Client {
     iterationContent.push(toolMessage);
     context.finalText.push(toolMessage);
     try {
+      this.addClientLog(`Executing tool: ${content.name}`, "debug");
       await this.executeToolAndUpdateMessages(
         content,
         context,
         assistantContent
       );
+      this.addClientLog(`Tool execution successful: ${content.name}`, "debug");
     } catch (error) {
+      this.addClientLog(
+        `Tool execution failed: ${content.name} - ${error}`,
+        "error"
+      );
       this.handleToolError(
         error,
         content,
@@ -43454,6 +44120,7 @@ class MCPJamClient extends Client {
     });
   }
   async makeFollowUpApiCall(context) {
+    this.addClientLog("Making follow-up API call to Anthropic", "debug");
     return this.anthropic.messages.create({
       model: context.model,
       max_tokens: 1e3,
@@ -43471,11 +44138,16 @@ class MCPJamClient extends Client {
   handleMaxIterationsWarning(iteration, context, onUpdate) {
     if (iteration >= context.MAX_ITERATIONS) {
       const warningMessage = `[Warning: Reached maximum iterations (${context.MAX_ITERATIONS}). Stopping to prevent excessive API usage.]`;
+      this.addClientLog(
+        `Maximum iterations reached (${context.MAX_ITERATIONS})`,
+        "warn"
+      );
       context.finalText.push(warningMessage);
       this.sendIterationUpdate(warningMessage, onUpdate);
     }
   }
   async chatLoop(tools) {
+    this.addClientLog("Starting interactive chat loop", "info");
     const rl = readline.createInterface({
       input: process.stdin,
       output: process.stdout
@@ -43486,16 +44158,23 @@ class MCPJamClient extends Client {
       while (true) {
         const message = await rl.question("\nQuery: ");
         if (message.toLowerCase() === "quit") {
+          this.addClientLog("Chat loop terminated by user", "info");
           break;
         }
+        this.addClientLog(
+          `Processing user query: ${message.substring(0, 50)}${message.length > 50 ? "..." : ""}`,
+          "debug"
+        );
         const response = await this.processQuery(message, tools);
         console.log("\n" + response);
       }
     } finally {
       rl.close();
+      this.addClientLog("Chat loop interface closed", "debug");
     }
   }
   async cleanup() {
+    this.addClientLog("Cleaning up MCP client", "info");
     await this.close();
   }
 }
@@ -43511,6 +44190,7 @@ class MCPJamAgent {
     __publicField(this, "onPendingRequest");
     __publicField(this, "getRoots");
     __publicField(this, "addRequestHistory");
+    __publicField(this, "addClientLog");
     this.serverConfigs = options.servers;
     this.config = options.config || createDefaultConfig();
     this.bearerToken = options.bearerToken;
@@ -43520,6 +44200,7 @@ class MCPJamAgent {
     this.onPendingRequest = options.onPendingRequest;
     this.getRoots = options.getRoots;
     this.addRequestHistory = options.addRequestHistory;
+    this.addClientLog = options.addClientLog;
   }
   // Add or update a server configuration
   addServer(name, config) {
@@ -43604,26 +44285,6 @@ class MCPJamAgent {
     if (existingClient && existingClient.connectionStatus === "connected") {
       return existingClient;
     }
-    if (this.isRemoteServer(config)) {
-      const connectedRemoteServerName = this.getConnectedRemoteServerName();
-      if (connectedRemoteServerName && connectedRemoteServerName !== name) {
-        console.log(
-          `Automatically disconnecting existing remote server: ${connectedRemoteServerName}`
-        );
-        await this.disconnectFromServer(connectedRemoteServerName);
-        const connectedConfig = this.serverConfigs[connectedRemoteServerName];
-        if (connectedConfig && "url" in connectedConfig && connectedConfig.url) {
-          const { InspectorOAuthClientProvider: InspectorOAuthClientProvider2 } = await __vitePreload(async () => {
-            const { InspectorOAuthClientProvider: InspectorOAuthClientProvider3 } = await Promise.resolve().then(() => auth$1);
-            return { InspectorOAuthClientProvider: InspectorOAuthClientProvider3 };
-          }, true ? void 0 : void 0);
-          const oldAuthProvider = new InspectorOAuthClientProvider2(
-            connectedConfig.url.toString()
-          );
-          oldAuthProvider.clear();
-        }
-      }
-    }
     if (existingClient && existingClient.connectionStatus === "disconnected") {
       try {
         await existingClient.connectToServer();
@@ -43639,6 +44300,8 @@ class MCPJamAgent {
       // config (second parameter)
       this.addRequestHistory,
       // addRequestHistory
+      this.addClientLog,
+      // addClientLog
       this.bearerToken,
       // bearerToken
       this.headerName,
@@ -43776,7 +44439,6 @@ class MCPJamAgent {
     ).length;
     if (errorCount > 0) return "error";
     if (connectedCount === connections.length) return "connected";
-    if (connectedCount > 0) return "partial";
     return "disconnected";
   }
   // Check if there are any connected remote servers (HTTP/SSE)
@@ -43799,12 +44461,8 @@ class MCPJamAgent {
     }
     return null;
   }
-  // Check if a server config is for a remote connection
-  isRemoteServer(config) {
-    return config.transportType !== "stdio";
-  }
 }
-const useConnectionState = (addRequestHistory) => {
+const useConnectionState = (addRequestHistory, addClientLog) => {
   const [mcpAgent, setMcpAgent] = reactExports.useState(null);
   const [sidebarUpdateTrigger, setSidebarUpdateTrigger] = reactExports.useState(0);
   const forceUpdateSidebar = reactExports.useCallback(() => {
@@ -43825,7 +44483,8 @@ const useConnectionState = (addRequestHistory) => {
         onStdErrNotification,
         onPendingRequest,
         getRoots,
-        addRequestHistory
+        addRequestHistory,
+        addClientLog
       };
       const agent = new MCPJamAgent(options);
       try {
@@ -43838,7 +44497,7 @@ const useConnectionState = (addRequestHistory) => {
         throw error;
       }
     },
-    [addRequestHistory]
+    [addRequestHistory, addClientLog]
   );
   const createAgentWithoutConnecting = reactExports.useCallback(
     async (serverConfigs, config, bearerToken, headerName, claudeApiKey, onStdErrNotification, onPendingRequest, getRoots) => {
@@ -43851,13 +44510,14 @@ const useConnectionState = (addRequestHistory) => {
         onStdErrNotification,
         onPendingRequest,
         getRoots,
-        addRequestHistory
+        addRequestHistory,
+        addClientLog
       };
       const agent = new MCPJamAgent(options);
       setMcpAgent(agent);
       return agent;
     },
-    [addRequestHistory]
+    [addRequestHistory, addClientLog]
   );
   const addServer = reactExports.useCallback(
     async (name, serverConfig, config, bearerToken, headerName, claudeApiKey, onStdErrNotification, onPendingRequest, getRoots) => {
@@ -43873,7 +44533,8 @@ const useConnectionState = (addRequestHistory) => {
           onStdErrNotification,
           onPendingRequest,
           getRoots,
-          addRequestHistory
+          addRequestHistory,
+          addClientLog
         };
         const agent = new MCPJamAgent(options);
         try {
@@ -43907,7 +44568,7 @@ const useConnectionState = (addRequestHistory) => {
         }
       }
     },
-    [mcpAgent, forceUpdateSidebar, addRequestHistory]
+    [mcpAgent, forceUpdateSidebar, addRequestHistory, addClientLog]
   );
   const removeServer = reactExports.useCallback(
     async (serverName) => {
@@ -44029,7 +44690,10 @@ const useMCPOperations = () => {
   const [stdErrNotifications, setStdErrNotifications] = reactExports.useState([]);
   const [roots, setRoots] = reactExports.useState([]);
   const [pendingSampleRequests, setPendingSampleRequests] = reactExports.useState([]);
-  const [requestHistory, setRequestHistory] = reactExports.useState([]);
+  const [requestHistory, setRequestHistory] = reactExports.useState(
+    []
+  );
+  const [clientLogs, setClientLogs] = reactExports.useState([]);
   const progressTokenRef = reactExports.useRef(0);
   const clearError = reactExports.useCallback((tabKey) => {
     setErrors((prev) => ({ ...prev, [tabKey]: null }));
@@ -44046,6 +44710,27 @@ const useMCPOperations = () => {
     },
     []
   );
+  const getRequestHistory = reactExports.useCallback(() => {
+    return requestHistory;
+  }, [requestHistory]);
+  const clearRequestHistory = reactExports.useCallback(() => {
+    setRequestHistory([]);
+  }, []);
+  const addClientLog = reactExports.useCallback(
+    (message, level) => {
+      setClientLogs((prev) => [
+        ...prev,
+        { message, level, timestamp: (/* @__PURE__ */ new Date()).toISOString() }
+      ]);
+    },
+    []
+  );
+  const clearClientLogs = reactExports.useCallback(() => {
+    setClientLogs([]);
+  }, []);
+  const getClientLogs = reactExports.useCallback(() => {
+    return clientLogs;
+  }, [clientLogs]);
   const listResources = reactExports.useCallback(
     async (mcpAgent, selectedServerName) => {
       if (!mcpAgent) return;
@@ -44058,6 +44743,10 @@ const useMCPOperations = () => {
         );
         const endTime = performance.now();
         const latency = Math.round(endTime - startTime);
+        addClientLog(
+          `Listed ${flatResources.length} resources from all servers`,
+          "info"
+        );
         addRequestHistory(
           { method: "resources/list/all" },
           { resources: flatResources },
@@ -44071,6 +44760,10 @@ const useMCPOperations = () => {
           const resourcesResponse = await client2.listResources();
           const endTime = performance.now();
           const latency = Math.round(endTime - startTime);
+          addClientLog(
+            `Listed ${resourcesResponse.resources.length} resources from ${selectedServerName}`,
+            "info"
+          );
           addRequestHistory(
             { method: "resources/list", server: selectedServerName },
             { resources: resourcesResponse.resources },
@@ -44096,6 +44789,10 @@ const useMCPOperations = () => {
             const templatesResponse = await client2.listResourceTemplates();
             const endTime = performance.now();
             const latency = Math.round(endTime - startTime);
+            addClientLog(
+              `Listed ${templatesResponse.resourceTemplates.length} resource templates from all servers`,
+              "info"
+            );
             addRequestHistory(
               { method: "resourceTemplates/list/all" },
               { resourceTemplates: templatesResponse.resourceTemplates },
@@ -44111,6 +44808,10 @@ const useMCPOperations = () => {
           const templatesResponse = await client2.listResourceTemplates();
           const endTime = performance.now();
           const latency = Math.round(endTime - startTime);
+          addClientLog(
+            `Listed ${templatesResponse.resourceTemplates.length} resource templates from ${selectedServerName}`,
+            "info"
+          );
           addRequestHistory(
             { method: "resourceTemplates/list", server: selectedServerName },
             { resourceTemplates: templatesResponse.resourceTemplates },
@@ -44135,6 +44836,7 @@ const useMCPOperations = () => {
         );
         const endTime = performance.now();
         const latency = Math.round(endTime - startTime);
+        addClientLog(`Read resource ${uri} from ${selectedServerName}`, "info");
         addRequestHistory(
           { method: "resources/read", server: selectedServerName, uri },
           result,
@@ -44152,6 +44854,7 @@ const useMCPOperations = () => {
             );
             const endTime = performance.now();
             const latency = Math.round(endTime - startTime);
+            addClientLog(`Read resource ${uri} from ${serverName}`, "info");
             addRequestHistory(
               { method: "resources/read", server: serverName, uri },
               result,
@@ -44176,6 +44879,10 @@ const useMCPOperations = () => {
         const result = await client2.subscribeResource({ uri });
         const endTime = performance.now();
         const latency = Math.round(endTime - startTime);
+        addClientLog(
+          `Subscribed to resource ${uri} from ${selectedServerName}`,
+          "info"
+        );
         addRequestHistory(
           { method: "resources/subscribe", server: selectedServerName, uri },
           result,
@@ -44197,6 +44904,10 @@ const useMCPOperations = () => {
         const result = await client2.unsubscribeResource({ uri });
         const endTime = performance.now();
         const latency = Math.round(endTime - startTime);
+        addClientLog(
+          `Unsubscribed from resource ${uri} from ${selectedServerName}`,
+          "info"
+        );
         addRequestHistory(
           { method: "resources/unsubscribe", server: selectedServerName, uri },
           result,
@@ -44218,6 +44929,10 @@ const useMCPOperations = () => {
         const flatPrompts = allServerPrompts.flatMap(({ prompts: prompts2 }) => prompts2);
         const endTime = performance.now();
         const latency = Math.round(endTime - startTime);
+        addClientLog(
+          `Listed ${flatPrompts.length} prompts from all servers`,
+          "info"
+        );
         addRequestHistory(
           { method: "prompts/list/all" },
           { prompts: flatPrompts },
@@ -44231,6 +44946,10 @@ const useMCPOperations = () => {
           const promptsResponse = await client2.listPrompts();
           const endTime = performance.now();
           const latency = Math.round(endTime - startTime);
+          addClientLog(
+            `Listed ${promptsResponse.prompts.length} prompts from ${selectedServerName}`,
+            "info"
+          );
           addRequestHistory(
             { method: "prompts/list", server: selectedServerName },
             { prompts: promptsResponse.prompts },
@@ -44256,6 +44975,7 @@ const useMCPOperations = () => {
         );
         const endTime = performance.now();
         const latency = Math.round(endTime - startTime);
+        addClientLog(`Got prompt ${name} from ${selectedServerName}`, "info");
         addRequestHistory(
           { method: "prompts/get", server: selectedServerName, name, args },
           result,
@@ -44274,6 +44994,7 @@ const useMCPOperations = () => {
             );
             const endTime = performance.now();
             const latency = Math.round(endTime - startTime);
+            addClientLog(`Got prompt ${name} from ${serverName}`, "info");
             addRequestHistory(
               { method: "prompts/get", server: serverName, name, args },
               result,
@@ -44298,6 +45019,10 @@ const useMCPOperations = () => {
         const flatTools = allServerTools.flatMap(({ tools: tools2 }) => tools2);
         const endTime = performance.now();
         const latency = Math.round(endTime - startTime);
+        addClientLog(
+          `Listed ${flatTools.length} tools from all servers`,
+          "info"
+        );
         addRequestHistory(
           { method: "tools/list/all" },
           { tools: flatTools },
@@ -44311,6 +45036,10 @@ const useMCPOperations = () => {
           const toolsResponse = await client2.tools();
           const endTime = performance.now();
           const latency = Math.round(endTime - startTime);
+          addClientLog(
+            `Listed ${toolsResponse.tools.length} tools from ${selectedServerName}`,
+            "info"
+          );
           addRequestHistory(
             { method: "tools/list", server: selectedServerName },
             { tools: toolsResponse.tools },
@@ -44337,6 +45066,7 @@ const useMCPOperations = () => {
           );
           const endTime = performance.now();
           const latency = Math.round(endTime - startTime);
+          addClientLog(`Called tool ${name} on ${selectedServerName}`, "info");
           addRequestHistory(
             { method: "tools/call", server: selectedServerName, name, params },
             result,
@@ -44355,6 +45085,7 @@ const useMCPOperations = () => {
               );
               const endTime = performance.now();
               const latency = Math.round(endTime - startTime);
+              addClientLog(`Called tool ${name} on ${serverName}`, "info");
               addRequestHistory(
                 { method: "tools/call", server: serverName, name, params },
                 result,
@@ -44370,6 +45101,10 @@ const useMCPOperations = () => {
       } catch (e) {
         const endTime = performance.now();
         const latency = Math.round(endTime - startTime);
+        addClientLog(
+          `Error calling tool ${name} on ${selectedServerName}`,
+          "error"
+        );
         const toolResult2 = {
           content: [
             {
@@ -44423,6 +45158,10 @@ const useMCPOperations = () => {
       const result = await client2.handleCompletion(ref2, argName, value, signal);
       const endTime = performance.now();
       const latency = Math.round(endTime - startTime);
+      addClientLog(
+        `Completed completion for ${ref2.type} ${ref2.name} on ${selectedServerName}`,
+        "info"
+      );
       addRequestHistory(
         {
           method: "completion",
@@ -44437,7 +45176,7 @@ const useMCPOperations = () => {
       );
       return result;
     },
-    [addRequestHistory]
+    [addRequestHistory, addClientLog]
   );
   const handleApproveSampling = reactExports.useCallback(
     (id, result) => {
@@ -44466,12 +45205,6 @@ const useMCPOperations = () => {
       return updatedRequests;
     });
   }, []);
-  const getRequestHistory = reactExports.useCallback(() => {
-    return requestHistory;
-  }, [requestHistory]);
-  const clearRequestHistory = reactExports.useCallback(() => {
-    setRequestHistory([]);
-  }, []);
   return {
     // State
     resources,
@@ -44532,7 +45265,10 @@ const useMCPOperations = () => {
     handleRejectSampling,
     addRequestHistory,
     getRequestHistory,
-    clearRequestHistory
+    clearRequestHistory,
+    addClientLog,
+    clearClientLogs,
+    getClientLogs
   };
 };
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
@@ -44662,7 +45398,10 @@ const App = () => {
   var _a2, _b;
   const serverState = useServerState();
   const mcpOperations = useMCPOperations();
-  const connectionState = useConnectionState(mcpOperations.addRequestHistory);
+  const connectionState = useConnectionState(
+    mcpOperations.addRequestHistory,
+    mcpOperations.addClientLog
+  );
   const configState = useConfigState();
   const rootsRef = reactExports.useRef(mcpOperations.roots);
   const nextRequestId = reactExports.useRef(0);
@@ -44672,6 +45411,7 @@ const App = () => {
   });
   const [isSidebarExpanded, setIsSidebarExpanded] = reactExports.useState(true);
   const [showStarModal, setShowStarModal] = reactExports.useState(false);
+  const { addClientLog } = mcpOperations;
   reactExports.useEffect(() => {
     const handleHashChange = () => {
       const hash = window.location.hash.slice(1);
@@ -44700,7 +45440,7 @@ const App = () => {
     (notification) => {
       mcpOperations.setStdErrNotifications((prev) => [...prev, notification]);
     },
-    [mcpOperations.setStdErrNotifications]
+    [mcpOperations]
   );
   const onPendingRequest = reactExports.useCallback(
     (request, resolve, reject) => {
@@ -44709,7 +45449,7 @@ const App = () => {
         { id: nextRequestId.current++, request, resolve, reject }
       ]);
     },
-    [mcpOperations.setPendingSampleRequests]
+    [mcpOperations]
   );
   const getRootsCallback = reactExports.useCallback(() => rootsRef.current, []);
   const connectionStatus = connectionState.getConnectionStatus();
@@ -44721,10 +45461,11 @@ const App = () => {
     serverState.selectedServerName
   );
   const handleAddServer = reactExports.useCallback(
-    async (name, serverConfig) => {
-      console.log("🔧 Adding server without auto-connect:", {
+    async (name, serverConfig, options = {}) => {
+      console.log("🔧 Adding server with options:", {
         name,
-        serverConfig
+        serverConfig,
+        options
       });
       const shouldSelectNewServer = Object.keys(serverState.serverConfigs).length === 0;
       serverState.updateServerConfig(name, serverConfig);
@@ -44732,15 +45473,17 @@ const App = () => {
         serverState.setSelectedServerName(name);
       }
       if (!connectionState.mcpAgent) {
-        console.log(
-          "🆕 Creating agent with server config (no auto-connect)..."
+        console.log("🆕 Creating agent with server config...");
+        addClientLog(
+          `🆕 Creating agent with server config (no auto-connect) ${name} ${JSON.stringify(serverConfig)}`,
+          "info"
         );
         try {
           const allServerConfigs = {
             ...serverState.serverConfigs,
             [name]: serverConfig
           };
-          await connectionState.createAgentWithoutConnecting(
+          const agent = await connectionState.createAgentWithoutConnecting(
             allServerConfigs,
             configState.config,
             configState.bearerToken,
@@ -44750,26 +45493,41 @@ const App = () => {
             onPendingRequest,
             getRootsCallback
           );
+          if (options.autoConnect) {
+            console.log("🔌 Auto-connecting to all servers...");
+            await agent.connectToAllServers();
+            console.log("✅ Successfully connected to all servers");
+            serverState.setSelectedServerName(name);
+            connectionState.forceUpdateSidebar();
+          }
         } catch (error) {
-          console.error("❌ Failed to create agent:", error);
+          console.error("❌ Failed to create agent and connect:", error);
           throw error;
         }
       } else {
         connectionState.mcpAgent.addServer(name, serverConfig);
         connectionState.forceUpdateSidebar();
+        if (options.autoConnect) {
+          console.log(`🔌 Auto-connecting to server: "${name}"`);
+          try {
+            serverState.setSelectedServerName(name);
+            await connectionState.connectServer(name);
+            console.log(`✅ Successfully auto-connected to "${name}"`);
+          } catch (error) {
+            console.error(`❌ Failed to auto-connect to "${name}":`, error);
+          }
+        }
       }
       return name;
     },
     [
       serverState,
       connectionState,
-      configState.config,
-      configState.bearerToken,
-      configState.headerName,
-      configState.claudeApiKey,
+      configState,
       onStdErrNotification,
       onPendingRequest,
-      getRootsCallback
+      getRootsCallback,
+      addClientLog
     ]
   );
   const handleRemoveServer = reactExports.useCallback(
@@ -44789,43 +45547,55 @@ const App = () => {
   );
   const handleUpdateServer = reactExports.useCallback(
     async (serverName, config) => {
-      await connectionState.updateServerWithoutConnecting(serverName, config);
+      await connectionState.updateServer(serverName, config);
       serverState.updateServerConfig(serverName, config);
+      addClientLog(
+        `🔧 Updated server: ${serverName} ${JSON.stringify(config)}`,
+        "info"
+      );
     },
-    [connectionState, serverState]
+    [connectionState, serverState, addClientLog]
   );
-  const handleSaveClient = reactExports.useCallback(async () => {
-    if (!serverState.clientFormName.trim()) return;
-    try {
-      if (serverState.isCreatingClient) {
-        await handleAddServer(
-          serverState.clientFormName,
-          serverState.clientFormConfig
-        );
-      } else if (serverState.editingClientName) {
-        const oldServerName = serverState.editingClientName;
-        const newServerName = serverState.clientFormName.trim();
-        if (oldServerName !== newServerName) {
-          console.log(
-            `🔄 Server name changed from "${oldServerName}" to "${newServerName}"`
-          );
-          await handleRemoveServer(oldServerName);
-          await handleAddServer(newServerName, serverState.clientFormConfig);
-          if (serverState.selectedServerName === oldServerName) {
-            serverState.setSelectedServerName(newServerName);
+  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);
           }
-        } else {
-          await handleUpdateServer(
-            serverState.editingClientName,
-            serverState.clientFormConfig
-          );
         }
+        serverState.handleCancelClientForm();
+      } catch (error) {
+        console.error("Failed to save client:", error);
       }
-      serverState.handleCancelClientForm();
-    } catch (error) {
-      console.error("Failed to save client:", error);
-    }
-  }, [serverState, handleAddServer, handleUpdateServer, handleRemoveServer]);
+    },
+    [
+      serverState,
+      handleAddServer,
+      handleUpdateServer,
+      handleRemoveServer,
+      addClientLog
+    ]
+  );
   const handleSaveMultiple = reactExports.useCallback(
     async (clients) => {
       const results = {
@@ -44836,28 +45606,39 @@ const App = () => {
       for (const client2 of clients) {
         try {
           console.log(`🔧 Creating client: "${client2.name}"`);
-          await handleAddServer(client2.name, client2.config);
+          await handleAddServer(client2.name, client2.config, {
+            autoConnect: false
+          });
           results.success.push(client2.name);
-          console.log(`✅ Successfully created client: "${client2.name}"`);
+          addClientLog(
+            `✅ Successfully created client: "${client2.name}"`,
+            "info"
+          );
         } catch (error) {
           const errorMessage = error instanceof Error ? error.message : String(error);
-          console.error(`❌ Failed to create client "${client2.name}":`, errorMessage);
+          addClientLog(
+            `❌ Failed to create client "${client2.name}": ${errorMessage}`,
+            "error"
+          );
           results.failed.push({ name: client2.name, error: errorMessage });
         }
       }
       serverState.handleCancelClientForm();
       if (results.success.length > 0) {
-        console.log(`✅ Successfully created ${results.success.length} client(s): ${results.success.join(", ")}`);
+        addClientLog(
+          `✅ Successfully created ${results.success.length} client(s): ${results.success.join(", ")}`,
+          "info"
+        );
       }
       if (results.failed.length > 0) {
-        console.error(`❌ Failed to create ${results.failed.length} client(s):`, results.failed);
-        results.failed.forEach(({ name, error }) => {
-          console.error(`  - ${name}: ${error}`);
-        });
+        addClientLog(
+          `❌ Failed to create ${results.failed.length} client(s): ${results.failed.map(({ name, error }) => `${name}: ${error}`).join(", ")}`,
+          "error"
+        );
       }
       return results;
     },
-    [handleAddServer, serverState]
+    [handleAddServer, serverState, addClientLog]
   );
   const handleEditClient = reactExports.useCallback(
     (serverName) => {
@@ -44886,6 +45667,13 @@ const App = () => {
     configState.updateClaudeApiKey(newApiKey);
     updateApiKey(newApiKey);
   };
+  const handleConnectServer = reactExports.useCallback(
+    async (serverName) => {
+      await connectionState.connectServer(serverName);
+      mcpOperations.listTools(connectionState.mcpAgent, serverName);
+    },
+    [connectionState, mcpOperations]
+  );
   const makeRequest = reactExports.useCallback(
     async (request) => {
       return await mcpOperations.makeRequest(
@@ -44935,10 +45723,10 @@ const App = () => {
   }, [mcpOperations.roots]);
   reactExports.useEffect(() => {
     const restoreAgentWithoutConnecting = async () => {
+      if (window.location.pathname.startsWith("/oauth/callback")) {
+        return;
+      }
       if (Object.keys(serverState.serverConfigs).length > 0 && !connectionState.mcpAgent) {
-        console.log(
-          "🔄 Restoring agent with saved server configs (no auto-connect)..."
-        );
         try {
           await connectionState.createAgentWithoutConnecting(
             serverState.serverConfigs,
@@ -44950,24 +45738,26 @@ const App = () => {
             onPendingRequest,
             getRootsCallback
           );
-          console.log("✅ Successfully restored agent with server configs");
         } catch (error) {
-          console.error("❌ Failed to restore agent:", error);
+          addClientLog(
+            `❌ Failed to restore agent: ${error instanceof Error ? error.message : String(error)}`,
+            "error"
+          );
         }
       }
     };
     restoreAgentWithoutConnecting();
   }, [
     serverState.serverConfigs,
-    connectionState.mcpAgent,
-    connectionState.createAgentWithoutConnecting,
+    connectionState,
     configState.config,
     configState.bearerToken,
     configState.headerName,
     configState.claudeApiKey,
     onStdErrNotification,
     onPendingRequest,
-    getRootsCallback
+    getRootsCallback,
+    addClientLog
   ]);
   reactExports.useEffect(() => {
     const currentConfig = serverState.serverConfigs[serverState.selectedServerName];
@@ -45018,24 +45808,19 @@ const App = () => {
         }
       }
       const finalServerName = existingServerName || serverName;
-      console.log(
-        `🔐 OAuth connecting to: ${serverUrl} as server "${finalServerName}"`
-      );
       const serverConfig = {
         transportType: "sse",
         url: new URL(serverUrl)
       };
       try {
-        await handleAddServer(finalServerName, serverConfig);
-        serverState.setSelectedServerName(finalServerName);
-        console.log("🔌 Auto-connecting after OAuth success...");
-        await connectionState.connectServer(finalServerName);
-        console.log("✅ Auto-connected successfully after OAuth");
+        await handleAddServer(finalServerName, serverConfig, {
+          autoConnect: true
+        });
       } catch (error) {
         console.error("Failed to connect OAuth server:", error);
       }
     },
-    [serverState, handleAddServer, connectionState.connectServer]
+    [serverState, handleAddServer]
   );
   const onOAuthDebugConnect = reactExports.useCallback(
     ({
@@ -45083,7 +45868,7 @@ const App = () => {
   }, []);
   if (window.location.pathname === "/oauth/callback") {
     const OAuthCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthCallback-DkLMDxkx.js"), true ? __vite__mapDeps([0,1]) : void 0)
+      () => __vitePreload(() => import("./OAuthCallback-mxRvi54D.js"), true ? __vite__mapDeps([0,1]) : 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,
@@ -45098,7 +45883,7 @@ const App = () => {
   }
   if (window.location.pathname === "/oauth/callback/debug") {
     const OAuthDebugCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthDebugCallback-DaNmVTKt.js"), true ? __vite__mapDeps([2,1]) : void 0)
+      () => __vitePreload(() => import("./OAuthDebugCallback-CjHmkokp.js"), true ? __vite__mapDeps([2,1]) : 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,
@@ -45381,7 +46166,7 @@ const App = () => {
           selectedServerName: serverState.selectedServerName,
           onServerSelect: serverState.setSelectedServerName,
           onRemoveServer: handleRemoveServer,
-          onConnectServer: connectionState.connectServer,
+          onConnectServer: handleConnectServer,
           onDisconnectServer: connectionState.disconnectServer,
           onCreateClient: serverState.handleCreateClient,
           onEditClient: handleEditClient,
@@ -45407,7 +46192,9 @@ const App = () => {
           {
             requestHistory,
             toolResult: mcpOperations.toolResult,
-            onClearHistory: mcpOperations.clearRequestHistory
+            clientLogs: mcpOperations.getClientLogs(),
+            onClearHistory: mcpOperations.clearRequestHistory,
+            onClearLogs: mcpOperations.clearClientLogs
           }
         )
       ] })