@mcpjam/inspector 0.1.0 → 0.1.2

package/client/dist/assets/{index-DTUWTApO.js → index-BS_GqE2l.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-D9GEIvKa.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-zUpX3mpm.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-kC0-8Fug.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-BpNrhMCC.js"])))=>i.map(i=>d[i]);
 function _mergeNamespaces(n, m2) {
   for (var i = 0; i < m2.length; i++) {
     const e = m2[i];
@@ -23932,9 +23932,9 @@ class DebugInspectorOAuthClientProvider extends InspectorOAuthClientProvider {
     );
   }
 }
-const version$1 = "0.1.0";
+const version = "0.1.2";
 const packageJson = {
-  version: version$1
+  version
 };
 const getMCPProxyAddress = (config) => {
   const proxyFullAddress = config.MCP_PROXY_FULL_ADDRESS.value;
@@ -24358,52 +24358,6 @@ function useConnection({
     disconnect
   };
 }
-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 = "";
-  }, []);
-  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
-  };
-}
 var useReactId = React$1[" useId ".trim().toString()] || (() => void 0);
 var count$1 = 0;
 function useId(deterministicId) {
@@ -24838,45 +24792,6 @@ const TabsContent = reactExports.forwardRef(({ className, ...props }, ref2) => /
   }
 ));
 TabsContent.displayName = Content$2.displayName;
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-const Button = reactExports.forwardRef(
-  ({ className, variant, size: size2, asChild = false, ...props }, ref2) => {
-    const Comp = asChild ? Slot$3 : "button";
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Comp,
-      {
-        className: cn(buttonVariants({ variant, size: size2, className })),
-        ref: ref2,
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -24964,9 +24879,14 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Bell = createLucideIcon("Bell", [
-  ["path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9", key: "1qo2s2" }],
-  ["path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0", key: "qgo35s" }]
+const Activity = createLucideIcon("Activity", [
+  [
+    "path",
+    {
+      d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2",
+      key: "169zse"
+    }
+  ]
 ]);
 /**
  * @license lucide-react v0.447.0 - ISC
@@ -24974,24 +24894,9 @@ const Bell = createLucideIcon("Bell", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Bug = createLucideIcon("Bug", [
-  ["path", { d: "m8 2 1.88 1.88", key: "fmnt4t" }],
-  ["path", { d: "M14.12 3.88 16 2", key: "qol33r" }],
-  ["path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1", key: "d7y7pr" }],
-  [
-    "path",
-    {
-      d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6",
-      key: "xs1cw7"
-    }
-  ],
-  ["path", { d: "M12 20v-9", key: "1qisl0" }],
-  ["path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5", key: "32zzws" }],
-  ["path", { d: "M6 13H2", key: "82j7cp" }],
-  ["path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4", key: "4p0ekp" }],
-  ["path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4", key: "18gb23" }],
-  ["path", { d: "M22 13h-4", key: "1jl80f" }],
-  ["path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4", key: "k3fwyw" }]
+const Bell = createLucideIcon("Bell", [
+  ["path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9", key: "1qo2s2" }],
+  ["path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0", key: "qgo35s" }]
 ]);
 /**
  * @license lucide-react v0.447.0 - ISC
@@ -25079,6 +24984,17 @@ const CircleHelp = createLucideIcon("CircleHelp", [
 const Circle = createLucideIcon("Circle", [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
 ]);
+/**
+ * @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 CodeXml = createLucideIcon("CodeXml", [
+  ["path", { d: "m18 16 4-4-4-4", key: "1inbqp" }],
+  ["path", { d: "m6 8-4 4 4 4", key: "15zrgr" }],
+  ["path", { d: "m14.5 4-5 16", key: "e7oirm" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -25188,22 +25104,6 @@ const FolderTree = createLucideIcon("FolderTree", [
   ["path", { d: "M3 5a2 2 0 0 0 2 2h3", key: "f2jnh7" }],
   ["path", { d: "M3 3v13a2 2 0 0 0 2 2h3", key: "k8epm1" }]
 ]);
-/**
- * @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 Github = createLucideIcon("Github", [
-  [
-    "path",
-    {
-      d: "M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4",
-      key: "tonef"
-    }
-  ],
-  ["path", { d: "M9 18c-4.51 2-5-2-7-2", key: "9comsn" }]
-]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -25233,6 +25133,17 @@ const Hash = createLucideIcon("Hash", [
   ["line", { x1: "10", x2: "8", y1: "3", y2: "21", key: "1ggp8o" }],
   ["line", { x1: "16", x2: "14", y1: "3", y2: "21", key: "weycgp" }]
 ]);
+/**
+ * @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 History = createLucideIcon("History", [
+  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
+  ["path", { d: "M3 3v5h5", key: "1xhq8a" }],
+  ["path", { d: "M12 7v5l4 2", key: "1fdv2h" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -25358,22 +25269,45 @@ const Send = createLucideIcon("Send", [
   ],
   ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
 ]);
-/**
- * @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 Settings = createLucideIcon("Settings", [
-  [
-    "path",
-    {
-      d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z",
-      key: "1qme2f"
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
     }
-  ],
-  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-]);
+  }
+);
+const Button = reactExports.forwardRef(
+  ({ className, variant, size: size2, asChild = false, ...props }, ref2) => {
+    const Comp = asChild ? Slot$3 : "button";
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size: size2, className })),
+        ref: ref2,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
 const OAuthStepDetails = ({
   label,
   isComplete,
@@ -26177,108 +26111,259 @@ 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);
+    },
+    [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
+  };
+}
 const HistoryAndNotifications = ({
   requestHistory,
-  serverNotifications
+  toolResult
 }) => {
   const [expandedRequests, setExpandedRequests] = reactExports.useState({});
-  const [expandedNotifications, setExpandedNotifications] = reactExports.useState({});
+  const [isHistoryCollapsed, setIsHistoryCollapsed] = reactExports.useState(false);
+  const {
+    height: historyPaneHeight,
+    handleDragStart,
+    resetHeight
+  } = useDraggablePane(isHistoryCollapsed ? 60 : 500);
   const toggleRequestExpansion = (index2) => {
     setExpandedRequests((prev) => ({ ...prev, [index2]: !prev[index2] }));
   };
-  const toggleNotificationExpansion = (index2) => {
-    setExpandedNotifications((prev) => ({ ...prev, [index2]: !prev[index2] }));
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card overflow-hidden flex h-full", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto p-4 border-r", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold mb-4", children: "History" }),
-      requestHistory.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 italic", children: "No history yet" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "space-y-3", children: requestHistory.slice().reverse().map((request, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "li",
-        {
-          className: "text-sm text-foreground bg-secondary p-2 rounded",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "div",
+  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 _a, _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",
               {
-                className: "flex justify-between items-center cursor-pointer",
-                onClick: () => toggleRequestExpansion(requestHistory.length - 1 - index2),
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", children: [
-                    requestHistory.length - index2,
-                    ".",
-                    " ",
-                    JSON.parse(request.request).method
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: expandedRequests[requestHistory.length - 1 - index2] ? "▼" : "▶" })
-                ]
+                src: `data:${item.mimeType};base64,${item.data}`,
+                alt: "Tool result image",
+                className: "max-w-full h-auto"
               }
             ),
-            expandedRequests[requestHistory.length - 1 - index2] && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-between items-center mb-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-blue-600", children: "Request:" }) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  JsonView,
-                  {
-                    data: request.request,
-                    className: "bg-background"
-                  }
-                )
+            item.type === "resource" && (((_b = (_a = item.resource) == null ? void 0 : _a.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 /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: `relative bg-gradient-to-r from-card/95 via-card to-card/95 backdrop-blur-md border-t border-border/30 transition-all duration-500 ease-out ${isHistoryCollapsed ? "shadow-lg shadow-black/5" : "shadow-2xl shadow-black/10"}`,
+      style: {
+        height: `${isHistoryCollapsed ? 60 : historyPaneHeight}px`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "absolute w-full h-2 -top-1 cursor-row-resize",
+            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" })
               ] }),
-              request.response && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-between items-center mb-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-green-600", children: "Response:" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
+                requestHistory.length > 0 && /* @__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(
-                  JsonView,
+                  "button",
                   {
-                    data: request.response,
-                    className: "bg-background"
+                    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" })
                   }
                 )
               ] })
-            ] })
-          ]
-        },
-        index2
-      )) })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto p-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold mb-4", children: "Server Notifications" }),
-      serverNotifications.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 italic", children: "No notifications yet" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "space-y-3", children: serverNotifications.slice().reverse().map((notification, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "li",
-        {
-          className: "text-sm text-foreground bg-secondary p-2 rounded",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "div",
+            ] }),
+            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: "flex justify-between items-center cursor-pointer",
-                onClick: () => toggleNotificationExpansion(index2),
+                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("span", { className: "font-mono", children: [
-                    serverNotifications.length - index2,
-                    ".",
-                    " ",
-                    notification.method
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: expandedNotifications[index2] ? "▼" : "▶" })
+                  /* @__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"
+                        }
+                      )
+                    ] })
+                  ] })
                 ]
-              }
-            ),
-            expandedNotifications[index2] && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-between items-center mb-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-purple-600", children: "Details:" }) }),
+              },
+              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("div", { className: "w-5 h-5 rounded bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-white text-xs", children: "✓" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Results" })
+              ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
-                JsonView,
+                "button",
                 {
-                  data: JSON.stringify(notification, null, 2),
-                  className: "bg-background"
+                  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(
+          "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),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-4 text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(History, { className: "w-5 h-5" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium", children: "History & Results" }),
+              requestHistory.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 py-1 text-xs bg-primary/10 text-primary rounded-full", children: requestHistory.length }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4 rotate-180" })
             ] })
-          ]
-        },
-        index2
-      )) })
-    ] })
-  ] });
+          }
+        ) })
+      ]
+    }
+  );
 };
 const PingTab = ({ onPingClick }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "ping", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "col-span-2 flex justify-center items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -30652,41 +30737,42 @@ const ListPane = ({
   setSelectedItem,
   renderItem,
   title: title2,
-  buttonText,
   isButtonDisabled
 }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card rounded-lg shadow", children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold dark:text-white", children: title2 }) }),
-  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Button,
-      {
-        variant: "outline",
-        className: "w-full mb-4",
-        onClick: listItems,
-        disabled: isButtonDisabled,
-        children: buttonText
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Button,
-      {
-        variant: "outline",
-        className: "w-full mb-4",
-        onClick: clearItems,
-        disabled: items2.length === 0,
-        children: "Clear"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 overflow-y-auto max-h-96", children: items2.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        className: "flex items-center p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer",
-        onClick: () => setSelectedItem(item),
-        children: renderItem(item)
-      },
-      index2
-    )) })
-  ] })
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold dark:text-white", children: title2 }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          variant: "outline",
+          onClick: listItems,
+          disabled: isButtonDisabled,
+          className: "h-7 px-2 text-xs",
+          children: "Load Tools"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          variant: "outline",
+          onClick: clearItems,
+          disabled: items2.length === 0,
+          className: "h-7 px-2 text-xs",
+          children: "Clear"
+        }
+      )
+    ] })
+  ] }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 overflow-y-auto max-h-96", children: items2.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: "cursor-pointer",
+      onClick: () => setSelectedItem(item),
+      children: renderItem(item)
+    },
+    index2
+  )) }) })
 ] });
 function debounce(func, wait) {
   let timeout;
@@ -30776,9 +30862,9 @@ function useCompletionState(handleCompletion, completionsSupported = true, debou
 }
 const PromptsTab = ({
   prompts,
-  listPrompts,
+  listPrompts: listPrompts2,
   clearPrompts,
-  getPrompt,
+  getPrompt: getPrompt2,
   selectedPrompt,
   setSelectedPrompt,
   handleCompletion,
@@ -30808,7 +30894,7 @@ const PromptsTab = ({
   };
   const handleGetPrompt = () => {
     if (selectedPrompt) {
-      getPrompt(selectedPrompt.name, promptArgs);
+      getPrompt2(selectedPrompt.name, promptArgs);
     }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "prompts", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
@@ -30816,7 +30902,7 @@ const PromptsTab = ({
       ListPane,
       {
         items: prompts,
-        listItems: listPrompts,
+        listItems: listPrompts2,
         clearItems: () => {
           clearPrompts();
           setSelectedPrompt(null);
@@ -30830,7 +30916,6 @@ const PromptsTab = ({
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-500", children: prompt.description })
         ] }),
         title: "Prompts",
-        buttonText: nextCursor ? "List More Prompts" : "List Prompts",
         isButtonDisabled: !nextCursor && prompts.length > 0
       }
     ),
@@ -30869,17 +30954,17 @@ const PromptsTab = ({
 const ResourcesTab = ({
   resources,
   resourceTemplates,
-  listResources,
+  listResources: listResources2,
   clearResources,
-  listResourceTemplates,
+  listResourceTemplates: listResourceTemplates2,
   clearResourceTemplates,
-  readResource,
+  readResource: readResource2,
   selectedResource,
   setSelectedResource,
   resourceSubscriptionsSupported,
   resourceSubscriptions,
-  subscribeToResource,
-  unsubscribeFromResource,
+  subscribeToResource: subscribeToResource2,
+  unsubscribeFromResource: unsubscribeFromResource2,
   handleCompletion,
   completionsSupported,
   resourceContent,
@@ -30918,7 +31003,7 @@ const ResourcesTab = ({
   const handleReadTemplateResource = () => {
     if (selectedTemplate) {
       const uri = fillTemplate(selectedTemplate.uriTemplate, templateValues);
-      readResource(uri);
+      readResource2(uri);
       setSelectedResource({ uri, name: uri });
     }
   };
@@ -30927,7 +31012,7 @@ const ResourcesTab = ({
       ListPane,
       {
         items: resources,
-        listItems: listResources,
+        listItems: listResources2,
         clearItems: () => {
           clearResources();
           if (!selectedTemplate) {
@@ -30936,7 +31021,7 @@ const ResourcesTab = ({
         },
         setSelectedItem: (resource) => {
           setSelectedResource(resource);
-          readResource(resource.uri);
+          readResource2(resource.uri);
           setSelectedTemplate(null);
         },
         renderItem: (resource) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center w-full", children: [
@@ -30945,7 +31030,6 @@ const ResourcesTab = ({
           /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4 flex-shrink-0 text-gray-400" })
         ] }),
         title: "Resources",
-        buttonText: nextCursor ? "List More Resources" : "List Resources",
         isButtonDisabled: !nextCursor && resources.length > 0
       }
     ),
@@ -30953,7 +31037,7 @@ const ResourcesTab = ({
       ListPane,
       {
         items: resourceTemplates,
-        listItems: listResourceTemplates,
+        listItems: listResourceTemplates2,
         clearItems: () => {
           clearResourceTemplates();
           if (selectedTemplate) {
@@ -30972,7 +31056,6 @@ const ResourcesTab = ({
           /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4 flex-shrink-0 text-gray-400" })
         ] }),
         title: "Resource Templates",
-        buttonText: nextTemplateCursor ? "List More Templates" : "List Templates",
         isButtonDisabled: !nextTemplateCursor && resourceTemplates.length > 0
       }
     ),
@@ -30992,7 +31075,7 @@ const ResourcesTab = ({
             {
               variant: "outline",
               size: "sm",
-              onClick: () => subscribeToResource(selectedResource.uri),
+              onClick: () => subscribeToResource2(selectedResource.uri),
               children: "Subscribe"
             }
           ),
@@ -31001,7 +31084,7 @@ const ResourcesTab = ({
             {
               variant: "outline",
               size: "sm",
-              onClick: () => unsubscribeFromResource(selectedResource.uri),
+              onClick: () => unsubscribeFromResource2(selectedResource.uri),
               children: "Unsubscribe"
             }
           ),
@@ -31010,7 +31093,7 @@ const ResourcesTab = ({
             {
               variant: "outline",
               size: "sm",
-              onClick: () => readResource(selectedResource.uri),
+              onClick: () => readResource2(selectedResource.uri),
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "w-4 h-4 mr-2" }),
                 "Refresh"
@@ -33480,9 +33563,6 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }) => {
     ] })
   ] }) });
 };
-function clamp(value, [min2, max2]) {
-  return Math.min(max2, Math.max(min2, value));
-}
 function usePrevious(value) {
   const ref2 = reactExports.useRef({ value, previous: value });
   return reactExports.useMemo(() => {
@@ -33493,6 +33573,695 @@ function usePrevious(value) {
     return ref2.current.previous;
   }, [value]);
 }
+var CHECKBOX_NAME = "Checkbox";
+var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
+var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
+function CheckboxProvider(props) {
+  const {
+    __scopeCheckbox,
+    checked: checkedProp,
+    children,
+    defaultChecked,
+    disabled,
+    form,
+    name,
+    onCheckedChange,
+    required: required2,
+    value = "on",
+    // @ts-expect-error
+    internal_do_not_use_render
+  } = props;
+  const [checked, setChecked] = useControllableState({
+    prop: checkedProp,
+    defaultProp: defaultChecked ?? false,
+    onChange: onCheckedChange,
+    caller: CHECKBOX_NAME
+  });
+  const [control, setControl] = reactExports.useState(null);
+  const [bubbleInput, setBubbleInput] = reactExports.useState(null);
+  const hasConsumerStoppedPropagationRef = reactExports.useRef(false);
+  const isFormControl = control ? !!form || !!control.closest("form") : (
+    // We set this to true by default so that events bubble to forms without JS (SSR)
+    true
+  );
+  const context = {
+    checked,
+    disabled,
+    setChecked,
+    control,
+    setControl,
+    name,
+    form,
+    value,
+    hasConsumerStoppedPropagationRef,
+    required: required2,
+    defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
+    isFormControl,
+    bubbleInput,
+    setBubbleInput
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    CheckboxProviderImpl,
+    {
+      scope: __scopeCheckbox,
+      ...context,
+      children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
+    }
+  );
+}
+var TRIGGER_NAME$2 = "CheckboxTrigger";
+var CheckboxTrigger = reactExports.forwardRef(
+  ({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) => {
+    const {
+      control,
+      value,
+      disabled,
+      checked,
+      required: required2,
+      setControl,
+      setChecked,
+      hasConsumerStoppedPropagationRef,
+      isFormControl,
+      bubbleInput
+    } = useCheckboxContext(TRIGGER_NAME$2, __scopeCheckbox);
+    const composedRefs = useComposedRefs(forwardedRef, setControl);
+    const initialCheckedStateRef = reactExports.useRef(checked);
+    reactExports.useEffect(() => {
+      const form = control == null ? void 0 : control.form;
+      if (form) {
+        const reset = () => setChecked(initialCheckedStateRef.current);
+        form.addEventListener("reset", reset);
+        return () => form.removeEventListener("reset", reset);
+      }
+    }, [control, setChecked]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Primitive.button,
+      {
+        type: "button",
+        role: "checkbox",
+        "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+        "aria-required": required2,
+        "data-state": getState(checked),
+        "data-disabled": disabled ? "" : void 0,
+        disabled,
+        value,
+        ...checkboxProps,
+        ref: composedRefs,
+        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+          if (event.key === "Enter") event.preventDefault();
+        }),
+        onClick: composeEventHandlers(onClick, (event) => {
+          setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
+          if (bubbleInput && isFormControl) {
+            hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+            if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+          }
+        })
+      }
+    );
+  }
+);
+CheckboxTrigger.displayName = TRIGGER_NAME$2;
+var Checkbox$1 = reactExports.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeCheckbox,
+      name,
+      checked,
+      defaultChecked,
+      required: required2,
+      disabled,
+      value,
+      onCheckedChange,
+      form,
+      ...checkboxProps
+    } = props;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CheckboxProvider,
+      {
+        __scopeCheckbox,
+        checked,
+        defaultChecked,
+        disabled,
+        required: required2,
+        onCheckedChange,
+        name,
+        form,
+        value,
+        internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CheckboxTrigger,
+            {
+              ...checkboxProps,
+              ref: forwardedRef,
+              __scopeCheckbox
+            }
+          ),
+          isFormControl && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CheckboxBubbleInput,
+            {
+              __scopeCheckbox
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Checkbox$1.displayName = CHECKBOX_NAME;
+var INDICATOR_NAME = "CheckboxIndicator";
+var CheckboxIndicator = reactExports.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
+    const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Presence,
+      {
+        present: forceMount || isIndeterminate(context.checked) || context.checked === true,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Primitive.span,
+          {
+            "data-state": getState(context.checked),
+            "data-disabled": context.disabled ? "" : void 0,
+            ...indicatorProps,
+            ref: forwardedRef,
+            style: { pointerEvents: "none", ...props.style }
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxIndicator.displayName = INDICATOR_NAME;
+var BUBBLE_INPUT_NAME$1 = "CheckboxBubbleInput";
+var CheckboxBubbleInput = reactExports.forwardRef(
+  ({ __scopeCheckbox, ...props }, forwardedRef) => {
+    const {
+      control,
+      hasConsumerStoppedPropagationRef,
+      checked,
+      defaultChecked,
+      required: required2,
+      disabled,
+      name,
+      value,
+      form,
+      bubbleInput,
+      setBubbleInput
+    } = useCheckboxContext(BUBBLE_INPUT_NAME$1, __scopeCheckbox);
+    const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
+    const prevChecked = usePrevious(checked);
+    const controlSize = useSize(control);
+    reactExports.useEffect(() => {
+      const input = bubbleInput;
+      if (!input) return;
+      const inputProto = window.HTMLInputElement.prototype;
+      const descriptor = Object.getOwnPropertyDescriptor(
+        inputProto,
+        "checked"
+      );
+      const setChecked = descriptor.set;
+      const bubbles = !hasConsumerStoppedPropagationRef.current;
+      if (prevChecked !== checked && setChecked) {
+        const event = new Event("click", { bubbles });
+        input.indeterminate = isIndeterminate(checked);
+        setChecked.call(input, isIndeterminate(checked) ? false : checked);
+        input.dispatchEvent(event);
+      }
+    }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);
+    const defaultCheckedRef = reactExports.useRef(isIndeterminate(checked) ? false : checked);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Primitive.input,
+      {
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: defaultChecked ?? defaultCheckedRef.current,
+        required: required2,
+        disabled,
+        name,
+        value,
+        form,
+        ...props,
+        tabIndex: -1,
+        ref: composedRefs,
+        style: {
+          ...props.style,
+          ...controlSize,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0,
+          // We transform because the input is absolutely positioned but we have
+          // rendered it **after** the button. This pulls it back to sit on top
+          // of the button.
+          transform: "translateX(-100%)"
+        }
+      }
+    );
+  }
+);
+CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME$1;
+function isFunction(value) {
+  return typeof value === "function";
+}
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+const Checkbox = reactExports.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  Checkbox$1,
+  {
+    ref: ref2,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CheckboxIndicator,
+      {
+        className: cn("flex items-center justify-center text-current"),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "h-4 w-4" })
+      }
+    )
+  }
+));
+Checkbox.displayName = Checkbox$1.displayName;
+const Textarea = reactExports.forwardRef(
+  ({ className, ...props }, ref2) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref: ref2,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+const ToolRunCard = ({ selectedTool, callTool: callTool2 }) => {
+  const [params, setParams] = reactExports.useState({});
+  const [isToolRunning, setIsToolRunning] = reactExports.useState(false);
+  reactExports.useEffect(() => {
+    const params2 = Object.entries(
+      (selectedTool == null ? void 0 : selectedTool.inputSchema.properties) ?? []
+    ).map(([key, value]) => [
+      key,
+      generateDefaultValue(value)
+    ]);
+    setParams(Object.fromEntries(params2));
+  }, [selectedTool]);
+  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("div", { className: "bg-gradient-to-r from-muted/50 via-muted/30 to-muted/50 backdrop-blur-sm p-3 border-b border-border/30", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "font-mono text-sm bg-gradient-to-r from-secondary/70 to-secondary/50 px-3 py-1.5 rounded-lg border border-border/30 text-foreground font-semibold shadow-sm inline-block", children: selectedTool ? selectedTool.name : "Select a tool" }),
+      selectedTool && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground/80 mt-0.5 line-clamp-1", children: selectedTool.description })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3", children: selectedTool ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+      Object.keys(selectedTool.inputSchema.properties ?? {}).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-1.5 pb-1.5 border-b border-border/20", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CodeXml, { className: "w-3 h-3 text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Parameters" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2.5", children: Object.entries(
+          selectedTool.inputSchema.properties ?? []
+        ).map(([key, value]) => {
+          const prop = value;
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-1.5 mb-1.5", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs bg-gradient-to-r from-secondary/80 to-secondary/60 px-2 py-1 rounded-md border border-border/30 text-foreground font-medium shadow-sm", children: key }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded font-medium", children: prop.type })
+            ] }),
+            prop.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground/80 mb-1.5 ml-0.5 italic line-clamp-1", children: prop.description }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative", children: prop.type === "boolean" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2 p-2.5 bg-gradient-to-r from-background/50 to-background/30 border border-border/30 rounded-lg hover:border-border/50 transition-all duration-200", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Checkbox,
+                {
+                  id: key,
+                  name: key,
+                  checked: !!params[key],
+                  onCheckedChange: (checked) => setParams({
+                    ...params,
+                    [key]: checked
+                  }),
+                  className: "data-[state=checked]:bg-primary data-[state=checked]:border-primary h-3.5 w-3.5"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "label",
+                {
+                  htmlFor: key,
+                  className: "text-xs font-medium text-foreground cursor-pointer flex-1",
+                  children: prop.description || "Toggle this option"
+                }
+              )
+            ] }) : prop.type === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Textarea,
+              {
+                id: key,
+                name: key,
+                placeholder: prop.description || `Enter ${key}...`,
+                value: params[key] ?? "",
+                onChange: (e) => setParams({
+                  ...params,
+                  [key]: e.target.value
+                }),
+                className: "font-mono text-xs bg-gradient-to-br from-background/80 to-background/60 border-border/40 rounded-lg focus:border-primary/50 focus:ring-1 focus:ring-primary/20 transition-all duration-200 min-h-[60px] resize-none p-2"
+              }
+            ) : prop.type === "object" || prop.type === "array" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-to-br from-background/80 to-background/60 border border-border/40 rounded-lg p-2.5 hover:border-border/60 transition-all duration-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              DynamicJsonForm,
+              {
+                schema: {
+                  type: prop.type,
+                  properties: prop.properties,
+                  description: prop.description,
+                  items: prop.items
+                },
+                value: params[key] ?? generateDefaultValue(prop),
+                onChange: (newValue) => {
+                  setParams({
+                    ...params,
+                    [key]: newValue
+                  });
+                }
+              }
+            ) }) : prop.type === "number" || prop.type === "integer" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Input,
+              {
+                type: "number",
+                id: key,
+                name: key,
+                placeholder: prop.description || `Enter ${key}...`,
+                value: params[key] ?? "",
+                onChange: (e) => setParams({
+                  ...params,
+                  [key]: Number(e.target.value)
+                }),
+                className: "font-mono text-xs bg-gradient-to-br from-background/80 to-background/60 border-border/40 rounded-lg focus:border-primary/50 focus:ring-1 focus:ring-primary/20 transition-all duration-200 h-8"
+              }
+            ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gradient-to-br from-background/80 to-background/60 border border-border/40 rounded-lg p-2.5 hover:border-border/60 transition-all duration-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              DynamicJsonForm,
+              {
+                schema: {
+                  type: prop.type,
+                  properties: prop.properties,
+                  description: prop.description,
+                  items: prop.items
+                },
+                value: params[key],
+                onChange: (newValue) => {
+                  setParams({
+                    ...params,
+                    [key]: newValue
+                  });
+                }
+              }
+            ) }) })
+          ] }, key);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-2 border-t border-border/20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          onClick: async () => {
+            try {
+              setIsToolRunning(true);
+              await callTool2(selectedTool.name, params);
+            } finally {
+              setIsToolRunning(false);
+            }
+          },
+          disabled: isToolRunning,
+          className: "w-full h-8 bg-gradient-to-r from-primary to-primary/90 hover:from-primary/90 hover:to-primary/80 text-primary-foreground font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-[1.01] active:scale-[0.99] text-xs",
+          children: isToolRunning ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "w-3.5 h-3.5 mr-2 animate-spin" }),
+            "Executing..."
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "w-3.5 h-3.5 mr-2" }),
+            "Run Tool"
+          ] })
+        }
+      ) })
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-6 text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 rounded-xl bg-gradient-to-br from-muted/30 to-muted/50 flex items-center justify-center mb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CodeXml, { className: "w-5 h-5 text-muted-foreground/60" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold text-foreground mb-1", children: "Ready to Execute" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground text-xs max-w-sm", children: "Select a tool from the list to configure its parameters and execute it" })
+    ] }) })
+  ] });
+};
+const ToolsTab = ({
+  tools,
+  listTools: listTools2,
+  clearTools,
+  callTool: callTool2,
+  selectedTool,
+  setSelectedTool,
+  nextCursor,
+  connectionStatus
+}) => {
+  reactExports.useEffect(() => {
+    if (connectionStatus === "connected") {
+      listTools2();
+    }
+  }, [connectionStatus]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "tools", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ListPane,
+      {
+        items: tools,
+        listItems: listTools2,
+        clearItems: () => {
+          clearTools();
+          setSelectedTool(null);
+        },
+        setSelectedItem: setSelectedTool,
+        renderItem: (tool) => {
+          const parameters = tool.inputSchema.properties ? Object.keys(tool.inputSchema.properties) : [];
+          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white dark:bg-gray-900 rounded-lg p-3 shadow-sm border border-gray-100 dark:border-gray-800 hover:shadow-md hover:border-blue-200 dark:hover:border-blue-800 transition-all duration-200 group", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col space-y-2.5", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lg", children: "🛠️" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs bg-gradient-to-r from-slate-100 to-gray-100 dark:from-slate-800 dark:to-gray-800 px-2.5 py-1 rounded-md border border-slate-300 dark:border-slate-600 text-slate-800 dark:text-slate-200 font-medium shadow-sm", children: tool.name })
+              ] }),
+              parameters.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-gray-400 dark:text-gray-600 font-medium", children: [
+                parameters.length,
+                " param",
+                parameters.length !== 1 ? "s" : ""
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400 leading-relaxed line-clamp-2", children: tool.description })
+          ] }) });
+        },
+        title: "Tools",
+        isButtonDisabled: !nextCursor && tools.length > 0
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ToolRunCard, { selectedTool, callTool: callTool2 })
+  ] }) });
+};
+const clearError = (tabKey, setErrors) => {
+  setErrors((prev) => ({ ...prev, [tabKey]: null }));
+};
+const sendMCPRequest = async (request, schema, dependencies2, tabKey) => {
+  try {
+    const response = await dependencies2.makeRequest(request, schema);
+    if (tabKey !== void 0) {
+      clearError(tabKey, dependencies2.setErrors);
+    }
+    return response;
+  } catch (e) {
+    const errorString = e.message ?? String(e);
+    if (tabKey !== void 0) {
+      dependencies2.setErrors((prev) => ({
+        ...prev,
+        [tabKey]: errorString
+      }));
+    }
+    throw e;
+  }
+};
+const handleApproveSampling = (id, result, setPendingSampleRequests) => {
+  setPendingSampleRequests((prev) => {
+    const request = prev.find((r2) => r2.id === id);
+    request == null ? void 0 : request.resolve(result);
+    return prev.filter((r2) => r2.id !== id);
+  });
+};
+const handleRejectSampling = (id, setPendingSampleRequests) => {
+  setPendingSampleRequests((prev) => {
+    const request = prev.find((r2) => r2.id === id);
+    request == null ? void 0 : request.reject(new Error("Sampling request rejected"));
+    return prev.filter((r2) => r2.id !== id);
+  });
+};
+const listResources = async (state, dependencies2) => {
+  const response = await sendMCPRequest(
+    {
+      method: "resources/list",
+      params: state.nextResourceCursor ? { cursor: state.nextResourceCursor } : {}
+    },
+    ListResourcesResultSchema,
+    dependencies2,
+    "resources"
+  );
+  dependencies2.setResources(state.resources.concat(response.resources ?? []));
+  dependencies2.setNextResourceCursor(response.nextCursor);
+};
+const listResourceTemplates = async (state, dependencies2) => {
+  const response = await sendMCPRequest(
+    {
+      method: "resources/templates/list",
+      params: state.nextResourceTemplateCursor ? { cursor: state.nextResourceTemplateCursor } : {}
+    },
+    ListResourceTemplatesResultSchema,
+    dependencies2,
+    "resources"
+  );
+  dependencies2.setResourceTemplates(
+    state.resourceTemplates.concat(response.resourceTemplates ?? [])
+  );
+  dependencies2.setNextResourceTemplateCursor(response.nextCursor);
+};
+const readResource = async (uri, dependencies2) => {
+  const response = await sendMCPRequest(
+    {
+      method: "resources/read",
+      params: { uri }
+    },
+    ReadResourceResultSchema,
+    dependencies2,
+    "resources"
+  );
+  dependencies2.setResourceContent(JSON.stringify(response, null, 2));
+};
+const subscribeToResource = async (uri, state, dependencies2) => {
+  if (!state.resourceSubscriptions.has(uri)) {
+    await sendMCPRequest(
+      {
+        method: "resources/subscribe",
+        params: { uri }
+      },
+      objectType({}),
+      dependencies2,
+      "resources"
+    );
+    const clone = new Set(state.resourceSubscriptions);
+    clone.add(uri);
+    dependencies2.setResourceSubscriptions(clone);
+  }
+};
+const unsubscribeFromResource = async (uri, state, dependencies2) => {
+  if (state.resourceSubscriptions.has(uri)) {
+    await sendMCPRequest(
+      {
+        method: "resources/unsubscribe",
+        params: { uri }
+      },
+      objectType({}),
+      dependencies2,
+      "resources"
+    );
+    const clone = new Set(state.resourceSubscriptions);
+    clone.delete(uri);
+    dependencies2.setResourceSubscriptions(clone);
+  }
+};
+const listPrompts = async (state, dependencies2) => {
+  const response = await sendMCPRequest(
+    {
+      method: "prompts/list",
+      params: state.nextPromptCursor ? { cursor: state.nextPromptCursor } : {}
+    },
+    ListPromptsResultSchema,
+    dependencies2,
+    "prompts"
+  );
+  dependencies2.setPrompts(response.prompts);
+  dependencies2.setNextPromptCursor(response.nextCursor);
+};
+const getPrompt = async (name, args = {}, dependencies2) => {
+  const response = await sendMCPRequest(
+    {
+      method: "prompts/get",
+      params: { name, arguments: args }
+    },
+    GetPromptResultSchema,
+    dependencies2,
+    "prompts"
+  );
+  dependencies2.setPromptContent(JSON.stringify(response, null, 2));
+};
+const listTools = async (state, dependencies2) => {
+  const response = await sendMCPRequest(
+    {
+      method: "tools/list",
+      params: state.nextToolCursor ? { cursor: state.nextToolCursor } : {}
+    },
+    ListToolsResultSchema,
+    dependencies2,
+    "tools"
+  );
+  dependencies2.setTools(response.tools);
+  dependencies2.setNextToolCursor(response.nextCursor);
+};
+const callTool = async (name, params, dependencies2) => {
+  try {
+    const response = await sendMCPRequest(
+      {
+        method: "tools/call",
+        params: {
+          name,
+          arguments: params,
+          _meta: {
+            progressToken: dependencies2.progressTokenRef.current++
+          }
+        }
+      },
+      CompatibilityCallToolResultSchema,
+      dependencies2,
+      "tools"
+    );
+    dependencies2.setToolResult(response);
+  } catch (e) {
+    const toolResult = {
+      content: [
+        {
+          type: "text",
+          text: e.message ?? String(e)
+        }
+      ],
+      isError: true
+    };
+    dependencies2.setToolResult(toolResult);
+  }
+};
+const handleRootsChange = async (dependencies2) => {
+  await dependencies2.sendNotification({
+    method: "notifications/roots/list_changed"
+  });
+};
+const sendLogLevelRequest = async (level, dependencies2) => {
+  await sendMCPRequest(
+    {
+      method: "logging/setLevel",
+      params: { level }
+    },
+    objectType({}),
+    dependencies2
+  );
+  dependencies2.setLogLevel(level);
+};
+const clearStdErrNotifications = (setStdErrNotifications) => {
+  setStdErrNotifications([]);
+};
+function clamp(value, [min2, max2]) {
+  return Math.min(max2, Math.max(min2, value));
+}
 var OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
 var SELECTION_KEYS = [" ", "Enter"];
 var SELECT_NAME = "Select";
@@ -33603,12 +34372,12 @@ var Select$1 = (props) => {
   ) });
 };
 Select$1.displayName = SELECT_NAME;
-var TRIGGER_NAME$2 = "SelectTrigger";
+var TRIGGER_NAME$1 = "SelectTrigger";
 var SelectTrigger$1 = reactExports.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, disabled = false, ...triggerProps } = props;
     const popperScope = usePopperScope$1(__scopeSelect);
-    const context = useSelectContext(TRIGGER_NAME$2, __scopeSelect);
+    const context = useSelectContext(TRIGGER_NAME$1, __scopeSelect);
     const isDisabled = context.disabled || disabled;
     const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange);
     const getItems = useCollection(__scopeSelect);
@@ -33680,7 +34449,7 @@ var SelectTrigger$1 = reactExports.forwardRef(
     ) });
   }
 );
-SelectTrigger$1.displayName = TRIGGER_NAME$2;
+SelectTrigger$1.displayName = TRIGGER_NAME$1;
 var VALUE_NAME = "SelectValue";
 var SelectValue$1 = reactExports.forwardRef(
   (props, forwardedRef) => {
@@ -34544,7 +35313,7 @@ var SelectArrow = reactExports.forwardRef(
   }
 );
 SelectArrow.displayName = ARROW_NAME$1;
-var BUBBLE_INPUT_NAME$1 = "SelectBubbleInput";
+var BUBBLE_INPUT_NAME = "SelectBubbleInput";
 var SelectBubbleInput = reactExports.forwardRef(
   ({ __scopeSelect, value, ...props }, forwardedRef) => {
     const ref2 = reactExports.useRef(null);
@@ -34576,7 +35345,7 @@ var SelectBubbleInput = reactExports.forwardRef(
     );
   }
 );
-SelectBubbleInput.displayName = BUBBLE_INPUT_NAME$1;
+SelectBubbleInput.displayName = BUBBLE_INPUT_NAME;
 function shouldShowPlaceholder(value) {
   return value === "" || value === void 0;
 }
@@ -34740,46 +35509,6 @@ const SelectSeparator = reactExports.forwardRef(({ className, ...props }, ref2)
   }
 ));
 SelectSeparator.displayName = Separator.displayName;
-const useTheme = () => {
-  const [theme, setTheme] = reactExports.useState(() => {
-    const savedTheme = localStorage.getItem("theme");
-    return savedTheme || "system";
-  });
-  reactExports.useEffect(() => {
-    const darkModeMediaQuery = window.matchMedia(
-      "(prefers-color-scheme: dark)"
-    );
-    const handleDarkModeChange = (e) => {
-      if (theme === "system") {
-        updateDocumentTheme(e.matches ? "dark" : "light");
-      }
-    };
-    const updateDocumentTheme = (newTheme) => {
-      document.documentElement.classList.toggle("dark", newTheme === "dark");
-    };
-    if (theme === "system") {
-      updateDocumentTheme(darkModeMediaQuery.matches ? "dark" : "light");
-    } else {
-      updateDocumentTheme(theme);
-    }
-    darkModeMediaQuery.addEventListener("change", handleDarkModeChange);
-    return () => {
-      darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
-    };
-  }, [theme]);
-  const setThemeWithSideEffect = reactExports.useCallback((newTheme) => {
-    setTheme(newTheme);
-    localStorage.setItem("theme", newTheme);
-    if (newTheme !== "system") {
-      document.documentElement.classList.toggle("dark", newTheme === "dark");
-    }
-  }, []);
-  return reactExports.useMemo(
-    () => [theme, setThemeWithSideEffect],
-    [theme, setThemeWithSideEffect]
-  );
-};
-const version = "0.1.0";
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -34923,12 +35652,12 @@ var Tooltip$1 = (props) => {
   ) });
 };
 Tooltip$1.displayName = TOOLTIP_NAME;
-var TRIGGER_NAME$1 = "TooltipTrigger";
+var TRIGGER_NAME = "TooltipTrigger";
 var TooltipTrigger$1 = reactExports.forwardRef(
   (props, forwardedRef) => {
     const { __scopeTooltip, ...triggerProps } = props;
-    const context = useTooltipContext(TRIGGER_NAME$1, __scopeTooltip);
-    const providerContext = useTooltipProviderContext(TRIGGER_NAME$1, __scopeTooltip);
+    const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
+    const providerContext = useTooltipProviderContext(TRIGGER_NAME, __scopeTooltip);
     const popperScope = usePopperScope(__scopeTooltip);
     const ref2 = reactExports.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref2, context.onTriggerChange);
@@ -34972,7 +35701,7 @@ var TooltipTrigger$1 = reactExports.forwardRef(
     ) });
   }
 );
-TooltipTrigger$1.displayName = TRIGGER_NAME$1;
+TooltipTrigger$1.displayName = TRIGGER_NAME;
 var PORTAL_NAME = "TooltipPortal";
 var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
   forceMount: void 0
@@ -35262,7 +35991,7 @@ const TooltipContent = reactExports.forwardRef(({ className, sideOffset = 4, ...
   }
 ));
 TooltipContent.displayName = Content2.displayName;
-const Sidebar = ({
+const ConnectionSection = ({
   connectionStatus,
   transportType,
   setTransportType,
@@ -35281,17 +36010,14 @@ const Sidebar = ({
   onConnect,
   onDisconnect,
   stdErrNotifications,
-  clearStdErrNotifications,
+  clearStdErrNotifications: clearStdErrNotifications2,
   logLevel,
-  sendLogLevelRequest,
+  sendLogLevelRequest: sendLogLevelRequest2,
   loggingSupported,
   config,
   setConfig
 }) => {
-  const [theme, setTheme] = useTheme();
-  const [showEnvVars, setShowEnvVars] = reactExports.useState(false);
-  const [showBearerToken, setShowBearerToken] = reactExports.useState(false);
-  const [showConfig, setShowConfig] = reactExports.useState(false);
+  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);
@@ -35382,1054 +36108,536 @@ const Sidebar = ({
       reportError2(error);
     }
   }, [generateMCPServerFile, toast2, reportError2]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-80 bg-card border-r border-border flex flex-col h-full", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { className: "ml-2 text-lg font-semibold", children: [
-      "MCP Inspector v",
-      version
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "label",
-          {
-            className: "text-sm font-medium",
-            htmlFor: "transport-type-select",
-            children: "Transport Type"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Select,
-          {
-            value: transportType,
-            onValueChange: (value) => setTransportType(value),
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { id: "transport-type-select", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select transport type" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "stdio", children: "STDIO" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "sse", children: "SSE" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "streamable-http", children: "Streamable HTTP" })
-              ] })
-            ]
-          }
-        )
-      ] }),
-      transportType === "stdio" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", htmlFor: "command-input", children: "Command" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Input,
-            {
-              id: "command-input",
-              placeholder: "Command",
-              value: command,
-              onChange: (e) => setCommand(e.target.value),
-              className: "font-mono"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "label",
-            {
-              className: "text-sm font-medium",
-              htmlFor: "arguments-input",
-              children: "Arguments"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Input,
-            {
-              id: "arguments-input",
-              placeholder: "Arguments (space-separated)",
-              value: args,
-              onChange: (e) => setArgs(e.target.value),
-              className: "font-mono"
-            }
-          )
-        ] })
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", htmlFor: "sse-url-input", children: "URL" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Input,
-            {
-              id: "sse-url-input",
-              placeholder: "URL",
-              value: sseUrl,
-              onChange: (e) => setSseUrl(e.target.value),
-              className: "font-mono"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            Button,
-            {
-              variant: "outline",
-              onClick: () => setShowBearerToken(!showBearerToken),
-              className: "flex items-center w-full",
-              "data-testid": "auth-button",
-              "aria-expanded": showBearerToken,
-              children: [
-                showBearerToken ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4 mr-2" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4 mr-2" }),
-                "Authentication"
-              ]
-            }
-          ),
-          showBearerToken && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", children: "Header Name" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Input,
-              {
-                placeholder: "Authorization",
-                onChange: (e) => setHeaderName && setHeaderName(e.target.value),
-                "data-testid": "header-input",
-                className: "font-mono",
-                value: headerName
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "label",
-              {
-                className: "text-sm font-medium",
-                htmlFor: "bearer-token-input",
-                children: "Bearer Token"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Input,
-              {
-                id: "bearer-token-input",
-                placeholder: "Bearer Token",
-                value: bearerToken,
-                onChange: (e) => setBearerToken(e.target.value),
-                "data-testid": "bearer-token-input",
-                className: "font-mono",
-                type: "password"
-              }
-            )
-          ] })
-        ] })
-      ] }),
-      transportType === "stdio" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Button,
-          {
-            variant: "outline",
-            onClick: () => setShowEnvVars(!showEnvVars),
-            className: "flex items-center w-full",
-            "data-testid": "env-vars-button",
-            "aria-expanded": showEnvVars,
-            children: [
-              showEnvVars ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4 mr-2" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4 mr-2" }),
-              "Environment Variables"
-            ]
-          }
-        ),
-        showEnvVars && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          Object.entries(env).map(([key, value], idx) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 pb-4", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+  const maybeRenderTabs = () => {
+    if (connectionStatus === "connected") {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex border-b border-slate-200/60 dark:border-slate-700/60 px-6 bg-gradient-to-r from-slate-50/50 to-white/50 dark:from-slate-900/50 dark:to-slate-800/50", children: [
+      { key: "auth", label: "Auth" },
+      ...transportType === "stdio" ? [{ key: "env", label: "Environment" }] : [],
+      { key: "config", label: "Configuration" },
+      ...loggingSupported ? [{ key: "logging", label: "Logging" }] : []
+    ].map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        className: `px-6 py-3 text-sm font-medium border-b-2 transition-all duration-200 relative ${activeTab === tab.key ? "border-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600"}`,
+        onClick: () => setActiveTab(tab.key),
+        children: [
+          tab.label,
+          activeTab === tab.key && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-x-0 bottom-0 h-0.5 bg-gradient-to-r from-blue-500 to-blue-600 shadow-lg" })
+        ]
+      },
+      tab.key
+    )) });
+  };
+  const maybeRenderContentBody = () => {
+    if (connectionStatus === "connected") {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-auto", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6", children: [
+        activeTab === "auth" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-xl p-6 border border-slate-200/60 dark:border-slate-700/60 shadow-lg", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xl font-semibold mb-6 text-slate-800  bg-clip-text", children: "Authentication" }),
+          transportType !== "stdio" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-5", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: "Header Name" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 Input,
                 {
-                  "aria-label": `Environment variable key ${idx + 1}`,
-                  placeholder: "Key",
-                  value: key,
-                  onChange: (e) => {
-                    const newKey = e.target.value;
-                    const newEnv = Object.entries(env).reduce(
-                      (acc, [k2, v]) => {
-                        if (k2 === key) {
-                          acc[newKey] = value;
-                        } else {
-                          acc[k2] = v;
-                        }
-                        return acc;
-                      },
-                      {}
-                    );
-                    setEnv(newEnv);
-                    setShownEnvVars((prev) => {
-                      const next = new Set(prev);
-                      if (next.has(key)) {
-                        next.delete(key);
-                        next.add(newKey);
-                      }
-                      return next;
-                    });
-                  },
-                  className: "font-mono"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Button,
-                {
-                  variant: "destructive",
-                  size: "icon",
-                  className: "h-9 w-9 p-0 shrink-0",
-                  onClick: () => {
-                    const { [key]: _removed, ...rest } = env;
-                    setEnv(rest);
-                  },
-                  children: "×"
+                  placeholder: "Authorization",
+                  onChange: (e) => setHeaderName && setHeaderName(e.target.value),
+                  className: "font-mono h-11 bg-white/70 dark:bg-slate-900/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-blue-400/60 dark:hover:border-blue-500/60 focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200 shadow-sm hover:shadow-md focus:shadow-lg",
+                  value: headerName
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: "Bearer Token" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 Input,
                 {
-                  "aria-label": `Environment variable value ${idx + 1}`,
-                  type: shownEnvVars.has(key) ? "text" : "password",
-                  placeholder: "Value",
-                  value,
-                  onChange: (e) => {
-                    const newEnv = { ...env };
-                    newEnv[key] = e.target.value;
-                    setEnv(newEnv);
-                  },
-                  className: "font-mono"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Button,
-                {
-                  variant: "outline",
-                  size: "icon",
-                  className: "h-9 w-9 p-0 shrink-0",
-                  onClick: () => {
-                    setShownEnvVars((prev) => {
-                      const next = new Set(prev);
-                      if (next.has(key)) {
-                        next.delete(key);
-                      } else {
-                        next.add(key);
-                      }
-                      return next;
-                    });
-                  },
-                  "aria-label": shownEnvVars.has(key) ? "Hide value" : "Show value",
-                  "aria-pressed": shownEnvVars.has(key),
-                  title: shownEnvVars.has(key) ? "Hide value" : "Show value",
-                  children: shownEnvVars.has(key) ? /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(EyeOff, { className: "h-4 w-4", "aria-hidden": "true" })
+                  placeholder: "Bearer Token",
+                  value: bearerToken,
+                  onChange: (e) => setBearerToken(e.target.value),
+                  className: "font-mono h-11 bg-white/70 dark:bg-slate-900/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-blue-400/60 dark:hover:border-blue-500/60 focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200 shadow-sm hover:shadow-md focus:shadow-lg",
+                  type: "password"
                 }
               )
             ] })
-          ] }, idx)),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button,
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-slate-600 dark:text-slate-400 italic", children: "Authentication is not available for STDIO connections." })
+        ] }) }),
+        activeTab === "env" && transportType === "stdio" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-xl p-6 border border-slate-200/60 dark:border-slate-700/60 shadow-lg", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xl font-semibold text-slate-800bg-clip-text", children: "Environment Variables" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                variant: "outline",
+                onClick: () => {
+                  const key = "";
+                  const newEnv = { ...env };
+                  newEnv[key] = "";
+                  setEnv(newEnv);
+                },
+                className: "bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-emerald-400/60 dark:hover:border-emerald-500/60 hover:bg-emerald-50/80 dark:hover:bg-emerald-900/20 transition-all duration-200 shadow-sm hover:shadow-md",
+                children: "Add Variable"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: Object.entries(env).map(([key, value], idx) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
             {
-              variant: "outline",
-              className: "w-full mt-2",
-              onClick: () => {
-                const key = "";
-                const newEnv = { ...env };
-                newEnv[key] = "";
-                setEnv(newEnv);
+              className: "bg-white/40 dark:bg-slate-900/40 backdrop-blur-sm rounded-lg p-4 border border-slate-200/40 dark:border-slate-700/40 shadow-md hover:shadow-lg transition-all duration-200",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3 mb-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Input,
+                    {
+                      placeholder: "Key",
+                      value: key,
+                      onChange: (e) => {
+                        const newKey = e.target.value;
+                        const newEnv = Object.entries(env).reduce(
+                          (acc, [k2, v]) => {
+                            if (k2 === key) {
+                              acc[newKey] = value;
+                            } else {
+                              acc[k2] = v;
+                            }
+                            return acc;
+                          },
+                          {}
+                        );
+                        setEnv(newEnv);
+                        setShownEnvVars((prev) => {
+                          const next = new Set(prev);
+                          if (next.has(key)) {
+                            next.delete(key);
+                            next.add(newKey);
+                          }
+                          return next;
+                        });
+                      },
+                      className: "font-mono flex-1 h-10 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-blue-400/60 dark:hover:border-blue-500/60 focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Button,
+                    {
+                      variant: "destructive",
+                      size: "icon",
+                      onClick: () => {
+                        const { [key]: _removed, ...rest } = env;
+                        setEnv(rest);
+                      },
+                      className: "h-10 w-10 bg-red-500/80 hover:bg-red-600/90 shadow-md hover:shadow-lg transition-all duration-200",
+                      children: "×"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Input,
+                    {
+                      type: shownEnvVars.has(key) ? "text" : "password",
+                      placeholder: "Value",
+                      value,
+                      onChange: (e) => {
+                        const newEnv = { ...env };
+                        newEnv[key] = e.target.value;
+                        setEnv(newEnv);
+                      },
+                      className: "font-mono flex-1 h-10 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-blue-400/60 dark:hover:border-blue-500/60 focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "icon",
+                      onClick: () => {
+                        setShownEnvVars((prev) => {
+                          const next = new Set(prev);
+                          if (next.has(key)) {
+                            next.delete(key);
+                          } else {
+                            next.add(key);
+                          }
+                          return next;
+                        });
+                      },
+                      className: "h-10 w-10 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-blue-400/60 dark:hover:border-blue-500/60 hover:bg-blue-50/80 dark:hover:bg-blue-900/20 transition-all duration-200",
+                      children: shownEnvVars.has(key) ? /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(EyeOff, { className: "h-4 w-4" })
+                    }
+                  )
+                ] })
+              ]
+            },
+            idx
+          )) })
+        ] }) }),
+        activeTab === "config" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-xl p-6 border border-slate-200/60 dark:border-slate-700/60 shadow-lg", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xl font-semibold mb-6 text-slate-800 bg-clip-text", children: "Configuration" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-5", children: Object.entries(config).map(([key, configItem]) => {
+            const configKey = key;
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                className: "space-y-3 p-4 bg-white/40 dark:bg-slate-900/40 backdrop-blur-sm rounded-lg border border-slate-200/40 dark:border-slate-700/40 shadow-sm hover:shadow-md transition-all duration-200",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium text-slate-800", children: configItem.label }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircleHelp, { className: "h-4 w-4 text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200" }) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl border-slate-200/60 dark:border-slate-700/60 shadow-xl", children: configItem.description })
+                    ] })
+                  ] }),
+                  typeof configItem.value === "number" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Input,
+                    {
+                      type: "number",
+                      value: configItem.value,
+                      onChange: (e) => {
+                        const newConfig = { ...config };
+                        newConfig[configKey] = {
+                          ...configItem,
+                          value: Number(e.target.value)
+                        };
+                        setConfig(newConfig);
+                      },
+                      className: "font-mono h-10 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-blue-400/60 dark:hover:border-blue-500/60 focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200"
+                    }
+                  ) : typeof configItem.value === "boolean" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    Select,
+                    {
+                      value: configItem.value.toString(),
+                      onValueChange: (val) => {
+                        const newConfig = { ...config };
+                        newConfig[configKey] = {
+                          ...configItem,
+                          value: val === "true"
+                        };
+                        setConfig(newConfig);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-10 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-blue-400/60 dark:hover:border-blue-500/60 transition-all duration-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, {}) }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { className: "bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl border-slate-200/60 dark:border-slate-700/60 shadow-xl", children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(
+                            SelectItem,
+                            {
+                              value: "true",
+                              className: "hover:bg-blue-50/80 dark:hover:bg-blue-900/30",
+                              children: "True"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(
+                            SelectItem,
+                            {
+                              value: "false",
+                              className: "hover:bg-blue-50/80 dark:hover:bg-blue-900/30",
+                              children: "False"
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Input,
+                    {
+                      value: configItem.value,
+                      onChange: (e) => {
+                        const newConfig = { ...config };
+                        newConfig[configKey] = {
+                          ...configItem,
+                          value: e.target.value
+                        };
+                        setConfig(newConfig);
+                      },
+                      className: "font-mono h-10 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-blue-400/60 dark:hover:border-blue-500/60 focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200"
+                    }
+                  )
+                ]
               },
-              children: "Add Environment Variable"
-            }
-          )
-        ] })
+              key
+            );
+          }) })
+        ] }) }),
+        activeTab === "logging" && loggingSupported && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-xl p-6 border border-slate-200/60 dark:border-slate-700/60 shadow-lg", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xl font-semibold mb-6 text-slate-800 dark:text-slate-200 bg-gradient-to-r from-orange-600 to-orange-800 dark:from-orange-400 dark:to-orange-600 bg-clip-text text-transparent", children: "Logging Configuration" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: "Logging Level" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Select,
+              {
+                value: logLevel,
+                onValueChange: (value) => sendLogLevelRequest2(value),
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "w-64 h-11 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-blue-400/60 dark:hover:border-blue-500/60 transition-all duration-200 shadow-sm hover:shadow-md", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select logging level" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectContent, { className: "bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl border-slate-200/60 dark:border-slate-700/60 shadow-xl", children: Object.values(LoggingLevelSchema.enum).map((level) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    SelectItem,
+                    {
+                      value: level,
+                      className: "hover:bg-blue-50/80 dark:hover:bg-blue-900/30",
+                      children: level
+                    },
+                    level
+                  )) })
+                ]
+              }
+            )
+          ] })
+        ] }) })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2 mt-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      stdErrNotifications.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-red-200/60 dark:border-red-800/60 bg-gradient-to-r from-red-50/80 to-rose-50/80 dark:from-red-950/60 dark:to-rose-950/60 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-sm font-semibold text-red-700 dark:text-red-400 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-red-500 rounded-full animate-pulse" }),
+            "Error output from MCP server"
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
             Button,
             {
               variant: "outline",
               size: "sm",
-              onClick: handleCopyServerEntry,
-              className: "w-full",
-              children: [
-                copiedServerEntry ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCheck, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "h-4 w-4 mr-2" }),
-                "Server Entry"
-              ]
+              onClick: clearStdErrNotifications2,
+              className: "bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-red-300/60 dark:border-red-600/60 hover:border-red-500/60 dark:hover:border-red-400/60 hover:bg-red-50/80 dark:hover:bg-red-900/20 transition-all duration-200 shadow-sm hover:shadow-md",
+              children: "Clear"
             }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Copy Server Entry" })
+          )
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            Button,
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-h-48 overflow-y-auto space-y-3", children: stdErrNotifications.map((notification, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "text-sm text-red-800 dark:text-red-200 font-mono p-4 bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm rounded-lg border border-red-200/60 dark:border-red-700/60 shadow-md hover:shadow-lg transition-all duration-200",
+            children: notification.params.content
+          },
+          index2
+        )) })
+      ] }) })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col bg-gradient-to-br from-slate-50 via-white to-slate-100 dark:from-slate-950 dark:via-slate-900 dark:to-slate-800", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "backdrop-blur-xl bg-white/80 dark:bg-slate-900/80 border-b border-slate-200/60 dark:border-slate-700/60 shadow-sm", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 mb-6", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Select,
             {
-              variant: "outline",
-              size: "sm",
-              onClick: handleCopyServerFile,
-              className: "w-full",
+              value: transportType,
+              onValueChange: (value) => setTransportType(value),
               children: [
-                copiedServerFile ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCheck, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "h-4 w-4 mr-2" }),
-                "Servers File"
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "w-36 h-11 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-blue-400/60 dark:hover:border-blue-500/60 transition-all duration-200 shadow-sm hover:shadow-md", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select transport type" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { className: "bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl border-slate-200/60 dark:border-slate-700/60 shadow-xl", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    SelectItem,
+                    {
+                      value: "stdio",
+                      className: "hover:bg-blue-50/80 dark:hover:bg-blue-900/30",
+                      children: "STDIO"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    SelectItem,
+                    {
+                      value: "sse",
+                      className: "hover:bg-blue-50/80 dark:hover:bg-blue-900/30",
+                      children: "SSE"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    SelectItem,
+                    {
+                      value: "streamable-http",
+                      className: "hover:bg-blue-50/80 dark:hover:bg-blue-900/30",
+                      children: "HTTP"
+                    }
+                  )
+                ] })
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Copy Servers File" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Button,
-          {
-            variant: "outline",
-            onClick: () => setShowConfig(!showConfig),
-            className: "flex items-center w-full",
-            "data-testid": "config-button",
-            "aria-expanded": showConfig,
-            children: [
-              showConfig ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4 mr-2" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4 mr-2" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Settings, { className: "w-4 h-4 mr-2" }),
-              "Configuration"
-            ]
-          }
-        ),
-        showConfig && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: Object.entries(config).map(([key, configItem]) => {
-          const configKey = key;
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "label",
-                {
-                  className: "text-sm font-medium text-green-600 break-all",
-                  htmlFor: `${configKey}-input`,
-                  children: configItem.label
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircleHelp, { className: "h-4 w-4 text-muted-foreground" }) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: configItem.description })
-              ] })
-            ] }),
-            typeof configItem.value === "number" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: transportType === "stdio" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
               Input,
               {
-                id: `${configKey}-input`,
-                type: "number",
-                "data-testid": `${configKey}-input`,
-                value: configItem.value,
-                onChange: (e) => {
-                  const newConfig = { ...config };
-                  newConfig[configKey] = {
-                    ...configItem,
-                    value: Number(e.target.value)
-                  };
-                  setConfig(newConfig);
-                },
-                className: "font-mono"
+                placeholder: "npx",
+                value: command,
+                onChange: (e) => setCommand(e.target.value),
+                className: "font-mono flex-1 h-11 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-blue-400/60 dark:hover:border-blue-500/60 focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200 shadow-sm hover:shadow-md focus:shadow-lg"
               }
-            ) : typeof configItem.value === "boolean" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              Select,
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Input,
+              {
+                placeholder: "@modelcontextprotocol/server-brave-search",
+                value: args,
+                onChange: (e) => setArgs(e.target.value),
+                className: "font-mono flex-1 h-11 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-blue-400/60 dark:hover:border-blue-500/60 focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200 shadow-sm hover:shadow-md focus:shadow-lg"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Input,
+            {
+              placeholder: transportType === "sse" ? "https://mcp.asana.com/sse" : "Enter URL",
+              value: sseUrl,
+              onChange: (e) => setSseUrl(e.target.value),
+              className: "font-mono h-11 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-blue-400/60 dark:hover:border-blue-500/60 focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200 shadow-sm hover:shadow-md focus:shadow-lg"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-3", children: connectionStatus === "connected" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Button,
               {
-                "data-testid": `${configKey}-select`,
-                value: configItem.value.toString(),
-                onValueChange: (val) => {
-                  const newConfig = { ...config };
-                  newConfig[configKey] = {
-                    ...configItem,
-                    value: val === "true"
-                  };
-                  setConfig(newConfig);
+                onClick: () => {
+                  onDisconnect();
+                  onConnect();
                 },
+                className: "px-6 h-11 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105",
                 children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { id: `${configKey}-input`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, {}) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "true", children: "True" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "false", children: "False" })
-                  ] })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "w-4 h-4 mr-2" }),
+                  transportType === "stdio" ? "Restart" : "Reconnect"
                 ]
               }
-            ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Input,
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Button,
               {
-                id: `${configKey}-input`,
-                "data-testid": `${configKey}-input`,
-                value: configItem.value,
-                onChange: (e) => {
-                  const newConfig = { ...config };
-                  newConfig[configKey] = {
-                    ...configItem,
-                    value: e.target.value
-                  };
-                  setConfig(newConfig);
-                },
-                className: "font-mono"
+                onClick: onDisconnect,
+                variant: "outline",
+                className: "h-11 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-red-400/60 dark:hover:border-red-500/60 hover:bg-red-50/80 dark:hover:bg-red-900/20 transition-all duration-200 shadow-sm hover:shadow-md",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCwOff, { className: "w-4 h-4 mr-2" }),
+                  "Disconnect"
+                ]
               }
             )
-          ] }, key);
-        }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-        connectionStatus === "connected" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
             Button,
             {
-              "data-testid": "connect-button",
-              onClick: () => {
-                onDisconnect();
-                onConnect();
-              },
+              onClick: onConnect,
+              className: "px-8 h-11 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105",
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "w-4 h-4 mr-2" }),
-                transportType === "stdio" ? "Restart" : "Reconnect"
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Play, { className: "w-4 h-4 mr-2" }),
+                "Connect"
               ]
             }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: onDisconnect, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCwOff, { className: "w-4 h-4 mr-2" }),
-            "Disconnect"
-          ] })
-        ] }),
-        connectionStatus !== "connected" && /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { className: "w-full", onClick: onConnect, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Play, { className: "w-4 h-4 mr-2" }),
-          "Connect"
+          ) })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center space-x-2 mb-4", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: `w-2 h-2 rounded-full ${(() => {
-                switch (connectionStatus) {
-                  case "connected":
-                    return "bg-green-500";
-                  case "error":
-                    return "bg-red-500";
-                  case "error-connecting-to-proxy":
-                    return "bg-red-500";
-                  default:
-                    return "bg-gray-500";
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-3", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: `w-3 h-3 rounded-full shadow-lg ${(() => {
+                    switch (connectionStatus) {
+                      case "connected":
+                        return "bg-emerald-500 shadow-emerald-500/50";
+                      case "error":
+                        return "bg-red-500 shadow-red-500/50";
+                      case "error-connecting-to-proxy":
+                        return "bg-red-500 shadow-red-500/50";
+                      default:
+                        return "bg-slate-400 shadow-slate-400/50";
+                    }
+                  })()}`
                 }
-              })()}`
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600", children: (() => {
-            switch (connectionStatus) {
-              case "connected":
-                return "Connected";
-              case "error":
-                return "Connection Error, is your MCP server running?";
-              case "error-connecting-to-proxy":
-                return "Error Connecting to MCP Inspector Proxy - Check Console logs";
-              default:
-                return "Disconnected";
-            }
-          })() })
-        ] }),
-        loggingSupported && connectionStatus === "connected" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "label",
-            {
-              className: "text-sm font-medium",
-              htmlFor: "logging-level-select",
-              children: "Logging Level"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            Select,
-            {
-              value: logLevel,
-              onValueChange: (value) => sendLogLevelRequest(value),
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { id: "logging-level-select", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select logging level" }) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectContent, { children: Object.values(LoggingLevelSchema.enum).map((level) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: level, children: level }, level)) })
-              ]
-            }
-          )
-        ] }),
-        stdErrNotifications.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 border-t border-gray-200 pt-4", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium", children: "Error output from MCP server" }),
+              ),
+              connectionStatus === "connected" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 w-3 h-3 rounded-full bg-emerald-500 animate-ping opacity-75" })
+            ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Button,
+              "span",
               {
-                variant: "outline",
-                size: "sm",
-                onClick: clearStdErrNotifications,
-                className: "h-8 px-2",
-                children: "Clear"
+                className: `text-sm font-medium ${(() => {
+                  switch (connectionStatus) {
+                    case "connected":
+                      return "text-emerald-700 dark:text-emerald-300";
+                    case "error":
+                      return "text-red-700 dark:text-red-300";
+                    case "error-connecting-to-proxy":
+                      return "text-red-700 dark:text-red-300";
+                    default:
+                      return "text-slate-600 dark:text-slate-400";
+                  }
+                })()}`,
+                children: (() => {
+                  switch (connectionStatus) {
+                    case "connected":
+                      return "Connected";
+                    case "error":
+                      return "Connection Error, is your MCP server running?";
+                    case "error-connecting-to-proxy":
+                      return "Error Connecting to MCP Inspector Proxy - Check Console logs";
+                    default:
+                      return "Disconnected";
+                  }
+                })()
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 max-h-80 overflow-y-auto", children: stdErrNotifications.map((notification, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: "text-sm text-red-500 font-mono py-2 border-b border-gray-200 last:border-b-0",
-              children: notification.params.content
-            },
-            index2
-          )) })
-        ] }) })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-t", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Select,
-        {
-          value: theme,
-          onValueChange: (value) => setTheme(value),
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "w-[100px]", id: "theme-select", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, {}) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "system", children: "System" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "light", children: "Light" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "dark", children: "Dark" })
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", title: "Inspector Documentation", asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "a",
-          {
-            href: "https://modelcontextprotocol.io/docs/tools/inspector",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircleHelp, { className: "w-4 h-4 text-foreground" })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", title: "Debugging Guide", asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "a",
-          {
-            href: "https://modelcontextprotocol.io/docs/tools/debugging",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Bug, { className: "w-4 h-4 text-foreground" })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            variant: "ghost",
-            title: "Report bugs or contribute on GitHub",
-            asChild: true,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "a",
-              {
-                href: "https://github.com/modelcontextprotocol/inspector",
-                target: "_blank",
-                rel: "noopener noreferrer",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Github, { className: "w-4 h-4 text-foreground" })
-              }
-            )
-          }
-        )
-      ] })
-    ] }) })
-  ] });
-};
-var CHECKBOX_NAME = "Checkbox";
-var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
-var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
-function CheckboxProvider(props) {
-  const {
-    __scopeCheckbox,
-    checked: checkedProp,
-    children,
-    defaultChecked,
-    disabled,
-    form,
-    name,
-    onCheckedChange,
-    required: required2,
-    value = "on",
-    // @ts-expect-error
-    internal_do_not_use_render
-  } = props;
-  const [checked, setChecked] = useControllableState({
-    prop: checkedProp,
-    defaultProp: defaultChecked ?? false,
-    onChange: onCheckedChange,
-    caller: CHECKBOX_NAME
-  });
-  const [control, setControl] = reactExports.useState(null);
-  const [bubbleInput, setBubbleInput] = reactExports.useState(null);
-  const hasConsumerStoppedPropagationRef = reactExports.useRef(false);
-  const isFormControl = control ? !!form || !!control.closest("form") : (
-    // We set this to true by default so that events bubble to forms without JS (SSR)
-    true
-  );
-  const context = {
-    checked,
-    disabled,
-    setChecked,
-    control,
-    setControl,
-    name,
-    form,
-    value,
-    hasConsumerStoppedPropagationRef,
-    required: required2,
-    defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
-    isFormControl,
-    bubbleInput,
-    setBubbleInput
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    CheckboxProviderImpl,
-    {
-      scope: __scopeCheckbox,
-      ...context,
-      children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
-    }
-  );
-}
-var TRIGGER_NAME = "CheckboxTrigger";
-var CheckboxTrigger = reactExports.forwardRef(
-  ({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) => {
-    const {
-      control,
-      value,
-      disabled,
-      checked,
-      required: required2,
-      setControl,
-      setChecked,
-      hasConsumerStoppedPropagationRef,
-      isFormControl,
-      bubbleInput
-    } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);
-    const composedRefs = useComposedRefs(forwardedRef, setControl);
-    const initialCheckedStateRef = reactExports.useRef(checked);
-    reactExports.useEffect(() => {
-      const form = control == null ? void 0 : control.form;
-      if (form) {
-        const reset = () => setChecked(initialCheckedStateRef.current);
-        form.addEventListener("reset", reset);
-        return () => form.removeEventListener("reset", reset);
-      }
-    }, [control, setChecked]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Primitive.button,
-      {
-        type: "button",
-        role: "checkbox",
-        "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
-        "aria-required": required2,
-        "data-state": getState(checked),
-        "data-disabled": disabled ? "" : void 0,
-        disabled,
-        value,
-        ...checkboxProps,
-        ref: composedRefs,
-        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
-          if (event.key === "Enter") event.preventDefault();
-        }),
-        onClick: composeEventHandlers(onClick, (event) => {
-          setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
-          if (bubbleInput && isFormControl) {
-            hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
-            if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
-          }
-        })
-      }
-    );
-  }
-);
-CheckboxTrigger.displayName = TRIGGER_NAME;
-var Checkbox$1 = reactExports.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeCheckbox,
-      name,
-      checked,
-      defaultChecked,
-      required: required2,
-      disabled,
-      value,
-      onCheckedChange,
-      form,
-      ...checkboxProps
-    } = props;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      CheckboxProvider,
-      {
-        __scopeCheckbox,
-        checked,
-        defaultChecked,
-        disabled,
-        required: required2,
-        onCheckedChange,
-        name,
-        form,
-        value,
-        internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CheckboxTrigger,
-            {
-              ...checkboxProps,
-              ref: forwardedRef,
-              __scopeCheckbox
-            }
-          ),
-          isFormControl && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CheckboxBubbleInput,
-            {
-              __scopeCheckbox
-            }
-          )
-        ] })
-      }
-    );
-  }
-);
-Checkbox$1.displayName = CHECKBOX_NAME;
-var INDICATOR_NAME = "CheckboxIndicator";
-var CheckboxIndicator = reactExports.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
-    const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Presence,
-      {
-        present: forceMount || isIndeterminate(context.checked) || context.checked === true,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Primitive.span,
-          {
-            "data-state": getState(context.checked),
-            "data-disabled": context.disabled ? "" : void 0,
-            ...indicatorProps,
-            ref: forwardedRef,
-            style: { pointerEvents: "none", ...props.style }
-          }
-        )
-      }
-    );
-  }
-);
-CheckboxIndicator.displayName = INDICATOR_NAME;
-var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
-var CheckboxBubbleInput = reactExports.forwardRef(
-  ({ __scopeCheckbox, ...props }, forwardedRef) => {
-    const {
-      control,
-      hasConsumerStoppedPropagationRef,
-      checked,
-      defaultChecked,
-      required: required2,
-      disabled,
-      name,
-      value,
-      form,
-      bubbleInput,
-      setBubbleInput
-    } = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);
-    const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
-    const prevChecked = usePrevious(checked);
-    const controlSize = useSize(control);
-    reactExports.useEffect(() => {
-      const input = bubbleInput;
-      if (!input) return;
-      const inputProto = window.HTMLInputElement.prototype;
-      const descriptor = Object.getOwnPropertyDescriptor(
-        inputProto,
-        "checked"
-      );
-      const setChecked = descriptor.set;
-      const bubbles = !hasConsumerStoppedPropagationRef.current;
-      if (prevChecked !== checked && setChecked) {
-        const event = new Event("click", { bubbles });
-        input.indeterminate = isIndeterminate(checked);
-        setChecked.call(input, isIndeterminate(checked) ? false : checked);
-        input.dispatchEvent(event);
-      }
-    }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);
-    const defaultCheckedRef = reactExports.useRef(isIndeterminate(checked) ? false : checked);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Primitive.input,
-      {
-        type: "checkbox",
-        "aria-hidden": true,
-        defaultChecked: defaultChecked ?? defaultCheckedRef.current,
-        required: required2,
-        disabled,
-        name,
-        value,
-        form,
-        ...props,
-        tabIndex: -1,
-        ref: composedRefs,
-        style: {
-          ...props.style,
-          ...controlSize,
-          position: "absolute",
-          pointerEvents: "none",
-          opacity: 0,
-          margin: 0,
-          // We transform because the input is absolutely positioned but we have
-          // rendered it **after** the button. This pulls it back to sit on top
-          // of the button.
-          transform: "translateX(-100%)"
-        }
-      }
-    );
-  }
-);
-CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
-function isFunction(value) {
-  return typeof value === "function";
-}
-function isIndeterminate(checked) {
-  return checked === "indeterminate";
-}
-function getState(checked) {
-  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
-}
-const Checkbox = reactExports.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Checkbox$1,
-  {
-    ref: ref2,
-    className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      CheckboxIndicator,
-      {
-        className: cn("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "h-4 w-4" })
-      }
-    )
-  }
-));
-Checkbox.displayName = Checkbox$1.displayName;
-const Textarea = reactExports.forwardRef(
-  ({ className, ...props }, ref2) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "textarea",
-      {
-        className: cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ref: ref2,
-        ...props
-      }
-    );
-  }
-);
-Textarea.displayName = "Textarea";
-const ToolsTab = ({
-  tools,
-  listTools,
-  clearTools,
-  callTool,
-  selectedTool,
-  setSelectedTool,
-  toolResult,
-  nextCursor
-}) => {
-  const [params, setParams] = reactExports.useState({});
-  const [isToolRunning, setIsToolRunning] = reactExports.useState(false);
-  reactExports.useEffect(() => {
-    const params2 = Object.entries(
-      (selectedTool == null ? void 0 : selectedTool.inputSchema.properties) ?? []
-    ).map(([key, value]) => [
-      key,
-      generateDefaultValue(value)
-    ]);
-    setParams(Object.fromEntries(params2));
-  }, [selectedTool]);
-  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 _a, _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",
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Button,
               {
-                src: `data:${item.mimeType};base64,${item.data}`,
-                alt: "Tool result image",
-                className: "max-w-full h-auto"
+                variant: "outline",
+                size: "sm",
+                onClick: handleCopyServerEntry,
+                className: "h-9 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-blue-400/60 dark:hover:border-blue-500/60 hover:bg-blue-50/80 dark:hover:bg-blue-900/20 transition-all duration-200 shadow-sm hover:shadow-md",
+                children: [
+                  copiedServerEntry ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCheck, { className: "h-4 w-4 mr-2 text-emerald-600" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "h-4 w-4 mr-2" }),
+                  "Copy Entry"
+                ]
               }
             ),
-            item.type === "resource" && (((_b = (_a = item.resource) == null ? void 0 : _a.mimeType) == null ? void 0 : _b.startsWith("audio/")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "audio",
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Button,
               {
-                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" })
+                variant: "outline",
+                size: "sm",
+                onClick: handleCopyServerFile,
+                className: "h-9 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-slate-300/60 dark:border-slate-600/60 hover:border-blue-400/60 dark:hover:border-blue-500/60 hover:bg-blue-50/80 dark:hover:bg-blue-900/20 transition-all duration-200 shadow-sm hover:shadow-md",
+                children: [
+                  copiedServerFile ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCheck, { className: "h-4 w-4 mr-2 text-emerald-600" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "h-4 w-4 mr-2" }),
+                  "Copy File"
+                ]
               }
-            ) : /* @__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 /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "tools", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ListPane,
-      {
-        items: tools,
-        listItems: listTools,
-        clearItems: () => {
-          clearTools();
-          setSelectedTool(null);
-        },
-        setSelectedItem: setSelectedTool,
-        renderItem: (tool) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-start", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1", children: tool.name }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-500 text-left", children: tool.description })
+            )
+          ] })
+        ] })
+      ] }),
+      maybeRenderTabs()
+    ] }),
+    maybeRenderContentBody(),
+    stdErrNotifications.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-red-200/60 dark:border-red-800/60 bg-gradient-to-r from-red-50/80 to-rose-50/80 dark:from-red-950/60 dark:to-rose-950/60 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-6", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "text-sm font-semibold text-red-700 dark:text-red-400 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-red-500 rounded-full animate-pulse" }),
+          "Error output from MCP server"
         ] }),
-        title: "Tools",
-        buttonText: nextCursor ? "List More Tools" : "List Tools",
-        isButtonDisabled: !nextCursor && tools.length > 0
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card rounded-lg shadow", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold", children: selectedTool ? selectedTool.name : "Select a tool" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4", children: selectedTool ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600", children: selectedTool.description }),
-        Object.entries(selectedTool.inputSchema.properties ?? []).map(
-          ([key, value]) => {
-            const prop = value;
-            return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Label$1,
-                {
-                  htmlFor: key,
-                  className: "block text-sm font-medium text-gray-700",
-                  children: key
-                }
-              ),
-              prop.type === "boolean" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2 mt-2", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Checkbox,
-                  {
-                    id: key,
-                    name: key,
-                    checked: !!params[key],
-                    onCheckedChange: (checked) => setParams({
-                      ...params,
-                      [key]: checked
-                    })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "label",
-                  {
-                    htmlFor: key,
-                    className: "text-sm font-medium text-gray-700 dark:text-gray-300",
-                    children: prop.description || "Toggle this option"
-                  }
-                )
-              ] }) : prop.type === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Textarea,
-                {
-                  id: key,
-                  name: key,
-                  placeholder: prop.description,
-                  value: params[key] ?? "",
-                  onChange: (e) => setParams({
-                    ...params,
-                    [key]: e.target.value
-                  }),
-                  className: "mt-1"
-                }
-              ) : prop.type === "object" || prop.type === "array" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                DynamicJsonForm,
-                {
-                  schema: {
-                    type: prop.type,
-                    properties: prop.properties,
-                    description: prop.description,
-                    items: prop.items
-                  },
-                  value: params[key] ?? generateDefaultValue(prop),
-                  onChange: (newValue) => {
-                    setParams({
-                      ...params,
-                      [key]: newValue
-                    });
-                  }
-                }
-              ) }) : prop.type === "number" || prop.type === "integer" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Input,
-                {
-                  type: "number",
-                  id: key,
-                  name: key,
-                  placeholder: prop.description,
-                  value: params[key] ?? "",
-                  onChange: (e) => setParams({
-                    ...params,
-                    [key]: Number(e.target.value)
-                  }),
-                  className: "mt-1"
-                }
-              ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                DynamicJsonForm,
-                {
-                  schema: {
-                    type: prop.type,
-                    properties: prop.properties,
-                    description: prop.description,
-                    items: prop.items
-                  },
-                  value: params[key],
-                  onChange: (newValue) => {
-                    setParams({
-                      ...params,
-                      [key]: newValue
-                    });
-                  }
-                }
-              ) })
-            ] }, key);
-          }
-        ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Button,
           {
-            onClick: async () => {
-              try {
-                setIsToolRunning(true);
-                await callTool(selectedTool.name, params);
-              } finally {
-                setIsToolRunning(false);
-              }
-            },
-            disabled: isToolRunning,
-            children: isToolRunning ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "w-4 h-4 mr-2 animate-spin" }),
-              "Running..."
-            ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "w-4 h-4 mr-2" }),
-              "Run Tool"
-            ] })
+            variant: "outline",
+            size: "sm",
+            onClick: clearStdErrNotifications2,
+            className: "bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-red-300/60 dark:border-red-600/60 hover:border-red-500/60 dark:hover:border-red-400/60 hover:bg-red-50/80 dark:hover:bg-red-900/20 transition-all duration-200 shadow-sm hover:shadow-md",
+            children: "Clear"
           }
-        ),
-        toolResult && renderToolResult()
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: "Select a tool from the list to view its details and run it" }) }) })
-    ] })
-  ] }) });
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-h-48 overflow-y-auto space-y-3", children: stdErrNotifications.map((notification, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "text-sm text-red-800 dark:text-red-200 font-mono p-4 bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm rounded-lg border border-red-200/60 dark:border-red-700/60 shadow-md hover:shadow-lg transition-all duration-200",
+          children: notification.params.content
+        },
+        index2
+      )) })
+    ] }) })
+  ] });
 };
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
 const App = () => {
-  var _a;
   const [resources, setResources] = reactExports.useState([]);
   const [resourceTemplates, setResourceTemplates] = reactExports.useState([]);
   const [resourceContent, setResourceContent] = reactExports.useState("");
@@ -36447,7 +36655,6 @@ const App = () => {
   const [sseUrl, setSseUrl] = reactExports.useState(getInitialSseUrl);
   const [transportType, setTransportType] = reactExports.useState(getInitialTransportType);
   const [logLevel, setLogLevel] = reactExports.useState("debug");
-  const [notifications, setNotifications] = reactExports.useState([]);
   const [stdErrNotifications, setStdErrNotifications] = reactExports.useState([]);
   const [roots, setRoots] = reactExports.useState([]);
   const [env, setEnv] = reactExports.useState({});
@@ -36491,7 +36698,6 @@ const App = () => {
   const [nextPromptCursor, setNextPromptCursor] = reactExports.useState();
   const [nextToolCursor, setNextToolCursor] = reactExports.useState();
   const progressTokenRef = reactExports.useRef(0);
-  const { height: historyPaneHeight, handleDragStart } = useDraggablePane(300);
   const {
     connectionStatus,
     serverCapabilities,
@@ -36512,8 +36718,7 @@ const App = () => {
     bearerToken,
     headerName,
     config,
-    onNotification: (notification) => {
-      setNotifications((prev) => [...prev, notification]);
+    onNotification: () => {
     },
     onStdErrNotification: (notification) => {
       setStdErrNotifications((prev) => [
@@ -36623,190 +36828,85 @@ const App = () => {
       window.location.hash = "resources";
     }
   }, []);
-  const handleApproveSampling = (id, result) => {
-    setPendingSampleRequests((prev) => {
-      const request = prev.find((r2) => r2.id === id);
-      request == null ? void 0 : request.resolve(result);
-      return prev.filter((r2) => r2.id !== id);
-    });
+  const helperDependencies = {
+    makeRequest,
+    sendNotification,
+    setErrors,
+    setResources,
+    setResourceTemplates,
+    setResourceContent,
+    setResourceSubscriptions,
+    setPrompts,
+    setPromptContent,
+    setTools,
+    setToolResult,
+    setNextResourceCursor,
+    setNextResourceTemplateCursor,
+    setNextPromptCursor,
+    setNextToolCursor,
+    setLogLevel,
+    setStdErrNotifications,
+    setPendingSampleRequests,
+    progressTokenRef
   };
-  const handleRejectSampling = (id) => {
-    setPendingSampleRequests((prev) => {
-      const request = prev.find((r2) => r2.id === id);
-      request == null ? void 0 : request.reject(new Error("Sampling request rejected"));
-      return prev.filter((r2) => r2.id !== id);
-    });
+  const helperState = {
+    resources,
+    resourceTemplates,
+    resourceSubscriptions,
+    nextResourceCursor,
+    nextResourceTemplateCursor,
+    nextPromptCursor,
+    nextToolCursor
   };
-  const clearError = (tabKey) => {
-    setErrors((prev) => ({ ...prev, [tabKey]: null }));
+  const handleApproveSamplingWrapper = (id, result) => {
+    handleApproveSampling(id, result, setPendingSampleRequests);
   };
-  const sendMCPRequest = async (request, schema, tabKey) => {
-    try {
-      const response = await makeRequest(request, schema);
-      if (tabKey !== void 0) {
-        clearError(tabKey);
-      }
-      return response;
-    } catch (e) {
-      const errorString = e.message ?? String(e);
-      if (tabKey !== void 0) {
-        setErrors((prev) => ({
-          ...prev,
-          [tabKey]: errorString
-        }));
-      }
-      throw e;
-    }
+  const handleRejectSamplingWrapper = (id) => {
+    handleRejectSampling(id, setPendingSampleRequests);
   };
-  const listResources = async () => {
-    const response = await sendMCPRequest(
-      {
-        method: "resources/list",
-        params: nextResourceCursor ? { cursor: nextResourceCursor } : {}
-      },
-      ListResourcesResultSchema,
-      "resources"
-    );
-    setResources(resources.concat(response.resources ?? []));
-    setNextResourceCursor(response.nextCursor);
+  const clearErrorWrapper = (tabKey) => {
+    clearError(tabKey, setErrors);
   };
-  const listResourceTemplates = async () => {
-    const response = await sendMCPRequest(
-      {
-        method: "resources/templates/list",
-        params: nextResourceTemplateCursor ? { cursor: nextResourceTemplateCursor } : {}
-      },
-      ListResourceTemplatesResultSchema,
-      "resources"
-    );
-    setResourceTemplates(
-      resourceTemplates.concat(response.resourceTemplates ?? [])
-    );
-    setNextResourceTemplateCursor(response.nextCursor);
+  const sendMCPRequestWrapper = async (request, schema, tabKey) => {
+    return sendMCPRequest(request, schema, helperDependencies, tabKey);
   };
-  const readResource = async (uri) => {
-    const response = await sendMCPRequest(
-      {
-        method: "resources/read",
-        params: { uri }
-      },
-      ReadResourceResultSchema,
-      "resources"
-    );
-    setResourceContent(JSON.stringify(response, null, 2));
+  const listResourcesWrapper = async () => {
+    return listResources(helperState, helperDependencies);
   };
-  const subscribeToResource = async (uri) => {
-    if (!resourceSubscriptions.has(uri)) {
-      await sendMCPRequest(
-        {
-          method: "resources/subscribe",
-          params: { uri }
-        },
-        objectType({}),
-        "resources"
-      );
-      const clone = new Set(resourceSubscriptions);
-      clone.add(uri);
-      setResourceSubscriptions(clone);
-    }
+  const listResourceTemplatesWrapper = async () => {
+    return listResourceTemplates(helperState, helperDependencies);
   };
-  const unsubscribeFromResource = async (uri) => {
-    if (resourceSubscriptions.has(uri)) {
-      await sendMCPRequest(
-        {
-          method: "resources/unsubscribe",
-          params: { uri }
-        },
-        objectType({}),
-        "resources"
-      );
-      const clone = new Set(resourceSubscriptions);
-      clone.delete(uri);
-      setResourceSubscriptions(clone);
-    }
+  const readResourceWrapper = async (uri) => {
+    return readResource(uri, helperDependencies);
   };
-  const listPrompts = async () => {
-    const response = await sendMCPRequest(
-      {
-        method: "prompts/list",
-        params: nextPromptCursor ? { cursor: nextPromptCursor } : {}
-      },
-      ListPromptsResultSchema,
-      "prompts"
-    );
-    setPrompts(response.prompts);
-    setNextPromptCursor(response.nextCursor);
+  const subscribeToResourceWrapper = async (uri) => {
+    return subscribeToResource(uri, helperState, helperDependencies);
   };
-  const getPrompt = async (name, args2 = {}) => {
-    const response = await sendMCPRequest(
-      {
-        method: "prompts/get",
-        params: { name, arguments: args2 }
-      },
-      GetPromptResultSchema,
-      "prompts"
-    );
-    setPromptContent(JSON.stringify(response, null, 2));
+  const unsubscribeFromResourceWrapper = async (uri) => {
+    return unsubscribeFromResource(uri, helperState, helperDependencies);
   };
-  const listTools = async () => {
-    const response = await sendMCPRequest(
-      {
-        method: "tools/list",
-        params: nextToolCursor ? { cursor: nextToolCursor } : {}
-      },
-      ListToolsResultSchema,
-      "tools"
-    );
-    setTools(response.tools);
-    setNextToolCursor(response.nextCursor);
+  const listPromptsWrapper = async () => {
+    return listPrompts(helperState, helperDependencies);
   };
-  const callTool = async (name, params) => {
-    try {
-      const response = await sendMCPRequest(
-        {
-          method: "tools/call",
-          params: {
-            name,
-            arguments: params,
-            _meta: {
-              progressToken: progressTokenRef.current++
-            }
-          }
-        },
-        CompatibilityCallToolResultSchema,
-        "tools"
-      );
-      setToolResult(response);
-    } catch (e) {
-      const toolResult2 = {
-        content: [
-          {
-            type: "text",
-            text: e.message ?? String(e)
-          }
-        ],
-        isError: true
-      };
-      setToolResult(toolResult2);
-    }
+  const getPromptWrapper = async (name, args2 = {}) => {
+    return getPrompt(name, args2, helperDependencies);
   };
-  const handleRootsChange = async () => {
-    await sendNotification({ method: "notifications/roots/list_changed" });
+  const listToolsWrapper = async () => {
+    return listTools(helperState, helperDependencies);
   };
-  const sendLogLevelRequest = async (level) => {
-    await sendMCPRequest(
-      {
-        method: "logging/setLevel",
-        params: { level }
-      },
-      objectType({})
-    );
-    setLogLevel(level);
+  const callToolWrapper = async (name, params) => {
+    return callTool(name, params, helperDependencies);
+  };
+  const handleRootsChangeWrapper = async () => {
+    return handleRootsChange(helperDependencies);
   };
-  const clearStdErrNotifications = () => {
-    setStdErrNotifications([]);
+  const sendLogLevelRequestWrapper = async (level) => {
+    return sendLogLevelRequest(level, helperDependencies);
   };
-  const AuthDebuggerWrapper = () => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "auth", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  const clearStdErrNotificationsWrapper = () => {
+    clearStdErrNotifications(setStdErrNotifications);
+  };
+  const AuthDebuggerWrapper = () => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "auth", className: "mt-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     AuthDebugger,
     {
       serverUrl: sseUrl,
@@ -36817,19 +36917,306 @@ const App = () => {
   ) });
   if (window.location.pathname === "/oauth/callback") {
     const OAuthCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthCallback-D9GEIvKa.js"), true ? __vite__mapDeps([0,1]) : void 0)
+      () => __vitePreload(() => import("./OAuthCallback-kC0-8Fug.js"), true ? __vite__mapDeps([0,1]) : void 0)
     );
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(OAuthCallback, { onConnect: onOAuthConnect }) });
+    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,
+      {
+        fallback: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: "Loading..." })
+        ] }),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(OAuthCallback, { onConnect: onOAuthConnect })
+      }
+    ) });
   }
   if (window.location.pathname === "/oauth/callback/debug") {
     const OAuthDebugCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthDebugCallback-zUpX3mpm.js"), true ? __vite__mapDeps([2,1]) : void 0)
+      () => __vitePreload(() => import("./OAuthDebugCallback-BpNrhMCC.js"), true ? __vite__mapDeps([2,1]) : void 0)
     );
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(OAuthDebugCallback, { onConnect: onOAuthDebugConnect }) });
+    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,
+      {
+        fallback: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: "Loading..." })
+        ] }),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(OAuthDebugCallback, { onConnect: onOAuthDebugConnect })
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-screen bg-background", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Sidebar,
+  const renderTabs = () => {
+    const serverHasNoCapabilities = !(serverCapabilities == null ? void 0 : serverCapabilities.resources) && !(serverCapabilities == null ? void 0 : serverCapabilities.prompts) && !(serverCapabilities == null ? void 0 : serverCapabilities.tools);
+    const renderTabsList = () => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "grid w-full grid-cols-7 bg-muted/30 backdrop-blur-sm border border-border/50 rounded-xl p-1 h-auto", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          TabsTrigger,
+          {
+            value: "resources",
+            disabled: !(serverCapabilities == null ? void 0 : serverCapabilities.resources),
+            className: "flex items-center gap-2 px-4 py-3 rounded-lg transition-all duration-200 data-[state=active]:bg-background data-[state=active]:shadow-sm data-[state=active]:border data-[state=active]:border-border/50",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Files, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden sm:inline", children: "Resources" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          TabsTrigger,
+          {
+            value: "prompts",
+            disabled: !(serverCapabilities == null ? void 0 : serverCapabilities.prompts),
+            className: "flex items-center gap-2 px-4 py-3 rounded-lg transition-all duration-200 data-[state=active]:bg-background data-[state=active]:shadow-sm data-[state=active]:border data-[state=active]:border-border/50",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden sm:inline", children: "Prompts" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          TabsTrigger,
+          {
+            value: "tools",
+            disabled: !(serverCapabilities == null ? void 0 : serverCapabilities.tools),
+            className: "flex items-center gap-2 px-4 py-3 rounded-lg transition-all duration-200 data-[state=active]:bg-background data-[state=active]:shadow-sm data-[state=active]:border data-[state=active]:border-border/50",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Hammer, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden sm:inline", children: "Tools" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          TabsTrigger,
+          {
+            value: "ping",
+            className: "flex items-center gap-2 px-4 py-3 rounded-lg transition-all duration-200 data-[state=active]:bg-background data-[state=active]:shadow-sm data-[state=active]:border data-[state=active]:border-border/50",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Bell, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden sm:inline", children: "Ping" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          TabsTrigger,
+          {
+            value: "sampling",
+            className: "flex items-center gap-2 px-4 py-3 rounded-lg transition-all duration-200 data-[state=active]:bg-background data-[state=active]:shadow-sm data-[state=active]:border data-[state=active]:border-border/50 relative",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Hash, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden sm:inline", children: "Sampling" }),
+              pendingSampleRequests.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center animate-pulse", children: pendingSampleRequests.length })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          TabsTrigger,
+          {
+            value: "roots",
+            className: "flex items-center gap-2 px-4 py-3 rounded-lg transition-all duration-200 data-[state=active]:bg-background data-[state=active]:shadow-sm data-[state=active]:border data-[state=active]:border-border/50",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(FolderTree, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden sm:inline", children: "Roots" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          TabsTrigger,
+          {
+            value: "auth",
+            className: "flex items-center gap-2 px-4 py-3 rounded-lg transition-all duration-200 data-[state=active]:bg-background data-[state=active]:shadow-sm data-[state=active]:border data-[state=active]:border-border/50",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Key, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden sm:inline", children: "Auth" })
+            ]
+          }
+        )
+      ] });
+    };
+    const computeTabDefaultValue = () => {
+      return Object.keys(serverCapabilities ?? {}).includes(
+        window.location.hash.slice(1)
+      ) ? window.location.hash.slice(1) : (serverCapabilities == null ? void 0 : serverCapabilities.resources) ? "resources" : (serverCapabilities == null ? void 0 : serverCapabilities.prompts) ? "prompts" : (serverCapabilities == null ? void 0 : serverCapabilities.tools) ? "tools" : "ping";
+    };
+    const renderServerNoCapabilities = () => {
+      if (serverHasNoCapabilities) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center p-12 rounded-xl bg-card border border-border/50 shadow-sm", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Activity, { className: "w-16 h-16 text-muted-foreground mb-4" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xl font-semibold mb-2", children: "No Capabilities Available" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-muted-foreground text-center mb-6 max-w-md", children: "The connected server does not support any MCP capabilities. You can still use the Ping feature to test connectivity." }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full max-w-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            PingTab,
+            {
+              onPingClick: () => {
+                void sendMCPRequestWrapper(
+                  {
+                    method: "ping"
+                  },
+                  EmptyResultSchema
+                );
+              }
+            }
+          ) })
+        ] });
+      }
+    };
+    const renderTabsContent = () => {
+      var _a;
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "resources", className: "mt-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ResourcesTab,
+          {
+            resources,
+            resourceTemplates,
+            listResources: () => {
+              clearErrorWrapper("resources");
+              listResourcesWrapper();
+            },
+            clearResources: () => {
+              setResources([]);
+              setNextResourceCursor(void 0);
+            },
+            listResourceTemplates: () => {
+              clearErrorWrapper("resources");
+              listResourceTemplatesWrapper();
+            },
+            clearResourceTemplates: () => {
+              setResourceTemplates([]);
+              setNextResourceTemplateCursor(void 0);
+            },
+            readResource: (uri) => {
+              clearErrorWrapper("resources");
+              readResourceWrapper(uri);
+            },
+            selectedResource,
+            setSelectedResource: (resource) => {
+              clearErrorWrapper("resources");
+              setSelectedResource(resource);
+            },
+            resourceSubscriptionsSupported: ((_a = serverCapabilities == null ? void 0 : serverCapabilities.resources) == null ? void 0 : _a.subscribe) || false,
+            resourceSubscriptions,
+            subscribeToResource: (uri) => {
+              clearErrorWrapper("resources");
+              subscribeToResourceWrapper(uri);
+            },
+            unsubscribeFromResource: (uri) => {
+              clearErrorWrapper("resources");
+              unsubscribeFromResourceWrapper(uri);
+            },
+            handleCompletion,
+            completionsSupported,
+            resourceContent,
+            nextCursor: nextResourceCursor,
+            nextTemplateCursor: nextResourceTemplateCursor,
+            error: errors.resources
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "prompts", className: "mt-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          PromptsTab,
+          {
+            prompts,
+            listPrompts: () => {
+              clearErrorWrapper("prompts");
+              listPromptsWrapper();
+            },
+            clearPrompts: () => {
+              setPrompts([]);
+              setNextPromptCursor(void 0);
+            },
+            getPrompt: (name, args2) => {
+              clearErrorWrapper("prompts");
+              getPromptWrapper(name, args2);
+            },
+            selectedPrompt,
+            setSelectedPrompt: (prompt) => {
+              clearErrorWrapper("prompts");
+              setSelectedPrompt(prompt);
+              setPromptContent("");
+            },
+            handleCompletion,
+            completionsSupported,
+            promptContent,
+            nextCursor: nextPromptCursor,
+            error: errors.prompts
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "tools", className: "mt-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ToolsTab,
+          {
+            tools,
+            listTools: () => {
+              clearErrorWrapper("tools");
+              listToolsWrapper();
+            },
+            clearTools: () => {
+              setTools([]);
+              setNextToolCursor(void 0);
+            },
+            callTool: async (name, params) => {
+              clearErrorWrapper("tools");
+              setToolResult(null);
+              await callToolWrapper(name, params);
+            },
+            selectedTool,
+            setSelectedTool: (tool) => {
+              clearErrorWrapper("tools");
+              setSelectedTool(tool);
+              setToolResult(null);
+            },
+            toolResult,
+            nextCursor: nextToolCursor,
+            error: errors.tools,
+            connectionStatus
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "console", className: "mt-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConsoleTab, {}) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "ping", className: "mt-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          PingTab,
+          {
+            onPingClick: () => {
+              void sendMCPRequestWrapper(
+                {
+                  method: "ping"
+                },
+                EmptyResultSchema
+              );
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "sampling", className: "mt-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          SamplingTab,
+          {
+            pendingRequests: pendingSampleRequests,
+            onApprove: handleApproveSamplingWrapper,
+            onReject: handleRejectSamplingWrapper
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "roots", className: "mt-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          RootsTab,
+          {
+            roots,
+            setRoots,
+            onRootsChange: handleRootsChangeWrapper
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AuthDebuggerWrapper, {})
+      ] });
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Tabs,
+      {
+        defaultValue: computeTabDefaultValue(),
+        className: "flex-1 flex flex-col",
+        onValueChange: (value) => window.location.hash = value,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sticky top-0 z-10 bg-background/80 backdrop-blur-md border-b border-border/50 px-6 pt-4 pb-2", children: renderTabsList() }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 p-6 overflow-auto", children: serverHasNoCapabilities ? renderServerNoCapabilities() : renderTabsContent() })
+        ]
+      }
+    ) });
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-screen bg-gradient-to-br from-slate-50/50 to-slate-100/50 dark:from-slate-900/50 dark:to-slate-800/50 flex flex-col overflow-hidden app-container", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-background/80 backdrop-blur-md border-b border-border/50 shadow-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ConnectionSection,
       {
         connectionStatus,
         transportType,
@@ -36852,278 +37239,27 @@ const App = () => {
         onDisconnect: disconnectMcpServer,
         stdErrNotifications,
         logLevel,
-        sendLogLevelRequest,
+        sendLogLevelRequest: sendLogLevelRequestWrapper,
         loggingSupported: !!(serverCapabilities == null ? void 0 : serverCapabilities.logging) || false,
-        clearStdErrNotifications
+        clearStdErrNotifications: clearStdErrNotificationsWrapper
       }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: mcpClient ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Tabs,
-        {
-          defaultValue: Object.keys(serverCapabilities ?? {}).includes(
-            window.location.hash.slice(1)
-          ) ? window.location.hash.slice(1) : (serverCapabilities == null ? void 0 : serverCapabilities.resources) ? "resources" : (serverCapabilities == null ? void 0 : serverCapabilities.prompts) ? "prompts" : (serverCapabilities == null ? void 0 : serverCapabilities.tools) ? "tools" : "ping",
-          className: "w-full p-4",
-          onValueChange: (value) => window.location.hash = value,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "mb-4 p-0", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                TabsTrigger,
-                {
-                  value: "resources",
-                  disabled: !(serverCapabilities == null ? void 0 : serverCapabilities.resources),
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(Files, { className: "w-4 h-4 mr-2" }),
-                    "Resources"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                TabsTrigger,
-                {
-                  value: "prompts",
-                  disabled: !(serverCapabilities == null ? void 0 : serverCapabilities.prompts),
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "w-4 h-4 mr-2" }),
-                    "Prompts"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                TabsTrigger,
-                {
-                  value: "tools",
-                  disabled: !(serverCapabilities == null ? void 0 : serverCapabilities.tools),
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(Hammer, { className: "w-4 h-4 mr-2" }),
-                    "Tools"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "ping", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Bell, { className: "w-4 h-4 mr-2" }),
-                "Ping"
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "sampling", className: "relative", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Hash, { className: "w-4 h-4 mr-2" }),
-                "Sampling",
-                pendingSampleRequests.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center", children: pendingSampleRequests.length })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "roots", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(FolderTree, { className: "w-4 h-4 mr-2" }),
-                "Roots"
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "auth", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Key, { className: "w-4 h-4 mr-2" }),
-                "Auth"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", children: !(serverCapabilities == null ? void 0 : serverCapabilities.resources) && !(serverCapabilities == null ? void 0 : serverCapabilities.prompts) && !(serverCapabilities == null ? void 0 : serverCapabilities.tools) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg text-gray-500", children: "The connected server does not support any MCP capabilities" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                PingTab,
-                {
-                  onPingClick: () => {
-                    void sendMCPRequest(
-                      {
-                        method: "ping"
-                      },
-                      EmptyResultSchema
-                    );
-                  }
-                }
-              )
-            ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                ResourcesTab,
-                {
-                  resources,
-                  resourceTemplates,
-                  listResources: () => {
-                    clearError("resources");
-                    listResources();
-                  },
-                  clearResources: () => {
-                    setResources([]);
-                    setNextResourceCursor(void 0);
-                  },
-                  listResourceTemplates: () => {
-                    clearError("resources");
-                    listResourceTemplates();
-                  },
-                  clearResourceTemplates: () => {
-                    setResourceTemplates([]);
-                    setNextResourceTemplateCursor(void 0);
-                  },
-                  readResource: (uri) => {
-                    clearError("resources");
-                    readResource(uri);
-                  },
-                  selectedResource,
-                  setSelectedResource: (resource) => {
-                    clearError("resources");
-                    setSelectedResource(resource);
-                  },
-                  resourceSubscriptionsSupported: ((_a = serverCapabilities == null ? void 0 : serverCapabilities.resources) == null ? void 0 : _a.subscribe) || false,
-                  resourceSubscriptions,
-                  subscribeToResource: (uri) => {
-                    clearError("resources");
-                    subscribeToResource(uri);
-                  },
-                  unsubscribeFromResource: (uri) => {
-                    clearError("resources");
-                    unsubscribeFromResource(uri);
-                  },
-                  handleCompletion,
-                  completionsSupported,
-                  resourceContent,
-                  nextCursor: nextResourceCursor,
-                  nextTemplateCursor: nextResourceTemplateCursor,
-                  error: errors.resources
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                PromptsTab,
-                {
-                  prompts,
-                  listPrompts: () => {
-                    clearError("prompts");
-                    listPrompts();
-                  },
-                  clearPrompts: () => {
-                    setPrompts([]);
-                    setNextPromptCursor(void 0);
-                  },
-                  getPrompt: (name, args2) => {
-                    clearError("prompts");
-                    getPrompt(name, args2);
-                  },
-                  selectedPrompt,
-                  setSelectedPrompt: (prompt) => {
-                    clearError("prompts");
-                    setSelectedPrompt(prompt);
-                    setPromptContent("");
-                  },
-                  handleCompletion,
-                  completionsSupported,
-                  promptContent,
-                  nextCursor: nextPromptCursor,
-                  error: errors.prompts
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                ToolsTab,
-                {
-                  tools,
-                  listTools: () => {
-                    clearError("tools");
-                    listTools();
-                  },
-                  clearTools: () => {
-                    setTools([]);
-                    setNextToolCursor(void 0);
-                  },
-                  callTool: async (name, params) => {
-                    clearError("tools");
-                    setToolResult(null);
-                    await callTool(name, params);
-                  },
-                  selectedTool,
-                  setSelectedTool: (tool) => {
-                    clearError("tools");
-                    setSelectedTool(tool);
-                    setToolResult(null);
-                  },
-                  toolResult,
-                  nextCursor: nextToolCursor,
-                  error: errors.tools
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ConsoleTab, {}),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                PingTab,
-                {
-                  onPingClick: () => {
-                    void sendMCPRequest(
-                      {
-                        method: "ping"
-                      },
-                      EmptyResultSchema
-                    );
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                SamplingTab,
-                {
-                  pendingRequests: pendingSampleRequests,
-                  onApprove: handleApproveSampling,
-                  onReject: handleRejectSampling
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                RootsTab,
-                {
-                  roots,
-                  setRoots,
-                  onRootsChange: handleRootsChange
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(AuthDebuggerWrapper, {})
-            ] }) })
-          ]
-        }
-      ) : isAuthDebuggerVisible ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Tabs,
-        {
-          defaultValue: "auth",
-          className: "w-full p-4",
-          onValueChange: (value) => window.location.hash = value,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(AuthDebuggerWrapper, {})
-        }
-      ) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg text-gray-500", children: "Connect to an MCP server to start inspecting" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Need to configure authentication?" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              onClick: () => setIsAuthDebuggerVisible(true),
-              children: "Open Auth Settings"
-            }
-          )
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          className: "relative border-t border-border",
-          style: {
-            height: `${historyPaneHeight}px`
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: "absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50",
-                onMouseDown: handleDragStart,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 h-1 rounded-full bg-border" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              HistoryAndNotifications,
-              {
-                requestHistory,
-                serverNotifications: notifications
-              }
-            ) })
-          ]
-        }
-      )
-    ] })
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex flex-col overflow-hidden overflow-y-auto", children: mcpClient ? renderTabs() : isAuthDebuggerVisible ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Tabs,
+      {
+        defaultValue: "auth",
+        className: "h-full",
+        onValueChange: (value) => window.location.hash = value,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(AuthDebuggerWrapper, {})
+      }
+    ) }) : null }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      HistoryAndNotifications,
+      {
+        requestHistory,
+        toolResult
+      }
+    )
   ] });
 };
 clientExports.createRoot(document.getElementById("root")).render(