@mcpjam/inspector 0.2.3 → 0.2.4

package/client/dist/assets/{index-CHsLKjnG.js → index-CLxTHffA.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-DkLMDxkx.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-DaNmVTKt.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);
@@ -16608,6 +16608,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
  *
@@ -17648,6 +17659,7 @@ const AuthDebugger = ({
   authState,
   updateAuthState
 }) => {
+  const [showFullToken, setShowFullToken] = reactExports.useState(false);
   const startOAuthFlow = reactExports.useCallback(() => {
     if (!serverUrl) {
       updateAuthState({
@@ -17772,9 +17784,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,6 +17835,61 @@ 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 useDraggablePane(initialHeight) {
+  const [height, setHeight] = reactExports.useState(initialHeight);
+  const [isDragging, setIsDragging] = reactExports.useState(false);
+  const dragStartY = reactExports.useRef(0);
+  const dragStartHeight = reactExports.useRef(0);
+  const handleDragStart = reactExports.useCallback(
+    (e) => {
+      setIsDragging(true);
+      dragStartY.current = e.clientY;
+      dragStartHeight.current = height;
+      document.body.style.userSelect = "none";
+    },
+    [height]
+  );
+  const handleDragMove = reactExports.useCallback(
+    (e) => {
+      if (!isDragging) return;
+      const deltaY = dragStartY.current - e.clientY;
+      const newHeight = Math.max(
+        100,
+        Math.min(800, dragStartHeight.current + deltaY)
+      );
+      setHeight(newHeight);
+    },
+    [isDragging]
+  );
+  const handleDragEnd = reactExports.useCallback(() => {
+    setIsDragging(false);
+    document.body.style.userSelect = "";
+  }, []);
+  const resetHeight = reactExports.useCallback(() => {
+    setHeight(initialHeight);
+  }, [initialHeight]);
+  reactExports.useEffect(() => {
+    if (!isDragging) {
+      setHeight(initialHeight);
+    }
+  }, [initialHeight, isDragging]);
+  reactExports.useEffect(() => {
+    if (isDragging) {
+      window.addEventListener("mousemove", handleDragMove);
+      window.addEventListener("mouseup", handleDragEnd);
+      return () => {
+        window.removeEventListener("mousemove", handleDragMove);
+        window.removeEventListener("mouseup", handleDragEnd);
+      };
+    }
+  }, [isDragging, handleDragMove, handleDragEnd]);
+  return {
+    height,
+    isDragging,
+    handleDragStart,
+    resetHeight
+  };
+}
 function getDataType(value) {
   if (Array.isArray(value)) return "array";
   if (value === null) return "null";
@@ -18106,133 +18183,368 @@ const JsonNode = reactExports.memo(
   }
 );
 JsonNode.displayName = "JsonNode";
-function useDraggablePane(initialHeight) {
-  const [height, setHeight] = reactExports.useState(initialHeight);
-  const [isDragging, setIsDragging] = reactExports.useState(false);
-  const dragStartY = reactExports.useRef(0);
-  const dragStartHeight = reactExports.useRef(0);
-  const handleDragStart = reactExports.useCallback(
-    (e) => {
-      setIsDragging(true);
-      dragStartY.current = e.clientY;
-      dragStartHeight.current = height;
-      document.body.style.userSelect = "none";
-    },
-    [height]
-  );
-  const handleDragMove = reactExports.useCallback(
-    (e) => {
-      if (!isDragging) return;
-      const deltaY = dragStartY.current - e.clientY;
-      const newHeight = Math.max(
-        100,
-        Math.min(800, dragStartHeight.current + deltaY)
-      );
-      setHeight(newHeight);
+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();
+      }
     },
-    [isDragging]
-  );
-  const handleDragEnd = reactExports.useCallback(() => {
-    setIsDragging(false);
-    document.body.style.userSelect = "";
-  }, []);
-  const resetHeight = reactExports.useCallback(() => {
-    setHeight(initialHeight);
-  }, [initialHeight]);
-  reactExports.useEffect(() => {
-    if (!isDragging) {
-      setHeight(initialHeight);
+    "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"
     }
-  }, [initialHeight, isDragging]);
+  )
+] });
+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 ActivityTab = ({
+  requestHistory,
+  onClearHistory,
+  onToggleCollapse,
+  showHeader = true
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex-1 overflow-y-auto ${showHeader ? "p-6 border-r border-border/20" : ""}`, children: [
+    showHeader && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "text-lg font-bold text-foreground flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Activity, { className: "w-5 h-5 text-primary" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "All Activity" })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
+        requestHistory.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-muted-foreground bg-muted/50 px-3 py-1 rounded-full", children: [
+            requestHistory.length,
+            " request",
+            requestHistory.length !== 1 ? "s" : ""
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              onClick: onClearHistory,
+              className: "p-2 rounded-lg hover:bg-destructive/10 hover:text-destructive transition-all duration-200 group",
+              title: "Clear all activity",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4 text-muted-foreground group-hover:text-destructive" })
+            }
+          )
+        ] }),
+        onToggleCollapse && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: onToggleCollapse,
+            className: "p-2 rounded-lg hover:bg-accent/50 transition-all duration-200",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-5 h-5 text-muted-foreground hover:text-foreground" })
+          }
+        )
+      ] })
+    ] }),
+    requestHistory.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Activity, { className: "w-12 h-12 text-muted-foreground/40 mb-4" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground text-lg font-medium mb-2", children: "No activity yet" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground/60 text-sm", children: "MCP requests and responses will appear here" })
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      !showHeader && requestHistory.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-muted-foreground bg-muted/50 px-3 py-1 rounded-full", children: [
+          requestHistory.length,
+          " request",
+          requestHistory.length !== 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            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("ul", { className: "space-y-4", children: requestHistory.slice().reverse().map((request, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        RequestHistoryItem,
+        {
+          request,
+          index: index2,
+          totalRequests: requestHistory.length
+        },
+        index2
+      )) })
+    ] })
+  ] });
+};
+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 TabbedHistoryPanel = ({
+  requestHistory,
+  toolResult,
+  onClearHistory,
+  onToggleCollapse
+}) => {
+  const [activeTab, setActiveTab] = reactExports.useState("activity");
+  const [isToolResultError, setIsToolResultError] = reactExports.useState(false);
   reactExports.useEffect(() => {
-    if (isDragging) {
-      window.addEventListener("mousemove", handleDragMove);
-      window.addEventListener("mouseup", handleDragEnd);
-      return () => {
-        window.removeEventListener("mousemove", handleDragMove);
-        window.removeEventListener("mouseup", handleDragEnd);
-      };
+    if (toolResult) {
+      console.log("toolResult", toolResult);
+      setIsToolResultError(toolResult.isError === true);
+      setActiveTab("results");
     }
-  }, [isDragging, handleDragMove, handleDragEnd]);
-  return {
-    height,
-    isDragging,
-    handleDragStart,
-    resetHeight
+  }, [toolResult]);
+  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 = () => {
+    console.log("isToolResultError", isToolResultError);
+    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 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 }) });
+      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()
+      ] }),
+      /* @__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
 }) => {
-  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))
-        ] });
-      }
-      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 })
-      ] });
-    }
-  };
+  }, [toolResult, resetHeight]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -18248,118 +18560,19 @@ 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,
+            onClearHistory,
+            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" }),
@@ -19449,7 +19662,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 +19696,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 +19957,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 +20256,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 +20292,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,
   {
@@ -26540,7 +26768,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 +26777,6 @@ const ToolRunCard = ({
           onParamChange: handleParamChange
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ActionButtons,
-        {
-          onSave: handleOpenSaveDialog,
-          onRun: handleRunTool,
-          isRunning: isToolRunning,
-          isUpdating: isUpdatingExistingRequest
-        }
-      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         SaveDialog,
         {
@@ -26572,7 +26791,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 = ({
@@ -28625,7 +28853,7 @@ const useTheme = () => {
     [theme, setThemeWithSideEffect]
   );
 };
-const version$1 = "0.2.3";
+const version$1 = "0.2.4";
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -29656,6 +29884,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 +30378,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 +30481,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 +30720,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,7 +30932,15 @@ const ConnectionSection = ({
         },
         index2
       )) })
-    ] }) })
+    ] }) }),
+    onImportServers && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ConfigImportDialog,
+      {
+        open: showImportDialog,
+        onOpenChange: setShowImportDialog,
+        onImportServers
+      }
+    )
   ] });
 };
 const ClientFormSection = ({
@@ -30234,9 +30957,15 @@ const ClientFormSection = ({
   headerName,
   setHeaderName,
   onSave,
-  onCancel
+  onCancel,
+  onImportMultipleServers,
+  onSaveMultiple
 }) => {
   const [argsString, setArgsString] = reactExports.useState("");
+  const [multipleClients, setMultipleClients] = reactExports.useState([]);
+  const [isMultipleMode, setIsMultipleMode] = reactExports.useState(false);
+  const { toast: toast2 } = useToast();
+  const [showImportDialog, setShowImportDialog] = reactExports.useState(false);
   reactExports.useEffect(() => {
     var _a2;
     if (clientFormConfig.transportType === "stdio" && "args" in clientFormConfig) {
@@ -30252,12 +30981,328 @@ const ClientFormSection = ({
       });
     }
   };
+  const handleImportServers = (servers) => {
+    var _a2;
+    if (servers.length > 1) {
+      const clients = servers.map((server, index2) => {
+        var _a3;
+        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(" ")) || "" : ""
+        };
+      });
+      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(" ")) || "");
+      }
+      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"
+    };
+    setMultipleClients((prev) => [...prev, newClient]);
+  };
+  const handleSaveAll = async () => {
+    const validClients = multipleClients.filter((client2) => client2.name.trim());
+    if (validClients.length === 0) {
+      toast2({
+        title: "No valid clients",
+        description: "Please provide names for at least one client.",
+        variant: "destructive"
+      });
+      return;
+    }
+    const names = validClients.map((c) => c.name.trim());
+    const duplicates = names.filter((name, index2) => names.indexOf(name) !== index2);
+    if (duplicates.length > 0) {
+      toast2({
+        title: "Duplicate client names",
+        description: `Please ensure all client names are unique. Duplicates: ${[...new Set(duplicates)].join(", ")}`,
+        variant: "destructive"
+      });
+      return;
+    }
+    if (onSaveMultiple) {
+      try {
+        const results = await onSaveMultiple(validClients.map((client2) => ({
+          name: client2.name.trim(),
+          config: client2.config
+        })));
+        if (results.success.length > 0) {
+          toast2({
+            title: "Clients created",
+            description: `Successfully created ${results.success.length} client(s): ${results.success.join(", ")}`
+          });
+        }
+        if (results.failed.length > 0) {
+          toast2({
+            title: "Some clients failed",
+            description: `${results.failed.length} client(s) failed to create. Check console for details.`,
+            variant: "destructive"
+          });
+        }
+      } catch (error) {
+        console.error("Failed to create clients:", error);
+        toast2({
+          title: "Creation failed",
+          description: `Failed to create clients: ${error instanceof Error ? error.message : String(error)}`,
+          variant: "destructive"
+        });
+      }
+    }
+  };
+  const handleBackToSingle = () => {
+    setIsMultipleMode(false);
+    setMultipleClients([]);
+  };
+  if (isMultipleMode) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col overflow-auto p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-6xl mx-auto w-full", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold mb-2", children: "Create Multiple Clients" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground", children: "Configure each imported server as a separate client. You can modify settings individually." })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
+        multipleClients.map((client2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border rounded-lg p-4 space-y-4", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-lg font-semibold", children: [
+              "Client ",
+              index2 + 1
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => handleRemoveClient(client2.id),
+                className: "h-8 w-8 p-0",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(X$1, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium mb-2 block", children: "Client Name" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Input,
+              {
+                value: client2.name,
+                onChange: (e) => handleUpdateClient(client2.id, { name: e.target.value }),
+                placeholder: "Enter client name",
+                className: "w-full"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border rounded-lg", 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
+                });
+              },
+              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: "url" in client2.config && client2.config.url ? client2.config.url.toString() : "",
+              setSseUrl: (url) => {
+                if (client2.config.transportType !== "stdio") {
+                  handleUpdateClient(client2.id, {
+                    config: {
+                      ...client2.config,
+                      url: new URL(url)
+                    }
+                  });
+                }
+              },
+              env: client2.config.transportType === "stdio" && "env" in client2.config ? client2.config.env || {} : {},
+              setEnv: (env) => {
+                if (client2.config.transportType === "stdio") {
+                  handleUpdateClient(client2.id, {
+                    config: {
+                      ...client2.config,
+                      env
+                    }
+                  });
+                }
+              },
+              config,
+              setConfig,
+              bearerToken,
+              setBearerToken,
+              headerName,
+              setHeaderName,
+              onConnect: () => {
+              },
+              onDisconnect: () => {
+              },
+              stdErrNotifications: [],
+              clearStdErrNotifications: () => {
+              },
+              logLevel: "debug",
+              sendLogLevelRequest: async () => {
+              },
+              loggingSupported: false,
+              hideActionButtons: true
+            }
+          ) })
+        ] }, client2.id)),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Button,
+          {
+            variant: "outline",
+            onClick: handleAddClient,
+            className: "w-full",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "h-4 w-4 mr-2" }),
+              "Add Another Client"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-3 pt-4 border-t", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Button,
+            {
+              onClick: handleSaveAll,
+              disabled: multipleClients.filter((c) => c.name.trim()).length === 0,
+              className: "flex-1",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "h-4 w-4 mr-2" }),
+                "Create ",
+                multipleClients.filter((c) => c.name.trim()).length,
+                " Client(s)"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              variant: "outline",
+              onClick: handleBackToSingle,
+              className: "flex-1",
+              children: "Back to Single Mode"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              variant: "outline",
+              onClick: onCancel,
+              children: "Cancel"
+            }
+          )
+        ] }),
+        multipleClients.some((c) => !c.name.trim()) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-amber-600 text-sm", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4" }),
+          "Some clients don't have names and won't be created."
+        ] })
+      ] })
+    ] }) });
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col overflow-auto p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-4xl mx-auto w-full", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold mb-2", children: isCreating ? "Create New Client" : `Edit Client: ${editingClientName}` }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground", children: "Configure your MCP client connection settings below." })
     ] }),
+    isCreating && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-6 p-4 rounded-lg bg-card border border-border/50 shadow-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 bg-muted rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "h-5 w-5 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-1", children: "Import Configuration" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "Import multiple servers from a configuration file. Supports the same format used by Claude Desktop and Cursor." }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Button,
+          {
+            onClick: () => setShowImportDialog(true),
+            size: "sm",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "w-4 h-4 mr-2" }),
+              "Import from Configuration File"
+            ]
+          }
+        )
+      ] })
+    ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+      isCreating && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t pt-4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium mb-1", children: "Manual Configuration" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground mb-4", children: "Or configure a single client manually with the options below." })
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium mb-2 block", children: "Client Name" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -30362,7 +31407,15 @@ const ClientFormSection = ({
           }
         )
       ] })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ConfigImportDialog,
+      {
+        open: showImportDialog,
+        onOpenChange: setShowImportDialog,
+        onImportServers: handleImportServers
+      }
+    )
   ] }) });
 };
 const StarGitHubModal = ({
@@ -40880,7 +41933,7 @@ Anthropic.Models = Models2;
 Anthropic.Beta = Beta;
 const { HUMAN_PROMPT, AI_PROMPT } = Anthropic;
 const readline = {};
-const version = "0.2.3";
+const version = "0.2.4";
 const packageJson = {
   version
 };
@@ -40906,17 +41959,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 +41986,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 {
@@ -42976,10 +44035,12 @@ const useMCPOperations = () => {
     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]);
     },
@@ -42988,23 +44049,33 @@ const useMCPOperations = () => {
   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);
         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);
           addRequestHistory(
             { method: "resources/list", server: selectedServerName },
-            { resources: resourcesResponse.resources }
+            { resources: resourcesResponse.resources },
+            operationTimestamp,
+            latency
           );
           setResources(resourcesResponse.resources);
         }
@@ -43015,15 +44086,21 @@ 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);
             addRequestHistory(
               { method: "resourceTemplates/list/all" },
-              { resourceTemplates: templatesResponse.resourceTemplates }
+              { resourceTemplates: templatesResponse.resourceTemplates },
+              operationTimestamp,
+              latency
             );
             setResourceTemplates(templatesResponse.resourceTemplates);
           }
@@ -43032,9 +44109,13 @@ const useMCPOperations = () => {
         const client2 = mcpAgent.getClient(selectedServerName);
         if (client2) {
           const templatesResponse = await client2.listResourceTemplates();
+          const endTime = performance.now();
+          const latency = Math.round(endTime - startTime);
           addRequestHistory(
             { method: "resourceTemplates/list", server: selectedServerName },
-            { resourceTemplates: templatesResponse.resourceTemplates }
+            { resourceTemplates: templatesResponse.resourceTemplates },
+            operationTimestamp,
+            latency
           );
           setResourceTemplates(templatesResponse.resourceTemplates);
         }
@@ -43045,14 +44126,20 @@ 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);
         addRequestHistory(
           { method: "resources/read", server: selectedServerName, uri },
-          result
+          result,
+          operationTimestamp,
+          latency
         );
         return result;
       } else {
@@ -43063,9 +44150,13 @@ const useMCPOperations = () => {
               serverName,
               uri
             );
+            const endTime = performance.now();
+            const latency = Math.round(endTime - startTime);
             addRequestHistory(
               { method: "resources/read", server: serverName, uri },
-              result
+              result,
+              operationTimestamp,
+              latency
             );
             return result;
           }
@@ -43078,12 +44169,18 @@ 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);
         addRequestHistory(
           { method: "resources/subscribe", server: selectedServerName, uri },
-          result
+          result,
+          operationTimestamp,
+          latency
         );
         return result;
       }
@@ -43093,12 +44190,18 @@ 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);
         addRequestHistory(
           { method: "resources/unsubscribe", server: selectedServerName, uri },
-          result
+          result,
+          operationTimestamp,
+          latency
         );
         return result;
       }
@@ -43108,21 +44211,31 @@ 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);
         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);
           addRequestHistory(
             { method: "prompts/list", server: selectedServerName },
-            { prompts: promptsResponse.prompts }
+            { prompts: promptsResponse.prompts },
+            operationTimestamp,
+            latency
           );
           setPrompts(promptsResponse.prompts);
         }
@@ -43133,15 +44246,21 @@ 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);
         addRequestHistory(
           { method: "prompts/get", server: selectedServerName, name, args },
-          result
+          result,
+          operationTimestamp,
+          latency
         );
         return result;
       } else {
@@ -43153,9 +44272,13 @@ const useMCPOperations = () => {
               name,
               args
             );
+            const endTime = performance.now();
+            const latency = Math.round(endTime - startTime);
             addRequestHistory(
               { method: "prompts/get", server: serverName, name, args },
-              result
+              result,
+              operationTimestamp,
+              latency
             );
             return result;
           }
@@ -43168,18 +44291,31 @@ 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);
+        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);
           addRequestHistory(
-            { method: "tools/list" },
-            { tools: toolsResponse.tools }
+            { method: "tools/list", server: selectedServerName },
+            { tools: toolsResponse.tools },
+            operationTimestamp,
+            latency
           );
           setTools(toolsResponse.tools);
         }
@@ -43190,6 +44326,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 +44335,13 @@ const useMCPOperations = () => {
             name,
             params
           );
+          const endTime = performance.now();
+          const latency = Math.round(endTime - startTime);
           addRequestHistory(
             { method: "tools/call", server: selectedServerName, name, params },
-            result
+            result,
+            operationTimestamp,
+            latency
           );
           setToolResult(result);
         } else {
@@ -43211,9 +44353,13 @@ const useMCPOperations = () => {
                 name,
                 params
               );
+              const endTime = performance.now();
+              const latency = Math.round(endTime - startTime);
               addRequestHistory(
                 { method: "tools/call", server: serverName, name, params },
-                result
+                result,
+                operationTimestamp,
+                latency
               );
               setToolResult(result);
               return;
@@ -43222,6 +44368,8 @@ const useMCPOperations = () => {
           throw new Error(`Tool ${name} not found on any server`);
         }
       } catch (e) {
+        const endTime = performance.now();
+        const latency = Math.round(endTime - startTime);
         const toolResult2 = {
           content: [
             {
@@ -43233,7 +44381,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 +44414,15 @@ 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);
       addRequestHistory(
         {
           method: "completion",
@@ -43277,7 +44431,9 @@ const useMCPOperations = () => {
           argName,
           value
         },
-        { completions: result }
+        { completions: result },
+        operationTimestamp,
+        latency
       );
       return result;
     },
@@ -43670,6 +44826,39 @@ const App = () => {
       console.error("Failed to save client:", error);
     }
   }, [serverState, handleAddServer, handleUpdateServer, handleRemoveServer]);
+  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);
+          results.success.push(client2.name);
+          console.log(`✅ Successfully created client: "${client2.name}"`);
+        } catch (error) {
+          const errorMessage = error instanceof Error ? error.message : String(error);
+          console.error(`❌ Failed to create client "${client2.name}":`, errorMessage);
+          results.failed.push({ name: client2.name, error: errorMessage });
+        }
+      }
+      serverState.handleCancelClientForm();
+      if (results.success.length > 0) {
+        console.log(`✅ Successfully created ${results.success.length} client(s): ${results.success.join(", ")}`);
+      }
+      if (results.failed.length > 0) {
+        console.error(`❌ Failed to create ${results.failed.length} client(s):`, results.failed);
+        results.failed.forEach(({ name, error }) => {
+          console.error(`  - ${name}: ${error}`);
+        });
+      }
+      return results;
+    },
+    [handleAddServer, serverState]
+  );
   const handleEditClient = reactExports.useCallback(
     (serverName) => {
       const serverConnections = connectionState.mcpAgent ? connectionState.mcpAgent.getAllConnectionInfo() : [];
@@ -43894,7 +45083,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-DkLMDxkx.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 +45098,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-DaNmVTKt.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 +45129,7 @@ const App = () => {
           headerName: configState.headerName,
           setHeaderName: configState.setHeaderName,
           onSave: handleSaveClient,
+          onSaveMultiple: handleSaveMultiple,
           onCancel: serverState.handleCancelClientForm
         }
       );