@mcpjam/inspector 0.2.3 → 0.3.0

package/client/dist/assets/{index-CHsLKjnG.js → index-CdlQwnmd.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-CfsBsNUt.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-DuorYCq_.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-CdxuZKBm.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-BJaIMNT8.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
  *
@@ -16608,6 +16685,17 @@ const TriangleAlert = createLucideIcon("TriangleAlert", [
   ["path", { d: "M12 9v4", key: "juzpu7" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ]);
+/**
+ * @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 Upload = createLucideIcon("Upload", [
+  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
+  ["polyline", { points: "17 8 12 3 7 8", key: "t8dd8p" }],
+  ["line", { x1: "12", x2: "12", y1: "3", y2: "15", key: "widbto" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -16618,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
  *
@@ -16965,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,
@@ -17648,6 +17743,7 @@ const AuthDebugger = ({
   authState,
   updateAuthState
 }) => {
+  const [showFullToken, setShowFullToken] = reactExports.useState(false);
   const startOAuthFlow = reactExports.useCallback(() => {
     if (!serverUrl) {
       updateAuthState({
@@ -17772,9 +17868,19 @@ const AuthDebugger = ({
         authState.loading ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Loading authentication status..." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
           authState.oauthTokens && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium", children: "Access Token:" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-muted p-2 rounded-md text-xs overflow-x-auto", children: [
-              authState.oauthTokens.access_token.substring(0, 25),
-              "..."
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-muted p-2 rounded-md text-xs overflow-x-auto pr-10", children: showFullToken ? authState.oauthTokens.access_token : "********************************" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "absolute right-1 top-1 h-6 w-6 p-0 hover:bg-muted-foreground/10",
+                  onClick: () => setShowFullToken(!showFullToken),
+                  title: showFullToken ? "Hide token" : "Show full token",
+                  children: showFullToken ? /* @__PURE__ */ jsxRuntimeExports.jsx(EyeOff, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "h-3 w-3" })
+                }
+              )
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-4", children: [
@@ -17813,299 +17919,6 @@ const AuthDebugger = ({
   ] });
 };
 const ConsoleTab = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg h-full font-mono text-sm overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "opacity-50", children: "Welcome to MCP Client Console" }) });
-function getDataType(value) {
-  if (Array.isArray(value)) return "array";
-  if (value === null) return "null";
-  return typeof value;
-}
-function tryParseJson(str) {
-  const trimmed = str.trim();
-  if (!(trimmed.startsWith("{") && trimmed.endsWith("}")) && !(trimmed.startsWith("[") && trimmed.endsWith("]"))) {
-    return { success: false, data: str };
-  }
-  try {
-    return { success: true, data: JSON.parse(str) };
-  } catch {
-    return { success: false, data: str };
-  }
-}
-function updateValueAtPath(obj, path2, value) {
-  if (path2.length === 0) return value;
-  if (obj === null || obj === void 0) {
-    obj = !isNaN(Number(path2[0])) ? [] : {};
-  }
-  if (Array.isArray(obj)) {
-    return updateArray(obj, path2, value);
-  } else if (typeof obj === "object" && obj !== null) {
-    return updateObject(obj, path2, value);
-  } else {
-    console.error(
-      `Cannot update path ${path2.join(".")} in non-object/array value:`,
-      obj
-    );
-    return obj;
-  }
-}
-function updateArray(array, path2, value) {
-  const [index2, ...restPath] = path2;
-  const arrayIndex = Number(index2);
-  if (isNaN(arrayIndex)) {
-    console.error(`Invalid array index: ${index2}`);
-    return array;
-  }
-  if (arrayIndex < 0) {
-    console.error(`Array index out of bounds: ${arrayIndex} < 0`);
-    return array;
-  }
-  let newArray = [];
-  for (let i = 0; i < array.length; i++) {
-    newArray[i] = i in array ? array[i] : null;
-  }
-  if (arrayIndex >= newArray.length) {
-    const extendedArray = new Array(arrayIndex).fill(null);
-    for (let i = 0; i < newArray.length; i++) {
-      extendedArray[i] = newArray[i];
-    }
-    newArray = extendedArray;
-  }
-  if (restPath.length === 0) {
-    newArray[arrayIndex] = value;
-  } else {
-    newArray[arrayIndex] = updateValueAtPath(
-      newArray[arrayIndex],
-      restPath,
-      value
-    );
-  }
-  return newArray;
-}
-function updateObject(obj, path2, value) {
-  const [key, ...restPath] = path2;
-  if (typeof key !== "string") {
-    console.error(`Invalid object key: ${key}`);
-    return obj;
-  }
-  const newObj = { ...obj };
-  if (restPath.length === 0) {
-    newObj[key] = value;
-  } else {
-    if (!(key in newObj)) {
-      newObj[key] = {};
-    }
-    newObj[key] = updateValueAtPath(newObj[key], restPath, value);
-  }
-  return newObj;
-}
-const JsonView = reactExports.memo(
-  ({
-    data: data2,
-    name,
-    initialExpandDepth = 3,
-    className,
-    withCopyButton = true,
-    isError = false
-  }) => {
-    const { toast: toast2 } = useToast();
-    const [copied, setCopied] = reactExports.useState(false);
-    reactExports.useEffect(() => {
-      let timeoutId;
-      if (copied) {
-        timeoutId = setTimeout(() => {
-          setCopied(false);
-        }, 500);
-      }
-      return () => {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-      };
-    }, [copied]);
-    const normalizedData = reactExports.useMemo(() => {
-      return typeof data2 === "string" ? tryParseJson(data2).success ? tryParseJson(data2).data : data2 : data2;
-    }, [data2]);
-    const handleCopy = reactExports.useCallback(() => {
-      try {
-        navigator.clipboard.writeText(
-          typeof normalizedData === "string" ? normalizedData : JSON.stringify(normalizedData, null, 2)
-        );
-        setCopied(true);
-      } catch (error) {
-        toast2({
-          title: "Error",
-          description: `There was an error coping result into the clipboard: ${error instanceof Error ? error.message : String(error)}`,
-          variant: "destructive"
-        });
-      }
-    }, [toast2, normalizedData]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("p-4 border rounded relative", className), children: [
-      withCopyButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          size: "icon",
-          variant: "ghost",
-          className: "absolute top-2 right-2",
-          onClick: handleCopy,
-          children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCheck, { className: "size-4 dark:text-green-700 text-green-600" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-4 text-foreground" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-sm transition-all duration-300", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        JsonNode,
-        {
-          data: normalizedData,
-          name,
-          depth: 0,
-          initialExpandDepth,
-          isError
-        }
-      ) })
-    ] });
-  }
-);
-JsonView.displayName = "JsonView";
-const JsonNode = reactExports.memo(
-  ({
-    data: data2,
-    name,
-    depth = 0,
-    initialExpandDepth,
-    isError = false
-  }) => {
-    const [isExpanded, setIsExpanded] = reactExports.useState(depth < initialExpandDepth);
-    const [typeStyleMap] = reactExports.useState({
-      number: "text-blue-600",
-      boolean: "text-amber-600",
-      null: "text-purple-600",
-      undefined: "text-gray-600",
-      string: "text-green-600 group-hover:text-green-500",
-      error: "text-red-600 group-hover:text-red-500",
-      default: "text-gray-700"
-    });
-    const dataType = getDataType(data2);
-    const renderCollapsible = (isArray2) => {
-      const items2 = isArray2 ? data2 : Object.entries(data2);
-      const itemCount = items2.length;
-      const isEmpty = itemCount === 0;
-      const symbolMap = {
-        open: isArray2 ? "[" : "{",
-        close: isArray2 ? "]" : "}",
-        collapsed: isArray2 ? "[ ... ]" : "{ ... }",
-        empty: isArray2 ? "[]" : "{}"
-      };
-      if (isEmpty) {
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
-          name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
-            name,
-            ":"
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: symbolMap.empty })
-        ] });
-      }
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            className: "flex items-center mr-1 rounded cursor-pointer group hover:bg-gray-800/10 dark:hover:bg-gray-800/20",
-            onClick: () => setIsExpanded(!isExpanded),
-            children: [
-              name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: [
-                name,
-                ":"
-              ] }),
-              isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: symbolMap.open }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: symbolMap.collapsed }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ml-1 text-gray-700 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: [
-                  itemCount,
-                  " ",
-                  itemCount === 1 ? "item" : "items"
-                ] })
-              ] })
-            ]
-          }
-        ),
-        isExpanded && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-2 ml-4 border-l border-gray-200 dark:border-gray-800", children: isArray2 ? items2.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "my-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            JsonNode,
-            {
-              data: item,
-              name: `${index2}`,
-              depth: depth + 1,
-              initialExpandDepth
-            }
-          ) }, index2)) : items2.map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "my-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            JsonNode,
-            {
-              data: value,
-              name: key,
-              depth: depth + 1,
-              initialExpandDepth
-            }
-          ) }, key)) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-600 dark:text-gray-400", children: symbolMap.close })
-        ] })
-      ] });
-    };
-    const renderString = (value) => {
-      const maxLength = 100;
-      const isTooLong = value.length > maxLength;
-      if (!isTooLong) {
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex mr-1 rounded hover:bg-gray-800/20", children: [
-          name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
-            name,
-            ":"
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "pre",
-            {
-              className: clsx(
-                isError ? typeStyleMap.error : typeStyleMap.string,
-                "break-all whitespace-pre-wrap"
-              ),
-              children: [
-                '"',
-                value,
-                '"'
-              ]
-            }
-          )
-        ] });
-      }
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex mr-1 rounded group hover:bg-gray-800/20", children: [
-        name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: [
-          name,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "pre",
-          {
-            className: clsx(
-              isError ? typeStyleMap.error : typeStyleMap.string,
-              "cursor-pointer break-all whitespace-pre-wrap"
-            ),
-            onClick: () => setIsExpanded(!isExpanded),
-            title: isExpanded ? "Click to collapse" : "Click to expand",
-            children: isExpanded ? `"${value}"` : `"${value.slice(0, maxLength)}..."`
-          }
-        )
-      ] });
-    };
-    switch (dataType) {
-      case "object":
-      case "array":
-        return renderCollapsible(dataType === "array");
-      case "string":
-        return renderString(data2);
-      default:
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center mr-1 rounded hover:bg-gray-800/20", children: [
-          name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
-            name,
-            ":"
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: typeStyleMap[dataType] || typeStyleMap.default, children: data2 === null ? "null" : String(data2) })
-        ] });
-    }
-  }
-);
-JsonNode.displayName = "JsonNode";
 function useDraggablePane(initialHeight) {
   const [height, setHeight] = reactExports.useState(initialHeight);
   const [isDragging, setIsDragging] = reactExports.useState(false);
@@ -18161,78 +17974,836 @@ function useDraggablePane(initialHeight) {
     resetHeight
   };
 }
+function getDataType(value) {
+  if (Array.isArray(value)) return "array";
+  if (value === null) return "null";
+  return typeof value;
+}
+function tryParseJson(str) {
+  const trimmed = str.trim();
+  if (!(trimmed.startsWith("{") && trimmed.endsWith("}")) && !(trimmed.startsWith("[") && trimmed.endsWith("]"))) {
+    return { success: false, data: str };
+  }
+  try {
+    return { success: true, data: JSON.parse(str) };
+  } catch {
+    return { success: false, data: str };
+  }
+}
+function updateValueAtPath(obj, path2, value) {
+  if (path2.length === 0) return value;
+  if (obj === null || obj === void 0) {
+    obj = !isNaN(Number(path2[0])) ? [] : {};
+  }
+  if (Array.isArray(obj)) {
+    return updateArray(obj, path2, value);
+  } else if (typeof obj === "object" && obj !== null) {
+    return updateObject(obj, path2, value);
+  } else {
+    console.error(
+      `Cannot update path ${path2.join(".")} in non-object/array value:`,
+      obj
+    );
+    return obj;
+  }
+}
+function updateArray(array, path2, value) {
+  const [index2, ...restPath] = path2;
+  const arrayIndex = Number(index2);
+  if (isNaN(arrayIndex)) {
+    console.error(`Invalid array index: ${index2}`);
+    return array;
+  }
+  if (arrayIndex < 0) {
+    console.error(`Array index out of bounds: ${arrayIndex} < 0`);
+    return array;
+  }
+  let newArray = [];
+  for (let i = 0; i < array.length; i++) {
+    newArray[i] = i in array ? array[i] : null;
+  }
+  if (arrayIndex >= newArray.length) {
+    const extendedArray = new Array(arrayIndex).fill(null);
+    for (let i = 0; i < newArray.length; i++) {
+      extendedArray[i] = newArray[i];
+    }
+    newArray = extendedArray;
+  }
+  if (restPath.length === 0) {
+    newArray[arrayIndex] = value;
+  } else {
+    newArray[arrayIndex] = updateValueAtPath(
+      newArray[arrayIndex],
+      restPath,
+      value
+    );
+  }
+  return newArray;
+}
+function updateObject(obj, path2, value) {
+  const [key, ...restPath] = path2;
+  if (typeof key !== "string") {
+    console.error(`Invalid object key: ${key}`);
+    return obj;
+  }
+  const newObj = { ...obj };
+  if (restPath.length === 0) {
+    newObj[key] = value;
+  } else {
+    if (!(key in newObj)) {
+      newObj[key] = {};
+    }
+    newObj[key] = updateValueAtPath(newObj[key], restPath, value);
+  }
+  return newObj;
+}
+const JsonView = reactExports.memo(
+  ({
+    data: data2,
+    name,
+    initialExpandDepth = 3,
+    className,
+    withCopyButton = true,
+    isError = false
+  }) => {
+    const { toast: toast2 } = useToast();
+    const [copied, setCopied] = reactExports.useState(false);
+    reactExports.useEffect(() => {
+      let timeoutId;
+      if (copied) {
+        timeoutId = setTimeout(() => {
+          setCopied(false);
+        }, 500);
+      }
+      return () => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      };
+    }, [copied]);
+    const normalizedData = reactExports.useMemo(() => {
+      return typeof data2 === "string" ? tryParseJson(data2).success ? tryParseJson(data2).data : data2 : data2;
+    }, [data2]);
+    const handleCopy = reactExports.useCallback(() => {
+      try {
+        navigator.clipboard.writeText(
+          typeof normalizedData === "string" ? normalizedData : JSON.stringify(normalizedData, null, 2)
+        );
+        setCopied(true);
+      } catch (error) {
+        toast2({
+          title: "Error",
+          description: `There was an error coping result into the clipboard: ${error instanceof Error ? error.message : String(error)}`,
+          variant: "destructive"
+        });
+      }
+    }, [toast2, normalizedData]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("p-4 border rounded relative", className), children: [
+      withCopyButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          size: "icon",
+          variant: "ghost",
+          className: "absolute top-2 right-2",
+          onClick: handleCopy,
+          children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCheck, { className: "size-4 dark:text-green-700 text-green-600" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-4 text-foreground" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-sm transition-all duration-300", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        JsonNode,
+        {
+          data: normalizedData,
+          name,
+          depth: 0,
+          initialExpandDepth,
+          isError
+        }
+      ) })
+    ] });
+  }
+);
+JsonView.displayName = "JsonView";
+const JsonNode = reactExports.memo(
+  ({
+    data: data2,
+    name,
+    depth = 0,
+    initialExpandDepth,
+    isError = false
+  }) => {
+    const [isExpanded, setIsExpanded] = reactExports.useState(depth < initialExpandDepth);
+    const [typeStyleMap] = reactExports.useState({
+      number: "text-blue-600",
+      boolean: "text-amber-600",
+      null: "text-purple-600",
+      undefined: "text-gray-600",
+      string: "text-green-600 group-hover:text-green-500",
+      error: "text-red-600 group-hover:text-red-500",
+      default: "text-gray-700"
+    });
+    const dataType = getDataType(data2);
+    const renderCollapsible = (isArray2) => {
+      const items2 = isArray2 ? data2 : Object.entries(data2);
+      const itemCount = items2.length;
+      const isEmpty = itemCount === 0;
+      const symbolMap = {
+        open: isArray2 ? "[" : "{",
+        close: isArray2 ? "]" : "}",
+        collapsed: isArray2 ? "[ ... ]" : "{ ... }",
+        empty: isArray2 ? "[]" : "{}"
+      };
+      if (isEmpty) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+          name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
+            name,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: symbolMap.empty })
+        ] });
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: "flex items-center mr-1 rounded cursor-pointer group hover:bg-gray-800/10 dark:hover:bg-gray-800/20",
+            onClick: () => setIsExpanded(!isExpanded),
+            children: [
+              name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: [
+                name,
+                ":"
+              ] }),
+              isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: symbolMap.open }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: symbolMap.collapsed }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ml-1 text-gray-700 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: [
+                  itemCount,
+                  " ",
+                  itemCount === 1 ? "item" : "items"
+                ] })
+              ] })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-2 ml-4 border-l border-gray-200 dark:border-gray-800", children: isArray2 ? items2.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "my-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            JsonNode,
+            {
+              data: item,
+              name: `${index2}`,
+              depth: depth + 1,
+              initialExpandDepth
+            }
+          ) }, index2)) : items2.map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "my-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            JsonNode,
+            {
+              data: value,
+              name: key,
+              depth: depth + 1,
+              initialExpandDepth
+            }
+          ) }, key)) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-600 dark:text-gray-400", children: symbolMap.close })
+        ] })
+      ] });
+    };
+    const renderString = (value) => {
+      const maxLength = 100;
+      const isTooLong = value.length > maxLength;
+      if (!isTooLong) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex mr-1 rounded hover:bg-gray-800/20", children: [
+          name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
+            name,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "pre",
+            {
+              className: clsx(
+                isError ? typeStyleMap.error : typeStyleMap.string,
+                "break-all whitespace-pre-wrap"
+              ),
+              children: [
+                '"',
+                value,
+                '"'
+              ]
+            }
+          )
+        ] });
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex mr-1 rounded group hover:bg-gray-800/20", children: [
+        name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: [
+          name,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "pre",
+          {
+            className: clsx(
+              isError ? typeStyleMap.error : typeStyleMap.string,
+              "cursor-pointer break-all whitespace-pre-wrap"
+            ),
+            onClick: () => setIsExpanded(!isExpanded),
+            title: isExpanded ? "Click to collapse" : "Click to expand",
+            children: isExpanded ? `"${value}"` : `"${value.slice(0, maxLength)}..."`
+          }
+        )
+      ] });
+    };
+    switch (dataType) {
+      case "object":
+      case "array":
+        return renderCollapsible(dataType === "array");
+      case "string":
+        return renderString(data2);
+      default:
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center mr-1 rounded hover:bg-gray-800/20", children: [
+          name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
+            name,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: typeStyleMap[dataType] || typeStyleMap.default, children: data2 === null ? "null" : String(data2) })
+        ] });
+    }
+  }
+);
+JsonNode.displayName = "JsonNode";
+const RequestHistoryItem = ({ request, index: index2, totalRequests }) => {
+  const [isExpanded, setIsExpanded] = reactExports.useState(false);
+  const toggleExpansion = () => {
+    setIsExpanded(!isExpanded);
+  };
+  const requestData = JSON.parse(request.request);
+  const requestNumber = totalRequests - index2;
+  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 formatLatency = (latency) => {
+    if (latency === void 0) return void 0;
+    return `${latency}ms`;
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("article", { className: "text-sm bg-gradient-to-r from-secondary/50 via-secondary/70 to-secondary/50 backdrop-blur-sm p-4 rounded-xl border border-border/30 hover:border-border/60 transition-all duration-200 hover:shadow-lg", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      RequestHeader,
+      {
+        requestNumber,
+        method: requestData.method,
+        server: requestData.server,
+        timestamp: formatTimestamp(request.timestamp),
+        latency: formatLatency(request.latency),
+        isExpanded,
+        onToggle: toggleExpansion
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      RequestDetails,
+      {
+        requestData: request.request,
+        responseData: request.response
+      }
+    )
+  ] });
+};
+const RequestHeader = ({ requestNumber, method, server, timestamp, latency, isExpanded, onToggle }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  "header",
+  {
+    className: "flex justify-between items-center cursor-pointer group",
+    onClick: onToggle,
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onToggle();
+      }
+    },
+    "aria-expanded": isExpanded,
+    "aria-label": `Request ${requestNumber}: ${method}`,
+    children: [
+      /* @__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: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx(RequestBadge, { number: requestNumber }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(TimeStamp, { timestamp }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(MethodLabel, { method, server }),
+  latency && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground font-mono", children: latency })
+] });
+const RequestBadge = ({ number }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "span",
+  {
+    className: "flex items-center justify-center w-6 h-6 bg-primary/10 text-primary text-xs font-bold rounded-full",
+    "aria-label": `Request number ${number}`,
+    children: number
+  }
+);
+const TimeStamp = ({ timestamp }) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground font-mono", children: timestamp });
+const MethodLabel = ({ method, server }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono font-semibold text-foreground", children: [
+  method,
+  server && ` (${server})`
+] });
+const ExpandIcon = ({ isExpanded }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "span",
+  {
+    className: "text-muted-foreground group-hover:text-foreground transition-colors duration-200",
+    "aria-hidden": "true",
+    children: isExpanded ? "▼" : "▶"
+  }
+);
+const RequestDetails = ({ requestData, responseData }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "mt-4 space-y-4", "aria-label": "Request and response details", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx(RequestSection, { title: "Request", data: requestData }),
+  responseData && /* @__PURE__ */ jsxRuntimeExports.jsx(RequestSection, { title: "Response", data: responseData })
+] });
+const RequestSection = ({ title: title2, data: data2 }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx(SectionHeader, { title: title2 }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    JsonView,
+    {
+      data: data2,
+      className: "bg-background/80 backdrop-blur-sm border border-border/20 rounded-lg"
+    }
+  )
+] });
+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.jsx(
+          ActivityHeader,
+          {
+            requestHistory,
+            onClearHistory,
+            onToggleCollapse
+          }
+        ),
+        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;
+  if ("content" in toolResult) {
+    const parsedResult = CallToolResultSchema.safeParse(toolResult);
+    if (!parsedResult.success) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-semibold mb-2", children: "Invalid Tool Result:" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: toolResult }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-semibold mb-2", children: "Errors:" }),
+        parsedResult.error.errors.map((error, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: error }, idx))
+      ] });
+    }
+    const structuredResult = parsedResult.data;
+    const isError = structuredResult.isError ?? false;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("h4", { className: "font-semibold mb-2", children: [
+        "Tool Result:",
+        " ",
+        isError ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-600 font-semibold", children: "Error" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-green-600 font-semibold", children: "Success" })
+      ] }),
+      structuredResult.content.map((item, index2) => {
+        var _a2, _b;
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
+          item.type === "text" && /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: item.text, isError }),
+          item.type === "image" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "img",
+            {
+              src: `data:${item.mimeType};base64,${item.data}`,
+              alt: "Tool result image",
+              className: "max-w-full h-auto"
+            }
+          ),
+          item.type === "resource" && (((_b = (_a2 = item.resource) == null ? void 0 : _a2.mimeType) == null ? void 0 : _b.startsWith("audio/")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "audio",
+            {
+              controls: true,
+              src: `data:${item.resource.mimeType};base64,${item.resource.blob}`,
+              className: "w-full",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Your browser does not support audio playback" })
+            }
+          ) : /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: item.resource }))
+        ] }, index2);
+      })
+    ] });
+  } else if ("toolResult" in toolResult) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-semibold mb-2", children: "Tool Result (Legacy):" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: toolResult.toolResult })
+    ] });
+  }
+  return null;
+};
+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: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollText, { className: "w-5 h-5 text-primary" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Results" })
+      ] }),
+      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" })
+        }
+      )
+    ] }),
+    !toolResult ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 rounded-full bg-muted/20 flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-2xl", children: "🎯" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground text-lg font-medium mb-2", children: "No results yet" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground/60 text-sm", children: "Tool execution results will appear here" })
+    ] }) : /* @__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) {
+      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",
+      {
+        onClick: () => setActiveTab("activity"),
+        className: `flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 ${activeTab === "activity" ? "bg-primary/10 text-primary border border-primary/20" : "text-muted-foreground hover:text-foreground hover:bg-accent/50"}`,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Activity, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: "Activity" }),
+          requestHistory.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 py-1 text-xs bg-primary/10 text-primary rounded-full", children: requestHistory.length })
+        ]
+      },
+      "activity"
+    );
+  };
+  const renderResultsTabButton = () => {
+    const renderCircleIndicator = () => {
+      if (toolResult && !isToolResultError) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" });
+      } else if (toolResult && isToolResultError) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-red-500 rounded-full" });
+      } else {
+        return null;
+      }
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        onClick: () => setActiveTab("results"),
+        className: `flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 ${activeTab === "results" ? "bg-primary/10 text-primary border border-primary/20" : "text-muted-foreground hover:text-foreground hover:bg-accent/50"}`,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollText, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: "Results" }),
+          renderCircleIndicator()
+        ]
+      },
+      "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":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full overflow-y-auto p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ActivityTab,
+          {
+            requestHistory,
+            onClearHistory,
+            showHeader: false
+          }
+        ) });
+      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;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-transparent flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between border-b border-border/20 px-6 py-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-1", children: [
+        renderActivityTabButton(),
+        renderResultsTabButton(),
+        renderLogsTabButton()
+      ] }),
+      /* @__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" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden", children: renderTabContent() })
+  ] });
+};
 const HistoryAndNotifications = ({
   requestHistory,
   toolResult,
-  onClearHistory
+  clientLogs,
+  onClearHistory,
+  onClearLogs
 }) => {
-  const [expandedRequests, setExpandedRequests] = reactExports.useState({});
   const [isHistoryCollapsed, setIsHistoryCollapsed] = reactExports.useState(true);
   const {
     height: historyPaneHeight,
     handleDragStart,
     resetHeight
-  } = useDraggablePane(isHistoryCollapsed ? 60 : 500);
-  const toggleRequestExpansion = (index2) => {
-    setExpandedRequests((prev) => ({ ...prev, [index2]: !prev[index2] }));
-  };
+  } = useDraggablePane(500);
+  const toggleCollapse = reactExports.useCallback(() => {
+    setIsHistoryCollapsed(!isHistoryCollapsed);
+  }, [isHistoryCollapsed]);
   reactExports.useEffect(() => {
     if (toolResult) {
       resetHeight();
       setIsHistoryCollapsed(false);
     }
-  }, [toolResult]);
-  const renderToolResult = () => {
-    if (!toolResult) return null;
-    if ("content" in toolResult) {
-      const parsedResult = CallToolResultSchema.safeParse(toolResult);
-      if (!parsedResult.success) {
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-semibold mb-2", children: "Invalid Tool Result:" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: toolResult }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-semibold mb-2", children: "Errors:" }),
-          parsedResult.error.errors.map((error, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: error }, idx))
-        ] });
+  }, [toolResult, resetHeight]);
+  reactExports.useEffect(() => {
+    if (clientLogs.length > 0) {
+      const isLastError = clientLogs[clientLogs.length - 1].level === "error";
+      if (isLastError) {
+        resetHeight();
+        setIsHistoryCollapsed(false);
       }
-      const structuredResult = parsedResult.data;
-      const isError = structuredResult.isError ?? false;
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("h4", { className: "font-semibold mb-2", children: [
-          "Tool Result:",
-          " ",
-          isError ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-600 font-semibold", children: "Error" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-green-600 font-semibold", children: "Success" })
-        ] }),
-        structuredResult.content.map((item, index2) => {
-          var _a2, _b;
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
-            item.type === "text" && /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: item.text, isError }),
-            item.type === "image" && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "img",
-              {
-                src: `data:${item.mimeType};base64,${item.data}`,
-                alt: "Tool result image",
-                className: "max-w-full h-auto"
-              }
-            ),
-            item.type === "resource" && (((_b = (_a2 = item.resource) == null ? void 0 : _a2.mimeType) == null ? void 0 : _b.startsWith("audio/")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "audio",
-              {
-                controls: true,
-                src: `data:${item.resource.mimeType};base64,${item.resource.blob}`,
-                className: "w-full",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Your browser does not support audio playback" })
-              }
-            ) : /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: item.resource }))
-          ] }, index2);
-        })
-      ] });
-    } else if ("toolResult" in toolResult) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-semibold mb-2", children: "Tool Result (Legacy):" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: toolResult.toolResult })
-      ] });
     }
-  };
+  }, [clientLogs, resetHeight]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -18248,122 +18819,26 @@ const HistoryAndNotifications = ({
             onMouseDown: handleDragStart
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full overflow-hidden", children: !isHistoryCollapsed ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-transparent flex h-full", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto p-6 border-r border-border/20", children: [
-            /* @__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" })
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    onClick: () => setIsHistoryCollapsed(!isHistoryCollapsed),
-                    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.jsx("ul", { className: "space-y-4", children: requestHistory.slice().reverse().map((request, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "li",
-              {
-                className: "text-sm bg-gradient-to-r from-secondary/50 via-secondary/70 to-secondary/50 backdrop-blur-sm p-4 rounded-xl border border-border/30 hover:border-border/60 transition-all duration-200 hover:shadow-lg",
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                    "div",
-                    {
-                      className: "flex justify-between items-center cursor-pointer group",
-                      onClick: () => toggleRequestExpansion(
-                        requestHistory.length - 1 - index2
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center justify-center w-6 h-6 bg-primary/10 text-primary text-xs font-bold rounded-full", children: requestHistory.length - index2 }),
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono font-semibold text-foreground", children: JSON.parse(request.request).method })
-                        ] }),
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground group-hover:text-foreground transition-colors duration-200", children: expandedRequests[requestHistory.length - 1 - index2] ? "▼" : "▶" })
-                      ]
-                    }
-                  ),
-                  expandedRequests[requestHistory.length - 1 - index2] && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 space-y-4", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-foreground text-sm", children: "Request" }) }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        JsonView,
-                        {
-                          data: request.request,
-                          className: "bg-background/80 backdrop-blur-sm border border-border/20 rounded-lg"
-                        }
-                      )
-                    ] }),
-                    request.response && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-foreground text-sm", children: "Response" }) }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        JsonView,
-                        {
-                          data: request.response,
-                          className: "bg-background/80 backdrop-blur-sm border border-border/20 rounded-lg"
-                        }
-                      )
-                    ] })
-                  ] })
-                ]
-              },
-              index2
-            )) })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto p-6", children: [
-            /* @__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(ScrollText, { className: "w-5 h-5 text-primary" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Results" })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "button",
-                {
-                  onClick: () => setIsHistoryCollapsed(!isHistoryCollapsed),
-                  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" })
-                }
-              )
-            ] }),
-            !toolResult ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-12 h-12 rounded-full bg-muted/20 flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-2xl", children: "🎯" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground text-lg font-medium mb-2", children: "No results yet" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground/60 text-sm", children: "Tool execution results will appear here" })
-            ] }) : /* @__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: renderToolResult() })
-          ] })
-        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full overflow-hidden", children: !isHistoryCollapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TabbedHistoryPanel,
+          {
+            requestHistory,
+            toolResult,
+            clientLogs,
+            onClearHistory,
+            onClearLogs,
+            onToggleCollapse: toggleCollapse
+          }
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
             className: "h-full flex items-center justify-center bg-gradient-to-r from-muted/20 via-muted/30 to-muted/20 cursor-pointer hover:bg-gradient-to-r hover:from-muted/30 hover:via-muted/40 hover:to-muted/30 transition-all duration-200",
-            onClick: () => setIsHistoryCollapsed(!isHistoryCollapsed),
+            onClick: toggleCollapse,
             children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-4 text-muted-foreground", children: [
               /* @__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" })
             ] })
           }
@@ -19449,7 +19924,7 @@ var hideOthers = function(originalTarget, parentNode, markerName) {
 var DIALOG_NAME = "Dialog";
 var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
 var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
-var Dialog = (props) => {
+var Dialog$1 = (props) => {
   const {
     __scopeDialog,
     children,
@@ -19483,7 +19958,7 @@ var Dialog = (props) => {
     }
   );
 };
-Dialog.displayName = DIALOG_NAME;
+Dialog$1.displayName = DIALOG_NAME;
 var TRIGGER_NAME$4 = "DialogTrigger";
 var DialogTrigger = reactExports.forwardRef(
   (props, forwardedRef) => {
@@ -19744,7 +20219,7 @@ var DescriptionWarning = ({ contentRef, descriptionId }) => {
   }, [MESSAGE, contentRef, descriptionId]);
   return null;
 };
-var Root$2 = Dialog;
+var Root$2 = Dialog$1;
 var Portal$2 = DialogPortal$1;
 var Overlay = DialogOverlay$1;
 var Content$1 = DialogContent$1;
@@ -20043,6 +20518,7 @@ function B({ asChild: r2, children: o }, n) {
   return r2 && reactExports.isValidElement(o) ? reactExports.cloneElement(Me(o), { ref: o.ref }, n(o.props.children)) : n(o);
 }
 var Te = { position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", borderWidth: "0" };
+const Dialog = Root$2;
 const DialogPortal = Portal$2;
 const DialogOverlay = reactExports.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   Overlay,
@@ -20078,6 +20554,20 @@ const DialogContent = reactExports.forwardRef(({ className, children, ...props }
   )
 ] }));
 DialogContent.displayName = Content$1.displayName;
+const DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
 const DialogTitle = reactExports.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   Title,
   {
@@ -26462,10 +26952,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) => {
@@ -26540,7 +27034,7 @@ const ToolRunCard = ({
   const isUpdatingExistingRequest = currentRequestId !== null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-gradient-to-br from-card/95 via-card to-card/95 backdrop-blur-sm rounded-xl shadow-lg border border-border/40 overflow-hidden transition-all duration-300 hover:shadow-xl hover:border-border/60", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(ToolHeader, { tool: selectedTool }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3", children: selectedTool ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-y-auto max-h-96", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3", children: selectedTool ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ParametersSection,
         {
@@ -26549,15 +27043,6 @@ const ToolRunCard = ({
           onParamChange: handleParamChange
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ActionButtons,
-        {
-          onSave: handleOpenSaveDialog,
-          onRun: handleRunTool,
-          isRunning: isToolRunning,
-          isUpdating: isUpdatingExistingRequest
-        }
-      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         SaveDialog,
         {
@@ -26572,7 +27057,16 @@ const ToolRunCard = ({
           onDescriptionChange: setSaveRequestDescription
         }
       )
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyState, {}) })
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyState, {}) }) }),
+    selectedTool && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 border-t border-border/20 bg-gradient-to-r from-card/80 to-card/60", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ActionButtons,
+      {
+        onSave: handleOpenSaveDialog,
+        onRun: handleRunTool,
+        isRunning: isToolRunning,
+        isUpdating: isUpdatingExistingRequest
+      }
+    ) })
   ] });
 };
 const ToolsTab = ({
@@ -26743,7 +27237,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(
@@ -28479,7 +28973,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(
@@ -28578,14 +29072,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");
@@ -28625,7 +29119,7 @@ const useTheme = () => {
     [theme, setThemeWithSideEffect]
   );
 };
-const version$1 = "0.2.3";
+const version$1 = "0.3.0";
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -29161,22 +29655,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) => {
@@ -29292,11 +29774,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(
@@ -29656,6 +30138,475 @@ const SettingsTab = ({
     ] })
   ] }) });
 };
+function isValidJSON(jsonString) {
+  try {
+    JSON.parse(jsonString);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function isValidMCPConfig(config) {
+  return typeof config === "object" && config !== null && "mcpServers" in config && typeof config.mcpServers === "object" && config.mcpServers !== null;
+}
+function isValidServerConfig(config) {
+  if (typeof config !== "object" || config === null) {
+    return false;
+  }
+  const configObj = config;
+  const hasCommand = "command" in configObj && typeof configObj.command === "string";
+  const hasUrl = "url" in configObj && typeof configObj.url === "string";
+  return hasCommand || hasUrl;
+}
+function isSingleNamedServerConfig(config) {
+  if (typeof config !== "object" || config === null) {
+    return false;
+  }
+  const configObj = config;
+  const keys = Object.keys(configObj);
+  if (keys.length !== 1) {
+    return false;
+  }
+  const serverConfig = configObj[keys[0]];
+  return isValidServerConfig(serverConfig);
+}
+function validateMCPConfigStructure(config) {
+  const errors = [];
+  if (typeof config !== "object" || config === null) {
+    errors.push("Configuration must be a JSON object");
+    return { isGlobal: false, isSingleNamed: false, errors };
+  }
+  if (isValidMCPConfig(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');
+    }
+    return { isGlobal: true, isSingleNamed: false, errors };
+  }
+  if (isSingleNamedServerConfig(config)) {
+    return { isGlobal: false, isSingleNamed: true, errors };
+  }
+  errors.push(
+    'Invalid configuration format. Please provide either:\n• A global config: {"mcpServers": {"server-name": {...}}}\n• A named server config: {"server-name": {"command": "npx", "args": [...]}}'
+  );
+  return { isGlobal: false, isSingleNamed: false, errors };
+}
+function convertToMCPJamServerConfig(entry) {
+  if (entry.command) {
+    return {
+      transportType: "stdio",
+      command: entry.command,
+      args: entry.args,
+      env: entry.env,
+      timeout: entry.timeout,
+      capabilities: entry.capabilities,
+      enableServerLogs: entry.enableServerLogs
+    };
+  } else if (entry.url) {
+    let transportType;
+    if (entry.type) {
+      transportType = entry.type === "sse" ? "sse" : "streamable-http";
+    } else {
+      transportType = entry.url.toLowerCase().includes("sse") ? "sse" : "streamable-http";
+    }
+    return {
+      transportType,
+      url: new URL(entry.url),
+      requestInit: entry.requestInit,
+      eventSourceInit: entry.eventSourceInit,
+      reconnectionOptions: entry.reconnectionOptions,
+      sessionId: entry.sessionId,
+      timeout: entry.timeout,
+      capabilities: entry.capabilities,
+      enableServerLogs: entry.enableServerLogs
+    };
+  } else {
+    throw new Error("Invalid server configuration: missing command or url");
+  }
+}
+function validateServerConfig(name, entry) {
+  const errors = [];
+  if (!entry.command && !entry.url) {
+    errors.push(
+      `Server "${name}": Must have either 'command' (for STDIO) or 'url' (for HTTP/SSE). Example: {"command": "npx", "args": ["server-package"]} or {"url": "https://...", "type": "sse"}`
+    );
+  }
+  if (entry.command && entry.url) {
+    errors.push(
+      `Server "${name}": Cannot have both 'command' and 'url'. Use 'command' for STDIO servers or 'url' for HTTP/SSE servers, but not both`
+    );
+  }
+  if (entry.command) {
+    if (typeof entry.command !== "string" || entry.command.trim() === "") {
+      errors.push(
+        `Server "${name}": 'command' must be a non-empty string. Example: "npx", "node", "python", etc.`
+      );
+    }
+    if (entry.args && !Array.isArray(entry.args)) {
+      errors.push(
+        `Server "${name}": 'args' must be an array of strings. Example: ["@modelcontextprotocol/server-everything"] or ["build/index.js", "--port", "3000"]`
+      );
+    }
+    if (entry.env && typeof entry.env !== "object") {
+      errors.push(
+        `Server "${name}": 'env' must be an object with string keys and values. Example: {"API_KEY": "your-key", "DEBUG": "true"}`
+      );
+    }
+  }
+  if (entry.url) {
+    try {
+      new URL(entry.url);
+    } catch {
+      errors.push(
+        `Server "${name}": 'url' must be a valid URL. Example: "https://api.example.com/mcp" or "https://localhost:3000/sse"`
+      );
+    }
+    if (entry.type && !["sse", "streamable-http"].includes(entry.type)) {
+      errors.push(
+        `Server "${name}": 'type' must be either 'sse' or 'streamable-http'. If not specified, defaults to 'streamable-http'`
+      );
+    }
+  }
+  return errors;
+}
+function parseConfigFile(jsonString) {
+  const result = {
+    success: false,
+    servers: [],
+    errors: []
+  };
+  if (!isValidJSON(jsonString)) {
+    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)}`);
+    return result;
+  }
+  const { isGlobal, isSingleNamed, errors: structureErrors } = validateMCPConfigStructure(parsedConfig);
+  if (structureErrors.length > 0) {
+    result.errors.push(...structureErrors);
+    return result;
+  }
+  const servers = [];
+  const allErrors = [];
+  if (isGlobal) {
+    const validConfig = parsedConfig;
+    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;
+      }
+      const validationErrors = validateServerConfig(serverName, serverConfig);
+      if (validationErrors.length > 0) {
+        allErrors.push(...validationErrors);
+        continue;
+      }
+      try {
+        const mcpConfig = convertToMCPJamServerConfig(serverConfig);
+        servers.push({
+          name: serverName,
+          config: mcpConfig
+        });
+      } catch (error) {
+        allErrors.push(
+          `Server "${serverName}": ${error instanceof Error ? error.message : String(error)}`
+        );
+      }
+    }
+  } else if (isSingleNamed) {
+    const serverConfig = parsedConfig;
+    const serverName = Object.keys(serverConfig)[0];
+    const validationErrors = validateServerConfig(serverName, serverConfig[serverName]);
+    if (validationErrors.length > 0) {
+      allErrors.push(...validationErrors);
+    } else {
+      try {
+        const mcpConfig = convertToMCPJamServerConfig(serverConfig[serverName]);
+        servers.push({
+          name: serverName,
+          config: mcpConfig
+        });
+      } catch (error) {
+        allErrors.push(
+          `Server configuration: ${error instanceof Error ? error.message : String(error)}`
+        );
+      }
+    }
+  }
+  result.servers = servers;
+  result.errors = allErrors;
+  result.success = allErrors.length === 0 && servers.length > 0;
+  return result;
+}
+function generateExampleConfig() {
+  const exampleConfig = {
+    mcpServers: {
+      "example-stdio-server": {
+        command: "npx",
+        args: ["@modelcontextprotocol/server-everything"],
+        env: {
+          API_KEY: "your-api-key",
+          DEBUG: "true"
+        }
+      },
+      "example-sse-server": {
+        url: "https://api.example.com/mcp/sse",
+        type: "sse"
+      },
+      "example-http-server": {
+        url: "https://api.example.com/mcp/http",
+        type: "streamable-http"
+      }
+    }
+  };
+  return JSON.stringify(exampleConfig, null, 2);
+}
+const ConfigImportDialog = ({
+  open,
+  onOpenChange,
+  onImportServers
+}) => {
+  const [configText, setConfigText] = reactExports.useState("");
+  const [parseResult, setParseResult] = reactExports.useState(null);
+  const [isValidating, setIsValidating] = reactExports.useState(false);
+  const { toast: toast2 } = useToast();
+  const handleConfigChange = reactExports.useCallback((value) => {
+    setConfigText(value);
+    setParseResult(null);
+  }, []);
+  const validateConfig = reactExports.useCallback(() => {
+    if (!configText.trim()) {
+      setParseResult({
+        success: false,
+        servers: [],
+        errors: ["Please enter a configuration"]
+      });
+      return;
+    }
+    setIsValidating(true);
+    try {
+      const result = parseConfigFile(configText);
+      setParseResult(result);
+    } catch (error) {
+      setParseResult({
+        success: false,
+        servers: [],
+        errors: [`Unexpected error: ${error instanceof Error ? error.message : String(error)}`]
+      });
+    } finally {
+      setIsValidating(false);
+    }
+  }, [configText]);
+  const handleImport = reactExports.useCallback(() => {
+    if ((parseResult == null ? void 0 : parseResult.success) && parseResult.servers.length > 0) {
+      onImportServers(parseResult.servers);
+      toast2({
+        title: "Configuration imported",
+        description: `Successfully imported ${parseResult.servers.length} server(s)`
+      });
+      onOpenChange(false);
+      setConfigText("");
+      setParseResult(null);
+    }
+  }, [parseResult, onImportServers, onOpenChange, toast2]);
+  const handlePasteExample = reactExports.useCallback(() => {
+    const example = generateExampleConfig();
+    setConfigText(example);
+    setParseResult(null);
+  }, []);
+  const handleCopyExample = reactExports.useCallback(async () => {
+    try {
+      const example = generateExampleConfig();
+      await navigator.clipboard.writeText(example);
+      toast2({
+        title: "Example copied",
+        description: "Example configuration has been copied to clipboard"
+      });
+    } catch {
+      toast2({
+        title: "Copy failed",
+        description: "Failed to copy example configuration",
+        variant: "destructive"
+      });
+    }
+  }, [toast2]);
+  const handleClose = reactExports.useCallback(() => {
+    onOpenChange(false);
+    setConfigText("");
+    setParseResult(null);
+  }, [onOpenChange]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { className: "max-w-4xl max-h-[90vh] flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "h-5 w-5" }),
+        "Import MCP Configuration"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogDescription, { children: [
+        "Paste your MCP configuration JSON to import servers. Supports:",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+        "• ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Global config" }),
+        ': Complete mcp.json with "mcpServers" wrapper',
+        /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+        "• ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Named server" }),
+        ": Single server with name key"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col gap-4 min-h-0", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", children: "Configuration JSON" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: handlePasteExample,
+                className: "h-7 px-2 text-xs",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FileText, { className: "h-3 w-3 mr-1" }),
+                  "Paste Example"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: handleCopyExample,
+                className: "h-7 px-2 text-xs",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "h-3 w-3 mr-1" }),
+                  "Copy Example"
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Textarea,
+          {
+            value: configText,
+            onChange: (e) => handleConfigChange(e.target.value),
+            placeholder: `Paste your configuration here. Supports two formats:
+
+1. Global config (complete mcp.json):
+{
+  "mcpServers": {
+    "my-server": {
+      "command": "npx",
+      "args": ["@modelcontextprotocol/server-everything"]
+    }
+  }
+}
+
+2. Named server config:
+{
+  "everything": {
+    "command": "npx", 
+    "args": ["@modelcontextprotocol/server-everything"]
+  }
+}
+
+or
+
+{
+  "my-sse-server": {
+    "url": "https://api.example.com/mcp",
+    "type": "sse"
+  }
+}`,
+            className: "font-mono text-xs min-h-[200px] resize-none"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          onClick: validateConfig,
+          disabled: !configText.trim() || isValidating,
+          variant: "outline",
+          className: "flex-1",
+          children: isValidating ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-current mr-2" }),
+            "Validating..."
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4 mr-2" }),
+            "Validate Configuration"
+          ] })
+        }
+      ) }),
+      parseResult && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3 flex-1 min-h-0 overflow-y-auto", children: parseResult.success ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Alert, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheckBig, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTitle, { children: "Configuration Valid" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDescription, { children: [
+          "Found ",
+          parseResult.servers.length,
+          " server(s) ready to import:",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "mt-2 space-y-1", children: parseResult.servers.map((server) => {
+            var _a2;
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "text-xs font-mono", children: [
+              "• ",
+              /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: server.name }),
+              " (",
+              server.config.transportType,
+              ")",
+              server.config.transportType === "stdio" && "command" in server.config && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground ml-2", children: [
+                server.config.command,
+                " ",
+                (_a2 = server.config.args) == null ? void 0 : _a2.join(" ")
+              ] }),
+              server.config.transportType !== "stdio" && "url" in server.config && server.config.url && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground ml-2", children: server.config.url.toString() })
+            ] }, server.name);
+          }) })
+        ] })
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Alert, { variant: "destructive", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTitle, { children: "Configuration Invalid" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1", children: parseResult.errors.map((error, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs font-mono", children: [
+          "• ",
+          error
+        ] }, index2)) }) })
+      ] }) })
+    ] }),
+    /* @__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,
+        {
+          onClick: handleImport,
+          disabled: !(parseResult == null ? void 0 : parseResult.success) || parseResult.servers.length === 0,
+          className: "flex-1",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "h-4 w-4 mr-2" }),
+            "Import ",
+            (parseResult == null ? void 0 : parseResult.servers.length) || 0,
+            " Server(s)"
+          ]
+        }
+      )
+    ] })
+  ] }) });
+};
 const ConnectionSection = ({
   connectionStatus,
   transportType,
@@ -29681,12 +30632,14 @@ const ConnectionSection = ({
   loggingSupported,
   config,
   setConfig,
-  hideActionButtons
+  hideActionButtons,
+  onImportServers
 }) => {
   const [activeTab, setActiveTab] = reactExports.useState("connection");
   const [shownEnvVars, setShownEnvVars] = reactExports.useState(/* @__PURE__ */ new Set());
   const [copiedServerEntry, setCopiedServerEntry] = reactExports.useState(false);
   const [copiedServerFile, setCopiedServerFile] = reactExports.useState(false);
+  const [showImportDialog, setShowImportDialog] = reactExports.useState(false);
   const { toast: toast2 } = useToast();
   const reportError2 = reactExports.useCallback(
     (error) => {
@@ -29782,7 +30735,8 @@ const ConnectionSection = ({
       { key: "auth", label: "Auth" },
       ...transportType === "stdio" ? [{ key: "env", label: "Environment" }] : [],
       { key: "config", label: "Configuration" },
-      ...loggingSupported ? [{ key: "logging", label: "Logging" }] : []
+      ...loggingSupported ? [{ key: "logging", label: "Logging" }] : [],
+      ...onImportServers ? [{ key: "import", label: "Import" }] : []
     ].map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
@@ -30020,6 +30974,21 @@ const ConnectionSection = ({
             }
           )
         ] })
+      ] }),
+      activeTab === "import" && onImportServers && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-slate-800 dark:text-slate-200", children: "Import Configuration" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-slate-600 dark:text-slate-400", 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),
+            className: "w-full h-8 text-xs",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "w-3 h-3 mr-2" }),
+              "Import from Configuration File"
+            ]
+          }
+        )
       ] })
     ] });
   };
@@ -30217,9 +31186,106 @@ const ConnectionSection = ({
         },
         index2
       )) })
-    ] }) })
+    ] }) }),
+    onImportServers && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ConfigImportDialog,
+      {
+        open: showImportDialog,
+        onOpenChange: setShowImportDialog,
+        onImportServers
+      }
+    )
   ] });
 };
+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,
@@ -30234,15 +31300,35 @@ const ClientFormSection = ({
   headerName,
   setHeaderName,
   onSave,
-  onCancel
+  onCancel,
+  onImportMultipleServers,
+  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") {
@@ -30252,117 +31338,539 @@ const ClientFormSection = ({
       });
     }
   };
-  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." })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium mb-2 block", children: "Client Name" }),
+  const handleSseUrlChange = (newSseUrlString) => {
+    setSseUrlString(newSseUrlString);
+  };
+  const handleImportServers = (servers) => {
+    var _a2, _b;
+    if (servers.length > 1) {
+      const clients = servers.map((server, index2) => {
+        var _a3, _b2;
+        return {
+          id: `client-${Date.now()}-${index2}`,
+          name: server.name,
+          config: server.config,
+          argsString: server.config.transportType === "stdio" && "args" in server.config ? ((_a3 = server.config.args) == null ? void 0 : _a3.join(" ")) || "" : "",
+          sseUrlString: server.config.transportType !== "stdio" && "url" in server.config ? ((_b2 = server.config.url) == null ? void 0 : _b2.toString()) || "" : ""
+        };
+      });
+      setMultipleClients(clients);
+      setIsMultipleMode(true);
+      toast2({
+        title: "Multiple servers imported",
+        description: `Imported ${servers.length} server configurations. Configure each client below.`
+      });
+    } else if (servers.length === 1) {
+      const firstServer = servers[0];
+      setClientFormConfig(firstServer.config);
+      if (!clientFormName.trim()) {
+        setClientFormName(firstServer.name);
+      }
+      if (firstServer.config.transportType === "stdio" && "args" in firstServer.config) {
+        setArgsString(((_a2 = firstServer.config.args) == null ? void 0 : _a2.join(" ")) || "");
+        setSseUrlString("");
+      } else if (firstServer.config.transportType !== "stdio" && "url" in firstServer.config) {
+        setArgsString("");
+        setSseUrlString(((_b = firstServer.config.url) == null ? void 0 : _b.toString()) || "");
+      }
+      toast2({
+        title: "Configuration imported",
+        description: `Imported configuration for "${firstServer.name}".`
+      });
+    }
+    if (onImportMultipleServers) {
+      onImportMultipleServers(servers);
+    }
+  };
+  const handleUpdateClient = (clientId, updates) => {
+    setMultipleClients(
+      (prev) => prev.map(
+        (client2) => client2.id === clientId ? { ...client2, ...updates } : client2
+      )
+    );
+  };
+  const handleRemoveClient = (clientId) => {
+    setMultipleClients(
+      (prev) => prev.filter((client2) => client2.id !== clientId)
+    );
+  };
+  const handleAddClient = () => {
+    const newClient = {
+      id: `client-${Date.now()}`,
+      name: "",
+      config: {
+        transportType: "stdio",
+        command: "npx",
+        args: ["@modelcontextprotocol/server-everything"],
+        env: {}
+      },
+      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 () => {
+    if (!onSaveMultiple) return;
+    const validClients = multipleClients.filter((c) => c.name.trim());
+    if (validClients.length === 0) {
+      toast2({
+        title: "No valid clients",
+        description: "Please provide names for at least one client.",
+        variant: "destructive"
+      });
+      return;
+    }
+    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}"`);
+        }
+      }
+      return {
+        name: client2.name,
+        config: configToSave
+      };
+    });
+    try {
+      const result = await onSaveMultiple(clientsToSave);
+      if (result.success.length > 0) {
+        toast2({
+          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 = () => {
+    setIsMultipleMode(false);
+    setMultipleClients([]);
+  };
+  if (isMultipleMode) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col overflow-auto bg-gradient-to-br from-background to-muted/20", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto w-full p-6 space-y-6", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "input",
+          Button,
           {
-            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"
+            variant: "ghost",
+            size: "sm",
+            onClick: handleBackToSingle,
+            className: "h-8 w-8 p-0",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "h-4 w-4" })
           }
-        )
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "Create Multiple Clients" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground mt-1", children: "Configure each imported server as a separate client" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "secondary", className: "ml-auto", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Users, { className: "h-3 w-3 mr-1" }),
+          multipleClients.length,
+          " clients"
+        ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ConnectionSection,
-        {
-          connectionStatus: "disconnected",
-          transportType: clientFormConfig.transportType,
-          setTransportType: (type2) => {
-            if (type2 === "stdio") {
-              const newConfig = {
-                transportType: type2,
-                command: "npx",
-                args: ["@modelcontextprotocol/server-everything"],
-                env: {}
-              };
-              setClientFormConfig(newConfig);
-              setArgsString("@modelcontextprotocol/server-everything");
-            } else {
-              setClientFormConfig({
-                transportType: type2,
-                url: new URL("https://example.com")
-              });
-              setArgsString("");
-            }
-          },
-          command: clientFormConfig.transportType === "stdio" && "command" in clientFormConfig ? clientFormConfig.command || "" : "",
-          setCommand: (command) => {
-            if (clientFormConfig.transportType === "stdio") {
-              setClientFormConfig({
-                ...clientFormConfig,
-                command
-              });
-            }
-          },
-          args: argsString,
-          setArgs: handleArgsChange,
-          sseUrl: "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 () => {
+      /* @__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
+                    }
+                  ) })
+                ] })
+              ] })
+            ]
           },
-          loggingSupported: false,
-          hideActionButtons: true
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-3 pt-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
+          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,
           {
-            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"
+            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(
-          "button",
+        ) }) })
+      ] }),
+      /* @__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: onCancel,
-            className: "px-4 py-2 border border-border rounded-md hover:bg-muted",
-            children: "Cancel"
+            onClick: () => setShowImportDialog(true),
+            className: "w-full sm:w-auto",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "w-4 h-4 mr-2" }),
+              "Import from Configuration File"
+            ]
           }
         )
       ] })
-    ] })
+    ] }),
+    isCreating && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, { className: "w-16" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-muted-foreground", children: "or" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, { className: "w-16" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "border-2 border-border/50", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        CardHeader,
+        {
+          className: "cursor-pointer",
+          onClick: () => setIsManualConfigExpanded(!isManualConfigExpanded),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-muted rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Settings, { className: "h-5 w-5 text-muted-foreground" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardTitle, { className: "text-lg", children: isCreating ? "Manual Setup" : `Edit: ${editingClientName}` }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-8 w-8 p-0",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setIsManualConfigExpanded(!isManualConfigExpanded);
+                },
+                children: isManualConfigExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        }
+      ),
+      isManualConfigExpanded && /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Label$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: clientFormConfig.transportType,
+              setTransportType: (type2) => {
+                if (type2 === "stdio") {
+                  const newConfig = {
+                    transportType: type2,
+                    command: "npx",
+                    args: ["@modelcontextprotocol/server-everything"],
+                    env: {}
+                  };
+                  setClientFormConfig(newConfig);
+                  setArgsString(
+                    "@modelcontextprotocol/server-everything"
+                  );
+                } else {
+                  setClientFormConfig({
+                    transportType: type2,
+                    url: new URL("https://example.com")
+                  });
+                  setArgsString("");
+                }
+              },
+              command: clientFormConfig.transportType === "stdio" && "command" in clientFormConfig ? clientFormConfig.command || "" : "",
+              setCommand: (command) => {
+                if (clientFormConfig.transportType === "stdio") {
+                  setClientFormConfig({
+                    ...clientFormConfig,
+                    command
+                  });
+                }
+              },
+              args: argsString,
+              setArgs: handleArgsChange,
+              sseUrl: sseUrlString,
+              setSseUrl: handleSseUrlChange,
+              env: clientFormConfig.transportType === "stdio" && "env" in clientFormConfig ? clientFormConfig.env || {} : {},
+              setEnv: (env) => {
+                if (clientFormConfig.transportType === "stdio") {
+                  setClientFormConfig({
+                    ...clientFormConfig,
+                    env
+                  });
+                }
+              },
+              config,
+              setConfig,
+              bearerToken,
+              setBearerToken,
+              headerName,
+              setHeaderName,
+              onConnect: () => {
+              },
+              onDisconnect: () => {
+              },
+              stdErrNotifications: [],
+              clearStdErrNotifications: () => {
+              },
+              logLevel: "debug",
+              sendLogLevelRequest: async () => {
+              },
+              loggingSupported: false,
+              hideActionButtons: true
+            }
+          ) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-3 pt-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Button,
+        {
+          onClick: handleSingleSave,
+          disabled: !clientFormName.trim(),
+          className: "min-w-[180px] h-12 text-base font-semibold bg-primary hover:bg-primary/90 shadow-lg hover:shadow-xl transition-all duration-200 border-2 border-primary/20",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheck, { className: "h-5 w-5 mr-2" }),
+            isCreating ? "Create Client" : "Update Client"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: onCancel,
+          className: "text-sm text-muted-foreground hover:text-foreground transition-colors underline-offset-4 hover:underline",
+          children: "Cancel"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ConfigImportDialog,
+      {
+        open: showImportDialog,
+        onOpenChange: setShowImportDialog,
+        onImportServers: handleImportServers
+      }
+    )
   ] }) });
 };
 const StarGitHubModal = ({
@@ -30423,33 +31931,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 {};
@@ -40880,7 +42394,7 @@ Anthropic.Models = Models2;
 Anthropic.Beta = Beta;
 const { HUMAN_PROMPT, AI_PROMPT } = Anthropic;
 const readline = {};
-const version = "0.2.3";
+const version = "0.3.0";
 const packageJson = {
   version
 };
@@ -40906,17 +42420,20 @@ const getConfigOverridesFromQueryParams = (defaultConfig) => {
   for (const key of Object.keys(defaultConfig)) {
     const param = url.searchParams.get(key);
     if (param !== null) {
-      const defaultValue = defaultConfig[key].value;
-      let value = param;
-      if (typeof defaultValue === "number") {
-        value = Number(param);
-      } else if (typeof defaultValue === "boolean") {
-        value = param === "true";
-      }
-      overrides[key] = {
-        ...defaultConfig[key],
-        value
-      };
+      const defaultConfigItem = defaultConfig[key];
+      if (defaultConfigItem) {
+        const defaultValue = defaultConfigItem.value;
+        let value = param;
+        if (typeof defaultValue === "number") {
+          value = Number(param);
+        } else if (typeof defaultValue === "boolean") {
+          value = param === "true";
+        }
+        overrides[key] = {
+          ...defaultConfigItem,
+          value
+        };
+      }
     }
   }
   return overrides;
@@ -40930,10 +42447,13 @@ const initializeInspectorConfig = (localStorageKey) => {
       ...JSON.parse(savedConfig)
     };
     for (const [key, value] of Object.entries(mergedConfig)) {
-      mergedConfig[key] = {
-        ...value,
-        label: DEFAULT_INSPECTOR_CONFIG[key].label
-      };
+      const defaultConfigItem = DEFAULT_INSPECTOR_CONFIG[key];
+      if (defaultConfigItem) {
+        mergedConfig[key] = {
+          ...value,
+          label: defaultConfigItem.label
+        };
+      }
     }
     baseConfig = mergedConfig;
   } else {
@@ -41873,7 +43393,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 },
       {
@@ -41901,11 +43421,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()
@@ -41913,6 +43438,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";
         }
       }
@@ -41924,10 +43454,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 = {
@@ -41941,19 +43474,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;
@@ -41979,6 +43524,7 @@ class MCPJamClient extends Client {
     this.onPendingRequest = onPendingRequest;
     this.getRoots = getRoots;
     this.addRequestHistory = addRequestHistory;
+    this.addClientLog = addClientLog;
   }
   async connectStdio() {
     var _a2;
@@ -42005,13 +43551,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;
@@ -42038,9 +43598,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;
@@ -42070,9 +43640,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;
@@ -42083,12 +43666,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;
     }
@@ -42100,11 +43691,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()
         );
@@ -42112,10 +43712,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) {
@@ -42123,6 +43736,7 @@ class MCPJamClient extends Client {
           StdErrNotificationSchema,
           this.onStdErrNotification
         );
+        this.addClientLog("StdErr notification handler configured", "debug");
       }
       try {
         switch (this.serverConfig.transportType) {
@@ -42137,7 +43751,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"
         };
@@ -42146,7 +43763,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
@@ -42154,14 +43777,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;
@@ -42180,9 +43808,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";
     }
@@ -42195,6 +43830,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 = {
@@ -42205,14 +43841,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;
       }
@@ -42220,6 +43862,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,
@@ -42230,10 +43876,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") {
@@ -42241,21 +43890,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: [],
@@ -42265,6 +43927,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,
@@ -42277,21 +43940,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) {
@@ -42308,6 +43984,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,
@@ -42332,12 +44009,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,
@@ -42395,6 +44078,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,
@@ -42412,11 +44096,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
@@ -42427,16 +44116,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();
   }
 }
@@ -42452,6 +44148,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;
@@ -42461,6 +44158,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) {
@@ -42545,26 +44243,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();
@@ -42580,6 +44258,8 @@ class MCPJamAgent {
       // config (second parameter)
       this.addRequestHistory,
       // addRequestHistory
+      this.addClientLog,
+      // addClientLog
       this.bearerToken,
       // bearerToken
       this.headerName,
@@ -42717,7 +44397,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)
@@ -42740,12 +44419,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(() => {
@@ -42766,7 +44441,8 @@ const useConnectionState = (addRequestHistory) => {
         onStdErrNotification,
         onPendingRequest,
         getRoots,
-        addRequestHistory
+        addRequestHistory,
+        addClientLog
       };
       const agent = new MCPJamAgent(options);
       try {
@@ -42779,7 +44455,7 @@ const useConnectionState = (addRequestHistory) => {
         throw error;
       }
     },
-    [addRequestHistory]
+    [addRequestHistory, addClientLog]
   );
   const createAgentWithoutConnecting = reactExports.useCallback(
     async (serverConfigs, config, bearerToken, headerName, claudeApiKey, onStdErrNotification, onPendingRequest, getRoots) => {
@@ -42792,13 +44468,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) => {
@@ -42814,7 +44491,8 @@ const useConnectionState = (addRequestHistory) => {
           onStdErrNotification,
           onPendingRequest,
           getRoots,
-          addRequestHistory
+          addRequestHistory,
+          addClientLog
         };
         const agent = new MCPJamAgent(options);
         try {
@@ -42848,7 +44526,7 @@ const useConnectionState = (addRequestHistory) => {
         }
       }
     },
-    [mcpAgent, forceUpdateSidebar, addRequestHistory]
+    [mcpAgent, forceUpdateSidebar, addRequestHistory, addClientLog]
   );
   const removeServer = reactExports.useCallback(
     async (serverName) => {
@@ -42970,41 +44648,85 @@ 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 }));
   }, []);
   const addRequestHistory = reactExports.useCallback(
-    (request, response) => {
+    (request, response, timestamp, latency) => {
       const requestEntry = {
         request: JSON.stringify(request, null, 2),
-        response: response ? JSON.stringify(response, null, 2) : void 0
+        response: response ? JSON.stringify(response, null, 2) : void 0,
+        timestamp: timestamp || (/* @__PURE__ */ new Date()).toISOString(),
+        latency
       };
       setRequestHistory((prev) => [...prev, requestEntry]);
     },
     []
   );
+  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;
+      const startTime = performance.now();
+      const operationTimestamp = (/* @__PURE__ */ new Date()).toISOString();
       if (selectedServerName === "all") {
         const allServerResources = await mcpAgent.getAllResources();
         const flatResources = allServerResources.flatMap(
           ({ resources: resources2 }) => resources2
         );
+        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 }
+          { resources: flatResources },
+          operationTimestamp,
+          latency
         );
         setResources(flatResources);
       } else {
         const client2 = mcpAgent.getClient(selectedServerName);
         if (client2) {
           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 }
+            { resources: resourcesResponse.resources },
+            operationTimestamp,
+            latency
           );
           setResources(resourcesResponse.resources);
         }
@@ -43015,15 +44737,25 @@ const useMCPOperations = () => {
   const listResourceTemplates = reactExports.useCallback(
     async (mcpAgent, selectedServerName) => {
       if (!mcpAgent) return;
+      const startTime = performance.now();
+      const operationTimestamp = (/* @__PURE__ */ new Date()).toISOString();
       if (selectedServerName === "all") {
         const allServerResources = await mcpAgent.getAllResources();
         if (allServerResources.length > 0) {
           const client2 = mcpAgent.getClient(allServerResources[0].serverName);
           if (client2) {
             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 }
+              { resourceTemplates: templatesResponse.resourceTemplates },
+              operationTimestamp,
+              latency
             );
             setResourceTemplates(templatesResponse.resourceTemplates);
           }
@@ -43032,9 +44764,17 @@ const useMCPOperations = () => {
         const client2 = mcpAgent.getClient(selectedServerName);
         if (client2) {
           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 }
+            { resourceTemplates: templatesResponse.resourceTemplates },
+            operationTimestamp,
+            latency
           );
           setResourceTemplates(templatesResponse.resourceTemplates);
         }
@@ -43045,14 +44785,21 @@ const useMCPOperations = () => {
   const readResource = reactExports.useCallback(
     async (mcpAgent, selectedServerName, uri) => {
       if (!mcpAgent) return;
+      const startTime = performance.now();
+      const operationTimestamp = (/* @__PURE__ */ new Date()).toISOString();
       if (selectedServerName !== "all") {
         const result = await mcpAgent.readResourceFromServer(
           selectedServerName,
           uri
         );
+        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
+          result,
+          operationTimestamp,
+          latency
         );
         return result;
       } else {
@@ -43063,9 +44810,14 @@ const useMCPOperations = () => {
               serverName,
               uri
             );
+            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
+              result,
+              operationTimestamp,
+              latency
             );
             return result;
           }
@@ -43078,12 +44830,22 @@ const useMCPOperations = () => {
   const subscribeToResource = reactExports.useCallback(
     async (mcpAgent, selectedServerName, uri) => {
       if (!mcpAgent || selectedServerName === "all") return;
+      const startTime = performance.now();
+      const operationTimestamp = (/* @__PURE__ */ new Date()).toISOString();
       const client2 = mcpAgent.getClient(selectedServerName);
       if (client2) {
         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
+          result,
+          operationTimestamp,
+          latency
         );
         return result;
       }
@@ -43093,12 +44855,22 @@ const useMCPOperations = () => {
   const unsubscribeFromResource = reactExports.useCallback(
     async (mcpAgent, selectedServerName, uri) => {
       if (!mcpAgent || selectedServerName === "all") return;
+      const startTime = performance.now();
+      const operationTimestamp = (/* @__PURE__ */ new Date()).toISOString();
       const client2 = mcpAgent.getClient(selectedServerName);
       if (client2) {
         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
+          result,
+          operationTimestamp,
+          latency
         );
         return result;
       }
@@ -43108,21 +44880,39 @@ const useMCPOperations = () => {
   const listPrompts = reactExports.useCallback(
     async (mcpAgent, selectedServerName) => {
       if (!mcpAgent) return;
+      const startTime = performance.now();
+      const operationTimestamp = (/* @__PURE__ */ new Date()).toISOString();
       if (selectedServerName === "all") {
         const allServerPrompts = await mcpAgent.getAllPrompts();
         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 }
+          { prompts: flatPrompts },
+          operationTimestamp,
+          latency
         );
         setPrompts(flatPrompts);
       } else {
         const client2 = mcpAgent.getClient(selectedServerName);
         if (client2) {
           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 }
+            { prompts: promptsResponse.prompts },
+            operationTimestamp,
+            latency
           );
           setPrompts(promptsResponse.prompts);
         }
@@ -43133,15 +44923,22 @@ const useMCPOperations = () => {
   const getPrompt = reactExports.useCallback(
     async (mcpAgent, selectedServerName, name, args = {}) => {
       if (!mcpAgent) return;
+      const startTime = performance.now();
+      const operationTimestamp = (/* @__PURE__ */ new Date()).toISOString();
       if (selectedServerName !== "all") {
         const result = await mcpAgent.getPromptFromServer(
           selectedServerName,
           name,
           args
         );
+        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
+          result,
+          operationTimestamp,
+          latency
         );
         return result;
       } else {
@@ -43153,9 +44950,14 @@ const useMCPOperations = () => {
               name,
               args
             );
+            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
+              result,
+              operationTimestamp,
+              latency
             );
             return result;
           }
@@ -43168,18 +44970,39 @@ const useMCPOperations = () => {
   const listTools = reactExports.useCallback(
     async (mcpAgent, selectedServerName) => {
       if (!mcpAgent) return;
+      const startTime = performance.now();
+      const operationTimestamp = (/* @__PURE__ */ new Date()).toISOString();
       if (selectedServerName === "all") {
         const allServerTools = await mcpAgent.getAllTools();
         const flatTools = allServerTools.flatMap(({ tools: tools2 }) => tools2);
-        addRequestHistory({ method: "tools/list/all" }, { tools: flatTools });
+        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 },
+          operationTimestamp,
+          latency
+        );
         setTools(flatTools);
       } else {
         const client2 = mcpAgent.getClient(selectedServerName);
         if (client2) {
           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" },
-            { tools: toolsResponse.tools }
+            { method: "tools/list", server: selectedServerName },
+            { tools: toolsResponse.tools },
+            operationTimestamp,
+            latency
           );
           setTools(toolsResponse.tools);
         }
@@ -43190,6 +45013,8 @@ const useMCPOperations = () => {
   const callTool = reactExports.useCallback(
     async (mcpAgent, selectedServerName, name, params) => {
       if (!mcpAgent) return;
+      const startTime = performance.now();
+      const operationTimestamp = (/* @__PURE__ */ new Date()).toISOString();
       try {
         if (selectedServerName !== "all") {
           const result = await mcpAgent.callToolOnServer(
@@ -43197,9 +45022,14 @@ const useMCPOperations = () => {
             name,
             params
           );
+          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
+            result,
+            operationTimestamp,
+            latency
           );
           setToolResult(result);
         } else {
@@ -43211,9 +45041,14 @@ const useMCPOperations = () => {
                 name,
                 params
               );
+              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
+                result,
+                operationTimestamp,
+                latency
               );
               setToolResult(result);
               return;
@@ -43222,6 +45057,12 @@ const useMCPOperations = () => {
           throw new Error(`Tool ${name} not found on any server`);
         }
       } catch (e) {
+        const endTime = performance.now();
+        const latency = Math.round(endTime - startTime);
+        addClientLog(
+          `Error calling tool ${name} on ${selectedServerName}`,
+          "error"
+        );
         const toolResult2 = {
           content: [
             {
@@ -43233,7 +45074,9 @@ const useMCPOperations = () => {
         };
         addRequestHistory(
           { method: "tools/call", server: selectedServerName, name, params },
-          { error: e.message ?? String(e) }
+          { error: e.message ?? String(e) },
+          operationTimestamp,
+          latency
         );
         setToolResult(toolResult2);
       }
@@ -43264,11 +45107,19 @@ const useMCPOperations = () => {
       if (!mcpAgent || selectedServerName === "all") {
         return [];
       }
+      const startTime = performance.now();
+      const operationTimestamp = (/* @__PURE__ */ new Date()).toISOString();
       const client2 = mcpAgent.getClient(selectedServerName);
       if (!client2) {
         return [];
       }
       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",
@@ -43277,11 +45128,13 @@ const useMCPOperations = () => {
           argName,
           value
         },
-        { completions: result }
+        { completions: result },
+        operationTimestamp,
+        latency
       );
       return result;
     },
-    [addRequestHistory]
+    [addRequestHistory, addClientLog]
   );
   const handleApproveSampling = reactExports.useCallback(
     (id, result) => {
@@ -43310,12 +45163,6 @@ const useMCPOperations = () => {
       return updatedRequests;
     });
   }, []);
-  const getRequestHistory = reactExports.useCallback(() => {
-    return requestHistory;
-  }, [requestHistory]);
-  const clearRequestHistory = reactExports.useCallback(() => {
-    setRequestHistory([]);
-  }, []);
   return {
     // State
     resources,
@@ -43376,7 +45223,10 @@ const useMCPOperations = () => {
     handleRejectSampling,
     addRequestHistory,
     getRequestHistory,
-    clearRequestHistory
+    clearRequestHistory,
+    addClientLog,
+    clearClientLogs,
+    getClientLogs
   };
 };
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
@@ -43506,7 +45356,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);
@@ -43516,6 +45369,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);
@@ -43544,7 +45398,7 @@ const App = () => {
     (notification) => {
       mcpOperations.setStdErrNotifications((prev) => [...prev, notification]);
     },
-    [mcpOperations.setStdErrNotifications]
+    [mcpOperations]
   );
   const onPendingRequest = reactExports.useCallback(
     (request, resolve, reject) => {
@@ -43553,7 +45407,7 @@ const App = () => {
         { id: nextRequestId.current++, request, resolve, reject }
       ]);
     },
-    [mcpOperations.setPendingSampleRequests]
+    [mcpOperations]
   );
   const getRootsCallback = reactExports.useCallback(() => rootsRef.current, []);
   const connectionStatus = connectionState.getConnectionStatus();
@@ -43565,10 +45419,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);
@@ -43576,15 +45431,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,
@@ -43594,26 +45451,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(
@@ -43633,43 +45505,99 @@ 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,
+      handleAddServer,
+      handleUpdateServer,
+      handleRemoveServer,
+      addClientLog
+    ]
+  );
+  const handleSaveMultiple = reactExports.useCallback(
+    async (clients) => {
+      const results = {
+        success: [],
+        failed: []
+      };
+      console.log(`🔄 Creating ${clients.length} client(s)...`);
+      for (const client2 of clients) {
+        try {
+          console.log(`🔧 Creating client: "${client2.name}"`);
+          await handleAddServer(client2.name, client2.config, {
+            autoConnect: false
+          });
+          results.success.push(client2.name);
+          addClientLog(
+            `✅ Successfully created client: "${client2.name}"`,
+            "info"
           );
+        } catch (error) {
+          const errorMessage = error instanceof Error ? error.message : String(error);
+          addClientLog(
+            `❌ Failed to create client "${client2.name}": ${errorMessage}`,
+            "error"
+          );
+          results.failed.push({ name: client2.name, error: errorMessage });
         }
       }
       serverState.handleCancelClientForm();
-    } catch (error) {
-      console.error("Failed to save client:", error);
-    }
-  }, [serverState, handleAddServer, handleUpdateServer, handleRemoveServer]);
+      if (results.success.length > 0) {
+        addClientLog(
+          `✅ Successfully created ${results.success.length} client(s): ${results.success.join(", ")}`,
+          "info"
+        );
+      }
+      if (results.failed.length > 0) {
+        addClientLog(
+          `❌ Failed to create ${results.failed.length} client(s): ${results.failed.map(({ name, error }) => `${name}: ${error}`).join(", ")}`,
+          "error"
+        );
+      }
+      return results;
+    },
+    [handleAddServer, serverState, addClientLog]
+  );
   const handleEditClient = reactExports.useCallback(
     (serverName) => {
       const serverConnections = connectionState.mcpAgent ? connectionState.mcpAgent.getAllConnectionInfo() : [];
@@ -43697,6 +45625,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(
@@ -43746,10 +45681,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,
@@ -43761,24 +45696,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];
@@ -43829,24 +45766,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(
     ({
@@ -43894,7 +45826,7 @@ const App = () => {
   }, []);
   if (window.location.pathname === "/oauth/callback") {
     const OAuthCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthCallback-CfsBsNUt.js"), true ? __vite__mapDeps([0,1]) : void 0)
+      () => __vitePreload(() => import("./OAuthCallback-CdxuZKBm.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,
@@ -43909,7 +45841,7 @@ const App = () => {
   }
   if (window.location.pathname === "/oauth/callback/debug") {
     const OAuthDebugCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthDebugCallback-DuorYCq_.js"), true ? __vite__mapDeps([2,1]) : void 0)
+      () => __vitePreload(() => import("./OAuthDebugCallback-BJaIMNT8.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,
@@ -43940,6 +45872,7 @@ const App = () => {
           headerName: configState.headerName,
           setHeaderName: configState.setHeaderName,
           onSave: handleSaveClient,
+          onSaveMultiple: handleSaveMultiple,
           onCancel: serverState.handleCancelClientForm
         }
       );
@@ -44191,7 +46124,7 @@ const App = () => {
           selectedServerName: serverState.selectedServerName,
           onServerSelect: serverState.setSelectedServerName,
           onRemoveServer: handleRemoveServer,
-          onConnectServer: connectionState.connectServer,
+          onConnectServer: handleConnectServer,
           onDisconnectServer: connectionState.disconnectServer,
           onCreateClient: serverState.handleCreateClient,
           onEditClient: handleEditClient,
@@ -44217,7 +46150,9 @@ const App = () => {
           {
             requestHistory,
             toolResult: mcpOperations.toolResult,
-            onClearHistory: mcpOperations.clearRequestHistory
+            clientLogs: mcpOperations.getClientLogs(),
+            onClearHistory: mcpOperations.clearRequestHistory,
+            onClearLogs: mcpOperations.clearClientLogs
           }
         )
       ] })