@modelcontextprotocol/inspector 0.8.2 → 0.9.0

package/client/dist/assets/{index-Bm3GdP0M.js → index-CgrYmEaq.js}

@@ -7261,43 +7261,60 @@ function composeContextScopes(...scopes) {
   createScope.scopeName = baseScope.scopeName;
   return createScope;
 }
-var Slot = reactExports.forwardRef((props, forwardedRef) => {
-  const { children, ...slotProps } = props;
-  const childrenArray = reactExports.Children.toArray(children);
-  const slottable = childrenArray.find(isSlottable);
-  if (slottable) {
-    const newElement = slottable.props.children;
-    const newChildren = childrenArray.map((child) => {
-      if (child === slottable) {
-        if (reactExports.Children.count(newElement) > 1) return reactExports.Children.only(null);
-        return reactExports.isValidElement(newElement) ? newElement.props.children : null;
-      } else {
-        return child;
-      }
-    });
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: reactExports.isValidElement(newElement) ? reactExports.cloneElement(newElement, void 0, newChildren) : null });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
-});
-Slot.displayName = "Slot";
-var SlotClone = reactExports.forwardRef((props, forwardedRef) => {
-  const { children, ...slotProps } = props;
-  if (reactExports.isValidElement(children)) {
-    const childrenRef = getElementRef$1(children);
-    const props2 = mergeProps(slotProps, children.props);
-    if (children.type !== reactExports.Fragment) {
-      props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
-    }
-    return reactExports.cloneElement(children, props2);
-  }
-  return reactExports.Children.count(children) > 1 ? reactExports.Children.only(null) : null;
-});
-SlotClone.displayName = "SlotClone";
-var Slottable = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
-};
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = reactExports.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = reactExports.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (reactExports.Children.count(newElement) > 1) return reactExports.Children.only(null);
+          return reactExports.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: reactExports.isValidElement(newElement) ? reactExports.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+var Slot$3 = /* @__PURE__ */ createSlot("Slot");
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone = reactExports.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (reactExports.isValidElement(children)) {
+      const childrenRef = getElementRef$1(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== reactExports.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return reactExports.cloneElement(children, props2);
+    }
+    return reactExports.Children.count(children) > 1 ? reactExports.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+// @__NO_SIDE_EFFECTS__
+function createSlottable(ownerName) {
+  const Slottable2 = ({ children }) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
+  };
+  Slottable2.displayName = `${ownerName}.Slottable`;
+  Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
+  return Slottable2;
+}
 function isSlottable(child) {
-  return reactExports.isValidElement(child) && child.type === Slottable;
+  return reactExports.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
 }
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -7351,17 +7368,19 @@ function createCollection(name) {
   };
   CollectionProvider.displayName = PROVIDER_NAME2;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
+  const CollectionSlotImpl = /* @__PURE__ */ createSlot(COLLECTION_SLOT_NAME);
   const CollectionSlot = React$1.forwardRef(
     (props, forwardedRef) => {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
       const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Slot, { ref: composedRefs, children });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(CollectionSlotImpl, { ref: composedRefs, children });
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
+  const CollectionItemSlotImpl = /* @__PURE__ */ createSlot(ITEM_SLOT_NAME);
   const CollectionItemSlot = React$1.forwardRef(
     (props, forwardedRef) => {
       const { scope, children, ...itemData } = props;
@@ -7372,7 +7391,7 @@ function createCollection(name) {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Slot, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
     }
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
@@ -7415,9 +7434,10 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
+  const Slot2 = /* @__PURE__ */ createSlot(`Primitive.${node}`);
   const Node2 = reactExports.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
-    const Comp = asChild ? Slot : node;
+    const Comp = asChild ? Slot2 : node;
     if (typeof window !== "undefined") {
       window[Symbol.for("radix-ui")] = true;
     }
@@ -7654,7 +7674,7 @@ function handleAndDispatchCustomEvent$1(name, handler, detail, { discrete }) {
 }
 var Root$6 = DismissableLayer;
 var Branch = DismissableLayerBranch;
-var useLayoutEffect2 = Boolean(globalThis == null ? void 0 : globalThis.document) ? reactExports.useLayoutEffect : () => {
+var useLayoutEffect2 = (globalThis == null ? void 0 : globalThis.document) ? reactExports.useLayoutEffect : () => {
 };
 var PORTAL_NAME$4 = "Portal";
 var Portal$3 = reactExports.forwardRef((props, forwardedRef) => {
@@ -17387,10 +17407,22 @@ const SESSION_KEYS = {
 const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";
 const DEFAULT_INSPECTOR_CONFIG = {
   MCP_SERVER_REQUEST_TIMEOUT: {
+    label: "Request Timeout",
     description: "Timeout for requests to the MCP server (ms)",
     value: 1e4
   },
+  MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS: {
+    label: "Reset Timeout on Progress",
+    description: "Reset timeout on progress notifications",
+    value: true
+  },
+  MCP_REQUEST_MAX_TOTAL_TIMEOUT: {
+    label: "Maximum Total Timeout",
+    description: "Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications)",
+    value: 6e4
+  },
   MCP_PROXY_FULL_ADDRESS: {
+    label: "Inspector Proxy Address",
     description: "Set this if you are running the MCP Inspector Proxy on a non-default address. Example: http://10.1.1.22:5577",
     value: ""
   }
@@ -17456,19 +17488,34 @@ class InspectorOAuthClientProvider {
   }
 }
 const authProvider = new InspectorOAuthClientProvider();
-const version$1 = "0.8.2";
+const version$1 = "0.9.0";
 const packageJson = {
   version: version$1
 };
+const getMCPProxyAddress = (config) => {
+  const proxyFullAddress = config.MCP_PROXY_FULL_ADDRESS.value;
+  if (proxyFullAddress) {
+    return proxyFullAddress;
+  }
+  return `${window.location.protocol}//${window.location.hostname}:${DEFAULT_MCP_PROXY_LISTEN_PORT}`;
+};
+const getMCPServerRequestTimeout = (config) => {
+  return config.MCP_SERVER_REQUEST_TIMEOUT.value;
+};
+const resetRequestTimeoutOnProgress = (config) => {
+  return config.MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS.value;
+};
+const getMCPServerRequestMaxTotalTimeout = (config) => {
+  return config.MCP_REQUEST_MAX_TOTAL_TIMEOUT.value;
+};
 function useConnection({
   transportType,
   command,
   args,
   sseUrl,
   env,
-  proxyServerUrl,
   bearerToken,
-  requestTimeout,
+  config,
   onNotification,
   onStdErrNotification,
   onPendingRequest,
@@ -17495,21 +17542,30 @@ function useConnection({
     }
     try {
       const abortController = new AbortController();
-      const timeoutId = setTimeout(() => {
-        abortController.abort("Request timed out");
-      }, (options == null ? void 0 : options.timeout) ?? requestTimeout);
+      const mcpRequestOptions = {
+        signal: (options == null ? void 0 : options.signal) ?? abortController.signal,
+        resetTimeoutOnProgress: (options == null ? void 0 : options.resetTimeoutOnProgress) ?? resetRequestTimeoutOnProgress(config),
+        timeout: (options == null ? void 0 : options.timeout) ?? getMCPServerRequestTimeout(config),
+        maxTotalTimeout: (options == null ? void 0 : options.maxTotalTimeout) ?? getMCPServerRequestMaxTotalTimeout(config)
+      };
+      if (mcpRequestOptions.resetTimeoutOnProgress) {
+        mcpRequestOptions.onprogress = (params2) => {
+          if (onNotification) {
+            onNotification({
+              method: "notification/progress",
+              params: params2
+            });
+          }
+        };
+      }
       let response;
       try {
-        response = await mcpClient.request(request, schema, {
-          signal: (options == null ? void 0 : options.signal) ?? abortController.signal
-        });
+        response = await mcpClient.request(request, schema, mcpRequestOptions);
         pushHistory(request, response);
       } catch (error) {
         const errorMessage = error instanceof Error ? error.message : String(error);
         pushHistory(request, { error: errorMessage });
         throw error;
-      } finally {
-        clearTimeout(timeoutId);
       }
       return response;
     } catch (e) {
@@ -17584,7 +17640,7 @@ function useConnection({
   };
   const checkProxyHealth = async () => {
     try {
-      const proxyHealthUrl = new URL(`${proxyServerUrl}/health`);
+      const proxyHealthUrl = new URL(`${getMCPProxyAddress(config)}/health`);
       const proxyHealthResponse = await fetch(proxyHealthUrl);
       const proxyHealth = await proxyHealthResponse.json();
       if ((proxyHealth == null ? void 0 : proxyHealth.status) !== "ok") {
@@ -17625,7 +17681,7 @@ function useConnection({
       setConnectionStatus("error-connecting-to-proxy");
       return;
     }
-    const mcpProxyServerUrl = new URL(`${proxyServerUrl}/sse`);
+    const mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`);
     mcpProxyServerUrl.searchParams.append("transportType", transportType);
     if (transportType === "stdio") {
       mcpProxyServerUrl.searchParams.append("command", command);
@@ -17651,7 +17707,6 @@ function useConnection({
       if (onNotification) {
         [
           CancelledNotificationSchema,
-          ProgressNotificationSchema,
           LoggingMessageNotificationSchema,
           ResourceUpdatedNotificationSchema,
           ResourceListChangedNotificationSchema,
@@ -17775,7 +17830,7 @@ function useDraggablePane(initialHeight) {
     handleDragStart
   };
 }
-var useReactId = React$2["useId".toString()] || (() => void 0);
+var useReactId = React$2[" useId ".trim().toString()] || (() => void 0);
 var count$1 = 0;
 function useId(deterministicId) {
   const [id2, setId] = reactExports.useState(useReactId());
@@ -18531,6 +18586,15 @@ 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 LoaderCircle = createLucideIcon("LoaderCircle", [
+  ["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -18680,7 +18744,7 @@ const buttonVariants = cva(
 );
 const Button = reactExports.forwardRef(
   ({ className: className2, variant, size: size2, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
+    const Comp = asChild ? Slot$3 : "button";
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Comp,
       {
@@ -18692,6 +18756,11 @@ const Button = reactExports.forwardRef(
   }
 );
 Button.displayName = "Button";
+function getDataType(value) {
+  if (Array.isArray(value)) return "array";
+  if (value === null) return "null";
+  return typeof value;
+}
 function tryParseJson(str) {
   const trimmed = str.trim();
   if (!(trimmed.startsWith("{") && trimmed.endsWith("}")) && !(trimmed.startsWith("[") && trimmed.endsWith("]"))) {
@@ -18703,13 +18772,81 @@ function tryParseJson(str) {
     return { success: false, data: str };
   }
 }
+function updateValueAtPath(obj, path, value) {
+  if (path.length === 0) return value;
+  if (obj === null || obj === void 0) {
+    obj = !isNaN(Number(path[0])) ? [] : {};
+  }
+  if (Array.isArray(obj)) {
+    return updateArray(obj, path, value);
+  } else if (typeof obj === "object" && obj !== null) {
+    return updateObject(obj, path, value);
+  } else {
+    console.error(
+      `Cannot update path ${path.join(".")} in non-object/array value:`,
+      obj
+    );
+    return obj;
+  }
+}
+function updateArray(array, path, value) {
+  const [index2, ...restPath] = path;
+  const arrayIndex = Number(index2);
+  if (isNaN(arrayIndex)) {
+    console.error(`Invalid array index: ${index2}`);
+    return array;
+  }
+  if (arrayIndex < 0) {
+    console.error(`Array index out of bounds: ${arrayIndex} < 0`);
+    return array;
+  }
+  let newArray = [];
+  for (let i = 0; i < array.length; i++) {
+    newArray[i] = i in array ? array[i] : null;
+  }
+  if (arrayIndex >= newArray.length) {
+    const extendedArray = new Array(arrayIndex).fill(null);
+    for (let i = 0; i < newArray.length; i++) {
+      extendedArray[i] = newArray[i];
+    }
+    newArray = extendedArray;
+  }
+  if (restPath.length === 0) {
+    newArray[arrayIndex] = value;
+  } else {
+    newArray[arrayIndex] = updateValueAtPath(
+      newArray[arrayIndex],
+      restPath,
+      value
+    );
+  }
+  return newArray;
+}
+function updateObject(obj, path, value) {
+  const [key, ...restPath] = path;
+  if (typeof key !== "string") {
+    console.error(`Invalid object key: ${key}`);
+    return obj;
+  }
+  const newObj = { ...obj };
+  if (restPath.length === 0) {
+    newObj[key] = value;
+  } else {
+    if (!(key in newObj)) {
+      newObj[key] = {};
+    }
+    newObj[key] = updateValueAtPath(newObj[key], restPath, value);
+  }
+  return newObj;
+}
 const JsonView = reactExports.memo(
   ({
     data,
     name,
     initialExpandDepth = 3,
     className: className2,
-    withCopyButton = true
+    withCopyButton = true,
+    isError = false
   }) => {
     const { toast: toast2 } = useToast();
     const [copied, setCopied] = reactExports.useState(false);
@@ -18760,7 +18897,8 @@ const JsonView = reactExports.memo(
           data: normalizedData,
           name,
           depth: 0,
-          initialExpandDepth
+          initialExpandDepth,
+          isError
         }
       ) })
     ] });
@@ -18768,22 +18906,24 @@ const JsonView = reactExports.memo(
 );
 JsonView.displayName = "JsonView";
 const JsonNode = reactExports.memo(
-  ({ data, name, depth = 0, initialExpandDepth }) => {
+  ({
+    data,
+    name,
+    depth = 0,
+    initialExpandDepth,
+    isError = false
+  }) => {
     const [isExpanded, setIsExpanded] = reactExports.useState(depth < initialExpandDepth);
-    const getDataType = (value) => {
-      if (Array.isArray(value)) return "array";
-      if (value === null) return "null";
-      return typeof value;
-    };
-    const dataType = getDataType(data);
-    const typeStyleMap = {
+    const [typeStyleMap] = reactExports.useState({
       number: "text-blue-600",
       boolean: "text-amber-600",
       null: "text-purple-600",
       undefined: "text-gray-600",
-      string: "text-green-600 break-all whitespace-pre-wrap",
+      string: "text-green-600 group-hover:text-green-500",
+      error: "text-red-600 group-hover:text-red-500",
       default: "text-gray-700"
-    };
+    });
+    const dataType = getDataType(data);
     const renderCollapsible = (isArray) => {
       const items = isArray ? data : Object.entries(data);
       const itemCount = items.length;
@@ -18856,11 +18996,20 @@ const JsonNode = reactExports.memo(
             name,
             ":"
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("pre", { className: typeStyleMap.string, children: [
-            '"',
-            value,
-            '"'
-          ] })
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "pre",
+            {
+              className: clsx(
+                typeStyleMap.string,
+                "break-all whitespace-pre-wrap"
+              ),
+              children: [
+                '"',
+                value,
+                '"'
+              ]
+            }
+          )
         ] });
       }
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex mr-1 rounded group hover:bg-gray-800/20", children: [
@@ -18872,8 +19021,8 @@ const JsonNode = reactExports.memo(
           "pre",
           {
             className: clsx(
-              typeStyleMap.string,
-              "cursor-pointer group-hover:text-green-500"
+              isError ? typeStyleMap.error : typeStyleMap.string,
+              "cursor-pointer break-all whitespace-pre-wrap"
             ),
             onClick: () => setIsExpanded(!isExpanded),
             title: isExpanded ? "Click to collapse" : "Click to expand",
@@ -19004,14 +19153,14 @@ const HistoryAndNotifications = ({
   ] });
 };
 const PingTab = ({ onPingClick }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "ping", 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(
+  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(
     Button,
     {
       onClick: onPingClick,
       className: "font-bold py-6 px-12 rounded-full",
       children: "Ping Server"
     }
-  ) }) });
+  ) }) }) });
 };
 const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
@@ -20147,6 +20296,7 @@ var DialogOverlay$1 = reactExports.forwardRef(
   }
 );
 DialogOverlay$1.displayName = OVERLAY_NAME;
+var Slot$2 = /* @__PURE__ */ createSlot("DialogOverlay.RemoveScroll");
 var DialogOverlayImpl = reactExports.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDialog, ...overlayProps } = props;
@@ -20154,7 +20304,7 @@ var DialogOverlayImpl = reactExports.forwardRef(
     return (
       // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
       // ie. when `Overlay` and `Content` are siblings
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ReactRemoveScroll, { as: Slot$2, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Primitive.div,
         {
           "data-state": getState$2(context.open),
@@ -23060,6 +23210,7 @@ var PopoverContent$1 = reactExports.forwardRef(
   }
 );
 PopoverContent$1.displayName = CONTENT_NAME$2;
+var Slot$1 = /* @__PURE__ */ createSlot("PopoverContent.RemoveScroll");
 var PopoverContentModal = reactExports.forwardRef(
   (props, forwardedRef) => {
     const context = usePopoverContext(CONTENT_NAME$2, props.__scopePopover);
@@ -23070,7 +23221,7 @@ var PopoverContentModal = reactExports.forwardRef(
       const content = contentRef.current;
       if (content) return hideOthers(content);
     }, []);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(ReactRemoveScroll, { as: Slot$1, allowPinchZoom: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       PopoverContentImpl,
       {
         ...props,
@@ -23367,7 +23518,7 @@ const ListPane = ({
   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-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold dark:text-white", children: title }) }),
+  /* @__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: title }) }),
   /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Button,
@@ -23402,9 +23553,11 @@ const ListPane = ({
 ] });
 function debounce(func, wait) {
   let timeout;
-  return function(...args) {
+  return (...args) => {
     clearTimeout(timeout);
-    timeout = setTimeout(() => func(...args), wait);
+    timeout = setTimeout(() => {
+      void func(...args);
+    }, wait);
   };
 }
 function useCompletionState(handleCompletion, completionsSupported = true, debounceMs = 300) {
@@ -23429,8 +23582,8 @@ function useCompletionState(handleCompletion, completionsSupported = true, debou
       loading: {}
     });
   }, [cleanup]);
-  const requestCompletions = reactExports.useCallback(
-    debounce(
+  const requestCompletions = reactExports.useMemo(() => {
+    return debounce(
       async (ref, argName, value) => {
         if (!completionsSupported) {
           return;
@@ -23456,7 +23609,7 @@ function useCompletionState(handleCompletion, completionsSupported = true, debou
               loading: { ...prev.loading, [argName]: false }
             }));
           }
-        } catch (err) {
+        } catch {
           if (!abortController.signal.aborted) {
             setState((prev) => ({
               ...prev,
@@ -23470,9 +23623,8 @@ function useCompletionState(handleCompletion, completionsSupported = true, debou
         }
       },
       debounceMs
-    ),
-    [handleCompletion, completionsSupported, cleanup, debounceMs]
-  );
+    );
+  }, [handleCompletion, completionsSupported, cleanup, debounceMs]);
   reactExports.useEffect(() => {
     if (!completionsSupported) {
       clearCompletions();
@@ -23522,7 +23674,7 @@ const PromptsTab = ({
       getPrompt(selectedPrompt.name, promptArgs);
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsContent, { value: "prompts", className: "grid grid-cols-2 gap-4", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "prompts", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       ListPane,
       {
@@ -23543,7 +23695,7 @@ const PromptsTab = ({
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card rounded-lg shadow", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold", children: selectedPrompt ? selectedPrompt.name : "Select a prompt" }) }),
+      /* @__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: selectedPrompt ? selectedPrompt.name : "Select a prompt" }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4", children: error ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Alert, { variant: "destructive", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTitle, { children: "Error" }),
@@ -23572,7 +23724,7 @@ const PromptsTab = ({
         promptContent && /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: promptContent, withCopyButton: false })
       ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: "Select a prompt from the list to view and use it" }) }) })
     ] })
-  ] });
+  ] }) });
 };
 const ResourcesTab = ({
   resources,
@@ -23631,7 +23783,7 @@ const ResourcesTab = ({
       setSelectedResource({ uri, name: uri });
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsContent, { value: "resources", className: "grid grid-cols-3 gap-4", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "resources", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       ListPane,
       {
@@ -23675,7 +23827,7 @@ const ResourcesTab = ({
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card rounded-lg shadow", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 border-b border-gray-200 flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800 flex justify-between items-center", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "h3",
           {
@@ -23756,7 +23908,7 @@ const ResourcesTab = ({
         )
       ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: "Select a resource or template from the list to view its contents" }) }) })
     ] })
-  ] });
+  ] }) });
 };
 const Input = reactExports.forwardRef(
   ({ className: className2, type, ...props }, ref) => {
@@ -23796,7 +23948,7 @@ const RootsTab = ({
   const handleSave = () => {
     onRootsChange();
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsContent, { value: "roots", className: "space-y-4", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "roots", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: "Configure the root directories that the server can access" }) }),
     roots.map((root, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -23828,7 +23980,7 @@ const RootsTab = ({
         "Save Changes"
       ] })
     ] })
-  ] });
+  ] }) });
 };
 const SamplingTab = ({ pendingRequests, onApprove, onReject }) => {
   const handleApprove = (id2) => {
@@ -23842,7 +23994,7 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }) => {
       }
     });
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsContent, { value: "sampling", className: "h-96", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "sampling", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-96", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: "When the server requests LLM sampling, requests will appear here for approval." }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 space-y-4", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold", children: "Recent Requests" }),
@@ -23861,7 +24013,7 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }) => {
       ] }, request.id)),
       pendingRequests.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500", children: "No pending requests" })
     ] })
-  ] });
+  ] }) });
 };
 function clamp(value, [min2, max2]) {
   return Math.min(max2, Math.max(min2, value));
@@ -24120,6 +24272,7 @@ SelectContent$1.displayName = CONTENT_NAME$1;
 var CONTENT_MARGIN = 10;
 var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME$1);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
+var Slot = /* @__PURE__ */ createSlot("SelectContent.RemoveScroll");
 var SelectContentImpl = reactExports.forwardRef(
   (props, forwardedRef) => {
     const {
@@ -25145,9 +25298,12 @@ const useTheme = () => {
       document.documentElement.classList.toggle("dark", newTheme === "dark");
     }
   }, []);
-  return reactExports.useMemo(() => [theme, setThemeWithSideEffect], [theme]);
+  return reactExports.useMemo(
+    () => [theme, setThemeWithSideEffect],
+    [theme, setThemeWithSideEffect]
+  );
 };
-const version = "0.8.2";
+const version = "0.9.0";
 var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -25164,7 +25320,7 @@ var TooltipProvider$1 = (props) => {
     disableHoverableContent = false,
     children
   } = props;
-  const [isOpenDelayed, setIsOpenDelayed] = reactExports.useState(true);
+  const isOpenDelayedRef = reactExports.useRef(true);
   const isPointerInTransitRef = reactExports.useRef(false);
   const skipDelayTimerRef = reactExports.useRef(0);
   reactExports.useEffect(() => {
@@ -25175,16 +25331,16 @@ var TooltipProvider$1 = (props) => {
     TooltipProviderContextProvider,
     {
       scope: __scopeTooltip,
-      isOpenDelayed,
+      isOpenDelayedRef,
       delayDuration,
       onOpen: reactExports.useCallback(() => {
         window.clearTimeout(skipDelayTimerRef.current);
-        setIsOpenDelayed(false);
+        isOpenDelayedRef.current = false;
       }, []),
       onClose: reactExports.useCallback(() => {
         window.clearTimeout(skipDelayTimerRef.current);
         skipDelayTimerRef.current = window.setTimeout(
-          () => setIsOpenDelayed(true),
+          () => isOpenDelayedRef.current = true,
           skipDelayDuration
         );
       }, [skipDelayDuration]),
@@ -25271,9 +25427,9 @@ var Tooltip$1 = (props) => {
       trigger,
       onTriggerChange: setTrigger,
       onTriggerEnter: reactExports.useCallback(() => {
-        if (providerContext.isOpenDelayed) handleDelayedOpen();
+        if (providerContext.isOpenDelayedRef.current) handleDelayedOpen();
         else handleOpen();
-      }, [providerContext.isOpenDelayed, handleDelayedOpen, handleOpen]),
+      }, [providerContext.isOpenDelayedRef, handleDelayedOpen, handleOpen]),
       onTriggerLeave: reactExports.useCallback(() => {
         if (disableHoverableContent) {
           handleClose();
@@ -25324,6 +25480,9 @@ var TooltipTrigger$1 = reactExports.forwardRef(
           hasPointerMoveOpenedRef.current = false;
         }),
         onPointerDown: composeEventHandlers(props.onPointerDown, () => {
+          if (context.open) {
+            context.onClose();
+          }
           isPointerDownRef.current = true;
           document.addEventListener("pointerup", handlePointerUp, { once: true });
         }),
@@ -25412,6 +25571,7 @@ var TooltipContentHoverable = reactExports.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContentImpl, { ...props, ref: composedRefs });
 });
 var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, { isInside: false });
+var Slottable = /* @__PURE__ */ createSlottable("TooltipContent");
 var TooltipContentImpl = reactExports.forwardRef(
   (props, forwardedRef) => {
     const {
@@ -25652,20 +25812,27 @@ const Sidebar = ({
   const [showConfig, setShowConfig] = reactExports.useState(false);
   const [shownEnvVars, setShownEnvVars] = reactExports.useState(/* @__PURE__ */ new Set());
   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", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { className: "ml-2 text-lg font-semibold", 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", children: "Transport Type" }),
+        /* @__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, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select transport type" }) }),
+              /* @__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" })
@@ -25676,10 +25843,11 @@ const Sidebar = ({
       ] }),
       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", children: "Command" }),
+          /* @__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),
@@ -25688,10 +25856,18 @@ const Sidebar = ({
           )
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", children: "Arguments" }),
+          /* @__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),
@@ -25701,10 +25877,11 @@ const Sidebar = ({
         ] })
       ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", children: "URL" }),
+          /* @__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),
@@ -25719,6 +25896,7 @@ const Sidebar = ({
               variant: "outline",
               onClick: () => setShowBearerToken(!showBearerToken),
               className: "flex items-center w-full",
+              "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"
@@ -25726,10 +25904,18 @@ const Sidebar = ({
             }
           ),
           showBearerToken && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", children: "Bearer Token" }),
+            /* @__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),
@@ -25748,6 +25934,7 @@ const Sidebar = ({
             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"
@@ -25760,6 +25947,7 @@ const Sidebar = ({
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 Input,
                 {
+                  "aria-label": `Environment variable key ${idx + 1}`,
                   placeholder: "Key",
                   value: key,
                   onChange: (e) => {
@@ -25806,6 +25994,7 @@ const Sidebar = ({
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 Input,
                 {
+                  "aria-label": `Environment variable value ${idx + 1}`,
                   type: shownEnvVars.has(key) ? "text" : "password",
                   placeholder: "Value",
                   value,
@@ -25866,6 +26055,7 @@ const Sidebar = ({
             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" }),
@@ -25877,7 +26067,14 @@ const Sidebar = ({
           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", children: configKey }),
+              /* @__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 })
@@ -25886,6 +26083,7 @@ const Sidebar = ({
             typeof configItem.value === "number" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
               Input,
               {
+                id: `${configKey}-input`,
                 type: "number",
                 "data-testid": `${configKey}-input`,
                 value: configItem.value,
@@ -25913,7 +26111,7 @@ const Sidebar = ({
                   setConfig(newConfig);
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, {}) }),
+                  /* @__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" })
@@ -25923,6 +26121,7 @@ const Sidebar = ({
             ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
               Input,
               {
+                id: `${configKey}-input`,
                 "data-testid": `${configKey}-input`,
                 value: configItem.value,
                 onChange: (e) => {
@@ -25941,10 +26140,20 @@ const Sidebar = ({
       ] }),
       /* @__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(Button, { "data-testid": "connect-button", onClick: onConnect, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "w-4 h-4 mr-2" }),
-            transportType === "stdio" ? "Restart" : "Reconnect"
-          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Button,
+            {
+              "data-testid": "connect-button",
+              onClick: () => {
+                onDisconnect();
+                onConnect();
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "w-4 h-4 mr-2" }),
+                transportType === "stdio" ? "Restart" : "Reconnect"
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: onDisconnect, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCwOff, { className: "w-4 h-4 mr-2" }),
             "Disconnect"
@@ -25986,14 +26195,21 @@ const Sidebar = ({
           })() })
         ] }),
         loggingSupported && connectionStatus === "connected" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", children: "Logging Level" }),
+          /* @__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, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select logging level" }) }),
+                /* @__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 })) })
               ]
             }
@@ -28166,73 +28382,6 @@ const JsonEditor = ({
     displayError && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-red-500 mt-1", children: displayError })
   ] });
 };
-function updateValueAtPath(obj, path, value) {
-  if (path.length === 0) return value;
-  if (obj === null || obj === void 0) {
-    obj = !isNaN(Number(path[0])) ? [] : {};
-  }
-  if (Array.isArray(obj)) {
-    return updateArray(obj, path, value);
-  } else if (typeof obj === "object" && obj !== null) {
-    return updateObject(obj, path, value);
-  } else {
-    console.error(
-      `Cannot update path ${path.join(".")} in non-object/array value:`,
-      obj
-    );
-    return obj;
-  }
-}
-function updateArray(array, path, value) {
-  const [index2, ...restPath] = path;
-  const arrayIndex = Number(index2);
-  if (isNaN(arrayIndex)) {
-    console.error(`Invalid array index: ${index2}`);
-    return array;
-  }
-  if (arrayIndex < 0) {
-    console.error(`Array index out of bounds: ${arrayIndex} < 0`);
-    return array;
-  }
-  let newArray = [];
-  for (let i = 0; i < array.length; i++) {
-    newArray[i] = i in array ? array[i] : null;
-  }
-  if (arrayIndex >= newArray.length) {
-    const extendedArray = new Array(arrayIndex).fill(null);
-    for (let i = 0; i < newArray.length; i++) {
-      extendedArray[i] = newArray[i];
-    }
-    newArray = extendedArray;
-  }
-  if (restPath.length === 0) {
-    newArray[arrayIndex] = value;
-  } else {
-    newArray[arrayIndex] = updateValueAtPath(
-      newArray[arrayIndex],
-      restPath,
-      value
-    );
-  }
-  return newArray;
-}
-function updateObject(obj, path, value) {
-  const [key, ...restPath] = path;
-  if (typeof key !== "string") {
-    console.error(`Invalid object key: ${key}`);
-    return obj;
-  }
-  const newObj = { ...obj };
-  if (restPath.length === 0) {
-    newObj[key] = value;
-  } else {
-    if (!(key in newObj)) {
-      newObj[key] = {};
-    }
-    newObj[key] = updateValueAtPath(newObj[key], restPath, value);
-  }
-  return newObj;
-}
 function generateDefaultValue(schema) {
   if ("default" in schema) {
     return schema.default;
@@ -28569,6 +28718,7 @@ const ToolsTab = ({
   nextCursor
 }) => {
   const [params2, setParams] = reactExports.useState({});
+  const [isToolRunning, setIsToolRunning] = reactExports.useState(false);
   reactExports.useEffect(() => {
     setParams({});
   }, [selectedTool]);
@@ -28588,13 +28738,14 @@ const ToolsTab = ({
       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 ? "Error" : "Success"
+          "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 }),
+            item.type === "text" && /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: item.text, isError }),
             item.type === "image" && /* @__PURE__ */ jsxRuntimeExports.jsx(
               "img",
               {
@@ -28622,7 +28773,7 @@ const ToolsTab = ({
       ] });
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsContent, { value: "tools", className: "grid grid-cols-2 gap-4", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "tools", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       ListPane,
       {
@@ -28643,7 +28794,7 @@ const ToolsTab = ({
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card rounded-lg shadow", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold", children: selectedTool ? selectedTool.name : "Select a tool" }) }),
+      /* @__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(
@@ -28727,24 +28878,31 @@ const ToolsTab = ({
             ] }, key);
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: () => callTool(selectedTool.name, params2), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "w-4 h-4 mr-2" }),
-          "Run Tool"
-        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            onClick: async () => {
+              try {
+                setIsToolRunning(true);
+                await callTool(selectedTool.name, params2);
+              } 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"
+            ] })
+          }
+        ),
         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" }) }) })
     ] })
-  ] });
-};
-const getMCPProxyAddress = (config) => {
-  const proxyFullAddress = config.MCP_PROXY_FULL_ADDRESS.value;
-  if (proxyFullAddress) {
-    return proxyFullAddress;
-  }
-  return `${window.location.protocol}//${window.location.hostname}:${DEFAULT_MCP_PROXY_LISTEN_PORT}`;
-};
-const getMCPServerRequestTimeout = (config) => {
-  return config.MCP_SERVER_REQUEST_TIMEOUT.value;
+  ] }) });
 };
 const params = new URLSearchParams(window.location.search);
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
@@ -28783,10 +28941,17 @@ const App = () => {
   const [config, setConfig] = reactExports.useState(() => {
     const savedConfig = localStorage.getItem(CONFIG_LOCAL_STORAGE_KEY);
     if (savedConfig) {
-      return {
+      const mergedConfig = {
         ...DEFAULT_INSPECTOR_CONFIG,
         ...JSON.parse(savedConfig)
       };
+      Object.entries(mergedConfig).forEach(([key, value]) => {
+        mergedConfig[key] = {
+          ...value,
+          label: DEFAULT_INSPECTOR_CONFIG[key].label
+        };
+      });
+      return mergedConfig;
     }
     return DEFAULT_INSPECTOR_CONFIG;
   });
@@ -28813,7 +28978,7 @@ const App = () => {
     serverCapabilities,
     mcpClient,
     requestHistory,
-    makeRequest: makeConnectionRequest,
+    makeRequest,
     sendNotification,
     handleCompletion,
     completionsSupported,
@@ -28826,8 +28991,7 @@ const App = () => {
     sseUrl,
     env,
     bearerToken,
-    proxyServerUrl: getMCPProxyAddress(config),
-    requestTimeout: getMCPServerRequestTimeout(config),
+    config,
     onNotification: (notification) => {
       setNotifications((prev) => [...prev, notification]);
     },
@@ -28921,9 +29085,9 @@ const App = () => {
   const clearError = (tabKey) => {
     setErrors((prev) => ({ ...prev, [tabKey]: null }));
   };
-  const makeRequest = async (request, schema, tabKey) => {
+  const sendMCPRequest = async (request, schema, tabKey) => {
     try {
-      const response = await makeConnectionRequest(request, schema);
+      const response = await makeRequest(request, schema);
       if (tabKey !== void 0) {
         clearError(tabKey);
       }
@@ -28940,7 +29104,7 @@ const App = () => {
     }
   };
   const listResources = async () => {
-    const response = await makeRequest(
+    const response = await sendMCPRequest(
       {
         method: "resources/list",
         params: nextResourceCursor ? { cursor: nextResourceCursor } : {}
@@ -28952,7 +29116,7 @@ const App = () => {
     setNextResourceCursor(response.nextCursor);
   };
   const listResourceTemplates = async () => {
-    const response = await makeRequest(
+    const response = await sendMCPRequest(
       {
         method: "resources/templates/list",
         params: nextResourceTemplateCursor ? { cursor: nextResourceTemplateCursor } : {}
@@ -28966,7 +29130,7 @@ const App = () => {
     setNextResourceTemplateCursor(response.nextCursor);
   };
   const readResource = async (uri) => {
-    const response = await makeRequest(
+    const response = await sendMCPRequest(
       {
         method: "resources/read",
         params: { uri }
@@ -28978,7 +29142,7 @@ const App = () => {
   };
   const subscribeToResource = async (uri) => {
     if (!resourceSubscriptions.has(uri)) {
-      await makeRequest(
+      await sendMCPRequest(
         {
           method: "resources/subscribe",
           params: { uri }
@@ -28993,7 +29157,7 @@ const App = () => {
   };
   const unsubscribeFromResource = async (uri) => {
     if (resourceSubscriptions.has(uri)) {
-      await makeRequest(
+      await sendMCPRequest(
         {
           method: "resources/unsubscribe",
           params: { uri }
@@ -29007,7 +29171,7 @@ const App = () => {
     }
   };
   const listPrompts = async () => {
-    const response = await makeRequest(
+    const response = await sendMCPRequest(
       {
         method: "prompts/list",
         params: nextPromptCursor ? { cursor: nextPromptCursor } : {}
@@ -29019,7 +29183,7 @@ const App = () => {
     setNextPromptCursor(response.nextCursor);
   };
   const getPrompt = async (name, args2 = {}) => {
-    const response = await makeRequest(
+    const response = await sendMCPRequest(
       {
         method: "prompts/get",
         params: { name, arguments: args2 }
@@ -29030,7 +29194,7 @@ const App = () => {
     setPromptContent(JSON.stringify(response, null, 2));
   };
   const listTools = async () => {
-    const response = await makeRequest(
+    const response = await sendMCPRequest(
       {
         method: "tools/list",
         params: nextToolCursor ? { cursor: nextToolCursor } : {}
@@ -29042,27 +29206,40 @@ const App = () => {
     setNextToolCursor(response.nextCursor);
   };
   const callTool = async (name, params2) => {
-    const response = await makeRequest(
-      {
-        method: "tools/call",
-        params: {
-          name,
-          arguments: params2,
-          _meta: {
-            progressToken: progressTokenRef.current++
+    try {
+      const response = await sendMCPRequest(
+        {
+          method: "tools/call",
+          params: {
+            name,
+            arguments: params2,
+            _meta: {
+              progressToken: progressTokenRef.current++
+            }
           }
-        }
-      },
-      CompatibilityCallToolResultSchema,
-      "tools"
-    );
-    setToolResult(response);
+        },
+        CompatibilityCallToolResultSchema,
+        "tools"
+      );
+      setToolResult(response);
+    } catch (e) {
+      const toolResult2 = {
+        content: [
+          {
+            type: "text",
+            text: e.message ?? String(e)
+          }
+        ],
+        isError: true
+      };
+      setToolResult(toolResult2);
+    }
   };
   const handleRootsChange = async () => {
     await sendNotification({ method: "notifications/roots/list_changed" });
   };
   const sendLogLevelRequest = async (level) => {
-    await makeRequest(
+    await sendMCPRequest(
       {
         method: "logging/setLevel",
         params: { level }
@@ -29073,7 +29250,7 @@ const App = () => {
   };
   if (window.location.pathname === "/oauth/callback") {
     const OAuthCallback = React$1.lazy(
-      () => __vitePreload(() => import("./OAuthCallback-CsnPYikN.js"), true ? [] : void 0)
+      () => __vitePreload(() => import("./OAuthCallback-C3r8TjnW.js"), true ? [] : void 0)
     );
     return /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(OAuthCallback, {}) });
   }
@@ -29251,9 +29428,10 @@ const App = () => {
                     setTools([]);
                     setNextToolCursor(void 0);
                   },
-                  callTool: (name, params2) => {
+                  callTool: async (name, params2) => {
                     clearError("tools");
-                    callTool(name, params2);
+                    setToolResult(null);
+                    await callTool(name, params2);
                   },
                   selectedTool,
                   setSelectedTool: (tool) => {
@@ -29271,7 +29449,7 @@ const App = () => {
                 PingTab,
                 {
                   onPingClick: () => {
-                    void makeRequest(
+                    void sendMCPRequest(
                       {
                         method: "ping"
                       },