@modelcontextprotocol/inspector-client 0.16.7 → 0.17.0

package/dist/assets/{index-Dg7mXHRE.js → index-BB0Z_sAV.js}

@@ -7411,8 +7411,8 @@ function getElementRef$1(element) {
   }
   return element.props.ref || element.ref;
 }
-function createCollection(name) {
-  const PROVIDER_NAME2 = name + "CollectionProvider";
+function createCollection(name2) {
+  const PROVIDER_NAME2 = name2 + "CollectionProvider";
   const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME2);
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
     PROVIDER_NAME2,
@@ -7425,7 +7425,7 @@ function createCollection(name) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref2, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME2;
-  const COLLECTION_SLOT_NAME = name + "CollectionSlot";
+  const COLLECTION_SLOT_NAME = name2 + "CollectionSlot";
   const CollectionSlotImpl = /* @__PURE__ */ createSlot(COLLECTION_SLOT_NAME);
   const CollectionSlot = React.forwardRef(
     (props, forwardedRef) => {
@@ -7436,7 +7436,7 @@ function createCollection(name) {
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
-  const ITEM_SLOT_NAME = name + "CollectionItemSlot";
+  const ITEM_SLOT_NAME = name2 + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = /* @__PURE__ */ createSlot(ITEM_SLOT_NAME);
   const CollectionItemSlot = React.forwardRef(
@@ -7454,7 +7454,7 @@ function createCollection(name) {
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection2(scope) {
-    const context = useCollectionContext(name + "CollectionConsumer", scope);
+    const context = useCollectionContext(name2 + "CollectionConsumer", scope);
     const getItems = React.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode) return [];
@@ -7721,17 +7721,17 @@ function dispatchUpdate() {
   const event = new CustomEvent(CONTEXT_UPDATE);
   document.dispatchEvent(event);
 }
-function handleAndDispatchCustomEvent$1(name, handler, detail, { discrete }) {
+function handleAndDispatchCustomEvent$1(name2, handler, detail, { discrete }) {
   const target = detail.originalEvent.target;
-  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
-  if (handler) target.addEventListener(name, handler, { once: true });
+  const event = new CustomEvent(name2, { bubbles: false, cancelable: true, detail });
+  if (handler) target.addEventListener(name2, handler, { once: true });
   if (discrete) {
     dispatchDiscreteCustomEvent(target, event);
   } else {
     target.dispatchEvent(event);
   }
 }
-var Root$5 = DismissableLayer;
+var Root$6 = DismissableLayer;
 var Branch = DismissableLayerBranch;
 var useLayoutEffect2 = (globalThis == null ? void 0 : globalThis.document) ? reactExports.useLayoutEffect : () => {
 };
@@ -7961,10 +7961,10 @@ var VisuallyHidden = reactExports.forwardRef(
   }
 );
 VisuallyHidden.displayName = NAME$2;
-var Root$4 = VisuallyHidden;
+var Root$5 = VisuallyHidden;
 var PROVIDER_NAME$1 = "ToastProvider";
 var [Collection$2, useCollection$2, createCollectionScope$2] = createCollection("Toast");
-var [createToastContext, createToastScope] = createContextScope("Toast", [createCollectionScope$2]);
+var [createToastContext] = createContextScope("Toast", [createCollectionScope$2]);
 var [ToastProviderProvider, useToastProviderContext] = createToastContext(PROVIDER_NAME$1);
 var ToastProvider$1 = (props) => {
   const {
@@ -8323,7 +8323,7 @@ var ToastImpl = reactExports.forwardRef(
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(ToastInteractiveProvider, { scope: __scopeToast, onClose: handleClose, children: reactDomExports.createPortal(
         /* @__PURE__ */ jsxRuntimeExports.jsx(Collection$2.ItemSlot, { scope: __scopeToast, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Root$5,
+          Root$6,
           {
             asChild: true,
             onEscapeKeyDown: composeEventHandlers(onEscapeKeyDown, () => {
@@ -8512,10 +8512,10 @@ function getAnnounceTextContent(container) {
   });
   return textContent;
 }
-function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
+function handleAndDispatchCustomEvent(name2, handler, detail, { discrete }) {
   const currentTarget = detail.originalEvent.currentTarget;
-  const event = new CustomEvent(name, { bubbles: true, cancelable: true, detail });
-  if (handler) currentTarget.addEventListener(name, handler, { once: true });
+  const event = new CustomEvent(name2, { bubbles: true, cancelable: true, detail });
+  if (handler) currentTarget.addEventListener(name2, handler, { once: true });
   if (discrete) {
     dispatchDiscreteCustomEvent(currentTarget, event);
   } else {
@@ -16246,6 +16246,17 @@ objectType({
   token: stringType(),
   token_type_hint: stringType().optional()
 }).strip();
+const name = "@modelcontextprotocol/inspector-client";
+const version$1 = "0.17.0";
+const packageJson = {
+  name,
+  version: version$1
+};
+const CLIENT_IDENTITY = (() => {
+  const [, name2 = packageJson.name] = packageJson.name.split("/");
+  const version2 = packageJson.version;
+  return { name: name2, version: version2 };
+})();
 const SESSION_KEYS = {
   CODE_VERIFIER: "mcp_code_verifier",
   SERVER_URL: "mcp_server_url",
@@ -17013,9 +17024,12 @@ class InspectorOAuthClientProvider {
   get redirectUrl() {
     return window.location.origin + "/oauth/callback";
   }
+  get debugRedirectUrl() {
+    return window.location.origin + "/oauth/callback/debug";
+  }
   get clientMetadata() {
     return {
-      redirect_uris: [this.redirectUrl],
+      redirect_uris: [this.redirectUrl, this.debugRedirectUrl],
       token_endpoint_auth_method: "none",
       grant_types: ["authorization_code", "refresh_token"],
       response_types: ["code"],
@@ -17038,14 +17052,9 @@ class InspectorOAuthClientProvider {
     });
   }
   saveClientInformation(clientInformation) {
-    const safeInfo = Object.fromEntries(
-      Object.entries(clientInformation).filter(
-        ([key]) => key !== "client_secret"
-      )
-    );
     saveClientInformationToSessionStorage({
       serverUrl: this.serverUrl,
-      clientInformation: safeInfo,
+      clientInformation,
       isPreregistered: false
     });
   }
@@ -17098,7 +17107,7 @@ class InspectorOAuthClientProvider {
 }
 class DebugInspectorOAuthClientProvider extends InspectorOAuthClientProvider {
   get redirectUrl() {
-    return `${window.location.origin}/oauth/callback/debug`;
+    return this.debugRedirectUrl;
   }
   saveServerMetadata(metadata) {
     const key = getServerSpecificKey(
@@ -18222,9 +18231,9 @@ function requireUri_all() {
           if (mailtoComponents.subject) headers["subject"] = mailtoComponents.subject;
           if (mailtoComponents.body) headers["body"] = mailtoComponents.body;
           var fields = [];
-          for (var name in headers) {
-            if (headers[name] !== O[name]) {
-              fields.push(name.replace(PCT_ENCODED, decodeUnreserved).replace(PCT_ENCODED, toUpperCase).replace(NOT_HFNAME, pctEncChar) + "=" + headers[name].replace(PCT_ENCODED, decodeUnreserved).replace(PCT_ENCODED, toUpperCase).replace(NOT_HFVALUE, pctEncChar));
+          for (var name2 in headers) {
+            if (headers[name2] !== O[name2]) {
+              fields.push(name2.replace(PCT_ENCODED, decodeUnreserved).replace(PCT_ENCODED, toUpperCase).replace(NOT_HFNAME, pctEncChar) + "=" + headers[name2].replace(PCT_ENCODED, decodeUnreserved).replace(PCT_ENCODED, toUpperCase).replace(NOT_HFVALUE, pctEncChar));
             }
           }
           if (fields.length) {
@@ -23260,9 +23269,9 @@ function requireAjv() {
     }
     return text.slice(0, -separator.length);
   }
-  function addFormat(name, format2) {
+  function addFormat(name2, format2) {
     if (typeof format2 == "string") format2 = new RegExp(format2);
-    this._formats[name] = format2;
+    this._formats[name2] = format2;
     return this;
   }
   function addDefaultMetaSchema(self2) {
@@ -23284,15 +23293,15 @@ function requireAjv() {
     else for (var key in optsSchemas) self2.addSchema(optsSchemas[key], key);
   }
   function addInitialFormats(self2) {
-    for (var name in self2._opts.formats) {
-      var format2 = self2._opts.formats[name];
-      self2.addFormat(name, format2);
+    for (var name2 in self2._opts.formats) {
+      var format2 = self2._opts.formats[name2];
+      self2.addFormat(name2, format2);
     }
   }
   function addInitialKeywords(self2) {
-    for (var name in self2._opts.keywords) {
-      var keyword2 = self2._opts.keywords[name];
-      self2.addKeyword(name, keyword2);
+    for (var name2 in self2._opts.keywords) {
+      var keyword2 = self2._opts.keywords[name2];
+      self2.addKeyword(name2, keyword2);
     }
   }
   function checkUnique(self2, id) {
@@ -23374,9 +23383,9 @@ function generateDefaultValue(schema, propertyName, parentSchema) {
     case "boolean":
       return isRequired ? false : void 0;
     case "array":
-      return [];
+      return isRequired ? [] : void 0;
     case "object": {
-      if (!schema.properties) return {};
+      if (!schema.properties) return isRequired ? {} : void 0;
       const obj = {};
       Object.entries(schema.properties).forEach(([key, prop]) => {
         if (isPropertyRequired(key, schema)) {
@@ -23386,7 +23395,7 @@ function generateDefaultValue(schema, propertyName, parentSchema) {
           }
         }
       });
-      return obj;
+      return isRequired ? obj : Object.keys(obj).length > 0 ? obj : void 0;
     }
     case "null":
       return null;
@@ -23425,6 +23434,21 @@ function normalizeUnionType(schema) {
   }
   return schema;
 }
+function cleanParams(params, schema) {
+  const cleaned = {};
+  const required2 = schema.required || [];
+  for (const [key, value] of Object.entries(params)) {
+    const isFieldRequired = required2.includes(key);
+    if (isFieldRequired) {
+      cleaned[key] = value;
+    } else {
+      if (value !== void 0 && value !== "" && value !== null) {
+        cleaned[key] = value;
+      }
+    }
+  }
+  return cleaned;
+}
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 6e4;
 class Protocol {
   constructor(_options) {
@@ -24905,10 +24929,6 @@ class StreamableHTTPClientTransport {
     return this._protocolVersion;
   }
 }
-const version$1 = "0.16.7";
-const packageJson = {
-  version: version$1
-};
 const getSearchParam = (key) => {
   try {
     const url = new URL(window.location.href);
@@ -25031,11 +25051,11 @@ function useConnection({
   args,
   sseUrl,
   env,
-  bearerToken,
-  headerName,
+  customHeaders,
   oauthClientId,
   oauthScope,
   config,
+  connectionType = "proxy",
   onNotification,
   onPendingRequest,
   onElicitationRequest,
@@ -25051,6 +25071,10 @@ function useConnection({
   );
   const [requestHistory, setRequestHistory] = reactExports.useState([]);
   const [completionsSupported, setCompletionsSupported] = reactExports.useState(false);
+  const [mcpSessionId, setMcpSessionId] = reactExports.useState(null);
+  const [mcpProtocolVersion, setMcpProtocolVersion] = reactExports.useState(
+    null
+  );
   reactExports.useEffect(() => {
     if (!oauthClientId) {
       clearClientInformationFromSessionStorage({
@@ -25230,127 +25254,220 @@ function useConnection({
     }
     return false;
   };
+  const captureResponseHeaders = (response) => {
+    const sessionId = response.headers.get("mcp-session-id");
+    const protocolVersion = response.headers.get("mcp-protocol-version");
+    if (sessionId && sessionId !== mcpSessionId) {
+      setMcpSessionId(sessionId);
+    }
+    if (protocolVersion && protocolVersion !== mcpProtocolVersion) {
+      setMcpProtocolVersion(protocolVersion);
+    }
+  };
   const connect = async (_e2, retryCount = 0) => {
     var _a;
-    const client2 = new Client(
-      {
-        name: "mcp-inspector",
-        version: packageJson.version
-      },
-      {
-        capabilities: {
-          sampling: {},
-          elicitation: {},
-          roots: {
-            listChanged: true
-          }
+    const clientCapabilities = {
+      capabilities: {
+        sampling: {},
+        elicitation: {},
+        roots: {
+          listChanged: true
         }
       }
+    };
+    const client2 = new Client(
+      CLIENT_IDENTITY,
+      clientCapabilities
     );
-    try {
-      await checkProxyHealth();
-    } catch {
-      setConnectionStatus("error-connecting-to-proxy");
-      return;
+    if (connectionType === "proxy") {
+      try {
+        await checkProxyHealth();
+      } catch {
+        setConnectionStatus("error-connecting-to-proxy");
+        return;
+      }
     }
     let lastRequest = "";
     try {
       const headers = {};
       const serverAuthProvider = new InspectorOAuthClientProvider(sseUrl);
-      const token = bearerToken || ((_a = await serverAuthProvider.tokens()) == null ? void 0 : _a.access_token);
-      if (token) {
-        const authHeaderName = headerName || "Authorization";
-        if (authHeaderName.toLowerCase() !== "authorization") {
-          headers[authHeaderName] = token;
-          headers["x-custom-auth-header"] = authHeaderName;
-        } else {
-          headers[authHeaderName] = `Bearer ${token}`;
+      let finalHeaders = customHeaders || [];
+      const isEmptyAuthHeader = (header) => header.name.trim().toLowerCase() === "authorization" && header.value.trim().toLowerCase() === "bearer";
+      const hasEmptyAuthHeader = finalHeaders.some(
+        (header) => header.enabled && isEmptyAuthHeader(header)
+      );
+      if (hasEmptyAuthHeader) {
+        toast2({
+          title: "Invalid Authorization Header",
+          description: "Authorization header is enabled but empty. Please add a token or disable the header.",
+          variant: "destructive"
+        });
+      }
+      const needsOAuthToken = !finalHeaders.some(
+        (header) => header.enabled && header.name.trim().toLowerCase() === "authorization"
+      );
+      if (needsOAuthToken) {
+        const oauthToken = (_a = await serverAuthProvider.tokens()) == null ? void 0 : _a.access_token;
+        if (oauthToken) {
+          finalHeaders = [
+            // Remove any existing Authorization headers with empty tokens
+            ...finalHeaders.filter((header) => !isEmptyAuthHeader(header)),
+            {
+              name: "Authorization",
+              value: `Bearer ${oauthToken}`,
+              enabled: true
+            }
+          ];
         }
       }
-      const { token: proxyAuthToken, header: proxyAuthTokenHeader } = getMCPProxyAuthToken(config);
-      const proxyHeaders = {};
-      if (proxyAuthToken) {
-        proxyHeaders[proxyAuthTokenHeader] = `Bearer ${proxyAuthToken}`;
+      const customHeaderNames = [];
+      finalHeaders.forEach((header) => {
+        if (header.enabled && header.name.trim() && header.value.trim()) {
+          const headerName = header.name.trim();
+          const headerValue = header.value.trim();
+          headers[headerName] = headerValue;
+          if (headerName.toLowerCase() !== "authorization") {
+            customHeaderNames.push(headerName);
+          }
+        }
+      });
+      if (customHeaderNames.length > 0) {
+        headers["x-custom-auth-headers"] = JSON.stringify(customHeaderNames);
       }
       let transportOptions;
-      let mcpProxyServerUrl;
-      switch (transportType) {
-        case "stdio": {
-          mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/stdio`);
-          mcpProxyServerUrl.searchParams.append("command", command);
-          mcpProxyServerUrl.searchParams.append("args", args);
-          mcpProxyServerUrl.searchParams.append("env", JSON.stringify(env));
-          const proxyFullAddress = config.MCP_PROXY_FULL_ADDRESS.value;
-          if (proxyFullAddress) {
-            mcpProxyServerUrl.searchParams.append(
-              "proxyFullAddress",
-              proxyFullAddress
-            );
-          }
-          transportOptions = {
-            authProvider: serverAuthProvider,
-            eventSourceInit: {
-              fetch: (url, init) => fetch(url, {
-                ...init,
+      let serverUrl;
+      if (connectionType === "direct" && transportType !== "stdio") {
+        serverUrl = new URL(sseUrl);
+        const requestHeaders = { ...headers };
+        if (mcpSessionId) {
+          requestHeaders["mcp-session-id"] = mcpSessionId;
+        }
+        switch (transportType) {
+          case "sse":
+            requestHeaders["Accept"] = "text/event-stream";
+            requestHeaders["content-type"] = "application/json";
+            transportOptions = {
+              fetch: async (url, init) => {
+                const response = await fetch(url, {
+                  ...init,
+                  headers: requestHeaders
+                });
+                captureResponseHeaders(response);
+                return response;
+              },
+              requestInit: {
+                headers: requestHeaders
+              }
+            };
+            break;
+          case "streamable-http":
+            transportOptions = {
+              fetch: async (url, init) => {
+                requestHeaders["Accept"] = "text/event-stream, application/json";
+                requestHeaders["Content-Type"] = "application/json";
+                const response = await fetch(url, {
+                  headers: requestHeaders,
+                  ...init
+                });
+                captureResponseHeaders(response);
+                return response;
+              },
+              requestInit: {
+                headers: requestHeaders
+              },
+              // TODO these should be configurable...
+              reconnectionOptions: {
+                maxReconnectionDelay: 3e4,
+                initialReconnectionDelay: 1e3,
+                reconnectionDelayGrowFactor: 1.5,
+                maxRetries: 2
+              }
+            };
+            break;
+        }
+      } else {
+        const { token: proxyAuthToken, header: proxyAuthTokenHeader } = getMCPProxyAuthToken(config);
+        const proxyHeaders = {};
+        if (proxyAuthToken) {
+          proxyHeaders[proxyAuthTokenHeader] = `Bearer ${proxyAuthToken}`;
+        }
+        let mcpProxyServerUrl;
+        switch (transportType) {
+          case "stdio": {
+            mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/stdio`);
+            mcpProxyServerUrl.searchParams.append("command", command);
+            mcpProxyServerUrl.searchParams.append("args", args);
+            mcpProxyServerUrl.searchParams.append("env", JSON.stringify(env));
+            const proxyFullAddress = config.MCP_PROXY_FULL_ADDRESS.value;
+            if (proxyFullAddress) {
+              mcpProxyServerUrl.searchParams.append(
+                "proxyFullAddress",
+                proxyFullAddress
+              );
+            }
+            transportOptions = {
+              authProvider: serverAuthProvider,
+              eventSourceInit: {
+                fetch: (url, init) => fetch(url, {
+                  ...init,
+                  headers: { ...headers, ...proxyHeaders }
+                })
+              },
+              requestInit: {
                 headers: { ...headers, ...proxyHeaders }
-              })
-            },
-            requestInit: {
-              headers: { ...headers, ...proxyHeaders }
+              }
+            };
+            break;
+          }
+          case "sse": {
+            mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`);
+            mcpProxyServerUrl.searchParams.append("url", sseUrl);
+            const proxyFullAddressSSE = config.MCP_PROXY_FULL_ADDRESS.value;
+            if (proxyFullAddressSSE) {
+              mcpProxyServerUrl.searchParams.append(
+                "proxyFullAddress",
+                proxyFullAddressSSE
+              );
             }
-          };
-          break;
-        }
-        case "sse": {
-          mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`);
-          mcpProxyServerUrl.searchParams.append("url", sseUrl);
-          const proxyFullAddressSSE = config.MCP_PROXY_FULL_ADDRESS.value;
-          if (proxyFullAddressSSE) {
-            mcpProxyServerUrl.searchParams.append(
-              "proxyFullAddress",
-              proxyFullAddressSSE
-            );
+            transportOptions = {
+              eventSourceInit: {
+                fetch: (url, init) => fetch(url, {
+                  ...init,
+                  headers: { ...headers, ...proxyHeaders }
+                })
+              },
+              requestInit: {
+                headers: { ...headers, ...proxyHeaders }
+              }
+            };
+            break;
           }
-          transportOptions = {
-            eventSourceInit: {
-              fetch: (url, init) => fetch(url, {
-                ...init,
+          case "streamable-http":
+            mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/mcp`);
+            mcpProxyServerUrl.searchParams.append("url", sseUrl);
+            transportOptions = {
+              eventSourceInit: {
+                fetch: (url, init) => fetch(url, {
+                  ...init,
+                  headers: { ...headers, ...proxyHeaders }
+                })
+              },
+              requestInit: {
                 headers: { ...headers, ...proxyHeaders }
-              })
-            },
-            requestInit: {
-              headers: { ...headers, ...proxyHeaders }
-            }
-          };
-          break;
+              },
+              // TODO these should be configurable...
+              reconnectionOptions: {
+                maxReconnectionDelay: 3e4,
+                initialReconnectionDelay: 1e3,
+                reconnectionDelayGrowFactor: 1.5,
+                maxRetries: 2
+              }
+            };
+            break;
         }
-        case "streamable-http":
-          mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/mcp`);
-          mcpProxyServerUrl.searchParams.append("url", sseUrl);
-          transportOptions = {
-            eventSourceInit: {
-              fetch: (url, init) => fetch(url, {
-                ...init,
-                headers: { ...headers, ...proxyHeaders }
-              })
-            },
-            requestInit: {
-              headers: { ...headers, ...proxyHeaders }
-            },
-            // TODO these should be configurable...
-            reconnectionOptions: {
-              maxReconnectionDelay: 3e4,
-              initialReconnectionDelay: 1e3,
-              reconnectionDelayGrowFactor: 1.5,
-              maxRetries: 2
-            }
-          };
-          break;
+        serverUrl = mcpProxyServerUrl;
+        serverUrl.searchParams.append("transportType", transportType);
       }
-      mcpProxyServerUrl.searchParams.append(
-        "transportType",
-        transportType
-      );
       if (onNotification) {
         [
           CancelledNotificationSchema,
@@ -25369,13 +25486,10 @@ function useConnection({
       }
       let capabilities;
       try {
-        const transport = transportType === "streamable-http" ? new StreamableHTTPClientTransport(mcpProxyServerUrl, {
+        const transport = transportType === "streamable-http" ? new StreamableHTTPClientTransport(serverUrl, {
           sessionId: void 0,
           ...transportOptions
-        }) : new SSEClientTransport(
-          mcpProxyServerUrl,
-          transportOptions
-        );
+        }) : new SSEClientTransport(serverUrl, transportOptions);
         await client2.connect(transport);
         setClientTransport(transport);
         capabilities = client2.getServerCapabilities();
@@ -25389,7 +25503,7 @@ function useConnection({
         });
       } catch (error) {
         console.error(
-          `Failed to connect to MCP Server via the MCP Inspector Proxy: ${mcpProxyServerUrl}:`,
+          connectionType === "direct" ? `Failed to connect directly to MCP Server at: ${serverUrl}:` : `Failed to connect to MCP Server via the MCP Inspector Proxy: ${serverUrl}:`,
           error
         );
         if (isProxyAuthError(error)) {
@@ -25470,6 +25584,8 @@ function useConnection({
     setConnectionStatus("disconnected");
     setCompletionsSupported(false);
     setServerCapabilities(null);
+    setMcpSessionId(null);
+    setMcpProtocolVersion(null);
   };
   const clearRequestHistory = () => {
     setRequestHistory([]);
@@ -25801,10 +25917,10 @@ function focusFirst$1(candidates, preventScroll = false) {
 function wrapArray$1(array, startIndex) {
   return array.map((_, index2) => array[(startIndex + index2) % array.length]);
 }
-var Root$3 = RovingFocusGroup;
+var Root$4 = RovingFocusGroup;
 var Item$1 = RovingFocusGroupItem;
 var TABS_NAME = "Tabs";
-var [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [
+var [createTabsContext] = createContextScope(TABS_NAME, [
   createRovingFocusGroupScope
 ]);
 var useRovingFocusGroupScope = createRovingFocusGroupScope();
@@ -25859,7 +25975,7 @@ var TabsList$1 = reactExports.forwardRef(
     const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
     const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Root$3,
+      Root$4,
       {
         asChild: true,
         ...rovingFocusGroupScope,
@@ -26158,7 +26274,7 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$x = [
+const __iconNode$z = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   [
     "path",
@@ -26168,14 +26284,14 @@ const __iconNode$x = [
     }
   ]
 ];
-const Bell = createLucideIcon("bell", __iconNode$x);
+const Bell = createLucideIcon("bell", __iconNode$z);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$w = [
+const __iconNode$y = [
   ["path", { d: "m8 2 1.88 1.88", key: "fmnt4t" }],
   ["path", { d: "M14.12 3.88 16 2", key: "qol33r" }],
   ["path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1", key: "d7y7pr" }],
@@ -26194,134 +26310,134 @@ const __iconNode$w = [
   ["path", { d: "M22 13h-4", key: "1jl80f" }],
   ["path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4", key: "k3fwyw" }]
 ];
-const Bug = createLucideIcon("bug", __iconNode$w);
+const Bug = createLucideIcon("bug", __iconNode$y);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$v = [
+const __iconNode$x = [
   ["path", { d: "M18 6 7 17l-5-5", key: "116fxf" }],
   ["path", { d: "m22 10-7.5 7.5L13 16", key: "ke71qq" }]
 ];
-const CheckCheck = createLucideIcon("check-check", __iconNode$v);
+const CheckCheck = createLucideIcon("check-check", __iconNode$x);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$u = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$u);
+const __iconNode$w = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$w);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$t = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$t);
+const __iconNode$v = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$v);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$s = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$s);
+const __iconNode$u = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$u);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$r = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$r);
+const __iconNode$t = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$t);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$q = [
+const __iconNode$s = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$q);
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$s);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$p = [
+const __iconNode$r = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$p);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$r);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$o = [
+const __iconNode$q = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$o);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$q);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$n = [
+const __iconNode$p = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$n);
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$p);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$m = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
-const Circle = createLucideIcon("circle", __iconNode$m);
+const __iconNode$o = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+const Circle = createLucideIcon("circle", __iconNode$o);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$l = [
+const __iconNode$n = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const Copy = createLucideIcon("copy", __iconNode$l);
+const Copy = createLucideIcon("copy", __iconNode$n);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$k = [
+const __iconNode$m = [
   ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
   ["path", { d: "M10 14 21 3", key: "gplh6r" }],
   ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
 ];
-const ExternalLink = createLucideIcon("external-link", __iconNode$k);
+const ExternalLink = createLucideIcon("external-link", __iconNode$m);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [
+const __iconNode$l = [
   [
     "path",
     {
@@ -26339,14 +26455,14 @@ const __iconNode$j = [
   ],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }]
 ];
-const EyeOff = createLucideIcon("eye-off", __iconNode$j);
+const EyeOff = createLucideIcon("eye-off", __iconNode$l);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [
+const __iconNode$k = [
   [
     "path",
     {
@@ -26356,40 +26472,40 @@ const __iconNode$i = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-const Eye = createLucideIcon("eye", __iconNode$i);
+const Eye = createLucideIcon("eye", __iconNode$k);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [
+const __iconNode$j = [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["path", { d: "M10 9H8", key: "b1mrlr" }],
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText = createLucideIcon("file-text", __iconNode$h);
+const FileText = createLucideIcon("file-text", __iconNode$j);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [
+const __iconNode$i = [
   ["path", { d: "M20 7h-3a2 2 0 0 1-2-2V2", key: "x099mo" }],
   ["path", { d: "M9 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h7l4 4v10a2 2 0 0 1-2 2Z", key: "18t6ie" }],
   ["path", { d: "M3 7.6v12.8A1.6 1.6 0 0 0 4.6 22h9.8", key: "1nja0z" }]
 ];
-const Files = createLucideIcon("files", __iconNode$g);
+const Files = createLucideIcon("files", __iconNode$i);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$f = [
+const __iconNode$h = [
   [
     "path",
     {
@@ -26407,14 +26523,14 @@ const __iconNode$f = [
   ["path", { d: "M3 5a2 2 0 0 0 2 2h3", key: "f2jnh7" }],
   ["path", { d: "M3 3v13a2 2 0 0 0 2 2h3", key: "k8epm1" }]
 ];
-const FolderTree = createLucideIcon("folder-tree", __iconNode$f);
+const FolderTree = createLucideIcon("folder-tree", __iconNode$h);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$e = [
+const __iconNode$g = [
   [
     "path",
     {
@@ -26424,14 +26540,14 @@ const __iconNode$e = [
   ],
   ["path", { d: "M9 18c-4.51 2-5-2-7-2", key: "9comsn" }]
 ];
-const Github = createLucideIcon("github", __iconNode$e);
+const Github = createLucideIcon("github", __iconNode$g);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$d = [
+const __iconNode$f = [
   ["path", { d: "m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9", key: "eefl8a" }],
   ["path", { d: "m18 15 4-4", key: "16gjal" }],
   [
@@ -26442,84 +26558,84 @@ const __iconNode$d = [
     }
   ]
 ];
-const Hammer = createLucideIcon("hammer", __iconNode$d);
+const Hammer = createLucideIcon("hammer", __iconNode$f);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$c = [
+const __iconNode$e = [
   ["line", { x1: "4", x2: "20", y1: "9", y2: "9", key: "4lhtct" }],
   ["line", { x1: "4", x2: "20", y1: "15", y2: "15", key: "vyu0kd" }],
   ["line", { x1: "10", x2: "8", y1: "3", y2: "21", key: "1ggp8o" }],
   ["line", { x1: "16", x2: "14", y1: "3", y2: "21", key: "weycgp" }]
 ];
-const Hash = createLucideIcon("hash", __iconNode$c);
+const Hash = createLucideIcon("hash", __iconNode$e);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$b = [
+const __iconNode$d = [
   ["path", { d: "m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4", key: "g0fldk" }],
   ["path", { d: "m21 2-9.6 9.6", key: "1j0ho8" }],
   ["circle", { cx: "7.5", cy: "15.5", r: "5.5", key: "yqb3hr" }]
 ];
-const Key = createLucideIcon("key", __iconNode$b);
+const Key = createLucideIcon("key", __iconNode$d);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$a = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$a);
+const __iconNode$c = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$c);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [
+const __iconNode$b = [
   ["path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z", key: "1lielz" }]
 ];
-const MessageSquare = createLucideIcon("message-square", __iconNode$9);
+const MessageSquare = createLucideIcon("message-square", __iconNode$b);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$8 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-const Minus = createLucideIcon("minus", __iconNode$8);
+const __iconNode$a = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$a);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$7 = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
-const Play = createLucideIcon("play", __iconNode$7);
+const __iconNode$9 = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
+const Play = createLucideIcon("play", __iconNode$9);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [
+const __iconNode$8 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$6);
+const Plus = createLucideIcon("plus", __iconNode$8);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$5 = [
+const __iconNode$7 = [
   ["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" }],
@@ -26528,38 +26644,38 @@ const __iconNode$5 = [
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
   ["path", { d: "M22 22 2 2", key: "1r8tn9" }]
 ];
-const RefreshCwOff = createLucideIcon("refresh-cw-off", __iconNode$5);
+const RefreshCwOff = createLucideIcon("refresh-cw-off", __iconNode$7);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$4 = [
+const __iconNode$6 = [
   ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
   ["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" }]
 ];
-const RefreshCw = createLucideIcon("refresh-cw", __iconNode$4);
+const RefreshCw = createLucideIcon("refresh-cw", __iconNode$6);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$3 = [
+const __iconNode$5 = [
   ["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" }]
 ];
-const RotateCcw = createLucideIcon("rotate-ccw", __iconNode$3);
+const RotateCcw = createLucideIcon("rotate-ccw", __iconNode$5);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$2 = [
+const __iconNode$4 = [
   [
     "path",
     {
@@ -26570,14 +26686,25 @@ const __iconNode$2 = [
   ["path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7", key: "1ydtos" }],
   ["path", { d: "M7 3v4a1 1 0 0 0 1 1h7", key: "t51u73" }]
 ];
-const Save = createLucideIcon("save", __iconNode$2);
+const Save = createLucideIcon("save", __iconNode$4);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$1 = [
+const __iconNode$3 = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+];
+const Search = createLucideIcon("search", __iconNode$3);
+/**
+ * @license lucide-react v0.523.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$2 = [
   [
     "path",
     {
@@ -26587,14 +26714,14 @@ const __iconNode$1 = [
   ],
   ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
 ];
-const Send = createLucideIcon("send", __iconNode$1);
+const Send = createLucideIcon("send", __iconNode$2);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode = [
+const __iconNode$1 = [
   [
     "path",
     {
@@ -26604,7 +26731,21 @@ const __iconNode = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-const Settings = createLucideIcon("settings", __iconNode);
+const Settings = createLucideIcon("settings", __iconNode$1);
+/**
+ * @license lucide-react v0.523.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode = [
+  ["path", { d: "M3 6h18", key: "d0wm0j" }],
+  ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
+  ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }],
+  ["line", { x1: "10", x2: "10", y1: "11", y2: "17", key: "1uufr5" }],
+  ["line", { x1: "14", x2: "14", y1: "11", y2: "17", key: "xtxkd" }]
+];
+const Trash2 = createLucideIcon("trash-2", __iconNode);
 const OAuthStepDetails = ({
   label,
   isComplete,
@@ -27214,30 +27355,34 @@ function updateObject(obj, path, value) {
   }
   return newObj;
 }
+function useCopy({ timeout = 500 } = {}) {
+  const [copied, setCopied] = reactExports.useState(false);
+  reactExports.useEffect(() => {
+    let timeoutId;
+    if (copied) {
+      timeoutId = setTimeout(() => {
+        setCopied(false);
+      }, timeout);
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [copied]);
+  return { copied, setCopied };
+}
 const JsonView = reactExports.memo(
   ({
     data: data2,
-    name,
+    name: name2,
     initialExpandDepth = 3,
     className,
     withCopyButton = true,
     isError = false
   }) => {
     const { toast: toast2 } = useToast();
-    const [copied, setCopied] = reactExports.useState(false);
-    reactExports.useEffect(() => {
-      let timeoutId;
-      if (copied) {
-        timeoutId = setTimeout(() => {
-          setCopied(false);
-        }, 500);
-      }
-      return () => {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-      };
-    }, [copied]);
+    const { copied, setCopied } = useCopy();
     const normalizedData = reactExports.useMemo(() => {
       return typeof data2 === "string" ? tryParseJson(data2).success ? tryParseJson(data2).data : data2 : data2;
     }, [data2]);
@@ -27270,7 +27415,7 @@ const JsonView = reactExports.memo(
         JsonNode,
         {
           data: normalizedData,
-          name,
+          name: name2,
           depth: 0,
           initialExpandDepth,
           isError
@@ -27283,7 +27428,7 @@ JsonView.displayName = "JsonView";
 const JsonNode = reactExports.memo(
   ({
     data: data2,
-    name,
+    name: name2,
     depth = 0,
     initialExpandDepth,
     isError = false
@@ -27311,8 +27456,8 @@ const JsonNode = reactExports.memo(
       };
       if (isEmpty) {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
-          name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
-            name,
+          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 })
@@ -27325,8 +27470,8 @@ const JsonNode = reactExports.memo(
             className: "flex items-center mr-1 rounded cursor-pointer group hover:bg-gray-800/10 dark:hover:bg-gray-800/20",
             onClick: () => setIsExpanded(!isExpanded),
             children: [
-              name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: [
-                name,
+              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: [
@@ -27367,8 +27512,8 @@ const JsonNode = reactExports.memo(
       const isTooLong = value.length > maxLength;
       if (!isTooLong) {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex mr-1 rounded hover:bg-gray-800/20", children: [
-          name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
-            name,
+          name2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
+            name2,
             ":"
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -27388,8 +27533,8 @@ const JsonNode = reactExports.memo(
         ] });
       }
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex mr-1 rounded group hover:bg-gray-800/20", children: [
-        name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: [
-          name,
+        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(
@@ -27414,8 +27559,8 @@ const JsonNode = reactExports.memo(
         return renderString(data2);
       default:
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center mr-1 rounded hover:bg-gray-800/20", children: [
-          name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
-            name,
+          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: data2 === null ? "null" : String(data2) })
@@ -28439,8 +28584,8 @@ function RemoveScrollSideCar(props) {
       }
     }
   }, []);
-  var shouldCancel = reactExports.useCallback(function(name, delta, target, should) {
-    var event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
+  var shouldCancel = reactExports.useCallback(function(name2, delta, target, should) {
+    var event = { name: name2, delta, target, should, shadowParent: getOutermostShadowParent(target) };
     shouldPreventQueue.current.push(event);
     setTimeout(function() {
       shouldPreventQueue.current = shouldPreventQueue.current.filter(function(e) {
@@ -28621,7 +28766,7 @@ var hideOthers = function(originalTarget, parentNode, markerName) {
   return applyAttributeToOthers(targets, activeParentNode, markerName, "aria-hidden");
 };
 var DIALOG_NAME = "Dialog";
-var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
+var [createDialogContext] = createContextScope(DIALOG_NAME);
 var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
 var Dialog = (props) => {
   const {
@@ -28671,7 +28816,7 @@ var DialogTrigger = reactExports.forwardRef(
         "aria-haspopup": "dialog",
         "aria-expanded": context.open,
         "aria-controls": context.contentId,
-        "data-state": getState$2(context.open),
+        "data-state": getState$3(context.open),
         ...triggerProps,
         ref: composedTriggerRef,
         onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
@@ -28711,7 +28856,7 @@ var DialogOverlayImpl = reactExports.forwardRef(
       /* @__PURE__ */ jsxRuntimeExports.jsx(ReactRemoveScroll, { as: Slot$2, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Primitive.div,
         {
-          "data-state": getState$2(context.open),
+          "data-state": getState$3(context.open),
           ...overlayProps,
           ref: forwardedRef,
           style: { pointerEvents: "auto", ...overlayProps.style }
@@ -28830,7 +28975,7 @@ var DialogContentImpl = reactExports.forwardRef(
               id: context.contentId,
               "aria-describedby": context.descriptionId,
               "aria-labelledby": context.titleId,
-              "data-state": getState$2(context.open),
+              "data-state": getState$3(context.open),
               ...contentProps,
               ref: composedRefs,
               onDismiss: () => context.onOpenChange(false)
@@ -28880,7 +29025,7 @@ var DialogClose = reactExports.forwardRef(
   }
 );
 DialogClose.displayName = CLOSE_NAME$1;
-function getState$2(open) {
+function getState$3(open) {
   return open ? "open" : "closed";
 }
 var TITLE_WARNING_NAME = "DialogTitleWarning";
@@ -28918,7 +29063,7 @@ var DescriptionWarning = ({ contentRef, descriptionId }) => {
   }, [MESSAGE, contentRef, descriptionId]);
   return null;
 };
-var Root$2 = Dialog;
+var Root$3 = Dialog;
 var Portal$2 = DialogPortal$1;
 var Overlay = DialogOverlay$1;
 var Content$1 = DialogContent$1;
@@ -29153,7 +29298,7 @@ var N = '[cmdk-group=""]', Y = '[cmdk-group-items=""]', be = '[cmdk-group-headin
   }, []), reactExports.createElement(Primitive.div, { ref: composeRefs(d, o), ...c, "cmdk-list": "", role: "listbox", tabIndex: -1, "aria-activedescendant": p2, "aria-label": u2, id: b.listId }, B(r2, (m2) => reactExports.createElement("div", { ref: composeRefs(f, b.listInnerRef), "cmdk-list-sizer": "" }, m2)));
 }), xe = reactExports.forwardRef((r2, o) => {
   let { open: n, onOpenChange: u2, overlayClassName: c, contentClassName: d, container: f, ...p2 } = r2;
-  return reactExports.createElement(Root$2, { open: n, onOpenChange: u2 }, reactExports.createElement(Portal$2, { container: f }, reactExports.createElement(Overlay, { "cmdk-overlay": "", className: c }), reactExports.createElement(Content$1, { "aria-label": r2.label, "cmdk-dialog": "", className: d }, reactExports.createElement(me, { ref: o, ...p2 }))));
+  return reactExports.createElement(Root$3, { open: n, onOpenChange: u2 }, reactExports.createElement(Portal$2, { container: f }, reactExports.createElement(Overlay, { "cmdk-overlay": "", className: c }), reactExports.createElement(Content$1, { "aria-label": r2.label, "cmdk-dialog": "", className: d }, reactExports.createElement(me, { ref: o, ...p2 }))));
 }), Ie = reactExports.forwardRef((r2, o) => P((u2) => u2.filtered.count === 0) ? reactExports.createElement(Primitive.div, { ref: o, ...r2, "cmdk-empty": "", role: "presentation" }) : null), Pe = reactExports.forwardRef((r2, o) => {
   let { progress: n, children: u2, label: c = "Loading...", ...d } = r2;
   return reactExports.createElement(Primitive.div, { ref: o, ...d, "cmdk-loading": "", role: "progressbar", "aria-valuenow": n, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": c }, B(r2, (f) => reactExports.createElement("div", { "aria-hidden": true }, f)));
@@ -29559,7 +29704,7 @@ const computePosition$1 = async (reference, floating, config) => {
   let resetCount = 0;
   for (let i = 0; i < validMiddleware.length; i++) {
     const {
-      name,
+      name: name2,
       fn
     } = validMiddleware[i];
     const {
@@ -29585,8 +29730,8 @@ const computePosition$1 = async (reference, floating, config) => {
     y = nextY != null ? nextY : y;
     middlewareData = {
       ...middlewareData,
-      [name]: {
-        ...middlewareData[name],
+      [name2]: {
+        ...middlewareData[name2],
         ...data2
       }
     };
@@ -31245,7 +31390,7 @@ var Arrow$1 = reactExports.forwardRef((props, forwardedRef) => {
   );
 });
 Arrow$1.displayName = NAME$1;
-var Root$1 = Arrow$1;
+var Root$2 = Arrow$1;
 function useSize(element) {
   const [size2, setSize] = reactExports.useState(void 0);
   useLayoutEffect2(() => {
@@ -31492,7 +31637,7 @@ var PopperArrow = reactExports.forwardRef(function PopperArrow2(props, forwarded
           visibility: contentContext.shouldHideArrow ? "hidden" : void 0
         },
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Root$1,
+          Root$2,
           {
             ...arrowProps,
             ref: forwardedRef,
@@ -31552,7 +31697,7 @@ var Anchor = PopperAnchor;
 var Content = PopperContent;
 var Arrow = PopperArrow;
 var POPOVER_NAME = "Popover";
-var [createPopoverContext, createPopoverScope] = createContextScope(POPOVER_NAME, [
+var [createPopoverContext] = createContextScope(POPOVER_NAME, [
   createPopperScope
 ]);
 var usePopperScope$2 = createPopperScope();
@@ -31622,7 +31767,7 @@ var PopoverTrigger$1 = reactExports.forwardRef(
         "aria-haspopup": "dialog",
         "aria-expanded": context.open,
         "aria-controls": context.contentId,
-        "data-state": getState$1(context.open),
+        "data-state": getState$2(context.open),
         ...triggerProps,
         ref: composedTriggerRef,
         onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
@@ -31774,7 +31919,7 @@ var PopoverContentImpl = reactExports.forwardRef(
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               Content,
               {
-                "data-state": getState$1(context.open),
+                "data-state": getState$2(context.open),
                 role: "dialog",
                 id: context.contentId,
                 ...popperScope,
@@ -31825,7 +31970,7 @@ var PopoverArrow = reactExports.forwardRef(
   }
 );
 PopoverArrow.displayName = ARROW_NAME$2;
-function getState$1(open) {
+function getState$2(open) {
   return open ? "open" : "closed";
 }
 var Root2$1 = Popover$1;
@@ -31937,19 +32082,36 @@ var Label$2 = reactExports.forwardRef((props, forwardedRef) => {
   );
 });
 Label$2.displayName = NAME;
-var Root = Label$2;
+var Root$1 = Label$2;
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
 const Label$1 = reactExports.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Root,
+  Root$1,
   {
     ref: ref2,
     className: cn(labelVariants(), className),
     ...props
   }
 ));
-Label$1.displayName = Root.displayName;
+Label$1.displayName = Root$1.displayName;
+const Input = reactExports.forwardRef(
+  ({ className, type: type2, ...props }, ref2) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        type: type2,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref: ref2,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
 const ListPane = ({
   items: items2,
   listItems,
@@ -31959,40 +32121,101 @@ const ListPane = ({
   title: title2,
   buttonText,
   isButtonDisabled
-}) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card border border-border rounded-lg shadow", children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold dark:text-white", children: title2 }) }),
-  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Button,
-      {
-        variant: "outline",
-        className: "w-full mb-4",
-        onClick: listItems,
-        disabled: isButtonDisabled,
-        children: buttonText
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Button,
-      {
-        variant: "outline",
-        className: "w-full mb-4",
-        onClick: clearItems,
-        disabled: items2.length === 0,
-        children: "Clear"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 overflow-y-auto max-h-96", children: items2.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        className: "flex items-center py-2 px-4 rounded hover:bg-gray-50 dark:hover:bg-secondary cursor-pointer",
-        onClick: () => setSelectedItem(item),
-        children: renderItem(item)
-      },
-      index2
-    )) })
-  ] })
-] });
+}) => {
+  const [searchQuery, setSearchQuery] = reactExports.useState("");
+  const [isSearchExpanded, setIsSearchExpanded] = reactExports.useState(false);
+  const searchInputRef = reactExports.useRef(null);
+  const filteredItems = reactExports.useMemo(() => {
+    if (!searchQuery.trim()) return items2;
+    return items2.filter((item) => {
+      const searchableText = [
+        item.name || "",
+        item.description || ""
+      ].join(" ").toLowerCase();
+      return searchableText.includes(searchQuery.toLowerCase());
+    });
+  }, [items2, searchQuery]);
+  const handleSearchClick = () => {
+    setIsSearchExpanded(true);
+    setTimeout(() => {
+      var _a;
+      (_a = searchInputRef.current) == null ? void 0 : _a.focus();
+    }, 100);
+  };
+  const handleSearchBlur = () => {
+    if (!searchQuery.trim()) {
+      setIsSearchExpanded(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card border border-border rounded-lg shadow", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold dark:text-white flex-shrink-0", children: title2 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-end min-w-0 flex-1", children: !isSearchExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          name: "search",
+          "aria-label": "Search",
+          onClick: handleSearchClick,
+          className: "p-2 hover:bg-gray-100 dark:hover:bg-secondary rounded-md transition-all duration-300 ease-in-out",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "w-4 h-4 text-muted-foreground" })
+        }
+      ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center w-full max-w-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none z-10" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Input,
+          {
+            ref: searchInputRef,
+            name: "search",
+            type: "text",
+            placeholder: "Search...",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            onBlur: handleSearchBlur,
+            className: "pl-10 w-full transition-all duration-300 ease-in-out"
+          }
+        )
+      ] }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          variant: "outline",
+          className: "w-full mb-4",
+          onClick: listItems,
+          disabled: isButtonDisabled,
+          children: buttonText
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          variant: "outline",
+          className: "w-full mb-4",
+          onClick: clearItems,
+          disabled: items2.length === 0,
+          children: "Clear"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 overflow-y-auto max-h-96", children: [
+        filteredItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "flex items-center py-2 px-4 rounded hover:bg-gray-50 dark:hover:bg-secondary cursor-pointer",
+            onClick: () => setSelectedItem(item),
+            children: renderItem(item)
+          },
+          index2
+        )),
+        filteredItems.length === 0 && searchQuery && items2.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-4 text-muted-foreground", children: [
+          'No items found matching "',
+          searchQuery,
+          '"'
+        ] })
+      ] })
+    ] })
+  ] });
+};
 function debounce(func, wait) {
   let timeout;
   return (...args) => {
@@ -32228,11 +32451,11 @@ class UriTemplate {
         const operator = this.getOperator(expr);
         const exploded = expr.includes("*");
         const names = this.getNames(expr);
-        const name = names[0];
-        for (const name2 of names) {
-          UriTemplate.validateLength(name2, MAX_VARIABLE_LENGTH, "Variable name");
+        const name2 = names[0];
+        for (const name3 of names) {
+          UriTemplate.validateLength(name3, MAX_VARIABLE_LENGTH, "Variable name");
         }
-        parts.push({ name, operator, names, exploded });
+        parts.push({ name: name2, operator, names, exploded });
         i = end + 1;
       } else {
         currentText += template[i];
@@ -32250,7 +32473,7 @@ class UriTemplate {
   }
   getNames(expr) {
     const operator = this.getOperator(expr);
-    return expr.slice(operator.length).split(",").map((name) => name.replace("*", "").trim()).filter((name) => name.length > 0);
+    return expr.slice(operator.length).split(",").map((name2) => name2.replace("*", "").trim()).filter((name2) => name2.length > 0);
   }
   encodeValue(value, operator) {
     UriTemplate.validateLength(value, MAX_VARIABLE_LENGTH, "Variable value");
@@ -32261,12 +32484,12 @@ class UriTemplate {
   }
   expandPart(part, variables) {
     if (part.operator === "?" || part.operator === "&") {
-      const pairs = part.names.map((name) => {
-        const value2 = variables[name];
+      const pairs = part.names.map((name2) => {
+        const value2 = variables[name2];
         if (value2 === void 0)
           return "";
         const encoded2 = Array.isArray(value2) ? value2.map((v) => this.encodeValue(v, part.operator)).join(",") : this.encodeValue(value2.toString(), part.operator);
-        return `${name}=${encoded2}`;
+        return `${name2}=${encoded2}`;
       }).filter((pair) => pair.length > 0);
       if (pairs.length === 0)
         return "";
@@ -32274,7 +32497,7 @@ class UriTemplate {
       return separator + pairs.join("&");
     }
     if (part.names.length > 1) {
-      const values2 = part.names.map((name) => variables[name]).filter((v) => v !== void 0);
+      const values2 = part.names.map((name2) => variables[name2]).filter((v) => v !== void 0);
       if (values2.length === 0)
         return "";
       return values2.map((v) => Array.isArray(v) ? v[0] : v).join(",");
@@ -32326,22 +32549,22 @@ class UriTemplate {
   }
   partToRegExp(part) {
     const patterns = [];
-    for (const name2 of part.names) {
-      UriTemplate.validateLength(name2, MAX_VARIABLE_LENGTH, "Variable name");
+    for (const name3 of part.names) {
+      UriTemplate.validateLength(name3, MAX_VARIABLE_LENGTH, "Variable name");
     }
     if (part.operator === "?" || part.operator === "&") {
       for (let i = 0; i < part.names.length; i++) {
-        const name2 = part.names[i];
+        const name3 = part.names[i];
         const prefix = i === 0 ? "\\" + part.operator : "&";
         patterns.push({
-          pattern: prefix + this.escapeRegExp(name2) + "=([^&]+)",
-          name: name2
+          pattern: prefix + this.escapeRegExp(name3) + "=([^&]+)",
+          name: name3
         });
       }
       return patterns;
     }
     let pattern2;
-    const name = part.name;
+    const name2 = part.name;
     switch (part.operator) {
       case "":
         pattern2 = part.exploded ? "([^/]+(?:,[^/]+)*)" : "([^/,]+)";
@@ -32359,7 +32582,7 @@ class UriTemplate {
       default:
         pattern2 = "([^/]+)";
     }
-    patterns.push({ pattern: pattern2, name });
+    patterns.push({ pattern: pattern2, name: name2 });
     return patterns;
   }
   match(uri) {
@@ -32371,9 +32594,9 @@ class UriTemplate {
         pattern2 += this.escapeRegExp(part);
       } else {
         const patterns = this.partToRegExp(part);
-        for (const { pattern: partPattern, name } of patterns) {
+        for (const { pattern: partPattern, name: name2 } of patterns) {
           pattern2 += partPattern;
-          names.push({ name, exploded: part.exploded });
+          names.push({ name: name2, exploded: part.exploded });
         }
       }
     }
@@ -32385,9 +32608,9 @@ class UriTemplate {
       return null;
     const result = {};
     for (let i = 0; i < names.length; i++) {
-      const { name, exploded } = names[i];
+      const { name: name2, exploded } = names[i];
       const value = match[i + 1];
-      const cleanName = name.replace("*", "");
+      const cleanName = name2.replace("*", "");
       if (exploded && value.includes(",")) {
         result[cleanName] = value.split(",");
       } else {
@@ -32590,23 +32813,6 @@ const ResourcesTab = ({
     ] })
   ] }) });
 };
-const Input = reactExports.forwardRef(
-  ({ className, type: type2, ...props }, ref2) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "input",
-      {
-        type: type2,
-        className: cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ref: ref2,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
 const RootsTab = ({
   roots,
   setRoots,
@@ -32735,7 +32941,7 @@ function requireLib() {
     "\n/**\n * Reset the text fill color so that placeholder is visible\n */\n.".concat(className, ":empty {\n  -webkit-text-fill-color: inherit !important;\n}\n\n/**\n * Hack to apply on some CSS on IE10 and IE11\n */\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n  /**\n    * IE doesn't support '-webkit-text-fill-color'\n    * So we use 'color: transparent' to make the text transparent on IE\n    * Unlike other browsers, it doesn't affect caret color in IE\n    */\n  .").concat(className, " {\n    color: transparent !important;\n  }\n\n  .").concat(className, "::selection {\n    background-color: #accef7 !important;\n    color: transparent !important;\n  }\n}\n")
   );
   var Editor2 = React2.forwardRef(function Editor3(props, ref2) {
-    var autoFocus = props.autoFocus, disabled = props.disabled, form = props.form, highlight = props.highlight, _a = props.ignoreTabKey, ignoreTabKey = _a === void 0 ? false : _a, _b = props.insertSpaces, insertSpaces = _b === void 0 ? true : _b, maxLength = props.maxLength, minLength = props.minLength, name = props.name, onBlur = props.onBlur, onClick = props.onClick, onFocus = props.onFocus, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, onValueChange = props.onValueChange, _c = props.padding, padding = _c === void 0 ? 0 : _c, placeholder = props.placeholder, preClassName = props.preClassName, readOnly = props.readOnly, required2 = props.required, style = props.style, _d = props.tabSize, tabSize = _d === void 0 ? 2 : _d, textareaClassName = props.textareaClassName, textareaId = props.textareaId, value = props.value, rest = __rest2(props, ["autoFocus", "disabled", "form", "highlight", "ignoreTabKey", "insertSpaces", "maxLength", "minLength", "name", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onValueChange", "padding", "placeholder", "preClassName", "readOnly", "required", "style", "tabSize", "textareaClassName", "textareaId", "value"]);
+    var autoFocus = props.autoFocus, disabled = props.disabled, form = props.form, highlight = props.highlight, _a = props.ignoreTabKey, ignoreTabKey = _a === void 0 ? false : _a, _b = props.insertSpaces, insertSpaces = _b === void 0 ? true : _b, maxLength = props.maxLength, minLength = props.minLength, name2 = props.name, onBlur = props.onBlur, onClick = props.onClick, onFocus = props.onFocus, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, onValueChange = props.onValueChange, _c = props.padding, padding = _c === void 0 ? 0 : _c, placeholder = props.placeholder, preClassName = props.preClassName, readOnly = props.readOnly, required2 = props.required, style = props.style, _d = props.tabSize, tabSize = _d === void 0 ? 2 : _d, textareaClassName = props.textareaClassName, textareaId = props.textareaId, value = props.value, rest = __rest2(props, ["autoFocus", "disabled", "form", "highlight", "ignoreTabKey", "insertSpaces", "maxLength", "minLength", "name", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onValueChange", "padding", "placeholder", "preClassName", "readOnly", "required", "style", "tabSize", "textareaClassName", "textareaId", "value"]);
     var historyRef = React2.useRef({
       stack: [],
       offset: -1
@@ -33008,7 +33214,7 @@ function requireLib() {
       React2.createElement("pre", __assign2({ className: preClassName, "aria-hidden": "true", style: __assign2(__assign2(__assign2({}, styles.editor), styles.highlight), contentStyle) }, typeof highlighted === "string" ? { dangerouslySetInnerHTML: { __html: highlighted + "<br />" } } : { children: highlighted })),
       React2.createElement("textarea", { ref: function(c) {
         return inputRef.current = c;
-      }, style: __assign2(__assign2(__assign2({}, styles.editor), styles.textarea), contentStyle), className: className + (textareaClassName ? " ".concat(textareaClassName) : ""), id: textareaId, value, onChange: handleChange, onKeyDown: handleKeyDown, onClick, onKeyUp, onFocus, onBlur, disabled, form, maxLength, minLength, name, placeholder, readOnly, required: required2, autoFocus, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", spellCheck: false, "data-gramm": false }),
+      }, style: __assign2(__assign2(__assign2({}, styles.editor), styles.textarea), contentStyle), className: className + (textareaClassName ? " ".concat(textareaClassName) : ""), id: textareaId, value, onChange: handleChange, onKeyDown: handleKeyDown, onClick, onKeyUp, onFocus, onBlur, disabled, form, maxLength, minLength, name: name2, placeholder, readOnly, required: required2, autoFocus, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", spellCheck: false, "data-gramm": false }),
       React2.createElement("style", { dangerouslySetInnerHTML: { __html: cssText } })
     );
   });
@@ -33712,10 +33918,10 @@ function requirePrism() {
            * @param {HookCallback} callback The callback function which is given environment variables.
            * @public
            */
-          add: function(name, callback) {
+          add: function(name2, callback) {
             var hooks = _.hooks.all;
-            hooks[name] = hooks[name] || [];
-            hooks[name].push(callback);
+            hooks[name2] = hooks[name2] || [];
+            hooks[name2].push(callback);
           },
           /**
            * Runs a hook invoking all registered callbacks with the given environment variables.
@@ -33726,8 +33932,8 @@ function requirePrism() {
            * @param {Object<string, any>} env The environment variables of the hook passed to all callbacks registered.
            * @public
            */
-          run: function(name, env) {
-            var callbacks = _.hooks.all[name];
+          run: function(name2, env) {
+            var callbacks = _.hooks.all[name2];
             if (!callbacks || !callbacks.length) {
               return;
             }
@@ -33774,8 +33980,8 @@ function requirePrism() {
         }
         _.hooks.run("wrap", env);
         var attributes = "";
-        for (var name in env.attributes) {
-          attributes += " " + name + '="' + (env.attributes[name] || "").replace(/"/g, "&quot;") + '"';
+        for (var name2 in env.attributes) {
+          attributes += " " + name2 + '="' + (env.attributes[name2] || "").replace(/"/g, "&quot;") + '"';
         }
         return "<" + env.tag + ' class="' + env.classes.join(" ") + '"' + attributes + ">" + env.content + "</" + env.tag + ">";
       };
@@ -34636,259 +34842,391 @@ const getArrayItemDefault = (schema) => {
       return null;
   }
 };
-const DynamicJsonForm = ({
-  schema,
-  value,
-  onChange,
-  maxDepth = 3
-}) => {
-  const isOnlyJSON = !isSimpleObject(schema);
-  const [isJsonMode, setIsJsonMode] = reactExports.useState(isOnlyJSON);
-  const [jsonError, setJsonError] = reactExports.useState();
-  const [copiedJson, setCopiedJson] = reactExports.useState(false);
-  const { toast: toast2 } = useToast();
-  const [rawJsonValue, setRawJsonValue] = reactExports.useState(
-    JSON.stringify(value ?? generateDefaultValue(schema), null, 2)
-  );
-  const timeoutRef = reactExports.useRef();
-  const debouncedUpdateParent = reactExports.useCallback(
-    (jsonString) => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
+const DynamicJsonForm = reactExports.forwardRef(
+  ({ schema, value, onChange, maxDepth = 3 }, ref2) => {
+    const isOnlyJSON = !isSimpleObject(schema);
+    const [isJsonMode, setIsJsonMode] = reactExports.useState(isOnlyJSON);
+    const [jsonError, setJsonError] = reactExports.useState();
+    const [copiedJson, setCopiedJson] = reactExports.useState(false);
+    const { toast: toast2 } = useToast();
+    const [rawJsonValue, setRawJsonValue] = reactExports.useState(
+      JSON.stringify(value ?? generateDefaultValue(schema), null, 2)
+    );
+    const timeoutRef = reactExports.useRef();
+    const debouncedUpdateParent = reactExports.useCallback(
+      (jsonString) => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+          try {
+            const parsed = JSON.parse(jsonString);
+            onChange(parsed);
+            setJsonError(void 0);
+          } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "Invalid JSON";
+            setJsonError(errorMessage);
+            const trimmed = jsonString.trim();
+            if (trimmed.length > 5 && !trimmed.match(/^[\s[{]/)) {
+              onChange(generateDefaultValue(schema));
+            }
+          }
+        }, 300);
+      },
+      [onChange, setJsonError, schema]
+    );
+    reactExports.useEffect(() => {
+      if (!isJsonMode) {
+        setRawJsonValue(
+          JSON.stringify(value ?? generateDefaultValue(schema), null, 2)
+        );
       }
-      timeoutRef.current = setTimeout(() => {
+    }, [value, schema, isJsonMode]);
+    const handleSwitchToFormMode = () => {
+      if (isJsonMode) {
         try {
-          const parsed = JSON.parse(jsonString);
+          const parsed = JSON.parse(rawJsonValue);
           onChange(parsed);
-          setJsonError(void 0);
-        } catch {
+          setIsJsonMode(false);
+        } catch (err) {
+          setJsonError(err instanceof Error ? err.message : "Invalid JSON");
         }
-      }, 300);
-    },
-    [onChange, setJsonError]
-  );
-  reactExports.useEffect(() => {
-    if (!isJsonMode) {
-      setRawJsonValue(
-        JSON.stringify(value ?? generateDefaultValue(schema), null, 2)
-      );
-    }
-  }, [value, schema, isJsonMode]);
-  const handleSwitchToFormMode = () => {
-    if (isJsonMode) {
+      } else {
+        setRawJsonValue(
+          JSON.stringify(value ?? generateDefaultValue(schema), null, 2)
+        );
+        setIsJsonMode(true);
+      }
+    };
+    const formatJson = () => {
       try {
-        const parsed = JSON.parse(rawJsonValue);
-        onChange(parsed);
-        setIsJsonMode(false);
+        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");
       }
-    } else {
-      setRawJsonValue(
-        JSON.stringify(value ?? generateDefaultValue(schema), null, 2)
-      );
-      setIsJsonMode(true);
-    }
-  };
-  const formatJson = () => {
-    try {
-      const jsonStr = rawJsonValue.trim();
-      if (!jsonStr) {
-        return;
+    };
+    const validateJson = () => {
+      if (!isJsonMode) return { isValid: true, error: null };
+      try {
+        const jsonStr = rawJsonValue.trim();
+        if (!jsonStr) return { isValid: true, error: null };
+        const parsed = JSON.parse(jsonStr);
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        onChange(parsed);
+        setJsonError(void 0);
+        return { isValid: true, error: null };
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Invalid JSON";
+        setJsonError(errorMessage);
+        return { isValid: false, error: errorMessage };
       }
-      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, parentSchema, propertyName) => {
-    var _a, _b, _c;
-    if (depth >= maxDepth && (propSchema.type === "object" || propSchema.type === "array")) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        JsonEditor,
-        {
-          value: JSON.stringify(
-            currentValue ?? generateDefaultValue(propSchema, propertyName, parentSchema),
-            null,
-            2
-          ),
-          onChange: (newValue) => {
-            try {
-              const parsed = JSON.parse(newValue);
-              handleFieldChange(path, parsed);
-              setJsonError(void 0);
-            } catch (err) {
-              setJsonError(err instanceof Error ? err.message : "Invalid JSON");
+    };
+    const handleCopyJson = reactExports.useCallback(async () => {
+      try {
+        await navigator.clipboard.writeText(
+          JSON.stringify(value, null, 2) ?? "[]"
+        );
+        setCopiedJson(true);
+        toast2({
+          title: "JSON copied",
+          description: "The JSON data has been successfully copied to your clipboard."
+        });
+        setTimeout(() => {
+          setCopiedJson(false);
+        }, 2e3);
+      } catch (error) {
+        toast2({
+          title: "Error",
+          description: `Failed to copy JSON: ${error instanceof Error ? error.message : String(error)}`,
+          variant: "destructive"
+        });
+      }
+    }, [toast2, value]);
+    reactExports.useImperativeHandle(ref2, () => ({
+      validateJson
+    }));
+    const renderFormFields = (propSchema, currentValue, path = [], depth = 0, parentSchema, propertyName) => {
+      var _a, _b, _c;
+      if (depth >= maxDepth && (propSchema.type === "object" || propSchema.type === "array")) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          JsonEditor,
+          {
+            value: JSON.stringify(
+              currentValue ?? generateDefaultValue(propSchema, propertyName, parentSchema),
+              null,
+              2
+            ),
+            onChange: (newValue) => {
+              try {
+                const parsed = JSON.parse(newValue);
+                handleFieldChange(path, parsed);
+                setJsonError(void 0);
+              } catch (err) {
+                setJsonError(
+                  err instanceof Error ? err.message : "Invalid JSON"
+                );
+              }
+            },
+            error: jsonError
+          }
+        );
+      }
+      const isRequired = ((_a = parentSchema == null ? void 0 : parentSchema.required) == null ? void 0 : _a.includes(propertyName || "")) ?? false;
+      let fieldType = propSchema.type;
+      if (Array.isArray(fieldType)) {
+        fieldType = fieldType.find((t) => t !== "null") ?? fieldType[0];
+      }
+      switch (fieldType) {
+        case "string": {
+          if (propSchema.oneOf && propSchema.oneOf.every(
+            (option) => typeof option.const === "string" && typeof option.title === "string"
+          )) {
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "select",
+              {
+                value: currentValue ?? "",
+                onChange: (e) => {
+                  const val = e.target.value;
+                  if (!val && !isRequired) {
+                    handleFieldChange(path, void 0);
+                  } else {
+                    handleFieldChange(path, val);
+                  }
+                },
+                required: isRequired,
+                className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select an option..." }),
+                  propSchema.oneOf.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "option",
+                    {
+                      value: option.const,
+                      children: option.title
+                    },
+                    option.const
+                  ))
+                ]
+              }
+            );
+          }
+          if (propSchema.enum) {
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "select",
+              {
+                value: currentValue ?? "",
+                onChange: (e) => {
+                  const val = e.target.value;
+                  if (!val && !isRequired) {
+                    handleFieldChange(path, void 0);
+                  } else {
+                    handleFieldChange(path, val);
+                  }
+                },
+                required: isRequired,
+                className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select an option..." }),
+                  propSchema.enum.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: option, children: option }, option))
+                ]
+              }
+            );
+          }
+          let inputType = "text";
+          switch (propSchema.format) {
+            case "email":
+              inputType = "email";
+              break;
+            case "uri":
+              inputType = "url";
+              break;
+            case "date":
+              inputType = "date";
+              break;
+            case "date-time":
+              inputType = "datetime-local";
+              break;
+            default:
+              inputType = "text";
+              break;
+          }
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Input,
+            {
+              type: inputType,
+              value: currentValue ?? "",
+              onChange: (e) => {
+                const val = e.target.value;
+                handleFieldChange(path, val);
+              },
+              placeholder: propSchema.description,
+              required: isRequired,
+              minLength: propSchema.minLength,
+              maxLength: propSchema.maxLength,
+              pattern: propSchema.pattern
             }
-          },
-          error: jsonError
+          );
         }
-      );
-    }
-    const isRequired = ((_a = parentSchema == null ? void 0 : parentSchema.required) == null ? void 0 : _a.includes(propertyName || "")) ?? false;
-    let fieldType = propSchema.type;
-    if (Array.isArray(fieldType)) {
-      fieldType = fieldType.find((t) => t !== "null") ?? fieldType[0];
-    }
-    switch (fieldType) {
-      case "string": {
-        if (propSchema.oneOf && propSchema.oneOf.every(
-          (option) => typeof option.const === "string" && typeof option.title === "string"
-        )) {
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "select",
+        case "number":
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Input,
             {
-              value: currentValue ?? "",
+              type: "number",
+              value: (currentValue == null ? void 0 : currentValue.toString()) ?? "",
               onChange: (e) => {
                 const val = e.target.value;
                 if (!val && !isRequired) {
                   handleFieldChange(path, void 0);
                 } else {
-                  handleFieldChange(path, val);
+                  const num = Number(val);
+                  if (!isNaN(num)) {
+                    handleFieldChange(path, num);
+                  }
                 }
               },
+              placeholder: propSchema.description,
               required: isRequired,
-              className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800",
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select an option..." }),
-                propSchema.oneOf.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "option",
-                  {
-                    value: option.const,
-                    children: option.title
-                  },
-                  option.const
-                ))
-              ]
+              min: propSchema.minimum,
+              max: propSchema.maximum
             }
           );
-        }
-        if (propSchema.enum) {
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "select",
+        case "integer":
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Input,
             {
-              value: currentValue ?? "",
+              type: "number",
+              step: "1",
+              value: (currentValue == null ? void 0 : currentValue.toString()) ?? "",
               onChange: (e) => {
                 const val = e.target.value;
                 if (!val && !isRequired) {
                   handleFieldChange(path, void 0);
                 } else {
-                  handleFieldChange(path, val);
+                  const num = Number(val);
+                  if (!isNaN(num) && Number.isInteger(num)) {
+                    handleFieldChange(path, num);
+                  }
                 }
               },
+              placeholder: propSchema.description,
               required: isRequired,
-              className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800",
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select an option..." }),
-                propSchema.enum.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: option, children: option }, option))
-              ]
+              min: propSchema.minimum,
+              max: propSchema.maximum
             }
           );
-        }
-        let inputType = "text";
-        switch (propSchema.format) {
-          case "email":
-            inputType = "email";
-            break;
-          case "uri":
-            inputType = "url";
-            break;
-          case "date":
-            inputType = "date";
-            break;
-          case "date-time":
-            inputType = "datetime-local";
-            break;
-          default:
-            inputType = "text";
-            break;
-        }
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Input,
-          {
-            type: inputType,
-            value: currentValue ?? "",
-            onChange: (e) => {
-              const val = e.target.value;
-              handleFieldChange(path, val);
-            },
-            placeholder: propSchema.description,
-            required: isRequired,
-            minLength: propSchema.minLength,
-            maxLength: propSchema.maxLength,
-            pattern: propSchema.pattern
-          }
-        );
-      }
-      case "number":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Input,
-          {
-            type: "number",
-            value: (currentValue == null ? void 0 : currentValue.toString()) ?? "",
-            onChange: (e) => {
-              const val = e.target.value;
-              if (!val && !isRequired) {
-                handleFieldChange(path, void 0);
-              } else {
-                const num = Number(val);
-                if (!isNaN(num)) {
-                  handleFieldChange(path, num);
-                }
-              }
-            },
-            placeholder: propSchema.description,
-            required: isRequired,
-            min: propSchema.minimum,
-            max: propSchema.maximum
-          }
-        );
-      case "integer":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Input,
-          {
-            type: "number",
-            step: "1",
-            value: (currentValue == null ? void 0 : currentValue.toString()) ?? "",
-            onChange: (e) => {
-              const val = e.target.value;
-              if (!val && !isRequired) {
-                handleFieldChange(path, void 0);
-              } else {
-                const num = Number(val);
-                if (!isNaN(num) && Number.isInteger(num)) {
-                  handleFieldChange(path, num);
-                }
+        case "boolean":
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Input,
+            {
+              type: "checkbox",
+              checked: currentValue ?? false,
+              onChange: (e) => handleFieldChange(path, e.target.checked),
+              className: "w-4 h-4",
+              required: isRequired
+            }
+          );
+        case "null":
+          return null;
+        case "object":
+          if (!propSchema.properties) {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              JsonEditor,
+              {
+                value: JSON.stringify(currentValue ?? {}, null, 2),
+                onChange: (newValue) => {
+                  try {
+                    const parsed = JSON.parse(newValue);
+                    handleFieldChange(path, parsed);
+                    setJsonError(void 0);
+                  } catch (err) {
+                    setJsonError(
+                      err instanceof Error ? err.message : "Invalid JSON"
+                    );
+                  }
+                },
+                error: jsonError
               }
-            },
-            placeholder: propSchema.description,
-            required: isRequired,
-            min: propSchema.minimum,
-            max: propSchema.maximum
+            );
           }
-        );
-      case "boolean":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Input,
-          {
-            type: "checkbox",
-            checked: currentValue ?? false,
-            onChange: (e) => handleFieldChange(path, e.target.checked),
-            className: "w-4 h-4",
-            required: isRequired
+          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 border rounded p-3", children: Object.entries(propSchema.properties).map(([key, subSchema]) => {
+            var _a2;
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium mb-1", children: [
+                key,
+                ((_a2 = propSchema.required) == null ? void 0 : _a2.includes(key)) && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })
+              ] }),
+              renderFormFields(
+                subSchema,
+                currentValue == null ? void 0 : currentValue[key],
+                [...path, key],
+                depth + 1,
+                propSchema,
+                key
+              )
+            ] }, key);
+          }) });
+        case "array": {
+          const arrayValue = Array.isArray(currentValue) ? currentValue : [];
+          if (!propSchema.items) return null;
+          if (isSimpleObject(propSchema.items)) {
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+              propSchema.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600", children: propSchema.description }),
+              ((_b = propSchema.items) == null ? void 0 : _b.description) && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-500", children: [
+                "Items: ",
+                propSchema.items.description
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+                arrayValue.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+                  renderFormFields(
+                    propSchema.items,
+                    item,
+                    [...path, index2.toString()],
+                    depth + 1
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: () => {
+                        const newArray = [...arrayValue];
+                        newArray.splice(index2, 1);
+                        handleFieldChange(path, newArray);
+                      },
+                      children: "Remove"
+                    }
+                  )
+                ] }, index2)),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: () => {
+                      const defaultValue = getArrayItemDefault(
+                        propSchema.items
+                      );
+                      handleFieldChange(path, [...arrayValue, defaultValue]);
+                    },
+                    title: ((_c = propSchema.items) == null ? void 0 : _c.description) ? `Add new ${propSchema.items.description}` : "Add new item",
+                    children: "Add Item"
+                  }
+                )
+              ] })
+            ] });
           }
-        );
-      case "null":
-        return null;
-      case "object":
-        if (!propSchema.properties) {
           return /* @__PURE__ */ jsxRuntimeExports.jsx(
             JsonEditor,
             {
-              value: JSON.stringify(currentValue ?? {}, null, 2),
+              value: JSON.stringify(currentValue ?? [], null, 2),
               onChange: (newValue) => {
                 try {
                   const parsed = JSON.parse(newValue);
@@ -34904,189 +35242,88 @@ const DynamicJsonForm = ({
             }
           );
         }
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 border rounded p-3", children: Object.entries(propSchema.properties).map(([key, subSchema]) => {
-          var _a2;
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium mb-1", children: [
-              key,
-              ((_a2 = propSchema.required) == null ? void 0 : _a2.includes(key)) && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })
-            ] }),
-            renderFormFields(
-              subSchema,
-              currentValue == null ? void 0 : currentValue[key],
-              [...path, key],
-              depth + 1,
-              propSchema,
-              key
-            )
-          ] }, key);
-        }) });
-      case "array": {
-        const arrayValue = Array.isArray(currentValue) ? currentValue : [];
-        if (!propSchema.items) return null;
-        if (isSimpleObject(propSchema.items)) {
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-            propSchema.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600", children: propSchema.description }),
-            ((_b = propSchema.items) == null ? void 0 : _b.description) && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-500", children: [
-              "Items: ",
-              propSchema.items.description
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-              arrayValue.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-                renderFormFields(
-                  propSchema.items,
-                  item,
-                  [...path, index2.toString()],
-                  depth + 1
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    variant: "outline",
-                    size: "sm",
-                    onClick: () => {
-                      const newArray = [...arrayValue];
-                      newArray.splice(index2, 1);
-                      handleFieldChange(path, newArray);
-                    },
-                    children: "Remove"
-                  }
-                )
-              ] }, index2)),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Button,
-                {
-                  variant: "outline",
-                  size: "sm",
-                  onClick: () => {
-                    const defaultValue = getArrayItemDefault(
-                      propSchema.items
-                    );
-                    handleFieldChange(path, [...arrayValue, defaultValue]);
-                  },
-                  title: ((_c = propSchema.items) == null ? void 0 : _c.description) ? `Add new ${propSchema.items.description}` : "Add new item",
-                  children: "Add Item"
-                }
-              )
-            ] })
-          ] });
-        }
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          JsonEditor,
-          {
-            value: JSON.stringify(currentValue ?? [], null, 2),
-            onChange: (newValue) => {
-              try {
-                const parsed = JSON.parse(newValue);
-                handleFieldChange(path, parsed);
-                setJsonError(void 0);
-              } catch (err) {
-                setJsonError(
-                  err instanceof Error ? err.message : "Invalid JSON"
-                );
-              }
-            },
-            error: jsonError
-          }
-        );
+        default:
+          return null;
+      }
+    };
+    const handleFieldChange = (path, fieldValue) => {
+      if (path.length === 0) {
+        onChange(fieldValue);
+        return;
       }
-      default:
-        return null;
-    }
-  };
-  const handleFieldChange = (path, fieldValue) => {
-    if (path.length === 0) {
-      onChange(fieldValue);
-      return;
-    }
-    try {
-      const newValue = updateValueAtPath(value, path, fieldValue);
-      onChange(newValue);
-    } catch (error) {
-      console.error("Failed to update form value:", error);
-      onChange(value);
-    }
-  };
-  const shouldUseJsonMode = schema.type === "object" && (!schema.properties || Object.keys(schema.properties).length === 0);
-  reactExports.useEffect(() => {
-    if (shouldUseJsonMode && !isJsonMode) {
-      setIsJsonMode(true);
-    }
-  }, [shouldUseJsonMode, isJsonMode]);
-  const handleCopyJson = reactExports.useCallback(() => {
-    const copyToClipboard = async () => {
       try {
-        await navigator.clipboard.writeText(
-          JSON.stringify(value, null, 2) ?? "[]"
-        );
-        setCopiedJson(true);
-        toast2({
-          title: "JSON copied",
-          description: "The JSON data has been successfully copied to your clipboard."
-        });
-        setTimeout(() => {
-          setCopiedJson(false);
-        }, 2e3);
+        const newValue = updateValueAtPath(value, path, fieldValue);
+        onChange(newValue);
       } catch (error) {
-        toast2({
-          title: "Error",
-          description: `Failed to copy JSON: ${error instanceof Error ? error.message : String(error)}`,
-          variant: "destructive"
-        });
+        console.error("Failed to update form value:", error);
+        onChange(value);
       }
     };
-    copyToClipboard();
-  }, [toast2, value]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end space-x-2", children: [
-      isJsonMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Button,
-          {
-            type: "button",
-            variant: "outline",
-            size: "sm",
-            onClick: handleCopyJson,
-            children: [
-              copiedJson ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCheck, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "h-4 w-4 mr-2" }),
-              "Copy JSON"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+    const shouldUseJsonMode = schema.type === "object" && (!schema.properties || Object.keys(schema.properties).length === 0);
+    reactExports.useEffect(() => {
+      if (shouldUseJsonMode && !isJsonMode) {
+        setIsJsonMode(true);
+      }
+    }, [shouldUseJsonMode, isJsonMode]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end space-x-2", children: [
+        isJsonMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              onClick: handleCopyJson,
+              children: [
+                copiedJson ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCheck, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "h-4 w-4 mr-2" }),
+                "Copy JSON"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              onClick: formatJson,
+              children: "Format JSON"
+            }
+          )
+        ] }),
+        !isOnlyJSON && /* @__PURE__ */ jsxRuntimeExports.jsx(
           Button,
           {
-            type: "button",
             variant: "outline",
             size: "sm",
-            onClick: formatJson,
-            children: "Format JSON"
+            onClick: handleSwitchToFormMode,
+            children: isJsonMode ? "Switch to Form" : "Switch to JSON"
           }
         )
       ] }),
-      !isOnlyJSON && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: handleSwitchToFormMode, children: isJsonMode ? "Switch to Form" : "Switch to JSON" })
-    ] }),
-    isJsonMode ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      JsonEditor,
-      {
-        value: rawJsonValue,
-        onChange: (newValue) => {
-          setRawJsonValue(newValue);
-          debouncedUpdateParent(newValue);
-        },
-        error: jsonError
-      }
-    ) : (
-      // If schema type is object but value is not an object or is empty, and we have actual JSON data,
-      // render a simple representation of the JSON data
-      schema.type === "object" && (typeof value !== "object" || value === null || Object.keys(value).length === 0) && rawJsonValue && rawJsonValue !== "{}" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 border rounded-md p-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: "Form view not available for this JSON structure. Using simplified view:" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto", children: rawJsonValue }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: "Use JSON mode for full editing capabilities." })
-      ] }) : renderFormFields(schema, value)
-    )
-  ] });
-};
+      isJsonMode ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        JsonEditor,
+        {
+          value: rawJsonValue,
+          onChange: (newValue) => {
+            setRawJsonValue(newValue);
+            debouncedUpdateParent(newValue);
+          },
+          error: jsonError
+        }
+      ) : (
+        // If schema type is object but value is not an object or is empty, and we have actual JSON data,
+        // render a simple representation of the JSON data
+        schema.type === "object" && (typeof value !== "object" || value === null || Object.keys(value).length === 0) && rawJsonValue && rawJsonValue !== "{}" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 border rounded-md p-4", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: "Form view not available for this JSON structure. Using simplified view:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto", children: rawJsonValue }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: "Use JSON mode for full editing capabilities." })
+        ] }) : renderFormFields(schema, value)
+      )
+    ] });
+  }
+);
 const SamplingRequest = ({
   onApprove,
   request,
@@ -35259,7 +35496,7 @@ var OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
 var SELECTION_KEYS = [" ", "Enter"];
 var SELECT_NAME = "Select";
 var [Collection, useCollection, createCollectionScope] = createCollection(SELECT_NAME);
-var [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME, [
+var [createSelectContext] = createContextScope(SELECT_NAME, [
   createCollectionScope,
   createPopperScope
 ]);
@@ -35277,7 +35514,7 @@ var Select$1 = (props) => {
     defaultValue,
     onValueChange,
     dir,
-    name,
+    name: name2,
     autoComplete,
     disabled,
     required: required2,
@@ -35347,7 +35584,7 @@ var Select$1 = (props) => {
             "aria-hidden": true,
             required: required2,
             tabIndex: -1,
-            name,
+            name: name2,
             autoComplete,
             value,
             onChange: (event) => setValue(event.target.value),
@@ -36306,7 +36543,7 @@ var SelectArrow = reactExports.forwardRef(
   }
 );
 SelectArrow.displayName = ARROW_NAME$1;
-var BUBBLE_INPUT_NAME$1 = "SelectBubbleInput";
+var BUBBLE_INPUT_NAME$2 = "SelectBubbleInput";
 var SelectBubbleInput = reactExports.forwardRef(
   ({ __scopeSelect, value, ...props }, forwardedRef) => {
     const ref2 = reactExports.useRef(null);
@@ -36338,7 +36575,7 @@ var SelectBubbleInput = reactExports.forwardRef(
     );
   }
 );
-SelectBubbleInput.displayName = BUBBLE_INPUT_NAME$1;
+SelectBubbleInput.displayName = BUBBLE_INPUT_NAME$2;
 function shouldShowPlaceholder(value) {
   return value === "" || value === void 0;
 }
@@ -36541,8 +36778,8 @@ const useTheme = () => {
     [theme, setThemeWithSideEffect]
   );
 };
-const version = "0.16.7";
-var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
+const version = "0.17.0";
+var [createTooltipContext] = createContextScope("Tooltip", [
   createPopperScope
 ]);
 var usePopperScope = createPopperScope();
@@ -36867,7 +37104,7 @@ var TooltipContentImpl = reactExports.forwardRef(
             },
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Slottable, { children }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Root$4, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Root$5, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
             ]
           }
         )
@@ -37024,6 +37261,394 @@ const TooltipContent = reactExports.forwardRef(({ className, sideOffset = 4, ...
   }
 ));
 TooltipContent.displayName = Content2.displayName;
+const Textarea = reactExports.forwardRef(
+  ({ className, ...props }, ref2) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref: ref2,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var SWITCH_NAME = "Switch";
+var [createSwitchContext] = createContextScope(SWITCH_NAME);
+var [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME);
+var Switch$1 = reactExports.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeSwitch,
+      name: name2,
+      checked: checkedProp,
+      defaultChecked,
+      required: required2,
+      disabled,
+      value = "on",
+      onCheckedChange,
+      form,
+      ...switchProps
+    } = props;
+    const [button, setButton] = reactExports.useState(null);
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
+    const hasConsumerStoppedPropagationRef = reactExports.useRef(false);
+    const isFormControl = button ? form || !!button.closest("form") : true;
+    const [checked, setChecked] = useControllableState({
+      prop: checkedProp,
+      defaultProp: defaultChecked ?? false,
+      onChange: onCheckedChange,
+      caller: SWITCH_NAME
+    });
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(SwitchProvider, { scope: __scopeSwitch, checked, disabled, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Primitive.button,
+        {
+          type: "button",
+          role: "switch",
+          "aria-checked": checked,
+          "aria-required": required2,
+          "data-state": getState$1(checked),
+          "data-disabled": disabled ? "" : void 0,
+          disabled,
+          value,
+          ...switchProps,
+          ref: composedRefs,
+          onClick: composeEventHandlers(props.onClick, (event) => {
+            setChecked((prevChecked) => !prevChecked);
+            if (isFormControl) {
+              hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+              if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+            }
+          })
+        }
+      ),
+      isFormControl && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SwitchBubbleInput,
+        {
+          control: button,
+          bubbles: !hasConsumerStoppedPropagationRef.current,
+          name: name2,
+          value,
+          checked,
+          required: required2,
+          disabled,
+          form,
+          style: { transform: "translateX(-100%)" }
+        }
+      )
+    ] });
+  }
+);
+Switch$1.displayName = SWITCH_NAME;
+var THUMB_NAME = "SwitchThumb";
+var SwitchThumb = reactExports.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSwitch, ...thumbProps } = props;
+    const context = useSwitchContext(THUMB_NAME, __scopeSwitch);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Primitive.span,
+      {
+        "data-state": getState$1(context.checked),
+        "data-disabled": context.disabled ? "" : void 0,
+        ...thumbProps,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+SwitchThumb.displayName = THUMB_NAME;
+var BUBBLE_INPUT_NAME$1 = "SwitchBubbleInput";
+var SwitchBubbleInput = reactExports.forwardRef(
+  ({
+    __scopeSwitch,
+    control,
+    checked,
+    bubbles = true,
+    ...props
+  }, forwardedRef) => {
+    const ref2 = reactExports.useRef(null);
+    const composedRefs = useComposedRefs(ref2, forwardedRef);
+    const prevChecked = usePrevious(checked);
+    const controlSize = useSize(control);
+    reactExports.useEffect(() => {
+      const input = ref2.current;
+      if (!input) return;
+      const inputProto = window.HTMLInputElement.prototype;
+      const descriptor = Object.getOwnPropertyDescriptor(
+        inputProto,
+        "checked"
+      );
+      const setChecked = descriptor.set;
+      if (prevChecked !== checked && setChecked) {
+        const event = new Event("click", { bubbles });
+        setChecked.call(input, checked);
+        input.dispatchEvent(event);
+      }
+    }, [prevChecked, checked, bubbles]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        type: "checkbox",
+        "aria-hidden": true,
+        defaultChecked: checked,
+        ...props,
+        tabIndex: -1,
+        ref: composedRefs,
+        style: {
+          ...props.style,
+          ...controlSize,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }
+    );
+  }
+);
+SwitchBubbleInput.displayName = BUBBLE_INPUT_NAME$1;
+function getState$1(checked) {
+  return checked ? "checked" : "unchecked";
+}
+var Root = Switch$1;
+var Thumb = SwitchThumb;
+const Switch = reactExports.forwardRef(({ className, ...props }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  Root,
+  {
+    className: cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref: ref2,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = Root.displayName;
+const createEmptyHeader = () => ({
+  name: "",
+  value: "",
+  enabled: true
+});
+const createHeaderFromBearerToken = (bearerToken, headerName) => ({
+  name: headerName || "Authorization",
+  value: (headerName == null ? void 0 : headerName.toLowerCase()) === "authorization" || !headerName ? `Bearer ${bearerToken}` : bearerToken,
+  enabled: true
+});
+const migrateFromLegacyAuth = (bearerToken, headerName) => {
+  return bearerToken ? [createHeaderFromBearerToken(bearerToken, headerName)] : [];
+};
+const CustomHeaders = ({
+  headers,
+  onChange,
+  className
+}) => {
+  const [isJsonMode, setIsJsonMode] = reactExports.useState(false);
+  const [jsonValue, setJsonValue] = reactExports.useState("");
+  const [jsonError, setJsonError] = reactExports.useState(null);
+  const [visibleValues, setVisibleValues] = reactExports.useState(/* @__PURE__ */ new Set());
+  const updateHeader = (index2, field, value) => {
+    const newHeaders = [...headers];
+    newHeaders[index2] = { ...newHeaders[index2], [field]: value };
+    onChange(newHeaders);
+  };
+  const addHeader = () => {
+    onChange([...headers, createEmptyHeader()]);
+  };
+  const removeHeader = (index2) => {
+    const newHeaders = headers.filter((_, i) => i !== index2);
+    onChange(newHeaders);
+  };
+  const toggleValueVisibility = (index2) => {
+    const newVisible = new Set(visibleValues);
+    if (newVisible.has(index2)) {
+      newVisible.delete(index2);
+    } else {
+      newVisible.add(index2);
+    }
+    setVisibleValues(newVisible);
+  };
+  const switchToJsonMode = () => {
+    const jsonObject = {};
+    headers.forEach((header) => {
+      if (header.enabled && header.name.trim() && header.value.trim()) {
+        jsonObject[header.name.trim()] = header.value.trim();
+      }
+    });
+    setJsonValue(JSON.stringify(jsonObject, null, 2));
+    setJsonError(null);
+    setIsJsonMode(true);
+  };
+  const switchToFormMode = () => {
+    try {
+      const parsed = JSON.parse(jsonValue);
+      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+        setJsonError("JSON must be an object with string key-value pairs");
+        return;
+      }
+      const newHeaders = Object.entries(parsed).map(
+        ([name2, value]) => ({
+          name: name2,
+          value: String(value),
+          enabled: true
+        })
+      );
+      onChange(newHeaders);
+      setJsonError(null);
+      setIsJsonMode(false);
+    } catch {
+      setJsonError("Invalid JSON format");
+    }
+  };
+  const handleJsonChange = (value) => {
+    setJsonValue(value);
+    setJsonError(null);
+  };
+  if (isJsonMode) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `space-y-3 ${className}`, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold flex-shrink-0", children: "Custom Headers (JSON)" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: switchToFormMode,
+            className: "flex-shrink-0",
+            children: "Switch to Form"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Textarea,
+          {
+            value: jsonValue,
+            onChange: (e) => handleJsonChange(e.target.value),
+            placeholder: '{\\n  "Authorization": "Bearer token123",\\n  "X-Tenant-ID": "acme-inc",\\n  "X-Environment": "staging"\\n}',
+            className: "font-mono text-sm min-h-[100px] resize-none"
+          }
+        ),
+        jsonError && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-red-600", children: jsonError }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Enter headers as a JSON object with string key-value pairs." })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `space-y-3 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold flex-shrink-0", children: "Custom Headers" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-1 flex-shrink-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: switchToJsonMode,
+            className: "text-xs px-2",
+            children: "JSON"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: addHeader,
+            className: "text-xs px-2",
+            "data-testid": "add-header-button",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-3 h-3 mr-1" }),
+              "Add"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    headers.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-4 text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: "No custom headers configured" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs mt-1", children: 'Click "Add" to get started' })
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 max-h-[300px] overflow-y-auto", children: headers.map((header, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "flex items-start gap-2 p-2 border rounded-md",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Switch,
+            {
+              checked: header.enabled,
+              onCheckedChange: (enabled) => updateHeader(index2, "enabled", enabled),
+              className: "shrink-0 mt-2"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 space-y-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Input,
+              {
+                placeholder: "Header Name",
+                value: header.name,
+                onChange: (e) => updateHeader(index2, "name", e.target.value),
+                className: "font-mono text-xs",
+                "data-testid": `header-name-input-${index2}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Input,
+                {
+                  placeholder: "Header Value",
+                  value: header.value,
+                  onChange: (e) => updateHeader(index2, "value", e.target.value),
+                  type: visibleValues.has(index2) ? "text" : "password",
+                  className: "font-mono text-xs pr-8",
+                  "data-testid": `header-value-input-${index2}`
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => toggleValueVisibility(index2),
+                  className: "absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6 p-0",
+                  children: visibleValues.has(index2) ? /* @__PURE__ */ jsxRuntimeExports.jsx(EyeOff, { className: "w-3 h-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "w-3 h-3" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: () => removeHeader(index2),
+              className: "shrink-0 text-red-600 hover:text-red-700 hover:bg-red-50 h-6 w-6 p-0 mt-2",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-3 h-3" })
+            }
+          )
+        ]
+      },
+      index2
+    )) }),
+    headers.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Use the toggle to enable/disable headers. Only enabled headers with both name and value will be sent." })
+  ] });
+};
 const Sidebar = ({
   connectionStatus,
   transportType,
@@ -37036,10 +37661,8 @@ const Sidebar = ({
   setSseUrl,
   env,
   setEnv,
-  bearerToken,
-  setBearerToken,
-  headerName,
-  setHeaderName,
+  customHeaders,
+  setCustomHeaders,
   oauthClientId,
   setOauthClientId,
   oauthScope,
@@ -37050,7 +37673,9 @@ const Sidebar = ({
   sendLogLevelRequest,
   loggingSupported,
   config,
-  setConfig
+  setConfig,
+  connectionType,
+  setConnectionType
 }) => {
   const [theme, setTheme] = useTheme();
   const [showEnvVars, setShowEnvVars] = reactExports.useState(false);
@@ -37060,6 +37685,7 @@ const Sidebar = ({
   const [copiedServerEntry, setCopiedServerEntry] = reactExports.useState(false);
   const [copiedServerFile, setCopiedServerFile] = reactExports.useState(false);
   const { toast: toast2 } = useToast();
+  const connectionTypeTip = "Connect to server directly (requires CORS config on server) or via MCP Inspector Proxy";
   const reportError2 = reactExports.useCallback(
     (error) => {
       toast2({
@@ -37212,10 +37838,22 @@ const Sidebar = ({
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", htmlFor: "sse-url-input", children: "URL" }),
-        sseUrl ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", htmlFor: "sse-url-input", children: "URL" }),
+          sseUrl ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Input,
+              {
+                id: "sse-url-input",
+                placeholder: "URL",
+                value: sseUrl,
+                onChange: (e) => setSseUrl(e.target.value),
+                className: "font-mono"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: sseUrl })
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
             Input,
             {
               id: "sse-url-input",
@@ -37224,19 +37862,36 @@ const Sidebar = ({
               onChange: (e) => setSseUrl(e.target.value),
               className: "font-mono"
             }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: sseUrl })
-        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Input,
-          {
-            id: "sse-url-input",
-            placeholder: "URL",
-            value: sseUrl,
-            onChange: (e) => setSseUrl(e.target.value),
-            className: "font-mono"
-          }
-        )
-      ] }) }),
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "label",
+              {
+                className: "text-sm font-medium",
+                htmlFor: "connection-type-select",
+                children: "Connection Type"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Select,
+              {
+                value: connectionType,
+                onValueChange: (value) => setConnectionType(value),
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { id: "connection-type-select", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select connection type" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "proxy", children: "Via Proxy" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "direct", children: "Direct" })
+                  ] })
+                ]
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: connectionTypeTip })
+        ] })
+      ] }),
       transportType === "stdio" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           Button,
@@ -37408,42 +38063,13 @@ const Sidebar = ({
           }
         ),
         showAuthConfig && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 p-3 rounded border", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold flex items-center", children: "API Token Authentication" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", children: "Header Name" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Input,
-                {
-                  placeholder: "Authorization",
-                  onChange: (e) => setHeaderName && setHeaderName(e.target.value),
-                  "data-testid": "header-input",
-                  className: "font-mono",
-                  value: headerName
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "label",
-                {
-                  className: "text-sm font-medium",
-                  htmlFor: "bearer-token-input",
-                  children: "Bearer Token"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Input,
-                {
-                  id: "bearer-token-input",
-                  placeholder: "Bearer Token",
-                  value: bearerToken,
-                  onChange: (e) => setBearerToken(e.target.value),
-                  "data-testid": "bearer-token-input",
-                  className: "font-mono",
-                  type: "password"
-                }
-              )
-            ] })
-          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3 rounded border overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CustomHeaders,
+            {
+              headers: customHeaders,
+              onChange: setCustomHeaders
+            }
+          ) }),
           transportType !== "stdio" && // OAuth Configuration
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 p-3  rounded border", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold flex items-center", children: "OAuth 2.0 Flow" }),
@@ -37717,7 +38343,7 @@ const Sidebar = ({
   ] });
 };
 var CHECKBOX_NAME = "Checkbox";
-var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
+var [createCheckboxContext] = createContextScope(CHECKBOX_NAME);
 var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
 function CheckboxProvider(props) {
   const {
@@ -37727,7 +38353,7 @@ function CheckboxProvider(props) {
     defaultChecked,
     disabled,
     form,
-    name,
+    name: name2,
     onCheckedChange,
     required: required2,
     value = "on",
@@ -37753,7 +38379,7 @@ function CheckboxProvider(props) {
     setChecked,
     control,
     setControl,
-    name,
+    name: name2,
     form,
     value,
     hasConsumerStoppedPropagationRef,
@@ -37829,7 +38455,7 @@ var Checkbox$1 = reactExports.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeCheckbox,
-      name,
+      name: name2,
       checked,
       defaultChecked,
       required: required2,
@@ -37848,7 +38474,7 @@ var Checkbox$1 = reactExports.forwardRef(
         disabled,
         required: required2,
         onCheckedChange,
-        name,
+        name: name2,
         form,
         value,
         internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -37906,7 +38532,7 @@ var CheckboxBubbleInput = reactExports.forwardRef(
       defaultChecked,
       required: required2,
       disabled,
-      name,
+      name: name2,
       value,
       form,
       bubbleInput,
@@ -37941,7 +38567,7 @@ var CheckboxBubbleInput = reactExports.forwardRef(
         defaultChecked: defaultChecked ?? defaultCheckedRef.current,
         required: required2,
         disabled,
-        name,
+        name: name2,
         value,
         form,
         ...props,
@@ -37992,26 +38618,10 @@ const Checkbox = reactExports.forwardRef(({ className, ...props }, ref2) => /* @
   }
 ));
 Checkbox.displayName = Checkbox$1.displayName;
-const Textarea = reactExports.forwardRef(
-  ({ className, ...props }, ref2) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "textarea",
-      {
-        className: cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ref: ref2,
-        ...props
-      }
-    );
-  }
-);
-Textarea.displayName = "Textarea";
 const ResourceLinkView = reactExports.memo(
   ({
     uri,
-    name,
+    name: name2,
     description: description2,
     mimeType,
     resourceContent,
@@ -38066,7 +38676,7 @@ const ResourceLinkView = reactExports.memo(
                 onReadResource && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 flex-shrink-0", "aria-hidden": "true", children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: expanded ? "▼" : "▶" }) })
               ] })
             ] }),
-            name && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-sm text-gray-900 dark:text-gray-100 mb-1", children: name }),
+            name2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-sm text-gray-900 dark:text-gray-100 mb-1", children: name2 }),
             description2 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-300 leading-relaxed", children: description2 })
           ] })
         }
@@ -38248,6 +38858,7 @@ const ToolsTab = ({
   setSelectedTool,
   toolResult,
   nextCursor,
+  error,
   resourceContent,
   onReadResource
 }) => {
@@ -38255,6 +38866,17 @@ const ToolsTab = ({
   const [isToolRunning, setIsToolRunning] = reactExports.useState(false);
   const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = reactExports.useState(false);
   const [isMetaExpanded, setIsMetaExpanded] = reactExports.useState(false);
+  const [hasValidationErrors, setHasValidationErrors] = reactExports.useState(false);
+  const formRefs = reactExports.useRef({});
+  const { toast: toast2 } = useToast();
+  const { copied, setCopied } = useCopy();
+  const checkValidationErrors = () => {
+    const errors = Object.values(formRefs.current).some(
+      (ref2) => ref2 && !ref2.validateJson().isValid
+    );
+    setHasValidationErrors(errors);
+    return errors;
+  };
   reactExports.useEffect(() => {
     const params2 = Object.entries(
       (selectedTool == null ? void 0 : selectedTool.inputSchema.properties) ?? []
@@ -38267,6 +38889,8 @@ const ToolsTab = ({
       )
     ]);
     setParams(Object.fromEntries(params2));
+    setHasValidationErrors(false);
+    formRefs.current = {};
   }, [selectedTool]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "tools", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -38291,6 +38915,11 @@ const ToolsTab = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card border border-border rounded-lg shadow", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-border", 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: [
+        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 })
+        ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: selectedTool.description }),
         Object.entries(selectedTool.inputSchema.properties ?? []).map(
           ([key, value]) => {
@@ -38336,16 +38965,27 @@ const ToolsTab = ({
                   id: key,
                   name: key,
                   placeholder: prop.description,
-                  value: params[key] ?? "",
-                  onChange: (e) => setParams({
-                    ...params,
-                    [key]: e.target.value === "" ? void 0 : e.target.value
-                  }),
+                  value: params[key] === void 0 ? "" : String(params[key]),
+                  onChange: (e) => {
+                    const value2 = e.target.value;
+                    if (value2 === "") {
+                      setParams({
+                        ...params,
+                        [key]: void 0
+                      });
+                    } else {
+                      setParams({
+                        ...params,
+                        [key]: value2
+                      });
+                    }
+                  },
                   className: "mt-1"
                 }
               ) : prop.type === "object" || prop.type === "array" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 DynamicJsonForm,
                 {
+                  ref: (ref2) => formRefs.current[key] = ref2,
                   schema: {
                     type: prop.type,
                     properties: prop.properties,
@@ -38358,6 +38998,7 @@ const ToolsTab = ({
                       ...params,
                       [key]: newValue
                     });
+                    setTimeout(checkValidationErrors, 100);
                   }
                 }
               ) }) : prop.type === "number" || prop.type === "integer" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -38367,19 +39008,35 @@ const ToolsTab = ({
                   id: key,
                   name: key,
                   placeholder: prop.description,
-                  value: params[key] ?? "",
+                  value: params[key] === void 0 ? "" : String(params[key]),
                   onChange: (e) => {
                     const value2 = e.target.value;
-                    setParams({
-                      ...params,
-                      [key]: value2 === "" ? "" : Number(value2)
-                    });
+                    if (value2 === "") {
+                      setParams({
+                        ...params,
+                        [key]: void 0
+                      });
+                    } else {
+                      const num = Number(value2);
+                      if (!isNaN(num)) {
+                        setParams({
+                          ...params,
+                          [key]: num
+                        });
+                      } else {
+                        setParams({
+                          ...params,
+                          [key]: value2
+                        });
+                      }
+                    }
                   },
                   className: "mt-1"
                 }
               ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 DynamicJsonForm,
                 {
+                  ref: (ref2) => formRefs.current[key] = ref2,
                   schema: {
                     type: prop.type,
                     properties: prop.properties,
@@ -38392,6 +39049,7 @@ const ToolsTab = ({
                       ...params,
                       [key]: newValue
                     });
+                    setTimeout(checkValidationErrors, 100);
                   }
                 }
               ) })
@@ -38454,27 +39112,53 @@ const ToolsTab = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            onClick: async () => {
-              try {
-                setIsToolRunning(true);
-                await callTool(selectedTool.name, params);
-              } finally {
-                setIsToolRunning(false);
-              }
-            },
-            disabled: isToolRunning,
-            children: isToolRunning ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "w-4 h-4 mr-2 animate-spin" }),
-              "Running..."
-            ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "w-4 h-4 mr-2" }),
-              "Run Tool"
-            ] })
-          }
-        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              onClick: async () => {
+                if (checkValidationErrors()) return;
+                try {
+                  setIsToolRunning(true);
+                  await callTool(selectedTool.name, params);
+                } finally {
+                  setIsToolRunning(false);
+                }
+              },
+              disabled: isToolRunning || hasValidationErrors,
+              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"
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Button,
+            {
+              onClick: async () => {
+                try {
+                  navigator.clipboard.writeText(
+                    JSON.stringify(params, null, 2)
+                  );
+                  setCopied(true);
+                } catch (error2) {
+                  toast2({
+                    title: "Error",
+                    description: `There was an error copying input to the clipboard: ${error2 instanceof Error ? error2.message : String(error2)}`,
+                    variant: "destructive"
+                  });
+                }
+              },
+              children: [
+                copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCheck, { className: "h-4 w-4 mr-2 dark:text-green-700 text-green-600" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "h-4 w-4 mr-2" }),
+                "Copy Input"
+              ]
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           ToolResults,
           {
@@ -38645,6 +39329,11 @@ const App = () => {
   const [args, setArgs] = reactExports.useState(getInitialArgs);
   const [sseUrl, setSseUrl] = reactExports.useState(getInitialSseUrl);
   const [transportType, setTransportType] = reactExports.useState(getInitialTransportType);
+  const [connectionType, setConnectionType] = reactExports.useState(
+    () => {
+      return localStorage.getItem("lastConnectionType") || "proxy";
+    }
+  );
   const [logLevel, setLogLevel] = reactExports.useState("debug");
   const [notifications, setNotifications] = reactExports.useState([]);
   const [roots, setRoots] = reactExports.useState([]);
@@ -38664,6 +39353,31 @@ const App = () => {
   const [oauthScope, setOauthScope] = reactExports.useState(() => {
     return localStorage.getItem("lastOauthScope") || "";
   });
+  const [customHeaders, setCustomHeaders] = reactExports.useState(() => {
+    const savedHeaders = localStorage.getItem("lastCustomHeaders");
+    if (savedHeaders) {
+      try {
+        return JSON.parse(savedHeaders);
+      } catch (error) {
+        console.warn(
+          `Failed to parse custom headers: "${savedHeaders}", will try legacy migration`,
+          error
+        );
+      }
+    }
+    const legacyToken = localStorage.getItem("lastBearerToken") || "";
+    const legacyHeaderName = localStorage.getItem("lastHeaderName") || "";
+    if (legacyToken) {
+      return migrateFromLegacyAuth(legacyToken, legacyHeaderName);
+    }
+    return [
+      {
+        name: "Authorization",
+        value: "Bearer ",
+        enabled: false
+      }
+    ];
+  });
   const [pendingSampleRequests, setPendingSampleRequests] = reactExports.useState([]);
   const [pendingElicitationRequests, setPendingElicitationRequests] = reactExports.useState([]);
   const [isAuthDebuggerVisible, setIsAuthDebuggerVisible] = reactExports.useState(false);
@@ -38718,11 +39432,11 @@ const App = () => {
     args,
     sseUrl,
     env,
-    bearerToken,
-    headerName,
+    customHeaders,
     oauthClientId,
     oauthScope,
     config,
+    connectionType,
     onNotification: (notification) => {
       setNotifications((prev) => [...prev, notification]);
     },
@@ -38790,11 +39504,35 @@ const App = () => {
     localStorage.setItem("lastTransportType", transportType);
   }, [transportType]);
   reactExports.useEffect(() => {
-    localStorage.setItem("lastBearerToken", bearerToken);
+    localStorage.setItem("lastConnectionType", connectionType);
+  }, [connectionType]);
+  reactExports.useEffect(() => {
+    if (bearerToken) {
+      localStorage.setItem("lastBearerToken", bearerToken);
+    } else {
+      localStorage.removeItem("lastBearerToken");
+    }
   }, [bearerToken]);
   reactExports.useEffect(() => {
-    localStorage.setItem("lastHeaderName", headerName);
+    if (headerName) {
+      localStorage.setItem("lastHeaderName", headerName);
+    } else {
+      localStorage.removeItem("lastHeaderName");
+    }
   }, [headerName]);
+  reactExports.useEffect(() => {
+    localStorage.setItem("lastCustomHeaders", JSON.stringify(customHeaders));
+  }, [customHeaders]);
+  reactExports.useEffect(() => {
+    if (customHeaders.length === 0 && (bearerToken || headerName)) {
+      const migratedHeaders = migrateFromLegacyAuth(bearerToken, headerName);
+      if (migratedHeaders.length > 0) {
+        setCustomHeaders(migratedHeaders);
+        setBearerToken("");
+        setHeaderName("");
+      }
+    }
+  }, [bearerToken, headerName, customHeaders, setCustomHeaders]);
   reactExports.useEffect(() => {
     localStorage.setItem("lastOauthClientId", oauthClientId);
   }, [oauthClientId]);
@@ -39035,12 +39773,12 @@ const App = () => {
     );
     setNextResourceTemplateCursor(response.nextCursor);
   };
-  const getPrompt = async (name, args2 = {}) => {
+  const getPrompt = async (name2, args2 = {}) => {
     lastToolCallOriginTabRef.current = currentTabRef.current;
     const response = await sendMCPRequest(
       {
         method: "prompts/get",
-        params: { name, arguments: args2 }
+        params: { name: name2, arguments: args2 }
       },
       GetPromptResultSchema,
       "prompts"
@@ -39119,15 +39857,17 @@ const App = () => {
     setNextToolCursor(response.nextCursor);
     cacheToolOutputSchemas(response.tools);
   };
-  const callTool = async (name, params) => {
+  const callTool = async (name2, params) => {
     lastToolCallOriginTabRef.current = currentTabRef.current;
     try {
+      const tool = tools.find((t) => t.name === name2);
+      const cleanedParams = (tool == null ? void 0 : tool.inputSchema) ? cleanParams(params, tool.inputSchema) : params;
       const response = await sendMCPRequest(
         {
           method: "tools/call",
           params: {
-            name,
-            arguments: params,
+            name: name2,
+            arguments: cleanedParams,
             _meta: {
               progressToken: progressTokenRef.current++
             }
@@ -39137,6 +39877,7 @@ const App = () => {
         "tools"
       );
       setToolResult(response);
+      setErrors((prev) => ({ ...prev, tools: null }));
     } catch (e) {
       const toolResult2 = {
         content: [
@@ -39148,6 +39889,7 @@ const App = () => {
         isError: true
       };
       setToolResult(toolResult2);
+      setErrors((prev) => ({ ...prev, tools: null }));
     }
   };
   const handleRootsChange = async () => {
@@ -39177,13 +39919,13 @@ const App = () => {
   ) });
   if (window.location.pathname === "/oauth/callback") {
     const OAuthCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthCallback-aXDAN43J.js"), true ? [] : void 0)
+      () => __vitePreload(() => import("./OAuthCallback-C0JXhwud.js"), true ? [] : void 0)
     );
     return /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(OAuthCallback, { onConnect: onOAuthConnect }) });
   }
   if (window.location.pathname === "/oauth/callback/debug") {
     const OAuthDebugCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthDebugCallback-BanjyQ_V.js"), true ? [] : void 0)
+      () => __vitePreload(() => import("./OAuthDebugCallback-TZR9iqA_.js"), true ? [] : void 0)
     );
     return /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(OAuthDebugCallback, { onConnect: onOAuthDebugConnect }) });
   }
@@ -39215,10 +39957,8 @@ const App = () => {
               setEnv,
               config,
               setConfig,
-              bearerToken,
-              setBearerToken,
-              headerName,
-              setHeaderName,
+              customHeaders,
+              setCustomHeaders,
               oauthClientId,
               setOauthClientId,
               oauthScope,
@@ -39227,7 +39967,9 @@ const App = () => {
               onDisconnect: disconnectMcpServer,
               logLevel,
               sendLogLevelRequest,
-              loggingSupported: !!(serverCapabilities == null ? void 0 : serverCapabilities.logging) || false
+              loggingSupported: !!(serverCapabilities == null ? void 0 : serverCapabilities.logging) || false,
+              connectionType,
+              setConnectionType
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -39395,9 +40137,9 @@ const App = () => {
                     setPrompts([]);
                     setNextPromptCursor(void 0);
                   },
-                  getPrompt: (name, args2) => {
+                  getPrompt: (name2, args2) => {
                     clearError("prompts");
-                    getPrompt(name, args2);
+                    getPrompt(name2, args2);
                   },
                   selectedPrompt,
                   setSelectedPrompt: (prompt) => {
@@ -39425,10 +40167,10 @@ const App = () => {
                     setNextToolCursor(void 0);
                     cacheToolOutputSchemas([]);
                   },
-                  callTool: async (name, params) => {
+                  callTool: async (name2, params) => {
                     clearError("tools");
                     setToolResult(null);
-                    await callTool(name, params);
+                    await callTool(name2, params);
                   },
                   selectedTool,
                   setSelectedTool: (tool) => {