@modelcontextprotocol/inspector-client 0.7.0 → 0.8.0

package/bin/cli.js

@@ -15,5 +15,19 @@ const server = http.createServer((request, response) => {
   });
 });
 
-const port = process.env.PORT || 5173;
-server.listen(port, () => {});
+const port = process.env.PORT || 6274;
+server.on("listening", () => {
+  console.log(
+    `🔍 MCP Inspector is up and running at http://127.0.0.1:${port} 🚀`,
+  );
+});
+server.on("error", (err) => {
+  if (err.message.includes(`EADDRINUSE`)) {
+    console.error(
+      `❌  MCP Inspector PORT IS IN USE at http://127.0.0.1:${port} ❌ `,
+    );
+  } else {
+    throw err;
+  }
+});
+server.listen(port);

package/dist/assets/{OAuthCallback-C5xCfXlk.js → OAuthCallback-DrQsfqzq.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, j as jsxRuntimeExports, S as SESSION_KEYS, a as auth, b as authProvider } from "./index-D7o7JmLV.js";
+import { r as reactExports, j as jsxRuntimeExports, S as SESSION_KEYS, a as auth, b as authProvider } from "./index-DrNN0pLZ.js";
 const OAuthCallback = () => {
   const hasProcessedRef = reactExports.useRef(false);
   reactExports.useEffect(() => {

package/dist/assets/{index-Dt6l7sEy.css → index-BxIjx6su.css}

@@ -1443,6 +1443,12 @@ video {
   white-space: nowrap;
   border-width: 0;
 }
+.visible {
+  visibility: visible;
+}
+.collapse {
+  visibility: collapse;
+}
 .fixed {
   position: fixed;
 }
@@ -1511,9 +1517,15 @@ video {
 .ml-2 {
   margin-left: 0.5rem;
 }
+.ml-4 {
+  margin-left: 1rem;
+}
 .ml-auto {
   margin-left: auto;
 }
+.mr-1 {
+  margin-right: 0.25rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -1559,9 +1571,6 @@ video {
 .h-4 {
   height: 1rem;
 }
-.h-64 {
-  height: 16rem;
-}
 .h-8 {
   height: 2rem;
 }
@@ -1586,9 +1595,6 @@ video {
 .h-screen {
   height: 100vh;
 }
-.max-h-64 {
-  max-height: 16rem;
-}
 .max-h-80 {
   max-height: 20rem;
 }
@@ -1755,8 +1761,8 @@ video {
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
-.break-words {
-  overflow-wrap: break-word;
+.break-all {
+  word-break: break-all;
 }
 .rounded {
   border-radius: 0.25rem;
@@ -1779,6 +1785,9 @@ video {
 .border-b {
   border-bottom-width: 1px;
 }
+.border-l {
+  border-left-width: 1px;
+}
 .border-r {
   border-right-width: 1px;
 }
@@ -1964,6 +1973,10 @@ video {
 .tracking-widest {
   letter-spacing: 0.1em;
 }
+.text-amber-600 {
+  --tw-text-opacity: 1;
+  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
+}
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
@@ -2004,10 +2017,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
-}
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
@@ -2109,6 +2118,9 @@ video {
 .duration-200 {
   transition-duration: 200ms;
 }
+.duration-300 {
+  transition-duration: 300ms;
+}
 @keyframes enter {
 
   from {
@@ -2126,6 +2138,9 @@ video {
 .duration-200 {
   animation-duration: 200ms;
 }
+.duration-300 {
+  animation-duration: 300ms;
+}
 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
@@ -2249,6 +2264,14 @@ button[role="checkbox"] {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-gray-800\/10:hover {
+  background-color: rgb(31 41 55 / 0.1);
+}
+
+.hover\:bg-gray-800\/20:hover {
+  background-color: rgb(31 41 55 / 0.2);
+}
+
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }
@@ -2344,6 +2367,16 @@ button[role="checkbox"] {
   opacity: 0.5;
 }
 
+.group:hover .group-hover\:text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+
+.group:hover .group-hover\:text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
+}
+
 .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -2523,6 +2556,11 @@ button[role="checkbox"] {
   color: rgb(209 213 219 / var(--tw-text-opacity, 1));
 }
 
+.dark\:text-gray-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-white:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -2533,6 +2571,15 @@ button[role="checkbox"] {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:hover\:bg-gray-800\/20:hover:is(.dark *) {
+  background-color: rgb(31 41 55 / 0.2);
+}
+
+.group:hover .dark\:group-hover\:text-gray-100:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+}
+
 @media (min-width: 640px) {
 
   .sm\:flex-row {

package/dist/assets/{index-D7o7JmLV.js → index-DrNN0pLZ.js}

@@ -12180,7 +12180,7 @@ class McpError extends Error {
     this.name = "McpError";
   }
 }
-const DEFAULT_REQUEST_TIMEOUT_MSEC$1 = 6e4;
+const DEFAULT_REQUEST_TIMEOUT_MSEC = 6e4;
 class Protocol {
   constructor(_options) {
     this._options = _options;
@@ -12437,7 +12437,7 @@ class Protocol {
         var _a2;
         cancel((_a2 = options === null || options === void 0 ? void 0 : options.signal) === null || _a2 === void 0 ? void 0 : _a2.reason);
       });
-      const timeout = (_d = options === null || options === void 0 ? void 0 : options.timeout) !== null && _d !== void 0 ? _d : DEFAULT_REQUEST_TIMEOUT_MSEC$1;
+      const timeout = (_d = options === null || options === void 0 ? void 0 : options.timeout) !== null && _d !== void 0 ? _d : DEFAULT_REQUEST_TIMEOUT_MSEC;
       const timeoutHandler = () => cancel(new McpError(ErrorCode.RequestTimeout, "Request timed out", { timeout }));
       this._setupTimeout(messageId, timeout, options === null || options === void 0 ? void 0 : options.maxTotalTimeout, timeoutHandler);
       this._transport.send(jsonrpcRequest).catch((error) => {
@@ -12685,15 +12685,18 @@ class Client extends Protocol {
     return this.notification({ method: "notifications/roots/list_changed" });
   }
 }
-var __defProp = Object.defineProperty, __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value, __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
 class ParseError extends Error {
   constructor(message, options) {
-    super(message), __publicField(this, "type"), __publicField(this, "field"), __publicField(this, "value"), __publicField(this, "line"), this.name = "ParseError", this.type = options.type, this.field = options.field, this.value = options.value, this.line = options.line;
+    super(message), this.name = "ParseError", this.type = options.type, this.field = options.field, this.value = options.value, this.line = options.line;
   }
 }
 function noop(_arg) {
 }
 function createParser(callbacks) {
+  if (typeof callbacks == "function")
+    throw new TypeError(
+      "`callbacks` must be an object, got a function instead. Did you mean `{onEvent: fn}`?"
+    );
   const { onEvent = noop, onError = noop, onRetry = noop, onComment } = callbacks;
   let incompleteLine = "", isFirstChunk = true, id2, data = "", eventType = "";
   function feed(newChunk) {
@@ -12761,19 +12764,25 @@ function createParser(callbacks) {
     }), id2 = void 0, data = "", eventType = "";
   }
   function reset(options = {}) {
-    incompleteLine && options.consume && parseLine(incompleteLine), id2 = void 0, data = "", eventType = "", incompleteLine = "";
+    incompleteLine && options.consume && parseLine(incompleteLine), isFirstChunk = true, id2 = void 0, data = "", eventType = "", incompleteLine = "";
   }
   return { feed, reset };
 }
 function splitLines(chunk) {
   const lines = [];
-  let incompleteLine = "";
-  const totalLength = chunk.length;
-  for (let i = 0; i < totalLength; i++) {
-    const char = chunk[i];
-    char === "\r" && chunk[i + 1] === `
-` ? (lines.push(incompleteLine), incompleteLine = "", i++) : char === "\r" || char === `
-` ? (lines.push(incompleteLine), incompleteLine = "") : incompleteLine += char;
+  let incompleteLine = "", searchIndex = 0;
+  for (; searchIndex < chunk.length; ) {
+    const crIndex = chunk.indexOf("\r", searchIndex), lfIndex = chunk.indexOf(`
+`, searchIndex);
+    let lineEnd = -1;
+    if (crIndex !== -1 && lfIndex !== -1 ? lineEnd = Math.min(crIndex, lfIndex) : crIndex !== -1 ? lineEnd = crIndex : lfIndex !== -1 && (lineEnd = lfIndex), lineEnd === -1) {
+      incompleteLine = chunk.slice(searchIndex);
+      break;
+    } else {
+      const line = chunk.slice(searchIndex, lineEnd);
+      lines.push(line), searchIndex = lineEnd + 1, chunk[searchIndex - 1] === "\r" && chunk[searchIndex] === `
+` && searchIndex++;
+    }
   }
   return [lines, incompleteLine];
 }
@@ -13494,6 +13503,12 @@ const SESSION_KEYS = {
   TOKENS: "mcp_tokens",
   CLIENT_INFORMATION: "mcp_client_information"
 };
+const DEFAULT_INSPECTOR_CONFIG = {
+  MCP_SERVER_REQUEST_TIMEOUT: {
+    description: "Timeout for requests to the MCP server (ms)",
+    value: 1e4
+  }
+};
 const StdErrNotificationSchema = NotificationSchema.extend({
   method: z.literal("notifications/stderr"),
   params: z.object({
@@ -13502,7 +13517,7 @@ const StdErrNotificationSchema = NotificationSchema.extend({
 });
 ClientNotificationSchema.or(
   StdErrNotificationSchema
-).or(ServerNotificationSchema);
+).or(ServerNotificationSchema).or(NotificationSchema);
 class InspectorOAuthClientProvider {
   get redirectUrl() {
     return window.location.origin + "/oauth/callback";
@@ -13556,7 +13571,7 @@ class InspectorOAuthClientProvider {
 }
 const authProvider = new InspectorOAuthClientProvider();
 const name = "@modelcontextprotocol/inspector-client";
-const version$1 = "0.7.0";
+const version$1 = "0.8.0";
 const description = "Client-side application for the Model Context Protocol inspector";
 const license = "MIT";
 const author = "Anthropic, PBC (https://anthropic.com)";
@@ -13574,14 +13589,14 @@ const scripts = {
   dev: "vite",
   build: "tsc -b && vite build",
   lint: "eslint .",
-  preview: "vite preview",
+  preview: "vite preview --port 6274",
   test: "jest --config jest.config.cjs",
   "test:watch": "jest --config jest.config.cjs --watch"
 };
 const dependencies = {
   "@modelcontextprotocol/sdk": "^1.6.1",
-  "@radix-ui/react-dialog": "^1.1.3",
   "@radix-ui/react-checkbox": "^1.1.4",
+  "@radix-ui/react-dialog": "^1.1.3",
   "@radix-ui/react-icons": "^1.3.0",
   "@radix-ui/react-label": "^2.1.0",
   "@radix-ui/react-popover": "^1.1.3",
@@ -13594,7 +13609,7 @@ const dependencies = {
   cmdk: "^1.0.4",
   "lucide-react": "^0.447.0",
   "pkce-challenge": "^4.1.0",
-  prismjs: "^1.29.0",
+  prismjs: "^1.30.0",
   react: "^18.3.1",
   "react-dom": "^18.3.1",
   "react-simple-code-editor": "^0.14.1",
@@ -13606,6 +13621,8 @@ const dependencies = {
 };
 const devDependencies = {
   "@eslint/js": "^9.11.1",
+  "@testing-library/jest-dom": "^6.6.3",
+  "@testing-library/react": "^16.2.0",
   "@types/jest": "^29.5.14",
   "@types/node": "^22.7.5",
   "@types/react": "^18.3.10",
@@ -13642,8 +13659,6 @@ const packageJson = {
   dependencies,
   devDependencies
 };
-const params$1 = new URLSearchParams(window.location.search);
-const DEFAULT_REQUEST_TIMEOUT_MSEC = parseInt(params$1.get("timeout") ?? "") || 1e4;
 function useConnection({
   transportType,
   command,
@@ -13652,7 +13667,7 @@ function useConnection({
   env,
   proxyServerUrl,
   bearerToken,
-  requestTimeout = DEFAULT_REQUEST_TIMEOUT_MSEC,
+  requestTimeout,
   onNotification,
   onStdErrNotification,
   onPendingRequest,
@@ -13797,18 +13812,21 @@ function useConnection({
         }
       });
       if (onNotification) {
-        client.setNotificationHandler(
+        [
+          CancelledNotificationSchema,
           ProgressNotificationSchema,
-          onNotification
-        );
-        client.setNotificationHandler(
-          ResourceUpdatedNotificationSchema,
-          onNotification
-        );
-        client.setNotificationHandler(
           LoggingMessageNotificationSchema,
-          onNotification
-        );
+          ResourceUpdatedNotificationSchema,
+          ResourceListChangedNotificationSchema,
+          ToolListChangedNotificationSchema,
+          PromptListChangedNotificationSchema
+        ].forEach((notificationSchema) => {
+          client.setNotificationHandler(notificationSchema, onNotification);
+        });
+        client.fallbackNotificationHandler = (notification) => {
+          onNotification(notification);
+          return Promise.resolve();
+        };
       }
       if (onStdErrNotification) {
         client.setNotificationHandler(
@@ -13851,6 +13869,13 @@ function useConnection({
       setConnectionStatus("error");
     }
   };
+  const disconnect = async () => {
+    await (mcpClient == null ? void 0 : mcpClient.close());
+    setMcpClient(null);
+    setConnectionStatus("disconnected");
+    setCompletionsSupported(false);
+    setServerCapabilities(null);
+  };
   return {
     connectionStatus,
     serverCapabilities,
@@ -13860,7 +13885,8 @@ function useConnection({
     sendNotification,
     handleCompletion,
     completionsSupported,
-    connect
+    connect,
+    disconnect
   };
 }
 function useDraggablePane(initialHeight) {
@@ -17612,6 +17638,21 @@ const Plus = createLucideIcon("Plus", [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ]);
+/**
+ * @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 RefreshCwOff = createLucideIcon("RefreshCwOff", [
+  ["path", { d: "M21 8L18.74 5.74A9.75 9.75 0 0 0 12 3C11 3 10.03 3.16 9.13 3.47", key: "1krf6h" }],
+  ["path", { d: "M8 16H3v5", key: "1cv678" }],
+  ["path", { d: "M3 12C3 9.51 4 7.26 5.64 5.64", key: "ruvoct" }],
+  ["path", { d: "m3 16 2.26 2.26A9.75 9.75 0 0 0 12 21c2.49 0 4.74-1 6.36-2.64", key: "19q130" }],
+  ["path", { d: "M21 12c0 1-.16 1.97-.47 2.87", key: "4w8emr" }],
+  ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
+  ["path", { d: "M22 22 2 2", key: "1r8tn9" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -17624,6 +17665,16 @@ const RefreshCw = createLucideIcon("RefreshCw", [
   ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
   ["path", { d: "M8 16H3v5", key: "1cv678" }]
 ]);
+/**
+ * @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 RotateCcw = createLucideIcon("RotateCcw", [
+  ["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" }]
+]);
 /**
  * @license lucide-react v0.447.0 - ISC
  *
@@ -17657,7 +17708,182 @@ 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"
+    }
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+]);
 const ConsoleTab = () => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "console", className: "h-96", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg h-full font-mono text-sm overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "opacity-50", children: "Welcome to MCP Client Console" }) }) });
+function tryParseJson(str) {
+  const trimmed = str.trim();
+  if (!(trimmed.startsWith("{") && trimmed.endsWith("}")) && !(trimmed.startsWith("[") && trimmed.endsWith("]"))) {
+    return { success: false, data: str };
+  }
+  try {
+    return { success: true, data: JSON.parse(str) };
+  } catch {
+    return { success: false, data: str };
+  }
+}
+const JsonView = reactExports.memo(
+  ({ data, name: name2, initialExpandDepth = 3 }) => {
+    const normalizedData = typeof data === "string" ? tryParseJson(data).success ? tryParseJson(data).data : data : data;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-sm transition-all duration-300 ", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      JsonNode,
+      {
+        data: normalizedData,
+        name: name2,
+        depth: 0,
+        initialExpandDepth
+      }
+    ) });
+  }
+);
+JsonView.displayName = "JsonView";
+const JsonNode = reactExports.memo(
+  ({ data, name: name2, depth = 0, initialExpandDepth }) => {
+    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 = {
+      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",
+      default: "text-gray-700"
+    };
+    const renderCollapsible = (isArray) => {
+      const items = isArray ? data : Object.entries(data);
+      const itemCount = items.length;
+      const isEmpty = itemCount === 0;
+      const symbolMap = {
+        open: isArray ? "[" : "{",
+        close: isArray ? "]" : "}",
+        collapsed: isArray ? "[ ... ]" : "{ ... }",
+        empty: isArray ? "[]" : "{}"
+      };
+      if (isEmpty) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+          name2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
+            name2,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: symbolMap.empty })
+        ] });
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: "flex items-center mr-1 rounded cursor-pointer group hover:bg-gray-800/10 dark:hover:bg-gray-800/20",
+            onClick: () => setIsExpanded(!isExpanded),
+            children: [
+              name2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: [
+                name2,
+                ":"
+              ] }),
+              isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: symbolMap.open }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: symbolMap.collapsed }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ml-1 text-gray-700 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: [
+                  itemCount,
+                  " ",
+                  itemCount === 1 ? "item" : "items"
+                ] })
+              ] })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-2 ml-4 border-l border-gray-200 dark:border-gray-800", children: isArray ? items.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "my-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            JsonNode,
+            {
+              data: item,
+              name: `${index2}`,
+              depth: depth + 1,
+              initialExpandDepth
+            }
+          ) }, index2)) : items.map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "my-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            JsonNode,
+            {
+              data: value,
+              name: key,
+              depth: depth + 1,
+              initialExpandDepth
+            }
+          ) }, key)) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-600 dark:text-gray-400", children: symbolMap.close })
+        ] })
+      ] });
+    };
+    const renderString = (value) => {
+      const maxLength = 100;
+      const isTooLong = value.length > maxLength;
+      if (!isTooLong) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex mr-1 rounded hover:bg-gray-800/20", children: [
+          name2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
+            name2,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("pre", { className: typeStyleMap.string, children: [
+            '"',
+            value,
+            '"'
+          ] })
+        ] });
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex mr-1 rounded group hover:bg-gray-800/20", children: [
+        name2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: [
+          name2,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "pre",
+          {
+            className: clsx(
+              typeStyleMap.string,
+              "cursor-pointer group-hover:text-green-500"
+            ),
+            onClick: () => setIsExpanded(!isExpanded),
+            title: isExpanded ? "Click to collapse" : "Click to expand",
+            children: isExpanded ? `"${value}"` : `"${value.slice(0, maxLength)}..."`
+          }
+        )
+      ] });
+    };
+    switch (dataType) {
+      case "object":
+      case "array":
+        return renderCollapsible(dataType === "array");
+      case "string":
+        return renderString(data);
+      default:
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center mr-1 rounded hover:bg-gray-800/20", children: [
+          name2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
+            name2,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: typeStyleMap[dataType] || typeStyleMap.default, children: data === null ? "null" : String(data) })
+        ] });
+    }
+  }
+);
+JsonNode.displayName = "JsonNode";
 const HistoryAndNotifications = ({
   requestHistory,
   serverNotifications
@@ -17710,7 +17936,7 @@ const HistoryAndNotifications = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "whitespace-pre-wrap break-words bg-background p-2 rounded", children: JSON.stringify(JSON.parse(request.request), null, 2) })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-background p-2 rounded", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: request.request }) })
               ] }),
               request.response && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center mb-1", children: [
@@ -17724,11 +17950,7 @@ const HistoryAndNotifications = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "whitespace-pre-wrap break-words bg-background p-2 rounded", children: JSON.stringify(
-                  JSON.parse(request.response),
-                  null,
-                  2
-                ) })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-background p-2 rounded", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: request.response }) })
               ] })
             ] })
           ]
@@ -17771,7 +17993,12 @@ const HistoryAndNotifications = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "whitespace-pre-wrap break-words bg-background p-2 rounded", children: JSON.stringify(notification, null, 2) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-background p-2 rounded", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                JsonView,
+                {
+                  data: JSON.stringify(notification, null, 2)
+                }
+              ) })
             ] })
           ]
         },
@@ -22556,22 +22783,6 @@ const Label$1 = reactExports.forwardRef(({ className: className2, ...props }, re
   }
 ));
 Label$1.displayName = Root$1.displayName;
-const Textarea = reactExports.forwardRef(
-  ({ className: className2, ...props }, ref) => {
-    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",
-          className2
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Textarea.displayName = "Textarea";
 const ListPane = ({
   items,
   listItems,
@@ -22784,14 +22995,7 @@ const PromptsTab = ({
           ] })
         ] }, arg.name)),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: handleGetPrompt, className: "w-full", children: "Get Prompt" }),
-        promptContent && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Textarea,
-          {
-            value: promptContent,
-            readOnly: true,
-            className: "h-64 font-mono"
-          }
-        )
+        promptContent && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border rounded", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: promptContent }) })
       ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: "Select a prompt from the list to view and use it" }) }) })
     ] })
   ] });
@@ -22943,7 +23147,7 @@ const ResourcesTab = ({
         /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTitle, { children: "Error" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: error })
-      ] }) : selectedResource ? /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words text-gray-900 dark:text-gray-100", children: resourceContent }) : selectedTemplate ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+      ] }) : selectedResource ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 text-gray-900 dark:text-gray-100", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: resourceContent }) }) : selectedTemplate ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600", children: selectedTemplate.description }),
         (_a = selectedTemplate.uriTemplate.match(/{([^}]+)}/g)) == null ? void 0 : _a.map((param) => {
           const key = param.slice(1, -1);
@@ -23063,7 +23267,7 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 space-y-4", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold", children: "Recent Requests" }),
       pendingRequests.map((request) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 border rounded-lg space-y-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-2 rounded", children: JSON.stringify(request.request, null, 2) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-2 rounded", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: JSON.stringify(request.request) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex space-x-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: () => handleApprove(request.id), children: "Approve" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => onReject(request.id), children: "Reject" })
@@ -24375,18 +24579,16 @@ const useTheme = () => {
       darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
     };
   }, [theme]);
-  return [
-    theme,
-    reactExports.useCallback((newTheme) => {
-      setTheme(newTheme);
-      localStorage.setItem("theme", newTheme);
-      if (newTheme !== "system") {
-        document.documentElement.classList.toggle("dark", newTheme === "dark");
-      }
-    }, [])
-  ];
+  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]);
 };
-const version = "0.7.0";
+const version = "0.8.0";
 const Sidebar = ({
   connectionStatus,
   transportType,
@@ -24402,14 +24604,18 @@ const Sidebar = ({
   bearerToken,
   setBearerToken,
   onConnect,
+  onDisconnect,
   stdErrNotifications,
   logLevel,
   sendLogLevelRequest,
-  loggingSupported
+  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 [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: [
@@ -24618,7 +24824,91 @@ const Sidebar = ({
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { className: "w-full", onClick: onConnect, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Button,
+          {
+            variant: "outline",
+            onClick: () => setShowConfig(!showConfig),
+            className: "flex items-center w-full",
+            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.jsx("label", { className: "text-sm font-medium", children: configItem.description }),
+            typeof configItem.value === "number" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              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"
+              }
+            ) : typeof configItem.value === "boolean" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Select,
+              {
+                "data-testid": `${configKey}-select`,
+                value: configItem.value.toString(),
+                onValueChange: (val) => {
+                  const newConfig = { ...config };
+                  newConfig[configKey] = {
+                    ...configItem,
+                    value: val === "true"
+                  };
+                  setConfig(newConfig);
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { 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(
+              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"
+              }
+            )
+          ] }, 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(Button, { onClick: 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"
+          ] })
+        ] }),
+        connectionStatus !== "connected" && /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { className: "w-full", onClick: onConnect, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Play, { className: "w-4 h-4 mr-2" }),
           "Connect"
         ] }),
@@ -24675,36 +24965,37 @@ const Sidebar = ({
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__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(Button, { variant: "ghost", title: "Inspector Documentation", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircleHelp, { className: "w-4 h-4 text-gray-800" }) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircleHelp, { className: "w-4 h-4 text-foreground" })
           }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ) }),
+        /* @__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(Button, { variant: "ghost", title: "Debugging Guide", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Bug, { className: "w-4 h-4 text-gray-800" }) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Bug, { className: "w-4 h-4 text-foreground" })
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "a",
+          Button,
           {
-            href: "https://github.com/modelcontextprotocol/inspector",
-            target: "_blank",
-            rel: "noopener noreferrer",
+            variant: "ghost",
+            title: "Report bugs or contribute on GitHub",
+            asChild: true,
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Button,
+              "a",
               {
-                variant: "ghost",
-                title: "Report bugs or contribute on GitHub",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Github, { className: "w-4 h-4 text-gray-800" })
+                href: "https://github.com/modelcontextprotocol/inspector",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Github, { className: "w-4 h-4 text-foreground" })
               }
             )
           }
@@ -24876,6 +25167,22 @@ const Checkbox = reactExports.forwardRef(({ className: className2, ...props }, r
   }
 ));
 Checkbox.displayName = Root.displayName;
+const Textarea = reactExports.forwardRef(
+  ({ className: className2, ...props }, ref) => {
+    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",
+          className2
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
 var lib = {};
 var __assign = commonjsGlobal && commonjsGlobal.__assign || function() {
   __assign = Object.assign || function(t2) {
@@ -26756,38 +27063,20 @@ const JsonEditor = ({
   onChange,
   error: externalError
 }) => {
-  const [editorContent, setEditorContent] = reactExports.useState(value);
+  const [editorContent, setEditorContent] = reactExports.useState(value || "");
   const [internalError, setInternalError] = reactExports.useState(
     void 0
   );
   reactExports.useEffect(() => {
-    setEditorContent(value);
+    setEditorContent(value || "");
   }, [value]);
-  const formatJson = (json) => {
-    try {
-      return JSON.stringify(JSON.parse(json), null, 2);
-    } catch {
-      return json;
-    }
-  };
   const handleEditorChange = (newContent) => {
     setEditorContent(newContent);
     setInternalError(void 0);
     onChange(newContent);
   };
-  const handleFormatJson = () => {
-    try {
-      const formatted = formatJson(editorContent);
-      setEditorContent(formatted);
-      onChange(formatted);
-      setInternalError(void 0);
-    } catch (err) {
-      setInternalError(err instanceof Error ? err.message : "Invalid JSON");
-    }
-  };
   const displayError = internalError || externalError;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative space-y-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: handleFormatJson, children: "Format JSON" }) }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -26966,6 +27255,20 @@ const DynamicJsonForm = ({
       setIsJsonMode(true);
     }
   };
+  const formatJson = () => {
+    try {
+      const jsonStr = rawJsonValue.trim();
+      if (!jsonStr) {
+        return;
+      }
+      const formatted = JSON.stringify(JSON.parse(jsonStr), null, 2);
+      setRawJsonValue(formatted);
+      debouncedUpdateParent(formatted);
+      setJsonError(void 0);
+    } catch (err) {
+      setJsonError(err instanceof Error ? err.message : "Invalid JSON");
+    }
+  };
   const renderFormFields = (propSchema, currentValue, path = [], depth = 0) => {
     var _a, _b;
     if (depth >= maxDepth && (propSchema.type === "object" || propSchema.type === "array")) {
@@ -27166,7 +27469,10 @@ const DynamicJsonForm = ({
     }
   }, [shouldUseJsonMode, isJsonMode]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: handleSwitchToFormMode, children: isJsonMode ? "Switch to Form" : "Switch to JSON" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end space-x-2", children: [
+      isJsonMode && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: formatJson, children: "Format JSON" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: handleSwitchToFormMode, children: isJsonMode ? "Switch to Form" : "Switch to JSON" })
+    ] }),
     isJsonMode ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       JsonEditor,
       {
@@ -27188,20 +27494,6 @@ const DynamicJsonForm = ({
     )
   ] });
 };
-function escapeUnicode(obj) {
-  return JSON.stringify(
-    obj,
-    (_key, value) => {
-      if (typeof value === "string") {
-        return value.replace(/[^\0-\x7F]/g, (char) => {
-          return "\\u" + ("0000" + char.charCodeAt(0).toString(16)).slice(-4);
-        });
-      }
-      return value;
-    },
-    2
-  );
-}
 const ToolsTab = ({
   tools,
   listTools,
@@ -27210,8 +27502,7 @@ const ToolsTab = ({
   selectedTool,
   setSelectedTool,
   toolResult,
-  nextCursor,
-  error
+  nextCursor
 }) => {
   const [params2, setParams] = reactExports.useState({});
   reactExports.useEffect(() => {
@@ -27224,16 +27515,9 @@ const ToolsTab = ({
       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("pre", { className: "bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64", children: escapeUnicode(toolResult) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border rounded", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: toolResult }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-semibold mb-2", children: "Errors:" }),
-          parsedResult.error.errors.map((error2, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "pre",
-            {
-              className: "bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64",
-              children: escapeUnicode(error2)
-            },
-            idx
-          ))
+          parsedResult.error.errors.map((error, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border rounded", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: error }) }, idx))
         ] });
       }
       const structuredResult = parsedResult.data;
@@ -27246,7 +27530,7 @@ const ToolsTab = ({
         structuredResult.content.map((item, index2) => {
           var _a, _b;
           return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
-            item.type === "text" && /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64", children: item.text }),
+            item.type === "text" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border rounded", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: item.text }) }),
             item.type === "image" && /* @__PURE__ */ jsxRuntimeExports.jsx(
               "img",
               {
@@ -27263,14 +27547,14 @@ const ToolsTab = ({
                 className: "w-full",
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Your browser does not support audio playback" })
               }
-            ) : /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "bg-gray-50 dark:bg-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words p-4 rounded text-sm overflow-auto max-h-64", children: escapeUnicode(item.resource) }))
+            ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border rounded", children: /* @__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("pre", { className: "bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64", children: escapeUnicode(toolResult.toolResult) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border rounded", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonView, { data: toolResult.toolResult }) })
       ] });
     }
   };
@@ -27296,11 +27580,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", children: error ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Alert, { variant: "destructive", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTitle, { children: "Error" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: error })
-      ] }) : selectedTool ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+      /* @__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]) => {
@@ -27368,14 +27648,14 @@ const ToolsTab = ({
               ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
                 Input,
                 {
-                  type: prop.type === "number" ? "number" : "text",
+                  type: prop.type === "number" || prop.type === "integer" ? "number" : "text",
                   id: key,
                   name: key,
                   placeholder: prop.description,
                   value: params2[key] ?? "",
                   onChange: (e) => setParams({
                     ...params2,
-                    [key]: prop.type === "number" ? Number(e.target.value) : e.target.value
+                    [key]: prop.type === "number" || prop.type === "integer" ? Number(e.target.value) : e.target.value
                   }),
                   className: "mt-1"
                 }
@@ -27393,16 +27673,11 @@ const ToolsTab = ({
   ] });
 };
 const params = new URLSearchParams(window.location.search);
-const PROXY_PORT = params.get("proxyPort") ?? "3000";
+const PROXY_PORT = params.get("proxyPort") ?? "6277";
 const PROXY_SERVER_URL = `http://${window.location.hostname}:${PROXY_PORT}`;
+const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
 const App = () => {
   var _a;
-  if (window.location.pathname === "/oauth/callback") {
-    const OAuthCallback = React$1.lazy(
-      () => __vitePreload(() => import("./OAuthCallback-C5xCfXlk.js"), true ? [] : void 0)
-    );
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(OAuthCallback, {}) });
-  }
   const [resources, setResources] = reactExports.useState([]);
   const [resourceTemplates, setResourceTemplates] = reactExports.useState([]);
   const [resourceContent, setResourceContent] = reactExports.useState("");
@@ -27432,26 +27707,16 @@ const App = () => {
   const [stdErrNotifications, setStdErrNotifications] = reactExports.useState([]);
   const [roots, setRoots] = reactExports.useState([]);
   const [env, setEnv] = reactExports.useState({});
+  const [config, setConfig] = reactExports.useState(() => {
+    const savedConfig = localStorage.getItem(CONFIG_LOCAL_STORAGE_KEY);
+    return savedConfig ? JSON.parse(savedConfig) : DEFAULT_INSPECTOR_CONFIG;
+  });
   const [bearerToken, setBearerToken] = reactExports.useState(() => {
     return localStorage.getItem("lastBearerToken") || "";
   });
   const [pendingSampleRequests, setPendingSampleRequests] = reactExports.useState([]);
   const nextRequestId = reactExports.useRef(0);
   const rootsRef = reactExports.useRef([]);
-  const handleApproveSampling = (id2, result) => {
-    setPendingSampleRequests((prev) => {
-      const request = prev.find((r2) => r2.id === id2);
-      request == null ? void 0 : request.resolve(result);
-      return prev.filter((r2) => r2.id !== id2);
-    });
-  };
-  const handleRejectSampling = (id2) => {
-    setPendingSampleRequests((prev) => {
-      const request = prev.find((r2) => r2.id === id2);
-      request == null ? void 0 : request.reject(new Error("Sampling request rejected"));
-      return prev.filter((r2) => r2.id !== id2);
-    });
-  };
   const [selectedResource, setSelectedResource] = reactExports.useState(
     null
   );
@@ -27473,7 +27738,8 @@ const App = () => {
     sendNotification,
     handleCompletion,
     completionsSupported,
-    connect: connectMcpServer
+    connect: connectMcpServer,
+    disconnect: disconnectMcpServer
   } = useConnection({
     transportType,
     command,
@@ -27482,6 +27748,7 @@ const App = () => {
     env,
     bearerToken,
     proxyServerUrl: PROXY_SERVER_URL,
+    requestTimeout: config.MCP_SERVER_REQUEST_TIMEOUT.value,
     onNotification: (notification) => {
       setNotifications((prev) => [...prev, notification]);
     },
@@ -27514,6 +27781,9 @@ const App = () => {
   reactExports.useEffect(() => {
     localStorage.setItem("lastBearerToken", bearerToken);
   }, [bearerToken]);
+  reactExports.useEffect(() => {
+    localStorage.setItem(CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config));
+  }, [config]);
   reactExports.useEffect(() => {
     const serverUrl = params.get("serverUrl");
     if (serverUrl) {
@@ -27525,7 +27795,7 @@ const App = () => {
       B$2.success("Successfully authenticated with OAuth");
       connectMcpServer();
     }
-  }, []);
+  }, [connectMcpServer]);
   reactExports.useEffect(() => {
     fetch(`${PROXY_SERVER_URL}/config`).then((response) => response.json()).then((data) => {
       setEnv(data.defaultEnvironment);
@@ -27547,6 +27817,20 @@ const App = () => {
       window.location.hash = "resources";
     }
   }, []);
+  const handleApproveSampling = (id2, result) => {
+    setPendingSampleRequests((prev) => {
+      const request = prev.find((r2) => r2.id === id2);
+      request == null ? void 0 : request.resolve(result);
+      return prev.filter((r2) => r2.id !== id2);
+    });
+  };
+  const handleRejectSampling = (id2) => {
+    setPendingSampleRequests((prev) => {
+      const request = prev.find((r2) => r2.id === id2);
+      request == null ? void 0 : request.reject(new Error("Sampling request rejected"));
+      return prev.filter((r2) => r2.id !== id2);
+    });
+  };
   const clearError = (tabKey) => {
     setErrors((prev) => ({ ...prev, [tabKey]: null }));
   };
@@ -27700,6 +27984,12 @@ const App = () => {
     );
     setLogLevel(level);
   };
+  if (window.location.pathname === "/oauth/callback") {
+    const OAuthCallback = React$1.lazy(
+      () => __vitePreload(() => import("./OAuthCallback-DrQsfqzq.js"), true ? [] : void 0)
+    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(OAuthCallback, {}) });
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-screen bg-background", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Sidebar,
@@ -27715,9 +28005,12 @@ const App = () => {
         setSseUrl,
         env,
         setEnv,
+        config,
+        setConfig,
         bearerToken,
         setBearerToken,
         onConnect: connectMcpServer,
+        onDisconnect: disconnectMcpServer,
         stdErrNotifications,
         logLevel,
         sendLogLevelRequest,

package/dist/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/mcp.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MCP Inspector</title>
-    <script type="module" crossorigin src="/assets/index-D7o7JmLV.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Dt6l7sEy.css">
+    <script type="module" crossorigin src="/assets/index-DrNN0pLZ.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BxIjx6su.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -18,14 +18,14 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview",
+    "preview": "vite preview --port 6274",
     "test": "jest --config jest.config.cjs",
     "test:watch": "jest --config jest.config.cjs --watch"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.6.1",
-    "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.3",
@@ -38,7 +38,7 @@
     "cmdk": "^1.0.4",
     "lucide-react": "^0.447.0",
     "pkce-challenge": "^4.1.0",
-    "prismjs": "^1.29.0",
+    "prismjs": "^1.30.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-simple-code-editor": "^0.14.1",
@@ -50,6 +50,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.7.5",
     "@types/react": "^18.3.10",