@mcp-use/inspector 7.0.0-canary.21 → 7.0.0-canary.22

package/dist/client/index.js

@@ -2097,11 +2097,11 @@ import {
   Zap
 } from "lucide-react";
 import React7, {
-  useCallback as useCallback11,
-  useEffect as useEffect10,
+  useCallback as useCallback13,
+  useEffect as useEffect11,
   useMemo as useMemo10,
-  useRef as useRef7,
-  useState as useState12
+  useRef as useRef8,
+  useState as useState14
 } from "react";
 import { toast as toast4 } from "sonner";
 
@@ -6811,12 +6811,13 @@ import { X as X3 } from "lucide-react";
 import { useMcpClient } from "mcp-use/react";
 import {
   memo,
-  useCallback as useCallback9,
-  useEffect as useEffect8,
+  useCallback as useCallback11,
+  useEffect as useEffect9,
   useMemo as useMemo8,
-  useRef as useRef5,
-  useState as useState10
+  useRef as useRef6,
+  useState as useState12
 } from "react";
+import { createPortal } from "react-dom";
 
 // src/server/rpc-log-bus.ts
 var SimpleEventEmitter = class {
@@ -7000,6 +7001,121 @@ function useMcpAppsHostContext({
   );
 }
 
+// src/client/lib/use-sandbox-remount-generation.ts
+import { useCallback as useCallback8, useRef as useRef4, useState as useState9 } from "react";
+function useSandboxRemountGeneration() {
+  const [generation, setGeneration] = useState9(0);
+  const hasMountedOnceRef = useRef4(false);
+  const onSandboxMount = useCallback8(() => {
+    if (!hasMountedOnceRef.current) {
+      hasMountedOnceRef.current = true;
+      return false;
+    }
+    setGeneration((g) => g + 1);
+    return true;
+  }, []);
+  return { sandboxGeneration: generation, onSandboxMount };
+}
+
+// src/client/lib/widget-fullscreen.ts
+import { useCallback as useCallback9, useEffect as useEffect7, useState as useState10 } from "react";
+var SHELL_BASE = "w-full h-full min-h-0 bg-background flex flex-col [&:fullscreen]:h-full [&:fullscreen]:w-full [&:fullscreen]:bg-background";
+var WIDGET_FULLSCREEN_NATIVE_CLASSES = SHELL_BASE;
+var WIDGET_FULLSCREEN_OVERLAY_CLASSES = `fixed inset-0 z-[100] ${SHELL_BASE}`;
+var WIDGET_PIP_SHELL_CLASSES = [
+  "fixed top-4 left-1/2 -translate-x-1/2 z-[100]",
+  "rounded-3xl w-full min-w-[300px] h-[400px]",
+  "shadow-2xl border overflow-hidden",
+  "bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80",
+  "flex flex-col"
+].join(" ");
+var WIDGET_FULLSCREEN_DOCUMENT_ATTR = "data-mcp-widget-fullscreen";
+var WIDGET_DISPLAY_MODE_ATTR = "data-mcp-widget-display-mode";
+function fullscreenShellClass(cssFallback) {
+  return cssFallback ? WIDGET_FULLSCREEN_OVERLAY_CLASSES : WIDGET_FULLSCREEN_NATIVE_CLASSES;
+}
+function useWidgetDisplayModeDocumentChrome(displayMode) {
+  useEffect7(() => {
+    if (typeof document === "undefined") return;
+    if (displayMode === "pip" || displayMode === "fullscreen") {
+      document.documentElement.setAttribute(
+        WIDGET_DISPLAY_MODE_ATTR,
+        displayMode
+      );
+      if (displayMode === "fullscreen") {
+        document.documentElement.setAttribute(
+          WIDGET_FULLSCREEN_DOCUMENT_ATTR,
+          ""
+        );
+      } else {
+        document.documentElement.removeAttribute(
+          WIDGET_FULLSCREEN_DOCUMENT_ATTR
+        );
+      }
+      return () => {
+        document.documentElement.removeAttribute(WIDGET_DISPLAY_MODE_ATTR);
+        document.documentElement.removeAttribute(
+          WIDGET_FULLSCREEN_DOCUMENT_ATTR
+        );
+      };
+    }
+    document.documentElement.removeAttribute(WIDGET_DISPLAY_MODE_ATTR);
+    document.documentElement.removeAttribute(WIDGET_FULLSCREEN_DOCUMENT_ATTR);
+  }, [displayMode]);
+}
+function useWidgetDisplayModeControls({
+  containerRef,
+  displayMode,
+  setDisplayMode
+}) {
+  const [cssFallback, setCssFallback] = useState10(false);
+  const isFullscreen = displayMode === "fullscreen";
+  const isPip = displayMode === "pip";
+  useWidgetDisplayModeDocumentChrome(displayMode);
+  useEffect7(() => {
+    const onFullscreenChange = () => {
+      if (!document.fullscreenElement && displayMode === "fullscreen") {
+        setCssFallback(false);
+        setDisplayMode("inline");
+      }
+    };
+    document.addEventListener("fullscreenchange", onFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
+  }, [displayMode, setDisplayMode]);
+  const handleDisplayModeChange = useCallback9(
+    async (mode) => {
+      if (mode === "fullscreen") {
+        try {
+          await containerRef.current?.requestFullscreen();
+          setCssFallback(false);
+        } catch {
+          setCssFallback(true);
+        }
+        setDisplayMode("fullscreen");
+        return;
+      }
+      try {
+        if (document.fullscreenElement) {
+          await document.exitFullscreen();
+        }
+      } catch {
+      }
+      setCssFallback(false);
+      setDisplayMode(mode);
+    },
+    [containerRef, setDisplayMode]
+  );
+  const fullscreenShellClassName = isFullscreen ? fullscreenShellClass(cssFallback) : void 0;
+  const pipShellClassName = isPip ? WIDGET_PIP_SHELL_CLASSES : void 0;
+  return {
+    handleDisplayModeChange,
+    fullscreenShellClassName,
+    pipShellClassName,
+    isFullscreen,
+    isPip
+  };
+}
+
 // src/client/components/FullscreenNavbar.tsx
 import { X as X2 } from "lucide-react";
 import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -7013,7 +7129,7 @@ function FullscreenNavbar({
     "div",
     {
       className: cn(
-        "fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-4 py-3",
+        "shrink-0 z-50 flex w-full items-center justify-between px-4 py-3",
         "bg-background/80 backdrop-blur-md border-b border-border",
         "supports-[backdrop-filter]:bg-background/60",
         className
@@ -7049,12 +7165,12 @@ function FullscreenNavbar({
 // src/client/components/ui/SandboxedIframe.tsx
 import {
   forwardRef as forwardRef5,
-  useCallback as useCallback8,
-  useEffect as useEffect7,
+  useCallback as useCallback10,
+  useEffect as useEffect8,
   useImperativeHandle,
   useMemo as useMemo6,
-  useRef as useRef4,
-  useState as useState9
+  useRef as useRef5,
+  useState as useState11
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var SandboxedIframe = forwardRef5(function SandboxedIframe2({
@@ -7065,14 +7181,18 @@ var SandboxedIframe = forwardRef5(function SandboxedIframe2({
   permissive,
   onProxyReady,
   onLoad,
+  onSandboxMount,
   onMessage,
   className,
   style,
   title = "Sandboxed Content"
 }, ref) {
-  const outerRef = useRef4(null);
-  const [proxyReady, setProxyReady] = useState9(false);
-  const [sandboxProxyUrl] = useState9(() => {
+  const outerRef = useRef5(null);
+  const [proxyReady, setProxyReady] = useState11(false);
+  useEffect8(() => {
+    onSandboxMount?.();
+  }, [onSandboxMount]);
+  const [sandboxProxyUrl] = useState11(() => {
     const currentHost = window.location.hostname;
     const currentPort = window.location.port;
     const protocol = window.location.protocol;
@@ -7114,7 +7234,7 @@ var SandboxedIframe = forwardRef5(function SandboxedIframe2({
     }),
     [sandboxProxyOrigin]
   );
-  const handleMessage = useCallback8(
+  const handleMessage = useCallback10(
     (event) => {
       if (event.origin !== sandboxProxyOrigin && sandboxProxyOrigin !== "*") {
         return;
@@ -7130,11 +7250,11 @@ var SandboxedIframe = forwardRef5(function SandboxedIframe2({
     },
     [sandboxProxyOrigin, onProxyReady, onMessage]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, [handleMessage]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!proxyReady || !html || !outerRef.current?.contentWindow) return;
     outerRef.current.contentWindow.postMessage(
       {
@@ -7303,8 +7423,8 @@ function MCPAppsRendererBase({
   chromeless,
   inlineWidthOverride
 }) {
-  const sandboxRef = useRef5(null);
-  const bridgeRef = useRef5(null);
+  const sandboxRef = useRef6(null);
+  const bridgeRef = useRef6(null);
   const { resolvedTheme } = useTheme();
   const { servers } = useMcpClient();
   const serverFromContext = servers.find((s) => s.id === serverId);
@@ -7317,41 +7437,80 @@ function MCPAppsRendererBase({
     setWidgetModelContext,
     setWidgetDeclaredCsp
   } = useWidgetDebug();
-  const [initCount, setInitCount] = useState10(0);
-  const [loadError, setLoadError] = useState10(null);
-  const [widgetHtml, setWidgetHtml] = useState10(null);
-  const [isReady, setIsReady] = useState10(false);
-  const [showSpinner, setShowSpinner] = useState10(true);
-  const hasLoadedOnceRef = useRef5(false);
-  const toolInputSentRef = useRef5(null);
-  const lastSentPropsRef = useRef5(null);
-  const lastSentToolOutputKeyRef = useRef5(null);
-  const lastInitTimeRef = useRef5(0);
-  const resendTimerRef = useRef5(
+  const [initCount, setInitCount] = useState12(0);
+  const [loadError, setLoadError] = useState12(null);
+  const [widgetHtml, setWidgetHtml] = useState12(null);
+  const [isReady, setIsReady] = useState12(false);
+  const [showSpinner, setShowSpinner] = useState12(true);
+  const hasLoadedOnceRef = useRef6(false);
+  const toolInputSentRef = useRef6(null);
+  const lastSentPropsRef = useRef6(null);
+  const lastSentToolOutputKeyRef = useRef6(null);
+  const lastInitTimeRef = useRef6(0);
+  const resendTimerRef = useRef6(
     void 0
   );
-  const toolInputRef = useRef5(toolInput);
-  const toolOutputRef = useRef5(toolOutput);
-  const customPropsRef = useRef5(customProps);
-  const readResourceRef = useRef5(readResource);
-  const serverRef = useRef5(server);
-  const lastHostContextRef = useRef5(null);
+  const toolInputRef = useRef6(toolInput);
+  const toolOutputRef = useRef6(toolOutput);
+  const customPropsRef = useRef6(customProps);
+  const readResourceRef = useRef6(readResource);
+  const serverRef = useRef6(server);
+  const lastHostContextRef = useRef6(null);
   toolInputRef.current = toolInput;
   toolOutputRef.current = toolOutput;
   customPropsRef.current = customProps;
   readResourceRef.current = readResource;
   serverRef.current = server;
-  const [widgetCsp, setWidgetCsp] = useState10(void 0);
-  const [widgetPermissions, setWidgetPermissions] = useState10(void 0);
-  const [prefersBorder, setPrefersBorder] = useState10(false);
-  const [internalDisplayMode, setInternalDisplayMode] = useState10("inline");
+  const [widgetCsp, setWidgetCsp] = useState12(void 0);
+  const [widgetPermissions, setWidgetPermissions] = useState12(void 0);
+  const [prefersBorder, setPrefersBorder] = useState12(false);
+  const [internalDisplayMode, setInternalDisplayMode] = useState12("inline");
   const displayMode = displayModeProp ?? internalDisplayMode;
-  const displayModeRef = useRef5(displayMode);
+  const containerRef = useRef6(null);
+  const prevControlledDisplayModeRef = useRef6(displayModeProp);
+  const setDisplayMode = useCallback11(
+    (mode) => {
+      if (displayModeProp !== void 0) {
+        prevControlledDisplayModeRef.current = mode;
+      }
+      if (onDisplayModeChange) onDisplayModeChange(mode);
+      else setInternalDisplayMode(mode);
+    },
+    [onDisplayModeChange, displayModeProp]
+  );
+  const { sandboxGeneration, onSandboxMount } = useSandboxRemountGeneration();
+  const handleSandboxMount = useCallback11(() => {
+    if (onSandboxMount()) {
+      if (hasLoadedOnceRef.current) {
+        setShowSpinner(true);
+        setIsReady(false);
+      }
+    }
+  }, [onSandboxMount]);
+  const {
+    handleDisplayModeChange,
+    fullscreenShellClassName,
+    pipShellClassName,
+    isFullscreen,
+    isPip
+  } = useWidgetDisplayModeControls({
+    containerRef,
+    displayMode,
+    setDisplayMode
+  });
+  const handleDisplayModeChangeRef = useRef6(handleDisplayModeChange);
+  handleDisplayModeChangeRef.current = handleDisplayModeChange;
+  const displayModeRef = useRef6(displayMode);
   displayModeRef.current = displayMode;
-  const [inlineHeight, setInlineHeight] = useState10(
+  useEffect9(() => {
+    if (displayModeProp === void 0) return;
+    if (prevControlledDisplayModeRef.current === displayModeProp) return;
+    prevControlledDisplayModeRef.current = displayModeProp;
+    void handleDisplayModeChangeRef.current(displayModeProp);
+  }, [displayModeProp]);
+  const [inlineHeight, setInlineHeight] = useState12(
     MCP_APPS_CONFIG.DIMENSIONS.DEFAULT_HEIGHT
   );
-  const containerRef = useRef5(null);
   const cspMode = playground.cspMode;
   const deviceType = playground.deviceType;
   const customViewport = playground.customViewport;
@@ -7375,7 +7534,11 @@ function MCPAppsRendererBase({
     toolMetadata,
     tool
   });
-  useEffect8(() => {
+  useEffect9(() => {
+    hasLoadedOnceRef.current = false;
+    readyFiredRef.current = false;
+  }, [toolCallId, resourceUri]);
+  useEffect9(() => {
     const fetchWidgetHtml = async () => {
       try {
         const resourceResult = await readResource(resourceUri);
@@ -7498,15 +7661,15 @@ function MCPAppsRendererBase({
     };
     fetchWidgetHtml();
   }, [serverId, resourceUri, toolCallId, toolName]);
-  const prevCspModeRef = useRef5(cspMode);
-  useEffect8(() => {
+  const prevCspModeRef = useRef6(cspMode);
+  useEffect9(() => {
     if (prevCspModeRef.current === cspMode) return;
     prevCspModeRef.current = cspMode;
     if (hasLoadedOnceRef.current && onRerun) {
       onRerun();
     }
   }, [cspMode, onRerun]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (initCount <= 1) return;
     let cancelled2 = false;
     (async () => {
@@ -7524,10 +7687,14 @@ function MCPAppsRendererBase({
       cancelled2 = true;
     };
   }, [initCount, resourceUri, readResource]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!widgetHtml || !sandboxRef.current) return;
     const iframe = sandboxRef.current.getIframeElement();
     if (!iframe?.contentWindow) return;
+    lastInitTimeRef.current = 0;
+    toolInputSentRef.current = null;
+    lastSentPropsRef.current = null;
+    lastSentToolOutputKeyRef.current = null;
     setInitCount(0);
     const customTransport = {
       sessionId: void 0,
@@ -7641,11 +7808,7 @@ function MCPAppsRendererBase({
     };
     bridge.onrequestdisplaymode = async ({ mode }) => {
       const requestedMode = mode ?? "inline";
-      if (onDisplayModeChange) {
-        onDisplayModeChange(requestedMode);
-      } else {
-        setInternalDisplayMode(requestedMode);
-      }
+      await handleDisplayModeChangeRef.current(requestedMode);
       return { mode: requestedMode };
     };
     bridge.onupdatemodelcontext = async ({ content, structuredContent }) => {
@@ -7710,9 +7873,11 @@ function MCPAppsRendererBase({
       );
     });
     const handleMessage = (event) => {
-      const proxyOrigin = new URL(iframe.src).origin;
+      const activeIframe = sandboxRef.current?.getIframeElement();
+      if (!activeIframe?.contentWindow) return;
+      const proxyOrigin = new URL(activeIframe.src).origin;
       if (event.origin !== proxyOrigin) return;
-      if (event.source !== iframe.contentWindow) return;
+      if (event.source !== activeIframe.contentWindow) return;
       if (event.data?.type === "iframe-console-log") {
         if (event.data.level === "error" && typeof window !== "undefined" && window.parent !== window) {
           const args = Array.isArray(event.data.args) ? event.data.args : [];
@@ -7777,11 +7942,12 @@ function MCPAppsRendererBase({
   }, [
     widgetHtml,
     sandboxRef,
-    toolCallId
+    toolCallId,
+    sandboxGeneration
     // readResource, server: use refs to avoid bridge tear-down/recreate on parent re-renders
     // (which would reset initCount and cause iframe/widget to re-init, appearing as "re-render")
   ]);
-  useEffect8(() => {
+  useEffect9(() => {
     const bridge = bridgeRef.current;
     if (!bridge || initCount === 0) return;
     const contextKey = JSON.stringify(hostContext);
@@ -7789,12 +7955,12 @@ function MCPAppsRendererBase({
     lastHostContextRef.current = contextKey;
     bridge.setHostContext(hostContext);
   }, [hostContext, initCount]);
-  useEffect8(() => {
+  useEffect9(() => {
     const bridge = bridgeRef.current;
     if (!bridge || initCount === 0 || !partialToolInput) return;
     bridge.sendToolInputPartial({ arguments: partialToolInput });
   }, [initCount, partialToolInput]);
-  useEffect8(() => {
+  useEffect9(() => {
     const bridge = bridgeRef.current;
     if (!bridge || initCount === 0) return;
     const parsedCustomProps = {};
@@ -7833,7 +7999,7 @@ function MCPAppsRendererBase({
       lastSentPropsRef.current = propsKey;
     }
   }, [initCount, toolInput, customProps, toolCallId, partialToolInput]);
-  useEffect8(() => {
+  useEffect9(() => {
     const bridge = bridgeRef.current;
     if (!bridge || initCount === 0) return;
     if (toolOutput) {
@@ -7866,12 +8032,12 @@ function MCPAppsRendererBase({
       }
     }
   }, [initCount, toolOutput, toolCallId, customProps]);
-  useEffect8(() => {
+  useEffect9(() => {
     const bridge = bridgeRef.current;
     if (!bridge || initCount === 0 || !cancelled) return;
     bridge.sendToolCancelled({ reason: "Cancelled by user" });
   }, [cancelled, initCount]);
-  const handleSandboxMessage = useCallback9(
+  const handleSandboxMessage = useCallback11(
     (event) => {
       if (event.data?.type !== "mcp-apps:csp-violation") return;
       const {
@@ -7901,59 +8067,16 @@ function MCPAppsRendererBase({
     },
     [toolCallId, addCspViolation]
   );
-  useEffect8(() => {
-    const handleFullscreenChange = () => {
-      if (!document.fullscreenElement && displayMode === "fullscreen") {
-        if (onDisplayModeChange) {
-          onDisplayModeChange("inline");
-        } else {
-          setInternalDisplayMode("inline");
-        }
-      }
-    };
-    document.addEventListener("fullscreenchange", handleFullscreenChange);
-    return () => {
-      document.removeEventListener("fullscreenchange", handleFullscreenChange);
-    };
-  }, [displayMode, onDisplayModeChange]);
-  const handleDisplayModeChange = useCallback9(
-    async (mode) => {
-      try {
-        if (mode === "fullscreen") {
-          if (containerRef.current) {
-            await containerRef.current.requestFullscreen();
-          }
-        } else {
-          if (document.fullscreenElement) {
-            await document.exitFullscreen();
-          }
-        }
-        if (onDisplayModeChange) {
-          onDisplayModeChange(mode);
-        } else {
-          setInternalDisplayMode(mode);
-        }
-      } catch (err) {
-        console.error("[MCPAppsRenderer] Display mode error:", err);
-        if (onDisplayModeChange) {
-          onDisplayModeChange(mode);
-        } else {
-          setInternalDisplayMode(mode);
-        }
-      }
-    },
-    [onDisplayModeChange]
-  );
-  const iframeEffectivelyReady = isReady || initCount > 0;
-  const readyFiredRef = useRef5(false);
-  useEffect8(() => {
+  const iframeEffectivelyReady = initCount > 0 || isReady && !hasLoadedOnceRef.current;
+  const readyFiredRef = useRef6(false);
+  useEffect9(() => {
     if (readyFiredRef.current) return;
     if (initCount > 0) {
       readyFiredRef.current = true;
       onReady?.();
     }
   }, [initCount, onReady]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!iframeEffectivelyReady || !showSpinner) return;
     const timer = setTimeout(() => {
       setShowSpinner(false);
@@ -7970,18 +8093,12 @@ function MCPAppsRendererBase({
   if (!widgetHtml) {
     return /* @__PURE__ */ jsx30(WidgetWrapper, { className, noWrapper, children: /* @__PURE__ */ jsx30("div", { className: "flex absolute left-0 top-0 items-center justify-center w-full h-full", children: /* @__PURE__ */ jsx30(Spinner, { className: "size-5" }) }) });
   }
-  const isPip = displayMode === "pip";
-  const isFullscreen = displayMode === "fullscreen";
   const containerClassName = (() => {
-    if (isFullscreen) {
-      return "fixed inset-0 z-40 w-full h-full bg-background flex flex-col";
+    if (fullscreenShellClassName) {
+      return fullscreenShellClassName;
     }
-    if (isPip) {
-      return [
-        `fixed top-4 left-1/2 -translate-x-1/2 z-50 rounded-3xl w-full min-w-[300px] h-[400px]`,
-        "shadow-2xl border overflow-hidden",
-        "bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80"
-      ].join(" ");
+    if (pipShellClassName) {
+      return pipShellClassName;
     }
     return "flex group flex-1 items-center justify-center";
   })();
@@ -7991,7 +8108,7 @@ function MCPAppsRendererBase({
     maxWidth: displayMode === "inline" ? `${inlineMaxWidth}px` : "100%",
     transition: isFullscreen || isPip ? void 0 : "height 300ms ease-out"
   };
-  return /* @__PURE__ */ jsx30(WidgetWrapper, { className, noWrapper, children: /* @__PURE__ */ jsxs15(
+  const widgetShell = /* @__PURE__ */ jsxs15(
     "div",
     {
       ref: containerRef,
@@ -8021,8 +8138,8 @@ function MCPAppsRendererBase({
           "div",
           {
             className: cn(
-              "flex-1 w-full h-full flex justify-center items-center relative",
-              isFullscreen && !chromeless && "pt-14",
+              "relative w-full min-h-0",
+              isFullscreen || isPip ? "flex flex-1 flex-col" : "flex flex-1 justify-center items-center",
               !isPip && !isFullscreen && (invoking || invoked) && "pt-8"
             ),
             children: [
@@ -8030,8 +8147,11 @@ function MCPAppsRendererBase({
               /* @__PURE__ */ jsxs15(
                 "div",
                 {
-                  className: "relative w-full h-full",
-                  style: { maxWidth: iframeStyle.maxWidth },
+                  className: cn(
+                    "relative w-full",
+                    isFullscreen || isPip ? "h-full min-h-0 flex-1" : "h-full"
+                  ),
+                  style: isFullscreen || isPip ? void 0 : { maxWidth: iframeStyle.maxWidth },
                   children: [
                     /* @__PURE__ */ jsx30("div", { className: "absolute -top-8 left-2 z-10 h-full", children: !isPip && !isFullscreen && (invoking || invoked) && /* @__PURE__ */ jsxs15("div", { className: "whitespace-nowrap", children: [
                       invoking && !toolOutput && /* @__PURE__ */ jsx30(TextShimmer, { className: "text-xs ", children: invoking }),
@@ -8046,6 +8166,7 @@ function MCPAppsRendererBase({
                         csp: widgetCsp,
                         permissions: widgetPermissions,
                         permissive: cspMode === "permissive",
+                        onSandboxMount: handleSandboxMount,
                         onLoad: () => setIsReady(true),
                         onMessage: handleSandboxMessage,
                         title: `MCP App: ${toolName}`,
@@ -8069,7 +8190,8 @@ function MCPAppsRendererBase({
         )
       ]
     }
-  ) });
+  );
+  return /* @__PURE__ */ jsx30(WidgetWrapper, { className, noWrapper, children: isPip && typeof document !== "undefined" ? createPortal(widgetShell, document.body) : widgetShell });
 }
 function mcpAppsRendererAreEqual(prev, next) {
   const keys = [
@@ -8147,7 +8269,8 @@ function McpUIRenderer({ resource, className }) {
 // src/client/components/OpenAIComponentRenderer.tsx
 import { X as X4 } from "lucide-react";
 import { useMcpClient as useMcpClient2 } from "mcp-use/react";
-import { memo as memo2, useCallback as useCallback10, useEffect as useEffect9, useRef as useRef6, useState as useState11 } from "react";
+import { memo as memo2, useCallback as useCallback12, useEffect as useEffect10, useRef as useRef7, useState as useState13 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 
 // src/client/utils/iframeConsoleInterceptor.ts
 var IFRAME_CONSOLE_INTERCEPTOR_SCRIPT = `
@@ -8325,7 +8448,7 @@ function injectConsoleInterceptor(iframe) {
 }
 
 // src/client/components/OpenAIComponentRenderer.tsx
-import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
 function Wrapper({
   children,
   className,
@@ -8361,46 +8484,48 @@ function OpenAIComponentRendererBase({
   invoked,
   onUpdateGlobals
 }) {
-  const iframeRef = useRef6(null);
-  const containerRef = useRef6(null);
-  const [isReady, setIsReady] = useState11(false);
-  const [showSkeleton, setShowSkeleton] = useState11(true);
-  const hasLoadedOnceRef = useRef6(false);
-  const [error, setError] = useState11(null);
-  const [widgetUrl, setWidgetUrl] = useState11(null);
-  const [iframeHeight, setIframeHeight] = useState11(400);
-  const lastMeasuredHeightRef = useRef6(0);
-  const lastNotifiedHeightRef = useRef6(0);
-  const useNotifiedHeightRef = useRef6(false);
-  const [centerVertically, setCenterVertically] = useState11(false);
-  const [displayMode, setDisplayMode] = useState11("inline");
-  const [isSameOrigin, setIsSameOrigin] = useState11(false);
-  const [isPipHovered, setIsPipHovered] = useState11(false);
-  const [useDevMode, setUseDevMode] = useState11(false);
-  const [widgetToolInput, setWidgetToolInput] = useState11(null);
-  const [_widgetToolOutput, setWidgetToolOutput] = useState11(null);
-  const pendingGlobalUpdatesRef = useRef6(null);
-  const flushGlobalsRafRef = useRef6(null);
-  const batchedGlobalsRef = useRef6(null);
-  const batchScheduledRef = useRef6(false);
-  const lastSentToolOutputKeyRef = useRef6(null);
-  const toolIdRef = useRef6(
+  const iframeRef = useRef7(null);
+  const containerRef = useRef7(null);
+  const [isReady, setIsReady] = useState13(false);
+  const [showSkeleton, setShowSkeleton] = useState13(true);
+  const hasLoadedOnceRef = useRef7(false);
+  const [error, setError] = useState13(null);
+  const [widgetUrl, setWidgetUrl] = useState13(null);
+  const [iframeHeight, setIframeHeight] = useState13(400);
+  const lastMeasuredHeightRef = useRef7(0);
+  const lastNotifiedHeightRef = useRef7(0);
+  const useNotifiedHeightRef = useRef7(false);
+  const [centerVertically, setCenterVertically] = useState13(false);
+  const [displayMode, setDisplayMode] = useState13("inline");
+  const [isSameOrigin, setIsSameOrigin] = useState13(false);
+  const [isPipHovered, setIsPipHovered] = useState13(false);
+  const [useDevMode, setUseDevMode] = useState13(false);
+  const [widgetToolInput, setWidgetToolInput] = useState13(null);
+  const [_widgetToolOutput, setWidgetToolOutput] = useState13(null);
+  const pendingGlobalUpdatesRef = useRef7(null);
+  const flushGlobalsRafRef = useRef7(null);
+  const batchedGlobalsRef = useRef7(null);
+  const batchScheduledRef = useRef7(false);
+  const lastSentToolOutputKeyRef = useRef7(null);
+  const toolIdRef = useRef7(
     `tool-${Date.now()}-${Math.random().toString(36).substring(7)}`
   );
   const toolId = toolIdRef.current;
-  const hasSetWidgetUrlRef = useRef6(false);
+  const hasSetWidgetUrlRef = useRef7(false);
   const { servers } = useMcpClient2();
   const server = servers.find((connection) => connection.id === serverId);
+  const serverRef = useRef7(server);
+  serverRef.current = server;
   const serverBaseUrl = serverBaseUrlProp ?? server?.url;
   const { resolvedTheme } = useTheme();
   const { playground, addWidget, addCspViolation } = useWidgetDebug();
-  const toolArgsRef = useRef6(toolArgs);
-  const toolResultRef = useRef6(toolResult);
-  const readResourceRef = useRef6(readResource);
-  const serverBaseUrlRef = useRef6(serverBaseUrl);
-  const resolvedThemeRef = useRef6(resolvedTheme);
-  const customPropsRef = useRef6(customProps);
-  useEffect9(() => {
+  const toolArgsRef = useRef7(toolArgs);
+  const toolResultRef = useRef7(toolResult);
+  const readResourceRef = useRef7(readResource);
+  const serverBaseUrlRef = useRef7(serverBaseUrl);
+  const resolvedThemeRef = useRef7(resolvedTheme);
+  const customPropsRef = useRef7(customProps);
+  useEffect10(() => {
     toolArgsRef.current = toolArgs;
     toolResultRef.current = toolResult;
     readResourceRef.current = readResource;
@@ -8408,7 +8533,7 @@ function OpenAIComponentRendererBase({
     resolvedThemeRef.current = resolvedTheme;
     customPropsRef.current = customProps;
   });
-  useEffect9(() => {
+  useEffect10(() => {
     let cancelled = false;
     const storeAndSetUrl = async () => {
       const currentToolResult = toolResultRef.current;
@@ -8508,7 +8633,7 @@ function OpenAIComponentRendererBase({
     // toolResult._meta is updated via updateIframeGlobals() without re-storing.
     toolResult
   ]);
-  const updateIframeGlobals = useCallback10(
+  const updateIframeGlobals = useCallback12(
     (updates) => {
       batchedGlobalsRef.current = {
         ...batchedGlobalsRef.current || {},
@@ -8618,7 +8743,7 @@ function OpenAIComponentRendererBase({
     },
     [onUpdateGlobals]
   );
-  useEffect9(() => {
+  useEffect10(() => {
     return () => {
       if (flushGlobalsRafRef.current !== null) {
         window.cancelAnimationFrame(flushGlobalsRafRef.current);
@@ -8626,7 +8751,7 @@ function OpenAIComponentRendererBase({
       }
     };
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!toolResult || !isReady || !iframeRef.current?.contentWindow) return;
     const structuredContent = toolResult?.structuredContent || toolResult;
     const metadata = toolResult?._meta || null;
@@ -8638,47 +8763,55 @@ function OpenAIComponentRendererBase({
       toolResponseMetadata: metadata
     });
   }, [toolResult, isReady, updateIframeGlobals]);
-  const handleDisplayModeChange = useCallback10(
-    async (mode) => {
-      try {
-        if (mode === "fullscreen") {
-          if (document.fullscreenElement) {
-            setDisplayMode(mode);
-            updateIframeGlobals({ displayMode: mode });
-            return;
-          }
-          if (containerRef.current) {
-            await containerRef.current.requestFullscreen();
-            setDisplayMode(mode);
-            updateIframeGlobals({ displayMode: mode });
-            console.log("[OpenAIComponentRenderer] Entered fullscreen");
-          }
-        } else {
-          if (document.fullscreenElement) {
-            await document.exitFullscreen();
-          }
-          setDisplayMode(mode);
-          updateIframeGlobals({ displayMode: mode });
-          console.log("[OpenAIComponentRenderer] Exited fullscreen");
-        }
-      } catch (err) {
-        console.error("[OpenAIComponentRenderer] Fullscreen error:", err);
-        setDisplayMode(mode);
-        updateIframeGlobals({ displayMode: mode });
-      }
+  const setDisplayModeWithGlobals = useCallback12(
+    (mode) => {
+      setDisplayMode(mode);
+      updateIframeGlobals({ displayMode: mode });
     },
     [updateIframeGlobals]
   );
-  useEffect9(() => {
+  const {
+    handleDisplayModeChange,
+    fullscreenShellClassName,
+    pipShellClassName,
+    isPip
+  } = useWidgetDisplayModeControls({
+    containerRef,
+    displayMode,
+    setDisplayMode: setDisplayModeWithGlobals
+  });
+  const iframeMountCountRef = useRef7(0);
+  const [iframeMountGeneration, setIframeMountGeneration] = useState13(0);
+  const setIframeRef = useCallback12((node) => {
+    iframeRef.current = node;
+    if (!node) return;
+    iframeMountCountRef.current += 1;
+    if (iframeMountCountRef.current > 1) {
+      setIframeMountGeneration((g) => g + 1);
+      if (hasLoadedOnceRef.current) {
+        setShowSkeleton(true);
+        setIsReady(false);
+      }
+    }
+  }, []);
+  const handleDisplayModeChangeRef = useRef7(handleDisplayModeChange);
+  handleDisplayModeChangeRef.current = handleDisplayModeChange;
+  const widgetUrlRef = useRef7(null);
+  useEffect10(() => {
     if (!widgetUrl) return;
-    setIsReady(false);
-    if (!hasLoadedOnceRef.current) {
-      setShowSkeleton(true);
+    const widgetUrlChanged = widgetUrlRef.current !== widgetUrl;
+    widgetUrlRef.current = widgetUrl;
+    if (widgetUrlChanged) {
+      setIsReady(false);
+      if (!hasLoadedOnceRef.current) {
+        setShowSkeleton(true);
+      }
     }
     setError(null);
     let hasHandledLoad = false;
     const handleMessage = async (event) => {
-      if (!iframeRef.current || event.source !== iframeRef.current.contentWindow) {
+      const activeIframe = iframeRef.current;
+      if (!activeIframe || event.source !== activeIframe.contentWindow) {
         return;
       }
       if (event.data?.type === "iframe-console-log") {
@@ -8745,15 +8878,20 @@ function OpenAIComponentRendererBase({
           break;
         case "openai:callTool":
           try {
-            if (!server) {
+            const currentServer = serverRef.current;
+            if (!currentServer) {
               throw new Error("Server connection not available");
             }
             const { toolName: toolName2, params, requestId } = event.data;
-            const result = await server.callTool(toolName2, params || {}, {
-              timeout: 6e5,
-              // 10 minutes
-              resetTimeoutOnProgress: true
-            });
+            const result = await currentServer.callTool(
+              toolName2,
+              params || {},
+              {
+                timeout: 6e5,
+                // 10 minutes
+                resetTimeoutOnProgress: true
+              }
+            );
             let formattedResult;
             if (result && typeof result === "object") {
               if (Array.isArray(result.contents)) {
@@ -8858,7 +8996,7 @@ function OpenAIComponentRendererBase({
           try {
             const { mode } = event.data;
             if (mode && ["inline", "pip", "fullscreen"].includes(mode)) {
-              await handleDisplayModeChange(mode);
+              await handleDisplayModeChangeRef.current(mode);
             }
           } catch (err) {
             console.error(
@@ -8937,14 +9075,12 @@ function OpenAIComponentRendererBase({
   }, [
     widgetUrl,
     isSameOrigin,
-    handleDisplayModeChange,
-    server,
     serverId,
-    resolvedTheme,
     updateIframeGlobals,
-    useDevMode
+    useDevMode,
+    iframeMountGeneration
   ]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!isReady) return;
     if (!isSameOrigin) {
       updateIframeGlobals({ theme: resolvedTheme });
@@ -8962,14 +9098,12 @@ function OpenAIComponentRendererBase({
     }
     updateIframeGlobals({ theme: resolvedTheme });
   }, [resolvedTheme, isReady, isSameOrigin, updateIframeGlobals]);
-  useEffect9(() => {
-    if (!isReady || !showSkeleton) {
-      return;
-    }
+  useEffect10(() => {
+    if (!isReady || !showSkeleton) return;
     setShowSkeleton(false);
     hasLoadedOnceRef.current = true;
   }, [isReady, showSkeleton]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!widgetUrl || !isSameOrigin) return;
     const measure = () => {
       if (useNotifiedHeightRef.current) {
@@ -9002,7 +9136,7 @@ function OpenAIComponentRendererBase({
       window.removeEventListener("resize", measure);
     };
   }, [widgetUrl, isSameOrigin]);
-  useEffect9(() => {
+  useEffect10(() => {
     const evaluateCentering = () => {
       const container = containerRef.current;
       if (!container) return;
@@ -9015,26 +9149,7 @@ function OpenAIComponentRendererBase({
       window.removeEventListener("resize", evaluateCentering);
     };
   }, [iframeHeight]);
-  useEffect9(() => {
-    const handleFullscreenChange = () => {
-      if (!document.fullscreenElement && displayMode === "fullscreen") {
-        setDisplayMode("inline");
-        updateIframeGlobals({ displayMode: "inline" });
-        console.log("[OpenAIComponentRenderer] Fullscreen exited by user");
-      } else if (document.fullscreenElement && displayMode !== "fullscreen") {
-        setDisplayMode("fullscreen");
-        updateIframeGlobals({ displayMode: "fullscreen" });
-      }
-    };
-    document.addEventListener("fullscreenchange", handleFullscreenChange);
-    document.addEventListener("fullscreenerror", (e) => {
-      console.error("[OpenAIComponentRenderer] Fullscreen error:", e);
-    });
-    return () => {
-      document.removeEventListener("fullscreenchange", handleFullscreenChange);
-    };
-  }, [displayMode, updateIframeGlobals]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (widgetUrl && resolvedTheme && isReady) {
       const timeoutId = setTimeout(() => {
         updateIframeGlobals({ theme: resolvedTheme });
@@ -9051,9 +9166,101 @@ function OpenAIComponentRendererBase({
   if (!widgetUrl) {
     return /* @__PURE__ */ jsx32(Wrapper, { className, noWrapper, children: /* @__PURE__ */ jsx32("div", { className: "flex absolute left-0 top-0 items-center justify-center w-full h-full", children: /* @__PURE__ */ jsx32(Spinner, { className: "size-5" }) }) });
   }
+  const widgetShell = /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "w-full h-full flex flex-col min-h-0",
+        displayMode === "fullscreen" ? "items-stretch justify-stretch" : cn(
+          "justify-center items-center",
+          centerVertically && "items-center"
+        ),
+        fullscreenShellClassName,
+        pipShellClassName
+      ),
+      style: isPip ? { maxWidth: MCP_APPS_CONFIG.DIMENSIONS.PIP_MAX_WIDTH } : void 0,
+      onMouseEnter: () => isPip && setIsPipHovered(true),
+      onMouseLeave: () => isPip && setIsPipHovered(false),
+      children: [
+        displayMode === "fullscreen" && /* @__PURE__ */ jsx32(
+          FullscreenNavbar,
+          {
+            title: toolName,
+            onClose: () => handleDisplayModeChange("inline")
+          }
+        ),
+        isPip && /* @__PURE__ */ jsx32(
+          "button",
+          {
+            onClick: () => handleDisplayModeChange("inline"),
+            className: cn(
+              "absolute top-2 right-2 z-50",
+              "flex items-center justify-center",
+              "w-8 h-8 rounded-full",
+              "bg-background/90 hover:bg-background",
+              "border border-border",
+              "shadow-lg",
+              "transition-opacity duration-200",
+              "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+              isPipHovered ? "opacity-100" : "opacity-0"
+            ),
+            "aria-label": "Exit Picture in Picture",
+            children: /* @__PURE__ */ jsx32(X4, { className: "w-4 h-4 text-foreground" })
+          }
+        ),
+        /* @__PURE__ */ jsx32(
+          "div",
+          {
+            className: cn(
+              "relative w-full min-h-0",
+              displayMode === "fullscreen" || displayMode === "pip" ? "flex flex-1 flex-col" : cn(
+                "flex flex-1 justify-center items-center",
+                centerVertically && "items-center"
+              ),
+              displayMode === "inline" && (invoking || invoked) && "pt-8"
+            ),
+            children: /* @__PURE__ */ jsxs16(
+              "div",
+              {
+                className: cn(
+                  "relative w-full",
+                  displayMode === "fullscreen" || displayMode === "pip" ? "h-full min-h-0 flex-1" : "max-w-[768px]"
+                ),
+                children: [
+                  displayMode === "inline" && (invoking || invoked) && /* @__PURE__ */ jsxs16("div", { className: "absolute -top-8 left-2 z-10 whitespace-nowrap", children: [
+                    invoking && !toolResult && /* @__PURE__ */ jsx32(TextShimmer, { className: "text-xs", children: invoking }),
+                    invoked && toolResult && /* @__PURE__ */ jsx32("span", { className: "text-xs text-muted-foreground", children: invoked })
+                  ] }),
+                  /* @__PURE__ */ jsx32(
+                    "iframe",
+                    {
+                      ref: setIframeRef,
+                      src: widgetUrl,
+                      className: cn(
+                        displayMode === "inline" && "w-full",
+                        displayMode === "fullscreen" && "w-full h-full rounded-none",
+                        displayMode === "pip" && "w-full h-full rounded-lg"
+                      ),
+                      style: {
+                        height: displayMode === "fullscreen" || displayMode === "pip" ? "100%" : `${iframeHeight}px`
+                      },
+                      sandbox: IFRAME_SANDBOX_PERMISSIONS,
+                      title: `OpenAI Component: ${toolName}`,
+                      allow: "web-share"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs16(Wrapper, { className, noWrapper, children: [
-    showSkeleton && /* @__PURE__ */ jsx32("div", { className: "flex absolute left-0 top-0 items-center justify-center w-full h-full z-0", children: /* @__PURE__ */ jsx32(Spinner, { className: "size-5" }) }),
-    showConsole && isSameOrigin && displayMode !== "fullscreen" && displayMode !== "pip" && /* @__PURE__ */ jsx32("div", { className: "absolute top-2 right-2 z-30 flex items-center gap-2", children: /* @__PURE__ */ jsx32(
+    !isPip && showSkeleton && /* @__PURE__ */ jsx32("div", { className: "flex absolute left-0 top-0 items-center justify-center w-full h-full z-0", children: /* @__PURE__ */ jsx32(Spinner, { className: "size-5" }) }),
+    showConsole && isSameOrigin && !isPip && displayMode !== "fullscreen" && /* @__PURE__ */ jsx32("div", { className: "absolute top-2 right-2 z-30 flex items-center gap-2", children: /* @__PURE__ */ jsx32(
       MCPAppsDebugControls,
       {
         displayMode,
@@ -9070,84 +9277,10 @@ function OpenAIComponentRendererBase({
         onUpdateGlobals: updateIframeGlobals
       }
     ) }),
-    /* @__PURE__ */ jsxs16(
-      "div",
-      {
-        ref: containerRef,
-        className: cn(
-          "w-full h-full flex flex-col justify-center items-center",
-          centerVertically && "items-center",
-          displayMode === "fullscreen" && "bg-background",
-          displayMode === "pip" && `fixed top-4 left-1/2 -translate-x-1/2 z-50 rounded-3xl w-full min-w-[300px] h-[400px] shadow-2xl border overflow-hidden`
-        ),
-        style: displayMode === "pip" ? { maxWidth: MCP_APPS_CONFIG.DIMENSIONS.PIP_MAX_WIDTH } : void 0,
-        onMouseEnter: () => displayMode === "pip" && setIsPipHovered(true),
-        onMouseLeave: () => displayMode === "pip" && setIsPipHovered(false),
-        children: [
-          displayMode === "fullscreen" && document.fullscreenElement && /* @__PURE__ */ jsx32(
-            FullscreenNavbar,
-            {
-              title: toolName,
-              onClose: () => handleDisplayModeChange("inline")
-            }
-          ),
-          displayMode === "pip" && /* @__PURE__ */ jsx32(
-            "button",
-            {
-              onClick: () => handleDisplayModeChange("inline"),
-              className: cn(
-                "absolute top-2 right-2 z-50",
-                "flex items-center justify-center",
-                "w-8 h-8 rounded-full",
-                "bg-background/90 hover:bg-background",
-                "border border-border",
-                "shadow-lg",
-                "transition-opacity duration-200",
-                "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-                isPipHovered ? "opacity-100" : "opacity-0"
-              ),
-              "aria-label": "Exit Picture in Picture",
-              children: /* @__PURE__ */ jsx32(X4, { className: "w-4 h-4 text-foreground" })
-            }
-          ),
-          /* @__PURE__ */ jsx32(
-            "div",
-            {
-              className: cn(
-                "flex-1 w-full flex justify-center items-center relative",
-                displayMode === "fullscreen" && "pt-14",
-                centerVertically && "items-center",
-                displayMode === "inline" && (invoking || invoked) && "pt-8"
-              ),
-              children: /* @__PURE__ */ jsxs16("div", { className: "relative w-full max-w-[768px]", children: [
-                displayMode === "inline" && (invoking || invoked) && /* @__PURE__ */ jsxs16("div", { className: "absolute -top-8 left-2 z-10 whitespace-nowrap", children: [
-                  invoking && !toolResult && /* @__PURE__ */ jsx32(TextShimmer, { className: "text-xs", children: invoking }),
-                  invoked && toolResult && /* @__PURE__ */ jsx32("span", { className: "text-xs text-muted-foreground", children: invoked })
-                ] }),
-                /* @__PURE__ */ jsx32(
-                  "iframe",
-                  {
-                    ref: iframeRef,
-                    src: widgetUrl,
-                    className: cn(
-                      displayMode === "inline" && "w-full",
-                      displayMode === "fullscreen" && "w-full h-full rounded-none",
-                      displayMode === "pip" && "w-full h-full rounded-lg"
-                    ),
-                    style: {
-                      height: displayMode === "fullscreen" || displayMode === "pip" ? "100%" : `${iframeHeight}px`
-                    },
-                    sandbox: IFRAME_SANDBOX_PERMISSIONS,
-                    title: `OpenAI Component: ${toolName}`,
-                    allow: "web-share"
-                  }
-                )
-              ] })
-            }
-          )
-        ]
-      }
-    )
+    isPip && typeof document !== "undefined" ? /* @__PURE__ */ jsxs16(Fragment7, { children: [
+      showSkeleton && /* @__PURE__ */ jsx32("div", { className: "fixed inset-0 z-[99] flex items-center justify-center bg-background/40", children: /* @__PURE__ */ jsx32(Spinner, { className: "size-5" }) }),
+      createPortal2(widgetShell, document.body)
+    ] }) : widgetShell
   ] });
 }
 function openAIComponentRendererAreEqual(prev, next) {
@@ -9232,8 +9365,8 @@ function NotFound({
 // src/client/components/tools/ToolResultDisplay.tsx
 import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 function RelativeTimeDisplay({ timestamp }) {
-  const [label, setLabel] = useState12(() => getRelativeTime(timestamp));
-  useEffect10(() => {
+  const [label, setLabel] = useState14(() => getRelativeTime(timestamp));
+  useEffect11(() => {
     const update = () => setLabel(getRelativeTime(timestamp));
     update();
     const id = setInterval(update, 1e3);
@@ -9276,10 +9409,10 @@ function isValidJSON(str) {
   }
 }
 function FormattedContentDisplay({ content }) {
-  const [formattedIndices, setFormattedIndices] = useState12(
+  const [formattedIndices, setFormattedIndices] = useState14(
     /* @__PURE__ */ new Set()
   );
-  const toggleFormat = useCallback11((idx) => {
+  const toggleFormat = useCallback13((idx) => {
     setFormattedIndices((prev) => {
       const next = new Set(prev);
       if (next.has(idx)) {
@@ -9496,26 +9629,26 @@ function ToolResultDisplay({
   isMaximized = false,
   onRerunTool
 }) {
-  const [selectedIndex, setSelectedIndex] = useState12(0);
-  const [formattedMode, setFormattedMode] = useState12(true);
-  const [viewMode, setViewMode] = useState12(null);
-  const [mcpAppsDisplayMode, setMcpAppsDisplayMode] = useState12("inline");
-  const [activeProps, setActiveProps] = useState12(
+  const [selectedIndex, setSelectedIndex] = useState14(0);
+  const [formattedMode, setFormattedMode] = useState14(true);
+  const [viewMode, setViewMode] = useState14(null);
+  const [mcpAppsDisplayMode, setMcpAppsDisplayMode] = useState14("inline");
+  const [activeProps, setActiveProps] = useState14(
     null
   );
-  const hasSeenComponentViewRef = useRef7(false);
+  const hasSeenComponentViewRef = useRef8(false);
   const currentResult = results[0];
   const toolResults = currentResult ? results.filter((r) => r.toolName === currentResult.toolName) : [];
   const result = toolResults[selectedIndex] || toolResults[0];
   const originalResultIndex = results.findIndex((r) => r === result);
   const errorMessageForCopy = result ? result.error || extractErrorMessage(result.result) : null;
   const copyableText = errorMessageForCopy != null ? errorMessageForCopy : result != null ? JSON.stringify(result.result, null, 2) : "";
-  useEffect10(() => {
+  useEffect11(() => {
     if (toolResults.length > 0 && selectedIndex >= toolResults.length) {
       setSelectedIndex(0);
     }
   }, [toolResults.length, selectedIndex]);
-  useEffect10(() => {
+  useEffect11(() => {
     hasSeenComponentViewRef.current = false;
     setViewMode(null);
   }, [currentResult?.toolName]);
@@ -9527,11 +9660,11 @@ function ToolResultDisplay({
     () => result?.result,
     [result?.timestamp, result?.duration, selectedIndex]
   );
-  const memoizedReadResource = useCallback11(
+  const memoizedReadResource = useCallback13(
     (uri) => readResource(uri),
     [readResource]
   );
-  const memoizedOnSendFollowUp = useCallback11(
+  const memoizedOnSendFollowUp = useCallback13(
     (content2) => {
       const text = content2.filter(
         (c) => c.type === "text" && "text" in c
@@ -9631,7 +9764,7 @@ function ToolResultDisplay({
     openaiOutputTemplate,
     mcpAppsResourceUri
   ]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (availableViews.length === 0) return;
     const isCurrentModeAvailable = viewMode && availableViews.some((v) => v.mode === viewMode);
     const firstComponentView = availableViews.find((v) => v.mode !== "json");
@@ -9932,7 +10065,7 @@ function ToolResultDisplay({
 }
 
 // src/client/components/chat/ToolResultRenderer.tsx
-import { useEffect as useEffect11, useMemo as useMemo12, useRef as useRef8, useState as useState13 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo12, useRef as useRef9, useState as useState15 } from "react";
 
 // src/client/components/chat/MCPUIResource.tsx
 import { memo as memo3, useMemo as useMemo11 } from "react";
@@ -9970,7 +10103,7 @@ var MCPUIResource = memo3(({ resource }) => {
 });
 
 // src/client/components/chat/ToolResultRenderer.tsx
-import { Fragment as Fragment7, jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
 function ModelContextBadge({ widgetId }) {
   const { getWidget } = useWidgetDebug();
   const widget = getWidget(widgetId);
@@ -9996,8 +10129,8 @@ function ToolResultRenderer({
   cancelled
 }) {
   const { playground } = useWidgetDebug();
-  const [resourceData, setResourceData] = useState13(null);
-  const fetchedUriRef = useRef8(null);
+  const [resourceData, setResourceData] = useState15(null);
+  const fetchedUriRef = useRef9(null);
   const toolCallId = useMemo12(
     () => `chat-tool-${toolName}-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
     [toolName]
@@ -10076,7 +10209,7 @@ function ToolResultRenderer({
     isAppsSdkTool,
     toolMetaJson
   ]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (extractedResource) {
       setResourceData(extractedResource);
       fetchedUriRef.current = extractedResource.uri || null;
@@ -10146,7 +10279,7 @@ function ToolResultRenderer({
     ] });
   }
   if (isMcpAppsTool && resourceUri && serverId && readResource) {
-    return /* @__PURE__ */ jsxs19(Fragment7, { children: [
+    return /* @__PURE__ */ jsxs19(Fragment8, { children: [
       /* @__PURE__ */ jsx36(
         MCPAppsRenderer,
         {
@@ -10212,7 +10345,7 @@ function ToolResultRenderer({
     }
   }
   if (mcpUIResources.length > 0) {
-    return /* @__PURE__ */ jsx36(Fragment7, { children: mcpUIResources.map((resource) => /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx36(Fragment8, { children: mcpUIResources.map((resource) => /* @__PURE__ */ jsx36(
       MCPUIResource,
       {
         resource
@@ -10231,14 +10364,14 @@ function ToolResultRenderer({
 }
 
 // src/client/context/InspectorContext.tsx
-import { createContext as createContext3, use as use4, useCallback as useCallback12, useState as useState14 } from "react";
+import { createContext as createContext3, use as use4, useCallback as useCallback14, useState as useState16 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var InspectorContext = createContext3(
   void 0
 );
 function InspectorProvider({ children }) {
   const hostedChatUrl = (typeof window !== "undefined" ? window.__MANUFACT_CHAT_URL__ : void 0) ?? (typeof import.meta !== "undefined" ? import.meta.env?.VITE_MANUFACT_CHAT_URL : void 0);
-  const [state, setState] = useState14({
+  const [state, setState] = useState16({
     selectedServerId: null,
     activeTab: "tools",
     selectedToolName: null,
@@ -10258,28 +10391,28 @@ function InspectorProvider({ children }) {
       chatEnableFreeTierUpgrade: true
     } : {}
   });
-  const setSelectedServerId = useCallback12((serverId) => {
+  const setSelectedServerId = useCallback14((serverId) => {
     setState((prev) => ({ ...prev, selectedServerId: serverId }));
   }, []);
-  const setActiveTab = useCallback12((tab) => {
+  const setActiveTab = useCallback14((tab) => {
     setState((prev) => ({ ...prev, activeTab: tab }));
   }, []);
-  const setSelectedToolName = useCallback12((toolName) => {
+  const setSelectedToolName = useCallback14((toolName) => {
     setState((prev) => ({ ...prev, selectedToolName: toolName }));
   }, []);
-  const setSelectedPromptName = useCallback12((promptName) => {
+  const setSelectedPromptName = useCallback14((promptName) => {
     setState((prev) => ({ ...prev, selectedPromptName: promptName }));
   }, []);
-  const setSelectedResourceUri = useCallback12((resourceUri) => {
+  const setSelectedResourceUri = useCallback14((resourceUri) => {
     setState((prev) => ({ ...prev, selectedResourceUri: resourceUri }));
   }, []);
-  const setSelectedSamplingRequestId = useCallback12(
+  const setSelectedSamplingRequestId = useCallback14(
     (requestId) => {
       setState((prev) => ({ ...prev, selectedSamplingRequestId: requestId }));
     },
     []
   );
-  const setSelectedElicitationRequestId = useCallback12(
+  const setSelectedElicitationRequestId = useCallback14(
     (requestId) => {
       setState((prev) => ({
         ...prev,
@@ -10288,19 +10421,19 @@ function InspectorProvider({ children }) {
     },
     []
   );
-  const setTunnelUrl = useCallback12((tunnelUrl) => {
+  const setTunnelUrl = useCallback14((tunnelUrl) => {
     setState((prev) => ({ ...prev, tunnelUrl }));
   }, []);
-  const setIsTunnelStarting = useCallback12((isTunnelStarting) => {
+  const setIsTunnelStarting = useCallback14((isTunnelStarting) => {
     setState((prev) => ({ ...prev, isTunnelStarting }));
   }, []);
-  const setEmbeddedMode = useCallback12(
+  const setEmbeddedMode = useCallback14(
     (isEmbedded, config = {}) => {
       setState((prev) => ({ ...prev, isEmbedded, embeddedConfig: config }));
     },
     []
   );
-  const navigateToItem = useCallback12(
+  const navigateToItem = useCallback14(
     (serverId, tab, itemIdentifier) => {
       console.warn("[InspectorContext] navigateToItem called:", {
         serverId,
@@ -10320,7 +10453,7 @@ function InspectorProvider({ children }) {
     },
     []
   );
-  const clearSelection = useCallback12(() => {
+  const clearSelection = useCallback14(() => {
     setState((prev) => ({
       ...prev,
       selectedToolName: null,
@@ -10415,12 +10548,12 @@ function ResizableHandle({
 import { AnimatePresence, motion as motion2 } from "motion/react";
 import { ChevronLeft } from "lucide-react";
 import {
-  useCallback as useCallback13,
-  useEffect as useEffect15,
+  useCallback as useCallback15,
+  useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle2,
   useMemo as useMemo14,
-  useRef as useRef12,
-  useState as useState18
+  useRef as useRef13,
+  useState as useState20
 } from "react";
 
 // src/client/components/shared/ListItem.tsx
@@ -10527,7 +10660,7 @@ function Kbd({ className, ...props }) {
 }
 
 // src/client/components/shared/ListTabHeader.tsx
-import { Fragment as Fragment8, jsx as jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
 function ListTabHeader({
   activeTab,
   isSearchExpanded,
@@ -10550,9 +10683,9 @@ function ListTabHeader({
 }) {
   const isPrimaryTab = activeTab === primaryTabName;
   return /* @__PURE__ */ jsxs21("div", { className: "flex flex-row items-center justify-between p-4 sm:p-4 py-3 gap-2", children: [
-    /* @__PURE__ */ jsx42("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: !isSearchExpanded ? /* @__PURE__ */ jsxs21(Fragment8, { children: [
+    /* @__PURE__ */ jsx42("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: !isSearchExpanded ? /* @__PURE__ */ jsxs21(Fragment9, { children: [
       /* @__PURE__ */ jsx42("h2", { className: "text-lg font-medium text-gray-900 dark:text-gray-100", children: isPrimaryTab ? primaryTabTitle : secondaryTabTitle }),
-      isPrimaryTab && /* @__PURE__ */ jsxs21(Fragment8, { children: [
+      isPrimaryTab && /* @__PURE__ */ jsxs21(Fragment9, { children: [
         /* @__PURE__ */ jsx42(
           Badge,
           {
@@ -10637,7 +10770,7 @@ function ListTabHeader({
 
 // src/client/components/shared/RpcPanel.tsx
 import { ChevronDown as ChevronDown5, Copy as Copy6, Trash2 as Trash23 } from "lucide-react";
-import { useEffect as useEffect13, useRef as useRef10, useState as useState16 } from "react";
+import { useEffect as useEffect14, useRef as useRef11, useState as useState18 } from "react";
 
 // src/client/components/logging/JsonRpcLoggerView.tsx
 import {
@@ -10652,7 +10785,7 @@ import {
   getAllRpcLogs,
   subscribeToRpcLogs
 } from "mcp-use/react";
-import { useEffect as useEffect12, useMemo as useMemo13, useRef as useRef9, useState as useState15 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo13, useRef as useRef10, useState as useState17 } from "react";
 import { toast as toast5 } from "sonner";
 import { jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
 function JsonRpcLoggerView({
@@ -10661,10 +10794,10 @@ function JsonRpcLoggerView({
   onClearRef,
   onExportRef
 } = {}) {
-  const [items, setItems] = useState15([]);
-  const scrollRef = useRef9(null);
-  const [expanded, setExpanded] = useState15(/* @__PURE__ */ new Set());
-  const [searchQuery] = useState15("");
+  const [items, setItems] = useState17([]);
+  const scrollRef = useRef10(null);
+  const [expanded, setExpanded] = useState17(/* @__PURE__ */ new Set());
+  const [searchQuery] = useState17("");
   const toggleExpanded = (id) => {
     setExpanded((prev) => {
       const next = new Set(prev);
@@ -10709,7 +10842,7 @@ function JsonRpcLoggerView({
     if (!serverIds || serverIds.length === 0) return "";
     return [...serverIds].sort().join(",");
   }, [serverIds]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (onClearRef) {
       onClearRef.current = clearMessages;
     }
@@ -10719,7 +10852,7 @@ function JsonRpcLoggerView({
       }
     };
   }, [onClearRef, clearMessages]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (onExportRef) {
       onExportRef.current = exportAllMessages;
     }
@@ -10729,10 +10862,10 @@ function JsonRpcLoggerView({
       }
     };
   }, [onExportRef, exportAllMessages]);
-  useEffect12(() => {
+  useEffect13(() => {
     onCountChange?.(items.length);
   }, [items.length, onCountChange]);
-  useEffect12(() => {
+  useEffect13(() => {
     console.log("[RPC Logger] Subscribing to RPC logs for servers:", serverIds);
     const existingLogs = getAllRpcLogs();
     const filteredLogs = serverIds && serverIds.length > 0 ? existingLogs.filter((log) => serverIds.includes(log.serverId)) : existingLogs;
@@ -10863,12 +10996,12 @@ function JsonRpcLoggerView({
 // src/client/components/shared/RpcPanel.tsx
 import { jsx as jsx44, jsxs as jsxs23 } from "react/jsx-runtime";
 function RpcPanel({ serverId, className }) {
-  const [rpcMessageCount, setRpcMessageCount] = useState16(0);
-  const [rpcPanelCollapsed, setRpcPanelCollapsed] = useState16(true);
+  const [rpcMessageCount, setRpcMessageCount] = useState18(0);
+  const [rpcPanelCollapsed, setRpcPanelCollapsed] = useState18(true);
   const rpcPanelRef = usePanelRef();
-  const clearRpcMessagesRef = useRef10(null);
-  const exportRpcMessagesRef = useRef10(null);
-  useEffect13(() => {
+  const clearRpcMessagesRef = useRef11(null);
+  const exportRpcMessagesRef = useRef11(null);
+  useEffect14(() => {
     rpcPanelRef.current?.collapse();
   }, []);
   const handleResize = (size) => {
@@ -11107,8 +11240,8 @@ import {
   Save as Save2,
   X as X5
 } from "lucide-react";
-import { useEffect as useEffect14, useRef as useRef11, useState as useState17 } from "react";
-import { Fragment as Fragment9, jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
+import { useEffect as useEffect15, useRef as useRef12, useState as useState19 } from "react";
+import { Fragment as Fragment10, jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
 function ToolExecutionPanel({
   selectedTool,
   toolArgs,
@@ -11125,14 +11258,14 @@ function ToolExecutionPanel({
   sendEmptyFields,
   onToggleEmpty
 }) {
-  const [showCancelButton, setShowCancelButton] = useState17(false);
-  const [showMetadata, setShowMetadata] = useState17(false);
-  const [copiedMetadata, setCopiedMetadata] = useState17(false);
-  const [copiedPayload, setCopiedPayload] = useState17(false);
-  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState17(false);
-  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState17(false);
-  const descriptionRef = useRef11(null);
-  useEffect14(() => {
+  const [showCancelButton, setShowCancelButton] = useState19(false);
+  const [showMetadata, setShowMetadata] = useState19(false);
+  const [copiedMetadata, setCopiedMetadata] = useState19(false);
+  const [copiedPayload, setCopiedPayload] = useState19(false);
+  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState19(false);
+  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState19(false);
+  const descriptionRef = useRef12(null);
+  useEffect15(() => {
     if (descriptionRef.current && selectedTool?.description) {
       const element = descriptionRef.current;
       const lineHeight = parseFloat(getComputedStyle(element).lineHeight);
@@ -11161,7 +11294,7 @@ function ToolExecutionPanel({
     } catch {
     }
   };
-  useEffect14(() => {
+  useEffect15(() => {
     const handleKeyDown = (event) => {
       if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
         if (selectedTool && !isExecuting && isConnected) {
@@ -11262,11 +11395,11 @@ function ToolExecutionPanel({
                   variant: showCancelButton ? "destructive" : "default",
                   size: "sm",
                   className: "lg:size-default gap-2 transition-all",
-                  children: showCancelButton ? /* @__PURE__ */ jsxs26(Fragment9, { children: [
+                  children: showCancelButton ? /* @__PURE__ */ jsxs26(Fragment10, { children: [
                     /* @__PURE__ */ jsx47(X5, { className: "h-4 w-4" }),
                     /* @__PURE__ */ jsx47("span", { className: "hidden sm:inline", children: "Cancel" }),
                     /* @__PURE__ */ jsx47("span", { className: "hidden sm:inline text-[12px] border border-current p-1 rounded-full ml-2", children: "Esc" })
-                  ] }) : /* @__PURE__ */ jsxs26(Fragment9, { children: [
+                  ] }) : /* @__PURE__ */ jsxs26(Fragment10, { children: [
                     /* @__PURE__ */ jsx47(Spinner, { className: "mr-2" }),
                     /* @__PURE__ */ jsx47("span", { className: "hidden sm:inline", children: "Executing..." })
                   ] })
@@ -11283,10 +11416,10 @@ function ToolExecutionPanel({
             disabled: isExecuting || !isConnected,
             size: "sm",
             className: "lg:size-default pr-1! gap-0",
-            children: isExecuting ? /* @__PURE__ */ jsxs26(Fragment9, { children: [
+            children: isExecuting ? /* @__PURE__ */ jsxs26(Fragment10, { children: [
               /* @__PURE__ */ jsx47(Spinner, { className: "mr-2" }),
               /* @__PURE__ */ jsx47("span", { className: "hidden sm:inline", children: "Executing..." })
-            ] }) : /* @__PURE__ */ jsxs26(Fragment9, { children: [
+            ] }) : /* @__PURE__ */ jsxs26(Fragment10, { children: [
               /* @__PURE__ */ jsx47(Play2, { className: "h-4 w-4 sm:mr-2" }),
               /* @__PURE__ */ jsx47("span", { className: "hidden sm:inline", children: "Execute" }),
               /* @__PURE__ */ jsx47("span", { className: "hidden sm:inline text-[12px] border text-zinc-300 p-1 rounded-full border-zinc-300 dark:text-zinc-600 dark:border-zinc-500 ml-2", children: "\u2318\u21B5" })
@@ -11314,10 +11447,10 @@ function ToolExecutionPanel({
           {
             onClick: () => setIsDescriptionExpanded(!isDescriptionExpanded),
             className: "relative z-10 inline-flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 mt-1 transition-colors",
-            children: isDescriptionExpanded ? /* @__PURE__ */ jsxs26(Fragment9, { children: [
+            children: isDescriptionExpanded ? /* @__PURE__ */ jsxs26(Fragment10, { children: [
               "Show less",
               /* @__PURE__ */ jsx47(ChevronUp, { className: "h-3 w-3" })
-            ] }) : /* @__PURE__ */ jsxs26(Fragment9, { children: [
+            ] }) : /* @__PURE__ */ jsxs26(Fragment10, { children: [
               "Show more",
               /* @__PURE__ */ jsx47(ChevronDown6, { className: "h-3 w-3" })
             ] })
@@ -11603,7 +11736,7 @@ function AlertDialogCancel({
 }
 
 // src/client/components/ToolsTab.tsx
-import { Fragment as Fragment10, jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
 var SAVED_REQUESTS_KEY = "mcp-inspector-saved-requests";
 function ToolsTab({
   ref,
@@ -11614,45 +11747,45 @@ function ToolsTab({
   isConnected,
   refreshTools
 }) {
-  const [isRefreshing, setIsRefreshing] = useState18(false);
-  const [selectedTool, setSelectedTool] = useState18(null);
-  const [selectedSavedRequest, setSelectedSavedRequest] = useState18(null);
+  const [isRefreshing, setIsRefreshing] = useState20(false);
+  const [selectedTool, setSelectedTool] = useState20(null);
+  const [selectedSavedRequest, setSelectedSavedRequest] = useState20(null);
   const { selectedToolName, setSelectedToolName } = useInspector();
-  const [toolArgs, setToolArgs] = useState18({});
-  const [setFields, setSetFields] = useState18(/* @__PURE__ */ new Set());
-  const [sendEmptyFields, setSendEmptyFields] = useState18(
+  const [toolArgs, setToolArgs] = useState20({});
+  const [setFields, setSetFields] = useState20(/* @__PURE__ */ new Set());
+  const [sendEmptyFields, setSendEmptyFields] = useState20(
     /* @__PURE__ */ new Set()
   );
-  const [results, setResults] = useState18([]);
-  const [isExecuting, setIsExecuting] = useState18(false);
-  const [copiedResult, setCopiedResult] = useState18(null);
-  const [abortController, setAbortController] = useState18(null);
-  const [searchQuery, setSearchQuery] = useState18("");
-  const [activeTab, setActiveTab] = useState18("tools");
-  const [savedRequests, setSavedRequests] = useState18([]);
-  const [saveDialogOpen, setSaveDialogOpen] = useState18(false);
-  const [requestName, setRequestName] = useState18("");
-  const [isSearchExpanded, setIsSearchExpanded] = useState18(false);
-  const [focusedIndex, setFocusedIndex] = useState18(-1);
-  const searchInputRef = useRef12(null);
-  const [isMobile, setIsMobile] = useState18(false);
-  const [mobileView, setMobileView] = useState18(
+  const [results, setResults] = useState20([]);
+  const [isExecuting, setIsExecuting] = useState20(false);
+  const [copiedResult, setCopiedResult] = useState20(null);
+  const [abortController, setAbortController] = useState20(null);
+  const [searchQuery, setSearchQuery] = useState20("");
+  const [activeTab, setActiveTab] = useState20("tools");
+  const [savedRequests, setSavedRequests] = useState20([]);
+  const [saveDialogOpen, setSaveDialogOpen] = useState20(false);
+  const [requestName, setRequestName] = useState20("");
+  const [isSearchExpanded, setIsSearchExpanded] = useState20(false);
+  const [focusedIndex, setFocusedIndex] = useState20(-1);
+  const searchInputRef = useRef13(null);
+  const [isMobile, setIsMobile] = useState20(false);
+  const [mobileView, setMobileView] = useState20(
     "list"
   );
-  const [isMaximized, setIsMaximized] = useState18(false);
-  const [autoFillDialog, setAutoFillDialog] = useState18({
+  const [isMaximized, setIsMaximized] = useState20(false);
+  const [autoFillDialog, setAutoFillDialog] = useState20({
     open: false,
     parsedObject: {},
     fieldsToUpdate: [],
     newFields: [],
     resolve: null
   });
-  const [autoFilledFields, setAutoFilledFields] = useState18(
+  const [autoFilledFields, setAutoFilledFields] = useState20(
     /* @__PURE__ */ new Set()
   );
   const leftPanelRef = usePanelRef();
   const toolParamsPanelRef = usePanelRef();
-  useEffect15(() => {
+  useEffect16(() => {
     const checkMobile = () => {
       setIsMobile(window.innerWidth < 1024);
     };
@@ -11660,14 +11793,14 @@ function ToolsTab({
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
-  useEffect15(() => {
+  useEffect16(() => {
     if (selectedTool) {
       setMobileView("detail");
     } else {
       setMobileView("list");
     }
   }, [selectedTool]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (isMobile && results.length > 0 && !isExecuting) {
       setMobileView("response");
     }
@@ -11689,7 +11822,7 @@ function ToolsTab({
       }
     }
   }));
-  useEffect15(() => {
+  useEffect16(() => {
     try {
       const saved = localStorage.getItem(SAVED_REQUESTS_KEY);
       if (saved) {
@@ -11699,7 +11832,7 @@ function ToolsTab({
       console.error("[ToolsTab] Failed to load saved requests:", error);
     }
   }, []);
-  const handleMaximize = useCallback13(() => {
+  const handleMaximize = useCallback15(() => {
     if (!isMaximized) {
       if (leftPanelRef.current) {
         leftPanelRef.current.collapse();
@@ -11718,7 +11851,7 @@ function ToolsTab({
       setIsMaximized(false);
     }
   }, [isMaximized, leftPanelRef, toolParamsPanelRef]);
-  const saveSavedRequests = useCallback13((requests) => {
+  const saveSavedRequests = useCallback15((requests) => {
     try {
       localStorage.setItem(SAVED_REQUESTS_KEY, JSON.stringify(requests));
       setSavedRequests(requests);
@@ -11733,7 +11866,7 @@ function ToolsTab({
       (tool) => tool.name.toLowerCase().includes(query) || tool.description?.toLowerCase().includes(query)
     );
   }, [tools, searchQuery]);
-  const handleToolSelect = useCallback13((tool) => {
+  const handleToolSelect = useCallback15((tool) => {
     setSelectedTool(tool);
     const initialArgs = {};
     const initialSetFields = /* @__PURE__ */ new Set();
@@ -11750,7 +11883,7 @@ function ToolsTab({
     setSetFields(initialSetFields);
     setSendEmptyFields(/* @__PURE__ */ new Set());
   }, []);
-  const loadSavedRequest = useCallback13(
+  const loadSavedRequest = useCallback15(
     (request) => {
       const tool = tools.find((t) => t.name === request.toolName);
       if (tool) {
@@ -11763,17 +11896,17 @@ function ToolsTab({
     },
     [tools]
   );
-  useEffect15(() => {
+  useEffect16(() => {
     if (isSearchExpanded && searchInputRef.current) {
       searchInputRef.current.focus();
     }
   }, [isSearchExpanded]);
-  const handleSearchBlur = useCallback13(() => {
+  const handleSearchBlur = useCallback15(() => {
     if (!searchQuery.trim()) {
       setIsSearchExpanded(false);
     }
   }, [searchQuery]);
-  const handleRefresh = useCallback13(async () => {
+  const handleRefresh = useCallback15(async () => {
     if (!refreshTools) return;
     setIsRefreshing(true);
     try {
@@ -11782,15 +11915,15 @@ function ToolsTab({
       setIsRefreshing(false);
     }
   }, [refreshTools]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (activeTab !== "tools") {
       setIsSearchExpanded(false);
     }
   }, [activeTab]);
-  useEffect15(() => {
+  useEffect16(() => {
     setFocusedIndex(-1);
   }, [searchQuery, activeTab]);
-  useEffect15(() => {
+  useEffect16(() => {
     const handleKeyDown = (e) => {
       const target = e.target;
       const isInputFocused = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.contentEditable === "true";
@@ -11835,7 +11968,7 @@ function ToolsTab({
     handleToolSelect,
     loadSavedRequest
   ]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (focusedIndex >= 0) {
       const itemId = activeTab === "tools" ? `tool-${filteredTools[focusedIndex]?.name}` : `saved-${savedRequests[focusedIndex]?.id}`;
       const element = document.getElementById(itemId);
@@ -11844,7 +11977,7 @@ function ToolsTab({
       }
     }
   }, [focusedIndex, filteredTools, savedRequests, activeTab]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (selectedToolName && tools.length > 0) {
       const tool = tools.find((t) => t.name === selectedToolName);
       if (tool && selectedTool?.name !== tool.name) {
@@ -11869,7 +12002,7 @@ function ToolsTab({
     handleToolSelect,
     setSelectedToolName
   ]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (selectedTool) {
       const updatedTool = tools.find((t) => t.name === selectedTool.name);
       if (!updatedTool) {
@@ -11883,7 +12016,7 @@ function ToolsTab({
       }
     }
   }, [tools, selectedTool, setSelectedToolName]);
-  const handleArgChange = useCallback13(
+  const handleArgChange = useCallback15(
     (key, value) => {
       const rootSchema = selectedTool?.inputSchema || {};
       const prop = selectedTool?.inputSchema?.properties?.[key];
@@ -11916,7 +12049,7 @@ function ToolsTab({
     },
     [selectedTool]
   );
-  const handleToggleEmpty = useCallback13(
+  const handleToggleEmpty = useCallback15(
     (key, expectedType, pressed) => {
       if (pressed) {
         const emptyValue = expectedType === "array" ? "[]" : expectedType === "object" ? "{}" : "";
@@ -11938,7 +12071,7 @@ function ToolsTab({
     },
     []
   );
-  const handleBulkPaste = useCallback13(
+  const handleBulkPaste = useCallback15(
     async (pastedText, _fieldKey) => {
       if (!selectedTool) return false;
       const parsedObject = parseObjectFromPaste(pastedText);
@@ -12000,7 +12133,7 @@ function ToolsTab({
     },
     [selectedTool, toolArgs, handleArgChange]
   );
-  const handleAutoFillConfirm = useCallback13(() => {
+  const handleAutoFillConfirm = useCallback15(() => {
     if (!autoFillDialog.resolve) return;
     autoFillDialog.fieldsToUpdate.forEach(({ key, newValue }) => {
       handleArgChange(key, String(newValue));
@@ -12020,7 +12153,7 @@ function ToolsTab({
       resolve: null
     });
   }, [autoFillDialog, handleArgChange]);
-  const handleAutoFillCancel = useCallback13(() => {
+  const handleAutoFillCancel = useCallback15(() => {
     if (!autoFillDialog.resolve) return;
     autoFillDialog.resolve(false);
     setAutoFillDialog({
@@ -12044,7 +12177,7 @@ function ToolsTab({
     }
     return result;
   }, [selectedTool, toolArgs, setFields, sendEmptyFields]);
-  const executeTool = useCallback13(async () => {
+  const executeTool = useCallback15(async () => {
     if (!selectedTool || isExecuting) return;
     const controller = new AbortController();
     setAbortController(controller);
@@ -12205,7 +12338,7 @@ function ToolsTab({
     readResource,
     serverId
   ]);
-  const handleCopyResult = useCallback13(async (index, text) => {
+  const handleCopyResult = useCallback15(async (index, text) => {
     try {
       await copyToClipboard(text);
       setCopiedResult(index);
@@ -12214,14 +12347,14 @@ function ToolsTab({
       console.error("[ToolsTab] Failed to copy result:", error);
     }
   }, []);
-  const handleDeleteResult = useCallback13((index) => {
+  const handleDeleteResult = useCallback15((index) => {
     setResults((prev) => prev.filter((_, i) => i !== index));
   }, []);
   const filteredResults = useMemo14(() => {
     if (!selectedTool) return [];
     return results.filter((r) => r.toolName === selectedTool.name);
   }, [results, selectedTool]);
-  const handleFullscreen = useCallback13(
+  const handleFullscreen = useCallback15(
     (index) => {
       const result = filteredResults[index];
       if (result) {
@@ -12248,12 +12381,12 @@ function ToolsTab({
     },
     [results]
   );
-  const openSaveDialog = useCallback13(() => {
+  const openSaveDialog = useCallback15(() => {
     if (!selectedTool) return;
     setRequestName("");
     setSaveDialogOpen(true);
   }, [selectedTool]);
-  const saveRequest = useCallback13(() => {
+  const saveRequest = useCallback15(() => {
     if (!selectedTool) return;
     const newRequest = {
       id: `${Date.now()}-${Math.random()}`,
@@ -12283,7 +12416,7 @@ function ToolsTab({
     saveSavedRequests,
     serverId
   ]);
-  const deleteSavedRequest = useCallback13(
+  const deleteSavedRequest = useCallback15(
     (id) => {
       saveSavedRequests(savedRequests.filter((r) => r.id !== id));
       if (selectedSavedRequest?.id === id) {
@@ -12324,7 +12457,7 @@ function ToolsTab({
               children: "Tools"
             }
           ),
-          mobileView === "detail" && /* @__PURE__ */ jsxs29(Fragment10, { children: [
+          mobileView === "detail" && /* @__PURE__ */ jsxs29(Fragment11, { children: [
             /* @__PURE__ */ jsx51("span", { className: "mx-2 text-muted-foreground", children: "/" }),
             /* @__PURE__ */ jsx51(
               "button",
@@ -12337,7 +12470,7 @@ function ToolsTab({
               }
             )
           ] }),
-          mobileView === "response" && /* @__PURE__ */ jsxs29(Fragment10, { children: [
+          mobileView === "response" && /* @__PURE__ */ jsxs29(Fragment11, { children: [
             /* @__PURE__ */ jsx51("span", { className: "mx-2 text-muted-foreground", children: "/" }),
             /* @__PURE__ */ jsx51("span", { className: "text-foreground", children: "Response" })
           ] })
@@ -12670,12 +12803,12 @@ ToolsTab.displayName = "ToolsTab";
 import { AnimatePresence as AnimatePresence2, motion as motion3 } from "motion/react";
 import { ChevronLeft as ChevronLeft2 } from "lucide-react";
 import {
-  useCallback as useCallback16,
-  useEffect as useEffect17,
+  useCallback as useCallback18,
+  useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle3,
   useMemo as useMemo16,
-  useRef as useRef13,
-  useState as useState21
+  useRef as useRef14,
+  useState as useState23
 } from "react";
 
 // src/client/components/resources/ResourceResultDisplay.tsx
@@ -12689,7 +12822,7 @@ import {
   Maximize as Maximize3,
   Zap as Zap2
 } from "lucide-react";
-import { useCallback as useCallback14, useMemo as useMemo15, useState as useState19 } from "react";
+import { useCallback as useCallback16, useMemo as useMemo15, useState as useState21 } from "react";
 import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
 function extractErrorMessage2(result) {
   if ("error" in result && result.error && typeof result.error === "string") {
@@ -12723,13 +12856,13 @@ function ResourceResultDisplay({
   llmConfig
 }) {
   const emptyToolInput = useMemo15(() => ({}), []);
-  const [activeProps, setActiveProps] = useState19(
+  const [activeProps, setActiveProps] = useState21(
     null
   );
-  const handlePropsChange = useCallback14((p) => {
+  const handlePropsChange = useCallback16((p) => {
     setActiveProps(p);
   }, []);
-  const [mcpAppsDisplayMode, setMcpAppsDisplayMode] = useState19("inline");
+  const [mcpAppsDisplayMode, setMcpAppsDisplayMode] = useState21("inline");
   let openaiAnnotations = [];
   let openaiOutputTemplate;
   if (result?.resourceAnnotations) {
@@ -13067,7 +13200,7 @@ function ResourcesList({
 
 // src/client/components/resources/ResourcesTabHeader.tsx
 import { RefreshCw as RefreshCw2, Search as Search3 } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
 function ResourcesTabHeader({
   isSearchExpanded,
   searchQuery,
@@ -13079,7 +13212,7 @@ function ResourcesTabHeader({
   onRefresh,
   isRefreshing = false
 }) {
-  return /* @__PURE__ */ jsx54("div", { className: "flex flex-row items-center justify-between p-4 sm:p-4 py-3 gap-2", children: /* @__PURE__ */ jsx54("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: !isSearchExpanded ? /* @__PURE__ */ jsxs32(Fragment11, { children: [
+  return /* @__PURE__ */ jsx54("div", { className: "flex flex-row items-center justify-between p-4 sm:p-4 py-3 gap-2", children: /* @__PURE__ */ jsx54("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: !isSearchExpanded ? /* @__PURE__ */ jsxs32(Fragment12, { children: [
     /* @__PURE__ */ jsx54("h2", { className: "text-lg font-medium text-gray-900 dark:text-gray-100", children: "Resources" }),
     /* @__PURE__ */ jsx54(
       Badge,
@@ -13141,7 +13274,7 @@ function ResourcesTabHeader({
 }
 
 // src/client/components/chat/useConfig.ts
-import { useCallback as useCallback15, useEffect as useEffect16, useState as useState20 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect17, useState as useState22 } from "react";
 
 // src/client/components/chat/types.ts
 var DEFAULT_MODELS = {
@@ -13237,14 +13370,14 @@ function formatFileSize(bytes) {
 
 // src/client/components/chat/useConfig.ts
 function useConfig({ mcpServerUrl }) {
-  const [llmConfig, setLLMConfig] = useState20(null);
-  const [authConfig, setAuthConfig] = useState20(null);
-  const [configDialogOpen, setConfigDialogOpen] = useState20(false);
-  const [tempProvider, setTempProvider] = useState20("openai");
-  const [tempApiKey, setTempApiKey] = useState20("");
-  const [tempModel, setTempModel] = useState20(DEFAULT_MODELS.openai);
-  const [tempBaseUrl, setTempBaseUrl] = useState20(getDefaultBaseUrl("openai"));
-  const getApiKeys = useCallback15(() => {
+  const [llmConfig, setLLMConfig] = useState22(null);
+  const [authConfig, setAuthConfig] = useState22(null);
+  const [configDialogOpen, setConfigDialogOpen] = useState22(false);
+  const [tempProvider, setTempProvider] = useState22("openai");
+  const [tempApiKey, setTempApiKey] = useState22("");
+  const [tempModel, setTempModel] = useState22(DEFAULT_MODELS.openai);
+  const [tempBaseUrl, setTempBaseUrl] = useState22(getDefaultBaseUrl("openai"));
+  const getApiKeys = useCallback17(() => {
     const saved = localStorage.getItem("mcp-inspector-api-keys");
     if (saved) {
       try {
@@ -13256,10 +13389,10 @@ function useConfig({ mcpServerUrl }) {
     }
     return {};
   }, []);
-  const saveApiKeys = useCallback15((apiKeys) => {
+  const saveApiKeys = useCallback17((apiKeys) => {
     localStorage.setItem("mcp-inspector-api-keys", JSON.stringify(apiKeys));
   }, []);
-  const getBaseUrls = useCallback15(() => {
+  const getBaseUrls = useCallback17(() => {
     const saved = localStorage.getItem("mcp-inspector-base-urls");
     if (saved) {
       try {
@@ -13271,14 +13404,14 @@ function useConfig({ mcpServerUrl }) {
     }
     return {};
   }, []);
-  const saveBaseUrls = useCallback15((baseUrls) => {
+  const saveBaseUrls = useCallback17((baseUrls) => {
     localStorage.setItem("mcp-inspector-base-urls", JSON.stringify(baseUrls));
   }, []);
-  const [tempAuthType, setTempAuthType] = useState20("none");
-  const [tempUsername, setTempUsername] = useState20("");
-  const [tempPassword, setTempPassword] = useState20("");
-  const [tempToken, setTempToken] = useState20("");
-  useEffect16(() => {
+  const [tempAuthType, setTempAuthType] = useState22("none");
+  const [tempUsername, setTempUsername] = useState22("");
+  const [tempPassword, setTempPassword] = useState22("");
+  const [tempToken, setTempToken] = useState22("");
+  useEffect17(() => {
     const loadConfig = () => {
       const saved = localStorage.getItem("mcp-inspector-llm-config");
       const apiKeys = getApiKeys();
@@ -13314,7 +13447,7 @@ function useConfig({ mcpServerUrl }) {
       window.removeEventListener("storage", handleStorageChange);
     };
   }, [getApiKeys, getBaseUrls]);
-  useEffect16(() => {
+  useEffect17(() => {
     const saved = localStorage.getItem("mcp-inspector-auth-config");
     if (saved) {
       try {
@@ -13343,7 +13476,7 @@ function useConfig({ mcpServerUrl }) {
       }
     }
   }, [mcpServerUrl]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!providerSupportsBaseUrl(tempProvider)) {
       setTempModel(DEFAULT_MODELS[tempProvider]);
     }
@@ -13352,7 +13485,7 @@ function useConfig({ mcpServerUrl }) {
     setTempApiKey(apiKeys[tempProvider] || "");
     setTempBaseUrl(baseUrls[tempProvider] || getDefaultBaseUrl(tempProvider));
   }, [tempProvider, getApiKeys, getBaseUrls]);
-  const saveLLMConfig = useCallback15(() => {
+  const saveLLMConfig = useCallback17(() => {
     if (providerRequiresApiKey(tempProvider) && !tempApiKey.trim()) {
       return;
     }
@@ -13419,7 +13552,7 @@ function useConfig({ mcpServerUrl }) {
     getBaseUrls,
     saveBaseUrls
   ]);
-  const clearConfig = useCallback15(() => {
+  const clearConfig = useCallback17(() => {
     setLLMConfig(null);
     setAuthConfig(null);
     const apiKeys = getApiKeys();
@@ -13457,7 +13590,7 @@ function useConfig({ mcpServerUrl }) {
 }
 
 // src/client/components/ResourcesTab.tsx
-import { Fragment as Fragment12, jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
 function ResourcesTab({
   ref,
   resources,
@@ -13467,27 +13600,27 @@ function ResourcesTab({
   mcpServerUrl,
   refreshResources
 }) {
-  const [isRefreshing, setIsRefreshing] = useState21(false);
-  const [selectedResource, setSelectedResource] = useState21(
+  const [isRefreshing, setIsRefreshing] = useState23(false);
+  const [selectedResource, setSelectedResource] = useState23(
     null
   );
   const { selectedResourceUri, setSelectedResourceUri } = useInspector();
   const { llmConfig } = useConfig({ mcpServerUrl });
-  const [currentResult, setCurrentResult] = useState21(
+  const [currentResult, setCurrentResult] = useState23(
     null
   );
-  const [isLoading, setIsLoading] = useState21(false);
-  const [searchQuery, setSearchQuery] = useState21("");
-  const [activeTab] = useState21("resources");
-  const [previewMode, setPreviewMode] = useState21(true);
-  const [isSearchExpanded, setIsSearchExpanded] = useState21(false);
-  const [focusedIndex, setFocusedIndex] = useState21(-1);
-  const [isCopied, setIsCopied] = useState21(false);
-  const searchInputRef = useRef13(null);
-  const resourceDisplayRef = useRef13(null);
-  const [isMobile, setIsMobile] = useState21(false);
-  const [mobileView, setMobileView] = useState21("list");
-  useEffect17(() => {
+  const [isLoading, setIsLoading] = useState23(false);
+  const [searchQuery, setSearchQuery] = useState23("");
+  const [activeTab] = useState23("resources");
+  const [previewMode, setPreviewMode] = useState23(true);
+  const [isSearchExpanded, setIsSearchExpanded] = useState23(false);
+  const [focusedIndex, setFocusedIndex] = useState23(-1);
+  const [isCopied, setIsCopied] = useState23(false);
+  const searchInputRef = useRef14(null);
+  const resourceDisplayRef = useRef14(null);
+  const [isMobile, setIsMobile] = useState23(false);
+  const [mobileView, setMobileView] = useState23("list");
+  useEffect18(() => {
     const checkMobile = () => {
       setIsMobile(window.innerWidth < 1024);
     };
@@ -13495,7 +13628,7 @@ function ResourcesTab({
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
-  useEffect17(() => {
+  useEffect18(() => {
     if (selectedResource) {
       setMobileView("detail");
     } else {
@@ -13519,17 +13652,17 @@ function ResourcesTab({
       }
     }
   }));
-  useEffect17(() => {
+  useEffect18(() => {
     if (isSearchExpanded && searchInputRef.current) {
       searchInputRef.current.focus();
     }
   }, [isSearchExpanded]);
-  const handleSearchBlur = useCallback16(() => {
+  const handleSearchBlur = useCallback18(() => {
     if (!searchQuery.trim()) {
       setIsSearchExpanded(false);
     }
   }, [searchQuery]);
-  const handleRefresh = useCallback16(async () => {
+  const handleRefresh = useCallback18(async () => {
     if (!refreshResources) return;
     setIsRefreshing(true);
     try {
@@ -13545,7 +13678,7 @@ function ResourcesTab({
       (resource) => resource.name.toLowerCase().includes(query) || resource.description?.toLowerCase().includes(query) || resource.uri.toLowerCase().includes(query)
     );
   }, [resources, searchQuery]);
-  const handleResourceSelect = useCallback16(
+  const handleResourceSelect = useCallback18(
     async (resource) => {
       setSelectedResource(resource);
       if (isConnected) {
@@ -13602,10 +13735,10 @@ function ResourcesTab({
     },
     [readResource, serverId, isConnected]
   );
-  useEffect17(() => {
+  useEffect18(() => {
     setFocusedIndex(-1);
   }, [searchQuery, activeTab]);
-  useEffect17(() => {
+  useEffect18(() => {
     const handleKeyDown = (e) => {
       const target = e.target;
       const isInputFocused = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.contentEditable === "true";
@@ -13636,7 +13769,7 @@ function ResourcesTab({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [focusedIndex, filteredResources, handleResourceSelect]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (focusedIndex >= 0) {
       const itemId = `resource-${filteredResources[focusedIndex]?.uri}`;
       const element = document.getElementById(itemId);
@@ -13645,7 +13778,7 @@ function ResourcesTab({
       }
     }
   }, [focusedIndex, filteredResources]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (selectedResourceUri && resources.length > 0) {
       const resource = resources.find((r) => r.uri === selectedResourceUri);
       if (resource && selectedResource?.uri !== resource.uri) {
@@ -13669,7 +13802,7 @@ function ResourcesTab({
     handleResourceSelect,
     setSelectedResourceUri
   ]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (selectedResource) {
       const updatedResource = resources.find(
         (r) => r.uri === selectedResource.uri
@@ -13682,7 +13815,7 @@ function ResourcesTab({
       }
     }
   }, [resources, selectedResource]);
-  const handleCopy = useCallback16(async () => {
+  const handleCopy = useCallback18(async () => {
     if (!currentResult) return;
     try {
       await copyToClipboard(JSON.stringify(currentResult.result, null, 2));
@@ -13692,7 +13825,7 @@ function ResourcesTab({
       console.error("[ResourcesTab] Failed to copy result:", error);
     }
   }, [currentResult]);
-  const handleDownload = useCallback16(() => {
+  const handleDownload = useCallback18(() => {
     if (!currentResult) return;
     try {
       const blob = new globalThis.Blob(
@@ -13713,7 +13846,7 @@ function ResourcesTab({
       console.error("[ResourcesTab] Failed to download result:", error);
     }
   }, [currentResult]);
-  const handleFullscreen = useCallback16(async () => {
+  const handleFullscreen = useCallback18(async () => {
     if (!resourceDisplayRef.current) return;
     try {
       if (!document.fullscreenElement) {
@@ -13753,7 +13886,7 @@ function ResourcesTab({
               children: "Resources"
             }
           ),
-          mobileView === "detail" && /* @__PURE__ */ jsxs33(Fragment12, { children: [
+          mobileView === "detail" && /* @__PURE__ */ jsxs33(Fragment13, { children: [
             /* @__PURE__ */ jsx55("span", { className: "mx-2 text-muted-foreground", children: "/" }),
             /* @__PURE__ */ jsx55("span", { className: "text-foreground", children: "Content" })
           ] })
@@ -13903,11 +14036,11 @@ ResourcesTab.displayName = "ResourcesTab";
 import { AnimatePresence as AnimatePresence3, motion as motion4 } from "motion/react";
 import { ChevronLeft as ChevronLeft3 } from "lucide-react";
 import {
-  useCallback as useCallback18,
-  useEffect as useEffect21,
+  useCallback as useCallback20,
+  useEffect as useEffect22,
   useImperativeHandle as useImperativeHandle4,
-  useRef as useRef14,
-  useState as useState26
+  useRef as useRef15,
+  useState as useState28
 } from "react";
 
 // src/client/components/prompts/PromptsList.tsx
@@ -14029,7 +14162,7 @@ function SavedPromptsList({
 
 // src/client/components/prompts/PromptExecutionPanel.tsx
 import { Play as Play3, Save as Save3 } from "lucide-react";
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect19 } from "react";
 
 // src/client/components/prompts/PromptInputForm.tsx
 import { jsx as jsx59, jsxs as jsxs36 } from "react/jsx-runtime";
@@ -14136,7 +14269,7 @@ function PromptInputForm({
 }
 
 // src/client/components/prompts/PromptExecutionPanel.tsx
-import { Fragment as Fragment13, jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
 function PromptExecutionPanel({
   selectedPrompt,
   promptArgs,
@@ -14146,7 +14279,7 @@ function PromptExecutionPanel({
   onExecute,
   onSave
 }) {
-  useEffect18(() => {
+  useEffect19(() => {
     const handleKeyDown = (event) => {
       if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
         if (selectedPrompt && !isExecuting && isConnected) {
@@ -14177,10 +14310,10 @@ function PromptExecutionPanel({
               size: "sm",
               className: "lg:size-default pr-1! gap-0",
               "data-testid": "prompt-execute-button",
-              children: isExecuting ? /* @__PURE__ */ jsxs37(Fragment13, { children: [
+              children: isExecuting ? /* @__PURE__ */ jsxs37(Fragment14, { children: [
                 /* @__PURE__ */ jsx60(Spinner, { className: "mr-2" }),
                 /* @__PURE__ */ jsx60("span", { className: "hidden sm:inline", children: "Executing..." })
-              ] }) : /* @__PURE__ */ jsxs37(Fragment13, { children: [
+              ] }) : /* @__PURE__ */ jsxs37(Fragment14, { children: [
                 /* @__PURE__ */ jsx60(Play3, { className: "h-4 w-4 sm:mr-2" }),
                 /* @__PURE__ */ jsx60("span", { className: "hidden sm:inline", children: "Execute" }),
                 /* @__PURE__ */ jsx60("span", { className: "hidden sm:inline text-[12px] border text-zinc-300 p-1 rounded-full border-zinc-300 dark:text-zinc-600 dark:border-zinc-500 ml-2", children: "\u2318\u21B5" })
@@ -14226,16 +14359,16 @@ import {
   Trash2 as Trash25,
   Zap as Zap3
 } from "lucide-react";
-import { useEffect as useEffect19, useState as useState24 } from "react";
+import { useEffect as useEffect20, useState as useState26 } from "react";
 
 // src/client/components/prompts/PromptMessageCard.tsx
 import { Check as Check7, Copy as Copy10 } from "lucide-react";
-import { useState as useState23 } from "react";
+import { useState as useState25 } from "react";
 
 // src/client/components/shared/MarkdownRenderer.tsx
 import { Check as Check6, Copy as Copy9 } from "lucide-react";
 import Markdown from "markdown-to-jsx";
-import { useState as useState22 } from "react";
+import { useState as useState24 } from "react";
 import { Prism as SyntaxHighlighter2 } from "react-syntax-highlighter";
 
 // src/client/components/ui/checkbox.tsx
@@ -14321,7 +14454,7 @@ var TableCell = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE_
 TableCell.displayName = "TableCell";
 
 // src/client/components/shared/MarkdownRenderer.tsx
-import { Fragment as Fragment14, jsx as jsx63, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx63, jsxs as jsxs38 } from "react/jsx-runtime";
 function CodeBlock({
   children,
   className
@@ -14336,7 +14469,7 @@ function CodeBlock({
       language = className.replace(/^(lang-|language-)\s*/, "").trim();
     }
   }
-  const [isCopied, setIsCopied] = useState22(false);
+  const [isCopied, setIsCopied] = useState24(false);
   const codeContent = String(children).trim();
   const handleCopy = async () => {
     await copyToClipboard(codeContent);
@@ -14425,7 +14558,7 @@ function MarkdownRenderer({ content }) {
       options: {
         overrides: {
           code: Code3,
-          pre: ({ children }) => /* @__PURE__ */ jsx63(Fragment14, { children }),
+          pre: ({ children }) => /* @__PURE__ */ jsx63(Fragment15, { children }),
           h1: ({ children }) => /* @__PURE__ */ jsx63("h1", { className: "text-xl font-bold text-foreground mb-2 mt-4", children }),
           h2: ({ children }) => /* @__PURE__ */ jsx63("h2", { className: "text-lg font-bold text-foreground mb-2 mt-4", children }),
           h3: ({ children }) => /* @__PURE__ */ jsx63("h3", { className: "text-base font-bold text-foreground mb-2 mt-4", children }),
@@ -14511,7 +14644,7 @@ function extractTextFromContent(content) {
   return JSON.stringify(content, null, 2);
 }
 function PromptMessageCard({ message, index }) {
-  const [isCopied, setIsCopied] = useState23(false);
+  const [isCopied, setIsCopied] = useState25(false);
   const handleCopy = async () => {
     const text = extractTextFromContent(message.content);
     await copyToClipboard(text);
@@ -14617,19 +14750,19 @@ function PromptResultDisplay({
   onMaximize,
   isMaximized = false
 }) {
-  const [selectedIndex, setSelectedIndex] = useState24(0);
-  const [relativeTime, setRelativeTime] = useState24("");
-  const [formattedMode, setFormattedMode] = useState24(true);
+  const [selectedIndex, setSelectedIndex] = useState26(0);
+  const [relativeTime, setRelativeTime] = useState26("");
+  const [formattedMode, setFormattedMode] = useState26(true);
   const currentResult = results[0];
   const promptResults = currentResult ? results.filter((r) => r.promptName === currentResult.promptName) : [];
   const result = promptResults[selectedIndex] || promptResults[0];
   const originalResultIndex = results.findIndex((r) => r === result);
-  useEffect19(() => {
+  useEffect20(() => {
     if (promptResults.length > 0 && selectedIndex >= promptResults.length) {
       setSelectedIndex(0);
     }
   }, [promptResults.length, selectedIndex]);
-  useEffect19(() => {
+  useEffect20(() => {
     const updateTime = () => {
       if (result) {
         setRelativeTime(getRelativeTime2(result.timestamp));
@@ -14756,17 +14889,17 @@ function PromptResultDisplay({
 }
 
 // src/client/hooks/useMCPPrompts.ts
-import { useState as useState25, useCallback as useCallback17, useEffect as useEffect20, useMemo as useMemo17 } from "react";
+import { useState as useState27, useCallback as useCallback19, useEffect as useEffect21, useMemo as useMemo17 } from "react";
 function useMCPPrompts({
   prompts,
   callPrompt,
   serverId
 }) {
-  const [selectedPrompt, setSelectedPrompt] = useState25(null);
-  const [promptArgs, setPromptArgs] = useState25({});
-  const [results, setResults] = useState25([]);
-  const [isExecuting, setIsExecuting] = useState25(false);
-  const [searchQuery, setSearchQuery] = useState25("");
+  const [selectedPrompt, setSelectedPrompt] = useState27(null);
+  const [promptArgs, setPromptArgs] = useState27({});
+  const [results, setResults] = useState27([]);
+  const [isExecuting, setIsExecuting] = useState27(false);
+  const [searchQuery, setSearchQuery] = useState27("");
   const filteredPrompts = useMemo17(() => {
     if (!searchQuery.trim()) return prompts;
     const query = searchQuery.toLowerCase();
@@ -14774,7 +14907,7 @@ function useMCPPrompts({
       (prompt) => prompt.name.toLowerCase().includes(query) || prompt.description?.toLowerCase().includes(query)
     );
   }, [prompts, searchQuery]);
-  const handlePromptSelect = useCallback17((prompt) => {
+  const handlePromptSelect = useCallback19((prompt) => {
     setSelectedPrompt(prompt);
     const initialArgs = {};
     if (prompt.arguments) {
@@ -14784,10 +14917,10 @@ function useMCPPrompts({
     }
     setPromptArgs(initialArgs);
   }, []);
-  const handleArgChange = useCallback17((key, value) => {
+  const handleArgChange = useCallback19((key, value) => {
     setPromptArgs((prev) => ({ ...prev, [key]: value }));
   }, []);
-  const executePrompt = useCallback17(
+  const executePrompt = useCallback19(
     async (prompt, args) => {
       if (isExecuting) return;
       setIsExecuting(true);
@@ -14841,13 +14974,13 @@ function useMCPPrompts({
     },
     [isExecuting, callPrompt, serverId]
   );
-  const handleDeleteResult = useCallback17((index) => {
+  const handleDeleteResult = useCallback19((index) => {
     setResults((prev) => prev.filter((_, i) => i !== index));
   }, []);
-  const clearPromptResults = useCallback17(() => {
+  const clearPromptResults = useCallback19(() => {
     setResults([]);
   }, []);
-  useEffect20(() => {
+  useEffect21(() => {
     if (selectedPrompt) {
       const updatedPrompt = prompts.find((p) => p.name === selectedPrompt.name);
       if (!updatedPrompt) {
@@ -14862,7 +14995,7 @@ function useMCPPrompts({
       }
     }
   }, [prompts, selectedPrompt]);
-  const executeSelectedPrompt = useCallback17(async () => {
+  const executeSelectedPrompt = useCallback19(async () => {
     if (!selectedPrompt || isExecuting) return;
     executePrompt(selectedPrompt, promptArgs);
   }, [selectedPrompt, promptArgs, isExecuting, executePrompt]);
@@ -14886,7 +15019,7 @@ function useMCPPrompts({
 }
 
 // src/client/components/PromptsTab.tsx
-import { Fragment as Fragment15, jsx as jsx66, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx66, jsxs as jsxs41 } from "react/jsx-runtime";
 var SAVED_PROMPTS_KEY = "mcp-inspector-saved-prompts";
 function PromptsTab({
   ref,
@@ -14896,22 +15029,22 @@ function PromptsTab({
   isConnected,
   refreshPrompts
 }) {
-  const [isRefreshing, setIsRefreshing] = useState26(false);
-  const [selectedSavedPrompt, setSelectedSavedPrompt] = useState26(null);
+  const [isRefreshing, setIsRefreshing] = useState28(false);
+  const [selectedSavedPrompt, setSelectedSavedPrompt] = useState28(null);
   const { selectedPromptName, setSelectedPromptName } = useInspector();
-  const [copiedResult, setCopiedResult] = useState26(null);
-  const [activeTab, setActiveTab] = useState26("prompts");
-  const [savedPrompts, setSavedPrompts] = useState26([]);
-  const [_saveDialogOpen, setSaveDialogOpen] = useState26(false);
-  const [_promptName, setPromptName] = useState26("");
-  const [isSearchExpanded, setIsSearchExpanded] = useState26(false);
-  const [focusedIndex, setFocusedIndex] = useState26(-1);
-  const searchInputRef = useRef14(null);
-  const [isMobile, setIsMobile] = useState26(false);
-  const [mobileView, setMobileView] = useState26(
+  const [copiedResult, setCopiedResult] = useState28(null);
+  const [activeTab, setActiveTab] = useState28("prompts");
+  const [savedPrompts, setSavedPrompts] = useState28([]);
+  const [_saveDialogOpen, setSaveDialogOpen] = useState28(false);
+  const [_promptName, setPromptName] = useState28("");
+  const [isSearchExpanded, setIsSearchExpanded] = useState28(false);
+  const [focusedIndex, setFocusedIndex] = useState28(-1);
+  const searchInputRef = useRef15(null);
+  const [isMobile, setIsMobile] = useState28(false);
+  const [mobileView, setMobileView] = useState28(
     "list"
   );
-  const [isMaximized, setIsMaximized] = useState26(false);
+  const [isMaximized, setIsMaximized] = useState28(false);
   const {
     filteredPrompts,
     selectedPrompt,
@@ -14929,7 +15062,7 @@ function PromptsTab({
   } = useMCPPrompts({ prompts, callPrompt, serverId });
   const leftPanelRef = usePanelRef();
   const toolParamsPanelRef = usePanelRef();
-  useEffect21(() => {
+  useEffect22(() => {
     const checkMobile = () => {
       setIsMobile(window.innerWidth < 1024);
     };
@@ -14937,14 +15070,14 @@ function PromptsTab({
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
-  useEffect21(() => {
+  useEffect22(() => {
     if (selectedPrompt) {
       setMobileView("detail");
     } else {
       setMobileView("list");
     }
   }, [selectedPrompt]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (isMobile && results.length > 0 && !isExecuting) {
       setMobileView("response");
     }
@@ -14966,7 +15099,7 @@ function PromptsTab({
       }
     }
   }));
-  useEffect21(() => {
+  useEffect22(() => {
     try {
       const saved = localStorage.getItem(SAVED_PROMPTS_KEY);
       if (saved) {
@@ -14977,24 +15110,24 @@ function PromptsTab({
       console.error("[PromptsTab] Failed to load saved prompts:", error);
     }
   }, []);
-  const saveSavedPrompts = useCallback18((prompts2) => {
+  const saveSavedPrompts = useCallback20((prompts2) => {
     try {
       localStorage.setItem(SAVED_PROMPTS_KEY, JSON.stringify(prompts2));
     } catch (error) {
       console.error("[PromptsTab] Failed to save prompts:", error);
     }
   }, []);
-  useEffect21(() => {
+  useEffect22(() => {
     if (isSearchExpanded && searchInputRef.current) {
       searchInputRef.current.focus();
     }
   }, [isSearchExpanded]);
-  const handleSearchBlur = useCallback18(() => {
+  const handleSearchBlur = useCallback20(() => {
     if (!searchQuery.trim()) {
       setIsSearchExpanded(false);
     }
   }, [searchQuery]);
-  const handleRefresh = useCallback18(async () => {
+  const handleRefresh = useCallback20(async () => {
     if (!refreshPrompts) return;
     setIsRefreshing(true);
     try {
@@ -15003,7 +15136,7 @@ function PromptsTab({
       setIsRefreshing(false);
     }
   }, [refreshPrompts]);
-  const loadSavedPrompt = useCallback18(
+  const loadSavedPrompt = useCallback20(
     (prompt) => {
       const promptObj = prompts.find((p) => p.name === prompt.promptName);
       if (promptObj) {
@@ -15014,10 +15147,10 @@ function PromptsTab({
     },
     [prompts, setSelectedPrompt, setPromptArgs]
   );
-  useEffect21(() => {
+  useEffect22(() => {
     setFocusedIndex(-1);
   }, [searchQuery, activeTab]);
-  useEffect21(() => {
+  useEffect22(() => {
     const handleKeyDown = (e) => {
       const target = e.target;
       const isInputFocused = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.contentEditable === "true";
@@ -15062,7 +15195,7 @@ function PromptsTab({
     handlePromptSelect,
     loadSavedPrompt
   ]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (focusedIndex >= 0) {
       const itemId = activeTab === "prompts" ? `prompt-${filteredPrompts[focusedIndex]?.name}` : `saved-prompt-${savedPrompts[focusedIndex]?.id}`;
       const element = document.getElementById(itemId);
@@ -15071,7 +15204,7 @@ function PromptsTab({
       }
     }
   }, [focusedIndex, filteredPrompts, savedPrompts, activeTab]);
-  useEffect21(() => {
+  useEffect22(() => {
     console.warn("[PromptsTab] Auto-selection effect triggered:", {
       selectedPromptName,
       promptsCount: prompts.length,
@@ -15111,7 +15244,7 @@ function PromptsTab({
     handlePromptSelect,
     setSelectedPromptName
   ]);
-  const handleCopyResult = useCallback18(async (index, result) => {
+  const handleCopyResult = useCallback20(async (index, result) => {
     try {
       await copyToClipboard(JSON.stringify(result, null, 2));
       setCopiedResult(index);
@@ -15120,7 +15253,7 @@ function PromptsTab({
       console.error("[PromptsTab] Failed to copy result:", error);
     }
   }, []);
-  const handleFullscreen = useCallback18(
+  const handleFullscreen = useCallback20(
     (index) => {
       if (isMobile) {
         setMobileView("response");
@@ -15152,7 +15285,7 @@ function PromptsTab({
     },
     [isMobile, results]
   );
-  const handleMaximize = useCallback18(() => {
+  const handleMaximize = useCallback20(() => {
     if (!isMaximized) {
       if (leftPanelRef.current) {
         leftPanelRef.current.collapse();
@@ -15171,12 +15304,12 @@ function PromptsTab({
       setIsMaximized(false);
     }
   }, [isMaximized, leftPanelRef, toolParamsPanelRef]);
-  const openSaveDialog = useCallback18(() => {
+  const openSaveDialog = useCallback20(() => {
     if (!selectedPrompt) return;
     setPromptName("");
     setSaveDialogOpen(true);
   }, [selectedPrompt]);
-  const deleteSavedPrompt = useCallback18(
+  const deleteSavedPrompt = useCallback20(
     (id) => {
       saveSavedPrompts(savedPrompts.filter((p) => p.id !== id));
       if (selectedSavedPrompt?.id === id) {
@@ -15217,7 +15350,7 @@ function PromptsTab({
               children: "Prompts"
             }
           ),
-          mobileView === "detail" && /* @__PURE__ */ jsxs41(Fragment15, { children: [
+          mobileView === "detail" && /* @__PURE__ */ jsxs41(Fragment16, { children: [
             /* @__PURE__ */ jsx66("span", { className: "mx-2 text-muted-foreground", children: "/" }),
             /* @__PURE__ */ jsx66(
               "button",
@@ -15230,7 +15363,7 @@ function PromptsTab({
               }
             )
           ] }),
-          mobileView === "response" && /* @__PURE__ */ jsxs41(Fragment15, { children: [
+          mobileView === "response" && /* @__PURE__ */ jsxs41(Fragment16, { children: [
             /* @__PURE__ */ jsx66("span", { className: "mx-2 text-muted-foreground", children: "/" }),
             /* @__PURE__ */ jsx66("span", { className: "text-foreground", children: "Response" })
           ] })
@@ -15433,18 +15566,18 @@ PromptsTab.displayName = "PromptsTab";
 
 // src/client/components/ChatTab.tsx
 import {
-  useCallback as useCallback26,
-  useEffect as useEffect27,
+  useCallback as useCallback28,
+  useEffect as useEffect28,
   useMemo as useMemo20,
-  useRef as useRef20,
-  useState as useState36
+  useRef as useRef21,
+  useState as useState38
 } from "react";
 import { toast as toast7 } from "sonner";
 
 // src/client/hooks/useKeyboardShortcuts.ts
-import { useEffect as useEffect22 } from "react";
+import { useEffect as useEffect23 } from "react";
 function useKeyboardShortcuts(handlers) {
-  useEffect22(() => {
+  useEffect23(() => {
     const handleKeyDown = (event) => {
       const target = event.target;
       const isInputFocused = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.contentEditable === "true";
@@ -15511,7 +15644,7 @@ import { Copy as Copy12, Download as Download3, SquarePen } from "lucide-react";
 
 // src/client/components/chat/ConfigurationDialog.tsx
 import { Check as Check9, ChevronsUpDown, Eye, EyeOff, Key, Loader2 as Loader22 } from "lucide-react";
-import { useEffect as useEffect23, useState as useState27 } from "react";
+import { useEffect as useEffect24, useState as useState29 } from "react";
 
 // src/client/components/chat/providerMeta.tsx
 import { jsx as jsx67 } from "react/jsx-runtime";
@@ -15765,13 +15898,13 @@ function ConfigurationDialog({
   buttonLabel: _buttonLabel = "Configure API Key",
   freeTierInfo
 }) {
-  const [models, setModels] = useState27([]);
-  const [isLoadingModels, setIsLoadingModels] = useState27(false);
-  const [modelError, setModelError] = useState27(null);
-  const [comboboxOpen, setComboboxOpen] = useState27(false);
-  const [showPassword, setShowPassword] = useState27(false);
+  const [models, setModels] = useState29([]);
+  const [isLoadingModels, setIsLoadingModels] = useState29(false);
+  const [modelError, setModelError] = useState29(null);
+  const [comboboxOpen, setComboboxOpen] = useState29(false);
+  const [showPassword, setShowPassword] = useState29(false);
   const modelsCacheKey = getModelsCacheKey(tempProvider, tempBaseUrl);
-  useEffect23(() => {
+  useEffect24(() => {
     const needsApiKey = providerRequiresApiKey(tempProvider);
     const needsBaseUrl = providerSupportsBaseUrl(tempProvider);
     if (!open || !tempProvider || needsApiKey && !tempApiKey.trim() || needsBaseUrl && !tempBaseUrl.trim()) {
@@ -15820,7 +15953,7 @@ function ConfigurationDialog({
     const timeoutId = setTimeout(loadModels, 500);
     return () => clearTimeout(timeoutId);
   }, [tempApiKey, tempBaseUrl, tempProvider, open, modelsCacheKey]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (open) {
       onModelChange("");
     }
@@ -16183,11 +16316,11 @@ import { Send, Square } from "lucide-react";
 
 // src/client/components/chat/ChatInput.tsx
 import { Image as ImageIcon, Paperclip, X as X6 } from "lucide-react";
-import { useRef as useRef15 } from "react";
+import { useRef as useRef16 } from "react";
 
 // src/client/components/chat/ToolSelector.tsx
 import { Wrench as Wrench3 } from "lucide-react";
-import { useCallback as useCallback19, useMemo as useMemo18, useState as useState28 } from "react";
+import { useCallback as useCallback21, useMemo as useMemo18, useState as useState30 } from "react";
 import { jsx as jsx70, jsxs as jsxs44 } from "react/jsx-runtime";
 function ToolSelector({
   tools,
@@ -16195,11 +16328,11 @@ function ToolSelector({
   onDisabledToolsChange,
   disabled
 }) {
-  const [open, setOpen] = useState28(false);
+  const [open, setOpen] = useState30(false);
   const enabledCount = tools.length - disabledTools.size;
   const allEnabled = disabledTools.size === 0;
   const someDisabled = disabledTools.size > 0 && disabledTools.size < tools.length;
-  const toggleTool = useCallback19(
+  const toggleTool = useCallback21(
     (toolName) => {
       const next = new Set(disabledTools);
       if (next.has(toolName)) {
@@ -16211,7 +16344,7 @@ function ToolSelector({
     },
     [disabledTools, onDisabledToolsChange]
   );
-  const toggleAll = useCallback19(() => {
+  const toggleAll = useCallback21(() => {
     if (allEnabled) {
       onDisabledToolsChange(new Set(tools.map((t) => t.name)));
     } else {
@@ -16332,7 +16465,7 @@ function ChatInput({
   onAttachmentAdd,
   onAttachmentRemove
 }) {
-  const fileInputRef = useRef15(null);
+  const fileInputRef = useRef16(null);
   const handleFileSelect = (e) => {
     const files = e.target.files;
     if (files && files.length > 0) {
@@ -16478,7 +16611,7 @@ function PromptResultsList({
 
 // src/client/components/chat/PromptsDropdown.tsx
 import { MessageSquare as MessageSquare4 } from "lucide-react";
-import { useEffect as useEffect24 } from "react";
+import { useEffect as useEffect25 } from "react";
 import { jsx as jsx73, jsxs as jsxs47 } from "react/jsx-runtime";
 function PromptsDropdown({
   isOpen,
@@ -16488,7 +16621,7 @@ function PromptsDropdown({
   onPromptSelect
 }) {
   if (!isOpen) return null;
-  useEffect24(() => {
+  useEffect25(() => {
     if (focusedIndex >= 0) {
       const element = document.getElementById(`prompt-${focusedIndex}`);
       if (element) {
@@ -16694,7 +16827,7 @@ function AuroraBackground({
 
 // src/client/components/ui/blur-fade.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion5, useInView } from "motion/react";
-import { useRef as useRef16 } from "react";
+import { useRef as useRef17 } from "react";
 import { jsx as jsx76 } from "react/jsx-runtime";
 function BlurFade({
   children,
@@ -16709,7 +16842,7 @@ function BlurFade({
   blur = "6px",
   ...props
 }) {
-  const ref = useRef16(null);
+  const ref = useRef17(null);
   const inViewResult = useInView(ref, { once: true, margin: inViewMargin });
   const isInView = !inView || inViewResult;
   const defaultVariants = {
@@ -16917,14 +17050,14 @@ function ConfigureEmptyState({
 }
 
 // src/client/components/chat/MessageList.tsx
-import { memo as memo4, useCallback as useCallback21, useEffect as useEffect26, useRef as useRef17 } from "react";
+import { memo as memo4, useCallback as useCallback23, useEffect as useEffect27, useRef as useRef18 } from "react";
 
 // src/client/components/chat/CopyButton.tsx
 import { Check as Check10, Copy as Copy13 } from "lucide-react";
-import { useState as useState29 } from "react";
+import { useState as useState31 } from "react";
 import { jsx as jsx79 } from "react/jsx-runtime";
 function CopyButton({ text }) {
-  const [isCopied, setIsCopied] = useState29(false);
+  const [isCopied, setIsCopied] = useState31(false);
   const handleCopy = async () => {
     await copyToClipboard(text);
     setIsCopied(true);
@@ -17203,7 +17336,7 @@ function UserMessage({
 }
 
 // src/client/components/chat/InlineElicitationCard.tsx
-import { useState as useState31 } from "react";
+import { useState as useState33 } from "react";
 import { ExternalLink } from "lucide-react";
 import { toast as toast6 } from "sonner";
 
@@ -17229,7 +17362,7 @@ function getMultiSelectChoices(field) {
 }
 
 // src/client/components/elicitation/shared/ElicitationFormFields.tsx
-import { Fragment as Fragment16, jsx as jsx83, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx83, jsxs as jsxs55 } from "react/jsx-runtime";
 function ElicitationFormFields({
   request,
   formData,
@@ -17424,18 +17557,18 @@ function ElicitationFormFields({
     showOuterLabelForBoolean,
     emptyFallback
   ]);
-  return /* @__PURE__ */ jsx83(Fragment16, { children: rendered });
+  return /* @__PURE__ */ jsx83(Fragment17, { children: rendered });
 }
 
 // src/client/components/elicitation/shared/useElicitationForm.ts
-import { useCallback as useCallback20, useEffect as useEffect25, useState as useState30 } from "react";
+import { useCallback as useCallback22, useEffect as useEffect26, useState as useState32 } from "react";
 function useElicitationForm(request) {
-  const [formData, setFormData] = useState30({});
-  const [urlCompleted, setUrlCompleted] = useState30(false);
+  const [formData, setFormData] = useState32({});
+  const [urlCompleted, setUrlCompleted] = useState32(false);
   const mode = request?.request.mode || "form";
   const isFormMode = mode === "form";
   const isUrlMode = mode === "url";
-  useEffect25(() => {
+  useEffect26(() => {
     if (request && isFormMode && "requestedSchema" in request.request) {
       const schema = request.request.requestedSchema;
       const initial = {};
@@ -17461,10 +17594,10 @@ function useElicitationForm(request) {
     }
     setUrlCompleted(false);
   }, [request?.id, isFormMode]);
-  const setFieldValue = useCallback20((fieldName, value) => {
+  const setFieldValue = useCallback22((fieldName, value) => {
     setFormData((prev) => ({ ...prev, [fieldName]: value }));
   }, []);
-  const getMissingRequiredFields = useCallback20(() => {
+  const getMissingRequiredFields = useCallback22(() => {
     if (!request || !isFormMode || !("requestedSchema" in request.request)) {
       return [];
     }
@@ -17503,8 +17636,8 @@ function InlineElicitationCard({
     isFormMode,
     isUrlMode
   } = useElicitationForm(request);
-  const [responded, setResponded] = useState31(false);
-  const [responseLabel, setResponseLabel] = useState31("");
+  const [responded, setResponded] = useState33(false);
+  const [responseLabel, setResponseLabel] = useState33("");
   const handleAccept = () => {
     if (responded) return;
     if (isFormMode) {
@@ -17646,7 +17779,7 @@ function InlineElicitationCard({
 }
 
 // src/client/components/chat/MessageList.tsx
-import { Fragment as Fragment17, jsx as jsx85, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx85, jsxs as jsxs57 } from "react/jsx-runtime";
 var MessageList = memo4(
   ({
     messages,
@@ -17660,7 +17793,7 @@ var MessageList = memo4(
     onApproveElicitation,
     onRejectElicitation
   }) => {
-    const messagesEndRef = useRef17(null);
+    const messagesEndRef = useRef18(null);
     const getToolMeta = (toolName) => {
       const normalize = (n) => n.replace(/-/g, "_");
       const key = normalize(toolName);
@@ -17672,7 +17805,7 @@ var MessageList = memo4(
       const protocol = detectWidgetProtocol(toolMeta, void 0);
       return protocol !== null && protocol !== "mcp-ui";
     };
-    const handleFollowUp = useCallback21(
+    const handleFollowUp = useCallback23(
       (content) => {
         const text = content.filter(
           (c) => c.type === "text" && "text" in c
@@ -17688,7 +17821,7 @@ var MessageList = memo4(
       },
       [sendMessage]
     );
-    useEffect26(() => {
+    useEffect27(() => {
       if (messages.length > 0 && messagesEndRef.current) {
         messagesEndRef.current.scrollIntoView({
           behavior: !isLoading ? "smooth" : "auto",
@@ -17784,7 +17917,7 @@ var MessageList = memo4(
               ] }, partKey);
             }
             return null;
-          }) : /* @__PURE__ */ jsxs57(Fragment17, { children: [
+          }) : /* @__PURE__ */ jsxs57(Fragment18, { children: [
             /* @__PURE__ */ jsx85(
               AssistantMessage,
               {
@@ -17840,7 +17973,7 @@ var MessageList = memo4(
 );
 
 // src/client/components/chat/useChatMessages.ts
-import { useCallback as useCallback22, useRef as useRef18, useState as useState32 } from "react";
+import { useCallback as useCallback24, useRef as useRef19, useState as useState34 } from "react";
 
 // src/client/components/chat/conversion.ts
 function convertMessagesToProvider2(messages) {
@@ -17928,13 +18061,13 @@ function useChatMessages({
   extraHeaders,
   body: bodyBuilder
 }) {
-  const [messages, setMessages] = useState32(initialMessages ?? []);
-  const [isLoading, setIsLoading] = useState32(false);
-  const [attachments, setAttachments] = useState32([]);
-  const [rateLimitInfo, setRateLimitInfo] = useState32(null);
-  const [mcpServerAuthRequired, setMcpServerAuthRequired] = useState32(null);
-  const abortControllerRef = useRef18(null);
-  const sendMessage = useCallback22(
+  const [messages, setMessages] = useState34(initialMessages ?? []);
+  const [isLoading, setIsLoading] = useState34(false);
+  const [attachments, setAttachments] = useState34([]);
+  const [rateLimitInfo, setRateLimitInfo] = useState34(null);
+  const [mcpServerAuthRequired, setMcpServerAuthRequired] = useState34(null);
+  const abortControllerRef = useRef19(null);
+  const sendMessage = useCallback24(
     async (userInput, promptResults, extraAttachments) => {
       const allAttachments = [...attachments, ...extraAttachments ?? []];
       const hasContent = userInput.trim() || promptResults.length > 0 || allAttachments.length > 0;
@@ -18291,23 +18424,23 @@ ${parts2.join("\n")}`
       bodyBuilder
     ]
   );
-  const clearMessages = useCallback22(() => {
+  const clearMessages = useCallback24(() => {
     setMessages([]);
     setRateLimitInfo(null);
     setMcpServerAuthRequired(null);
   }, []);
-  const clearRateLimitInfo = useCallback22(() => {
+  const clearRateLimitInfo = useCallback24(() => {
     setRateLimitInfo(null);
   }, []);
-  const clearMcpServerAuthRequired = useCallback22(() => {
+  const clearMcpServerAuthRequired = useCallback24(() => {
     setMcpServerAuthRequired(null);
   }, []);
-  const stop = useCallback22(() => {
+  const stop = useCallback24(() => {
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
     }
   }, []);
-  const addAttachment = useCallback22(async (file) => {
+  const addAttachment = useCallback24(async (file) => {
     try {
       const attachment = await fileToAttachment(file);
       setAttachments((prev) => {
@@ -18326,10 +18459,10 @@ ${parts2.join("\n")}`
       }
     }
   }, []);
-  const removeAttachment = useCallback22((index) => {
+  const removeAttachment = useCallback24((index) => {
     setAttachments((prev) => prev.filter((_, i) => i !== index));
   }, []);
-  const clearAttachments = useCallback22(() => {
+  const clearAttachments = useCallback24(() => {
     setAttachments([]);
   }, []);
   return {
@@ -18426,7 +18559,7 @@ async function* runToolLoop(params) {
 }
 
 // src/client/components/chat/useChatMessagesClientSide.ts
-import { useCallback as useCallback23, useRef as useRef19, useState as useState33 } from "react";
+import { useCallback as useCallback25, useRef as useRef20, useState as useState35 } from "react";
 var SYSTEM_PROMPT = "You are a helpful assistant with access to MCP tools. Help users interact with the MCP server.";
 function useChatMessagesClientSide({
   connection,
@@ -18436,11 +18569,11 @@ function useChatMessagesClientSide({
   widgetModelContexts,
   disabledTools
 }) {
-  const [messages, setMessages] = useState33([]);
-  const [isLoading, setIsLoading] = useState33(false);
-  const [attachments, setAttachments] = useState33([]);
-  const abortControllerRef = useRef19(null);
-  const sendMessage = useCallback23(
+  const [messages, setMessages] = useState35([]);
+  const [isLoading, setIsLoading] = useState35(false);
+  const [attachments, setAttachments] = useState35([]);
+  const abortControllerRef = useRef20(null);
+  const sendMessage = useCallback25(
     async (userInput, promptResults, extraAttachments) => {
       const allAttachments = [...attachments, ...extraAttachments ?? []];
       const hasContent = userInput.trim() || promptResults.length > 0 || allAttachments.length > 0;
@@ -18787,15 +18920,15 @@ ${widgetParts.join("\n")}`,
       widgetModelContexts
     ]
   );
-  const clearMessages = useCallback23(() => {
+  const clearMessages = useCallback25(() => {
     setMessages([]);
   }, []);
-  const stop = useCallback23(() => {
+  const stop = useCallback25(() => {
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
     }
   }, []);
-  const addAttachment = useCallback23(async (file) => {
+  const addAttachment = useCallback25(async (file) => {
     try {
       const attachment = await fileToAttachment(file);
       setAttachments((prev) => {
@@ -18814,10 +18947,10 @@ ${widgetParts.join("\n")}`,
       }
     }
   }, []);
-  const removeAttachment = useCallback23((index) => {
+  const removeAttachment = useCallback25((index) => {
     setAttachments((prev) => prev.filter((_, i) => i !== index));
   }, []);
-  const clearAttachments = useCallback23(() => {
+  const clearAttachments = useCallback25(() => {
     setAttachments([]);
   }, []);
   return {
@@ -18836,7 +18969,7 @@ ${widgetParts.join("\n")}`,
 
 // src/client/components/chat/McpReconnectBanner.tsx
 import { AlertCircle, RefreshCw as RefreshCw3 } from "lucide-react";
-import { useCallback as useCallback24, useState as useState34 } from "react";
+import { useCallback as useCallback26, useState as useState36 } from "react";
 import { jsx as jsx86, jsxs as jsxs58 } from "react/jsx-runtime";
 function McpReconnectBanner({
   serverName,
@@ -18845,8 +18978,8 @@ function McpReconnectBanner({
   onReconnect,
   onDismiss
 }) {
-  const [isReconnecting, setIsReconnecting] = useState34(false);
-  const handleClick = useCallback24(async () => {
+  const [isReconnecting, setIsReconnecting] = useState36(false);
+  const handleClick = useCallback26(async () => {
     setIsReconnecting(true);
     try {
       await onReconnect();
@@ -18913,9 +19046,9 @@ function McpReconnectBanner({
 }
 
 // src/client/components/LoginModal.tsx
-import { useCallback as useCallback25, useState as useState35 } from "react";
+import { useCallback as useCallback27, useState as useState37 } from "react";
 import { AlertCircle as AlertCircle2, Eye as Eye2, EyeOff as EyeOff2 } from "lucide-react";
-import { Fragment as Fragment18, jsx as jsx87, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx87, jsxs as jsxs59 } from "react/jsx-runtime";
 function GoogleIcon({ className }) {
   return /* @__PURE__ */ jsxs59(
     "svg",
@@ -18980,14 +19113,14 @@ function LoginModal({
   onDismiss,
   onUseApiKey
 }) {
-  const [email, setEmail] = useState35("");
-  const [password, setPassword] = useState35("");
-  const [showPassword, setShowPassword] = useState35(false);
-  const [error, setError] = useState35(null);
-  const [loading, setLoading] = useState35(
+  const [email, setEmail] = useState37("");
+  const [password, setPassword] = useState37("");
+  const [showPassword, setShowPassword] = useState37(false);
+  const [error, setError] = useState37(null);
+  const [loading, setLoading] = useState37(
     null
   );
-  const handleSuccess = useCallback25(() => {
+  const handleSuccess = useCallback27(() => {
     window.dispatchEvent(new CustomEvent("manufact:session-changed"));
     onDismiss();
   }, [onDismiss]);
@@ -19146,7 +19279,7 @@ function LoginModal({
             /* @__PURE__ */ jsx87(AlertCircle2, { className: "h-4 w-4 shrink-0" }),
             error
           ] }),
-          /* @__PURE__ */ jsx87(Button, { type: "submit", disabled: isLoading, className: "w-full", children: loading === "email" ? /* @__PURE__ */ jsxs59(Fragment18, { children: [
+          /* @__PURE__ */ jsx87(Button, { type: "submit", disabled: isLoading, className: "w-full", children: loading === "email" ? /* @__PURE__ */ jsxs59(Fragment19, { children: [
             /* @__PURE__ */ jsx87(Spinner, { className: "mr-2" }),
             "Signing in\u2026"
           ] }) : "Sign in" })
@@ -19180,7 +19313,7 @@ function LoginModal({
             }
           )
         ] }),
-        onUseApiKey && /* @__PURE__ */ jsxs59(Fragment18, { children: [
+        onUseApiKey && /* @__PURE__ */ jsxs59(Fragment19, { children: [
           /* @__PURE__ */ jsx87(Divider, { text: "or" }),
           /* @__PURE__ */ jsx87(
             "button",
@@ -19259,15 +19392,15 @@ function ChatTab({
   extraHeaders,
   body
 }) {
-  const [inputValue, setInputValue] = useState36("");
-  const [promptsDropdownOpen, setPromptsDropdownOpen] = useState36(false);
-  const [promptFocusedIndex, setPromptFocusedIndex] = useState36(-1);
-  const [quickQuestions, setQuickQuestions] = useState36(chatQuickQuestions);
-  const [followups, setFollowups] = useState36(chatFollowups);
-  const [disabledTools, setDisabledTools] = useState36(/* @__PURE__ */ new Set());
-  const textareaRef = useRef20(null);
-  const messagesAreaRef = useRef20(null);
-  const triggerSpanRef = useRef20(null);
+  const [inputValue, setInputValue] = useState38("");
+  const [promptsDropdownOpen, setPromptsDropdownOpen] = useState38(false);
+  const [promptFocusedIndex, setPromptFocusedIndex] = useState38(-1);
+  const [quickQuestions, setQuickQuestions] = useState38(chatQuickQuestions);
+  const [followups, setFollowups] = useState38(chatFollowups);
+  const [disabledTools, setDisabledTools] = useState38(/* @__PURE__ */ new Set());
+  const textareaRef = useRef21(null);
+  const messagesAreaRef = useRef21(null);
+  const triggerSpanRef = useRef21(null);
   const toolInfos = useMemo20(
     () => (connection.tools ?? []).map((t) => ({
       name: t.name,
@@ -19292,7 +19425,7 @@ function ChatTab({
     clearConfig
   } = useConfig({ mcpServerUrl: connection.url });
   const hostUsesServerManagedStream = !useClientSide && managedLlmConfig != null;
-  const [forceClientSide, setForceClientSide] = useState36(
+  const [forceClientSide, setForceClientSide] = useState38(
     () => hostUsesServerManagedStream ? false : !!localLlmConfig
   );
   const effectiveClientSide = hostUsesServerManagedStream ? forceClientSide : useClientSide || forceClientSide || !!localLlmConfig;
@@ -19339,7 +19472,7 @@ function ChatTab({
   const clearRateLimitInfo = effectiveClientSide ? void 0 : serverSideChat.clearRateLimitInfo;
   const mcpServerAuthRequired = effectiveClientSide ? null : serverSideChat.mcpServerAuthRequired ?? null;
   const clearMcpServerAuthRequired = effectiveClientSide ? void 0 : serverSideChat.clearMcpServerAuthRequired;
-  const handleMcpReconnect = useCallback26(async () => {
+  const handleMcpReconnect = useCallback28(async () => {
     try {
       await connection.authenticate();
     } catch (err) {
@@ -19361,13 +19494,13 @@ function ChatTab({
       onDismiss: clearMcpServerAuthRequired
     }
   ) : null;
-  const handleUseApiKey = useCallback26(() => {
+  const handleUseApiKey = useCallback28(() => {
     clearRateLimitInfo?.();
     setForceClientSide(true);
     setConfigDialogOpen(true);
   }, [clearRateLimitInfo, setConfigDialogOpen]);
-  const [showLoginModal, setShowLoginModal] = useState36(false);
-  const handleOpenLogin = useCallback26(() => {
+  const [showLoginModal, setShowLoginModal] = useState38(false);
+  const handleOpenLogin = useCallback28(() => {
     setConfigDialogOpen(false);
     setShowLoginModal(true);
   }, [setConfigDialogOpen]);
@@ -19388,11 +19521,11 @@ function ChatTab({
     callPrompt,
     serverId
   });
-  const sanitizeStringList = useCallback26((input) => {
+  const sanitizeStringList = useCallback28((input) => {
     if (!Array.isArray(input)) return [];
     return input.filter((item) => typeof item === "string").map((item) => item.trim()).filter(Boolean).slice(0, 8);
   }, []);
-  const serializeMessageContent = useCallback26((message) => {
+  const serializeMessageContent = useCallback28((message) => {
     if (typeof message.content === "string" && message.content.trim()) {
       return message.content;
     }
@@ -19407,7 +19540,7 @@ function ChatTab({
     }
     return "";
   }, []);
-  const serializeToolResult = useCallback26((result) => {
+  const serializeToolResult = useCallback28((result) => {
     if (result === null || result === void 0) return "No result";
     if (typeof result === "string") {
       try {
@@ -19440,7 +19573,7 @@ function ChatTab({
     }
     return JSON.stringify(result, null, 2);
   }, []);
-  const getSerializedMessages = useCallback26(() => {
+  const getSerializedMessages = useCallback28(() => {
     return messages.map((message) => {
       const textContent = serializeMessageContent(message);
       const toolInvocations = message.parts?.filter((p) => p.type === "tool-invocation" && p.toolInvocation).map((p) => ({
@@ -19459,7 +19592,7 @@ function ChatTab({
       };
     });
   }, [messages, serializeMessageContent]);
-  const postBridgeEvent = useCallback26(
+  const postBridgeEvent = useCallback28(
     (type, payload = {}) => {
       if (typeof window === "undefined" || window.parent === window) return;
       window.parent.postMessage(
@@ -19473,7 +19606,7 @@ function ChatTab({
     },
     [serverId]
   );
-  useEffect27(() => {
+  useEffect28(() => {
     postBridgeEvent("mcp-inspector:chat:ready", {
       capabilities: {
         send: true,
@@ -19485,7 +19618,7 @@ function ChatTab({
       }
     });
   }, [postBridgeEvent]);
-  useEffect27(() => {
+  useEffect28(() => {
     postBridgeEvent("mcp-inspector:chat:state_changed", {
       isLoading,
       messageCount: messages.length,
@@ -19501,7 +19634,7 @@ function ChatTab({
     postBridgeEvent,
     quickQuestions
   ]);
-  useEffect27(() => {
+  useEffect28(() => {
     const handleMessage = (event) => {
       if (!event.data || typeof event.data !== "object") return;
       const data = event.data;
@@ -19729,12 +19862,12 @@ function ChatTab({
   useKeyboardShortcuts(
     enableKeyboardShortcuts ? { onNewChat: clearMessages } : {}
   );
-  const clearPromptsUIState = useCallback26(() => {
+  const clearPromptsUIState = useCallback28(() => {
     setPromptFocusedIndex(-1);
     setPromptsDropdownOpen(false);
     triggerSpanRef.current = null;
   }, []);
-  const updatePromptsDropdownState = useCallback26(() => {
+  const updatePromptsDropdownState = useCallback28(() => {
     if (!textareaRef.current) {
       return;
     }
@@ -19749,28 +19882,28 @@ function ChatTab({
       clearPromptsUIState();
     }
   }, [inputValue, clearPromptsUIState]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (llmConfig && messages.length === 0 && textareaRef.current) {
       textareaRef.current.focus();
     }
   }, [llmConfig, messages.length]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!isLoading && messages.length > 0 && textareaRef.current) {
       textareaRef.current.focus();
     }
   }, [isLoading, messages.length]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!textareaRef.current) {
       return;
     }
     updatePromptsDropdownState();
   }, [inputValue, updatePromptsDropdownState]);
-  const clearPromptsState = useCallback26(() => {
+  const clearPromptsState = useCallback28(() => {
     setSelectedPrompt(null);
     setPromptArgs({});
     clearPromptsUIState();
   }, [clearPromptsUIState]);
-  const handlePromptSelect = useCallback26(
+  const handlePromptSelect = useCallback28(
     async (prompt) => {
       setSelectedPrompt(prompt);
       if (prompt.arguments && prompt.arguments.length > 0) {
@@ -19800,7 +19933,7 @@ function ChatTab({
     },
     [executePrompt, clearPromptsState, inputValue]
   );
-  const handleSendMessage = useCallback26(() => {
+  const handleSendMessage = useCallback28(() => {
     const hasContent = inputValue.trim() || results.length > 0 || attachments.length > 0;
     if (!hasContent) {
       return;
@@ -19809,7 +19942,7 @@ function ChatTab({
     setInputValue("");
     clearPromptResults();
   }, [inputValue, results, sendMessage, clearPromptResults, attachments]);
-  const handlePromptKeyDown = useCallback26(
+  const handlePromptKeyDown = useCallback28(
     (e) => {
       if (e.key === "ArrowDown") {
         setPromptFocusedIndex((prev) => {
@@ -19838,7 +19971,7 @@ function ChatTab({
       clearPromptsUIState
     ]
   );
-  const handleKeyDown = useCallback26(
+  const handleKeyDown = useCallback28(
     (e) => {
       if (PROMPT_ARROW_KEYS.includes(e.key) && promptsDropdownOpen) {
         e.preventDefault();
@@ -19850,7 +19983,7 @@ function ChatTab({
     },
     [handleSendMessage, handlePromptKeyDown, promptsDropdownOpen]
   );
-  const handleKeyUp = useCallback26(
+  const handleKeyUp = useCallback28(
     (e) => {
       if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
         updatePromptsDropdownState();
@@ -19858,7 +19991,7 @@ function ChatTab({
     },
     [updatePromptsDropdownState]
   );
-  const formatMessagesAsMarkdown = useCallback26(
+  const formatMessagesAsMarkdown = useCallback28(
     (messages2) => {
       let content = `# Chat Export - ${(/* @__PURE__ */ new Date()).toLocaleString()}
 
@@ -19898,14 +20031,14 @@ ${sections.join("\n\n")}`;
     },
     [serializeMessageContent, serializeToolResult]
   );
-  const handleCopyChat = useCallback26(() => {
+  const handleCopyChat = useCallback28(() => {
     const formattedMessages = formatMessagesAsMarkdown(messages);
     copyToClipboard(formattedMessages).then(
       () => toast7.success("Chat copied to clipboard"),
       () => toast7.error("Failed to copy chat")
     );
   }, [messages, formatMessagesAsMarkdown]);
-  const handleExportChat = useCallback26(
+  const handleExportChat = useCallback28(
     (format) => {
       const dateStr = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
       const filename = `chat-export-${dateStr}`;
@@ -19938,11 +20071,11 @@ ${sections.join("\n\n")}`;
     },
     [messages, formatMessagesAsMarkdown, serializeMessageContent]
   );
-  const handleClearConfig = useCallback26(() => {
+  const handleClearConfig = useCallback28(() => {
     clearConfig();
     clearMessages();
   }, [clearConfig, clearMessages]);
-  const handleQuickQuestionSelect = useCallback26(
+  const handleQuickQuestionSelect = useCallback28(
     (question) => {
       if (!question.trim()) return;
       if (!llmConfig || !isConnected) return;
@@ -19955,7 +20088,7 @@ ${sections.join("\n\n")}`;
     },
     [postBridgeEvent, sendMessage, llmConfig, isConnected]
   );
-  const handleFollowupSelect = useCallback26(
+  const handleFollowupSelect = useCallback28(
     (followup) => {
       if (!followup.trim()) return;
       if (!llmConfig || !isConnected) return;