@mcp-use/inspector 0.22.0 → 0.22.1

package/dist/client/index.js

@@ -6280,7 +6280,7 @@ var init_module = __esm({
   }
 });
 
-// ../mcp-use/dist/chunk-3VNNDRKM.js
+// ../mcp-use/dist/chunk-WPWBXE56.js
 import { RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps";
 function getPackageVersion2() {
   return VERSION;
@@ -6443,12 +6443,12 @@ function setTelemetrySource(source) {
   Tel.getInstance().setSource(source);
 }
 var VERSION, _a6, BaseTelemetryEvent, _a7, MCPAgentExecutionEvent, _a8, ServerRunEvent, _a9, ServerInitializeEvent, _a10, ServerToolCallEvent, _a11, ServerResourceCallEvent, _a12, ServerPromptCallEvent, _a13, ServerContextEvent, _a14, MCPClientInitEvent, _a15, ConnectorInitEvent, _a16, ClientAddServerEvent, _a17, ClientRemoveServerEvent, USER_ID_STORAGE_KEY, cachedEnvironment, _a18, Telemetry2, Tel;
-var init_chunk_3VNNDRKM = __esm({
-  "../mcp-use/dist/chunk-3VNNDRKM.js"() {
+var init_chunk_WPWBXE56 = __esm({
+  "../mcp-use/dist/chunk-WPWBXE56.js"() {
     "use strict";
     init_chunk_QWQYAQCK();
     init_chunk_3GQAWCBQ();
-    VERSION = "1.20.0";
+    VERSION = "1.20.1";
     __name(getPackageVersion2, "getPackageVersion");
     BaseTelemetryEvent = (_a6 = class {
     }, __name(_a6, "BaseTelemetryEvent"), _a6);
@@ -12528,17 +12528,17 @@ var init_langfuse_U2OEF7K7 = __esm({
   }
 });
 
-// ../mcp-use/dist/chunk-URPFYEAI.js
+// ../mcp-use/dist/chunk-PFGLTHGD.js
 import {
   CreateMessageRequestSchema,
   ElicitRequestSchema,
   ListRootsRequestSchema
 } from "@modelcontextprotocol/sdk/types.js";
 var _a19, BaseConnector;
-var init_chunk_URPFYEAI = __esm({
-  "../mcp-use/dist/chunk-URPFYEAI.js"() {
+var init_chunk_PFGLTHGD = __esm({
+  "../mcp-use/dist/chunk-PFGLTHGD.js"() {
     "use strict";
-    init_chunk_3VNNDRKM();
+    init_chunk_WPWBXE56();
     init_chunk_QWQYAQCK();
     init_chunk_3GQAWCBQ();
     BaseConnector = (_a19 = class {
@@ -13048,12 +13048,12 @@ var init_chunk_URPFYEAI = __esm({
   }
 });
 
-// ../mcp-use/dist/chunk-R4LATHT3.js
+// ../mcp-use/dist/chunk-JEVNTJLN.js
 var _a20, CodeModeConnector;
-var init_chunk_R4LATHT3 = __esm({
-  "../mcp-use/dist/chunk-R4LATHT3.js"() {
+var init_chunk_JEVNTJLN = __esm({
+  "../mcp-use/dist/chunk-JEVNTJLN.js"() {
     "use strict";
-    init_chunk_URPFYEAI();
+    init_chunk_PFGLTHGD();
     init_chunk_3GQAWCBQ();
     CodeModeConnector = (_a20 = class extends BaseConnector {
       constructor(client) {
@@ -13281,7 +13281,7 @@ var init_chunk_GKPKUKD6 = __esm({
   }
 });
 
-// ../mcp-use/dist/chunk-FKDBKJUW.js
+// ../mcp-use/dist/chunk-DGKH46XW.js
 import {
   Client
 } from "@modelcontextprotocol/sdk/client/index.js";
@@ -13351,12 +13351,12 @@ function createConnectorFromConfig(serverConfig, connectorOptions) {
   throw new Error("Cannot determine connector type from config");
 }
 var _a22, MCPSession, _a23, BaseMCPClient, _a24, SseConnectionManager, _a25, HttpConnector;
-var init_chunk_FKDBKJUW = __esm({
-  "../mcp-use/dist/chunk-FKDBKJUW.js"() {
+var init_chunk_DGKH46XW = __esm({
+  "../mcp-use/dist/chunk-DGKH46XW.js"() {
     "use strict";
     init_chunk_GKPKUKD6();
-    init_chunk_URPFYEAI();
-    init_chunk_3VNNDRKM();
+    init_chunk_PFGLTHGD();
+    init_chunk_WPWBXE56();
     init_chunk_QWQYAQCK();
     init_chunk_3GQAWCBQ();
     MCPSession = (_a22 = class {
@@ -34149,16 +34149,16 @@ var init_dist3 = __esm({
   }
 });
 
-// ../mcp-use/dist/chunk-4PGBSB2M.js
+// ../mcp-use/dist/chunk-7FCA6TQV.js
 import { Client as Client2 } from "@modelcontextprotocol/sdk/client/index.js";
 import process22 from "process";
 import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
 var _a28, StdioConnectionManager, _a29, StdioConnector;
-var init_chunk_4PGBSB2M = __esm({
-  "../mcp-use/dist/chunk-4PGBSB2M.js"() {
+var init_chunk_7FCA6TQV = __esm({
+  "../mcp-use/dist/chunk-7FCA6TQV.js"() {
     "use strict";
     init_chunk_GKPKUKD6();
-    init_chunk_URPFYEAI();
+    init_chunk_PFGLTHGD();
     init_chunk_QWQYAQCK();
     init_chunk_3GQAWCBQ();
     StdioConnectionManager = (_a28 = class extends ConnectionManager {
@@ -34301,24 +34301,24 @@ var init_chunk_4PGBSB2M = __esm({
   }
 });
 
-// ../mcp-use/dist/stdio-MPKB6J4F.js
-var stdio_MPKB6J4F_exports = {};
-__export(stdio_MPKB6J4F_exports, {
+// ../mcp-use/dist/stdio-ZJFIZK2F.js
+var stdio_ZJFIZK2F_exports = {};
+__export(stdio_ZJFIZK2F_exports, {
   StdioConnector: () => StdioConnector
 });
-var init_stdio_MPKB6J4F = __esm({
-  "../mcp-use/dist/stdio-MPKB6J4F.js"() {
+var init_stdio_ZJFIZK2F = __esm({
+  "../mcp-use/dist/stdio-ZJFIZK2F.js"() {
     "use strict";
-    init_chunk_4PGBSB2M();
+    init_chunk_7FCA6TQV();
     init_chunk_GKPKUKD6();
-    init_chunk_URPFYEAI();
-    init_chunk_3VNNDRKM();
+    init_chunk_PFGLTHGD();
+    init_chunk_WPWBXE56();
     init_chunk_QWQYAQCK();
     init_chunk_3GQAWCBQ();
   }
 });
 
-// ../mcp-use/dist/chunk-BNBHBTYJ.js
+// ../mcp-use/dist/chunk-X7GVPLW2.js
 function getVMModuleName() {
   return ["node", "vm"].join(":");
 }
@@ -34424,13 +34424,13 @@ function validate(params, content) {
   }
 }
 var _a30, BaseCodeExecutor, _a31, E2BCodeExecutor, vm, vmCheckAttempted, _a32, VMCodeExecutor, _a33, MCPClient;
-var init_chunk_BNBHBTYJ = __esm({
-  "../mcp-use/dist/chunk-BNBHBTYJ.js"() {
+var init_chunk_X7GVPLW2 = __esm({
+  "../mcp-use/dist/chunk-X7GVPLW2.js"() {
     "use strict";
-    init_chunk_R4LATHT3();
+    init_chunk_JEVNTJLN();
     init_chunk_RPN2XO5I();
-    init_chunk_FKDBKJUW();
-    init_chunk_3VNNDRKM();
+    init_chunk_DGKH46XW();
+    init_chunk_WPWBXE56();
     init_chunk_QWQYAQCK();
     init_chunk_3GQAWCBQ();
     init_fs();
@@ -35281,7 +35281,7 @@ ${shim}
           clientInfo: serverConfig.clientInfo ?? this.config.clientInfo
         };
         if ("command" in merged && "args" in merged) {
-          const { StdioConnector: StdioConnector2 } = await Promise.resolve().then(() => (init_stdio_MPKB6J4F(), stdio_MPKB6J4F_exports));
+          const { StdioConnector: StdioConnector2 } = await Promise.resolve().then(() => (init_stdio_ZJFIZK2F(), stdio_ZJFIZK2F_exports));
           const stdioConfig = merged;
           return new StdioConnector2({
             command: stdioConfig.command,
@@ -35533,13 +35533,13 @@ __export(client_exports, {
 var init_client = __esm({
   "../mcp-use/dist/src/client.js"() {
     "use strict";
-    init_chunk_BNBHBTYJ();
-    init_chunk_R4LATHT3();
+    init_chunk_X7GVPLW2();
+    init_chunk_JEVNTJLN();
     init_chunk_RPN2XO5I();
-    init_chunk_FKDBKJUW();
+    init_chunk_DGKH46XW();
     init_chunk_GKPKUKD6();
-    init_chunk_URPFYEAI();
-    init_chunk_3VNNDRKM();
+    init_chunk_PFGLTHGD();
+    init_chunk_WPWBXE56();
     init_chunk_QWQYAQCK();
     init_chunk_3GQAWCBQ();
   }
@@ -80133,7 +80133,7 @@ var init_display_A5IEINAP = __esm({
   }
 });
 
-// ../mcp-use/dist/chunk-B3BZDYWJ.js
+// ../mcp-use/dist/chunk-WNXYB26L.js
 import { z as z4 } from "zod";
 import { StructuredTool } from "@langchain/core/tools";
 import { StructuredTool as StructuredTool2 } from "@langchain/core/tools";
@@ -80365,11 +80365,11 @@ function normalizeRunOptions(queryOrOptions, maxSteps, manageConnector, external
   };
 }
 var _a34, MCPServerTool, PresentActiveServerSchema, _a35, AcquireActiveMCPServerTool, _a36, AddMCPServerFromConfigTool, ConnectMCPServerSchema, _a37, ConnectMCPServerTool, EnumerateServersSchema, _a38, ListMCPServersTool, ReleaseConnectionSchema, _a39, ReleaseMCPServerConnectionTool, _a40, ServerManager, _a41, ObservabilityManager, API_CHATS_ENDPOINT, API_CHAT_EXECUTE_ENDPOINT, _a42, RemoteAgent, PROVIDER_CONFIG, DEFAULT_SYSTEM_PROMPT_TEMPLATE, SERVER_MANAGER_SYSTEM_PROMPT_TEMPLATE, _a43, MCPAgent;
-var init_chunk_B3BZDYWJ = __esm({
-  "../mcp-use/dist/chunk-B3BZDYWJ.js"() {
+var init_chunk_WNXYB26L = __esm({
+  "../mcp-use/dist/chunk-WNXYB26L.js"() {
     "use strict";
     init_chunk_3RU35UU4();
-    init_chunk_3VNNDRKM();
+    init_chunk_WPWBXE56();
     init_chunk_QWQYAQCK();
     init_chunk_3GQAWCBQ();
     MCPServerTool = (_a34 = class extends StructuredTool {
@@ -82718,13 +82718,13 @@ ${formatPrompt}`
   }
 });
 
-// ../mcp-use/dist/chunk-52HZERUL.js
+// ../mcp-use/dist/chunk-QIRMWWEB.js
 var _a44, BrowserMCPClient;
-var init_chunk_52HZERUL = __esm({
-  "../mcp-use/dist/chunk-52HZERUL.js"() {
+var init_chunk_QIRMWWEB = __esm({
+  "../mcp-use/dist/chunk-QIRMWWEB.js"() {
     "use strict";
-    init_chunk_FKDBKJUW();
-    init_chunk_3VNNDRKM();
+    init_chunk_DGKH46XW();
+    init_chunk_WPWBXE56();
     init_chunk_QWQYAQCK();
     init_chunk_3GQAWCBQ();
     BrowserMCPClient = (_a44 = class extends BaseMCPClient {
@@ -83629,15 +83629,15 @@ var init_browser = __esm({
   "../mcp-use/dist/src/browser.js"() {
     "use strict";
     init_chunk_LGDFGYRL();
-    init_chunk_B3BZDYWJ();
+    init_chunk_WNXYB26L();
     init_chunk_UJPHRNQP();
     init_chunk_3RU35UU4();
     init_chunk_RPN2XO5I();
-    init_chunk_52HZERUL();
-    init_chunk_FKDBKJUW();
+    init_chunk_QIRMWWEB();
+    init_chunk_DGKH46XW();
     init_chunk_GKPKUKD6();
-    init_chunk_URPFYEAI();
-    init_chunk_3VNNDRKM();
+    init_chunk_PFGLTHGD();
+    init_chunk_WPWBXE56();
     init_chunk_QWQYAQCK();
     init_chunk_6KHHFWTB();
     init_chunk_3GQAWCBQ();
@@ -85201,11 +85201,19 @@ function ToolInputForm({
 }
 
 // src/client/components/tools/ToolResultDisplay.tsx
-import { Check as Check2, Copy as Copy4, History, Maximize, Minimize, Zap } from "lucide-react";
-import React6, {
+import {
+  Check as Check2,
+  Copy as Copy4,
+  History,
+  Maximize,
+  Minimize,
+  Play,
+  Zap
+} from "lucide-react";
+import React7, {
   useCallback as useCallback11,
   useEffect as useEffect10,
-  useMemo as useMemo8,
+  useMemo as useMemo9,
   useRef as useRef8,
   useState as useState12
 } from "react";
@@ -87785,8 +87793,8 @@ function MCPAppsDebugControls({
   const cspViolations = widget?.cspViolations ?? [];
   const declaredCsp = widget?.declaredCsp;
   const effectivePolicy = widget?.effectivePolicy;
-  const suggestedFix = playground.cspMode === "widget-declared" && cspViolations.length > 0 ? computeSuggestedFix(cspViolations, declaredCsp) : null;
-  const agentPrompt = cspViolations.length > -1 ? buildAgentCspPrompt(
+  const suggestedFix = cspViolations.length > 0 ? computeSuggestedFix(cspViolations, declaredCsp) : null;
+  const agentPrompt = cspViolations.length > 0 ? buildAgentCspPrompt(
     declaredCsp,
     effectivePolicy,
     cspViolations,
@@ -88097,7 +88105,13 @@ function MCPAppsDebugControls({
             className: "relative h-8 w-8 p-0 bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm shadow-sm hover:bg-white dark:hover:bg-zinc-900",
             children: [
               playground.cspMode === "permissive" ? /* @__PURE__ */ jsx24(ShieldOff, { className: "size-3.5" }) : /* @__PURE__ */ jsx24(ShieldCheck, { className: "size-3.5" }),
-              cspViolations.length > 0 && /* @__PURE__ */ jsx24("span", { className: "absolute -top-1.5 -right-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-0.5 text-[9px] font-bold text-white leading-none", children: cspViolations.length > 99 ? "99+" : cspViolations.length })
+              cspViolations.length > 0 && /* @__PURE__ */ jsx24(
+                "span",
+                {
+                  className: `absolute -top-1.5 -right-1.5 flex h-4 min-w-4 items-center justify-center rounded-full px-0.5 text-[9px] font-bold text-white leading-none ${playground.cspMode === "permissive" ? "bg-yellow-500" : "bg-red-500"}`,
+                  children: cspViolations.length > 99 ? "99+" : cspViolations.length
+                }
+              )
             ]
           }
         ) }) }),
@@ -88105,7 +88119,7 @@ function MCPAppsDebugControls({
           "CSP:",
           " ",
           playground.cspMode === "permissive" ? "Permissive" : "Declared",
-          cspViolations.length > 0 && ` \xB7 ${cspViolations.length} blocked`
+          cspViolations.length > 0 && ` \xB7 ${cspViolations.length} ${playground.cspMode === "permissive" ? "would be blocked" : "blocked"}`
         ] })
       ] }),
       /* @__PURE__ */ jsxs13(
@@ -88264,11 +88278,20 @@ function MCPAppsDebugControls({
             ] }),
             cspViolations.length > 0 && /* @__PURE__ */ jsxs13("div", { className: "mt-3 space-y-2", children: [
               /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxs13("span", { className: "text-xs font-semibold text-red-600 dark:text-red-400 uppercase tracking-wide", children: [
-                  cspViolations.length,
-                  " blocked request",
-                  cspViolations.length !== 1 ? "s" : ""
-                ] }),
+                /* @__PURE__ */ jsxs13(
+                  "span",
+                  {
+                    className: `text-xs font-semibold uppercase tracking-wide ${playground.cspMode === "permissive" ? "text-yellow-600 dark:text-yellow-400" : "text-red-600 dark:text-red-400"}`,
+                    children: [
+                      cspViolations.length,
+                      " ",
+                      playground.cspMode === "permissive" ? "would-be-blocked" : "blocked",
+                      " ",
+                      "request",
+                      cspViolations.length !== 1 ? "s" : ""
+                    ]
+                  }
+                ),
                 /* @__PURE__ */ jsx24(
                   "button",
                   {
@@ -88560,7 +88583,7 @@ import {
   memo,
   useCallback as useCallback9,
   useEffect as useEffect8,
-  useMemo as useMemo7,
+  useMemo as useMemo8,
   useRef as useRef6,
   useState as useState10
 } from "react";
@@ -88951,8 +88974,51 @@ function WidgetWrapper({
   );
 }
 
+// src/client/components/ui/text-shimmer.tsx
+import { motion } from "motion/react";
+import { useMemo as useMemo7 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+function TextShimmer({
+  children,
+  as: Component = "p",
+  className,
+  duration = 2,
+  spread = 2
+}) {
+  const MotionComponent = motion.create(
+    Component
+  );
+  const dynamicSpread = useMemo7(() => {
+    return children.length * spread;
+  }, [children, spread]);
+  return /* @__PURE__ */ jsx29(
+    MotionComponent,
+    {
+      className: cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text",
+        "text-transparent [--base-color:#a1a1aa] [--base-gradient-color:#000]",
+        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+        "dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff] dark:[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]",
+        className
+      ),
+      initial: { backgroundPosition: "100% center" },
+      animate: { backgroundPosition: "0% center" },
+      transition: {
+        repeat: Infinity,
+        duration,
+        ease: "linear"
+      },
+      style: {
+        "--spread": `${dynamicSpread}px`,
+        backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`
+      },
+      children
+    }
+  );
+}
+
 // src/client/components/MCPAppsRenderer.tsx
-import { jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
 function buildCSPString(csp) {
   const sanitize = (d2) => d2.replace(/['"<>;]/g, "").trim();
   const connectDomains = (csp.connectDomains || []).map(sanitize).filter(Boolean);
@@ -88983,6 +89049,8 @@ function MCPAppsRendererBase({
   toolInput,
   toolOutput,
   toolMetadata,
+  invoking,
+  invoked,
   partialToolInput,
   resourceUri,
   readResource,
@@ -89049,7 +89117,7 @@ function MCPAppsRendererBase({
   const customViewport = playground.customViewport;
   const { maxWidth, maxHeight } = useDeviceViewport(deviceType, customViewport);
   const inlineMaxWidth = deviceType === "mobile" ? maxWidth : 768;
-  const tool = useMemo7(() => {
+  const tool = useMemo8(() => {
     if (!server?.tools) return void 0;
     return server.tools.find((t2) => t2.name === toolName);
   }, [server, toolName]);
@@ -89658,13 +89726,13 @@ function MCPAppsRendererBase({
     return () => clearTimeout(timer);
   }, [iframeEffectivelyReady, showSpinner]);
   if (loadError) {
-    return /* @__PURE__ */ jsx29(WidgetWrapper, { className, noWrapper, children: /* @__PURE__ */ jsx29("div", { className: "border border-red-200/50 dark:border-red-800/50 bg-red-50/30 dark:bg-red-950/20 rounded-lg p-4", children: /* @__PURE__ */ jsxs15("p", { className: "text-sm text-red-600 dark:text-red-400", children: [
+    return /* @__PURE__ */ jsx30(WidgetWrapper, { className, noWrapper, children: /* @__PURE__ */ jsx30("div", { className: "border border-red-200/50 dark:border-red-800/50 bg-red-50/30 dark:bg-red-950/20 rounded-lg p-4", children: /* @__PURE__ */ jsxs15("p", { className: "text-sm text-red-600 dark:text-red-400", children: [
       "Failed to load MCP App: ",
       loadError
     ] }) }) });
   }
   if (!widgetHtml) {
-    return /* @__PURE__ */ jsx29(WidgetWrapper, { className, noWrapper, children: /* @__PURE__ */ jsx29("div", { className: "flex absolute left-0 top-0 items-center justify-center w-full h-full", children: /* @__PURE__ */ jsx29(Spinner, { className: "size-5" }) }) });
+    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";
@@ -89687,14 +89755,14 @@ function MCPAppsRendererBase({
     maxWidth: displayMode === "inline" ? `${inlineMaxWidth}px` : "100%",
     transition: isFullscreen || isPip ? void 0 : "height 300ms ease-out, width 300ms ease-out"
   };
-  return /* @__PURE__ */ jsx29(WidgetWrapper, { className, noWrapper, children: /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx30(WidgetWrapper, { className, noWrapper, children: /* @__PURE__ */ jsxs15(
     "div",
     {
       ref: containerRef,
       className: containerClassName,
       style: isPip ? { maxWidth: MCP_APPS_CONFIG.DIMENSIONS.PIP_MAX_WIDTH } : void 0,
       children: [
-        isFullscreen && /* @__PURE__ */ jsx29(
+        isFullscreen && /* @__PURE__ */ jsx30(
           FullscreenNavbar,
           {
             title: toolName,
@@ -89702,7 +89770,7 @@ function MCPAppsRendererBase({
             testId: "debugger-exit-fullscreen-button"
           }
         ),
-        isPip && /* @__PURE__ */ jsx29(
+        isPip && /* @__PURE__ */ jsx30(
           "button",
           {
             "data-testid": "debugger-exit-pip-button",
@@ -89710,7 +89778,7 @@ function MCPAppsRendererBase({
             className: "absolute left-2 top-2 z-30 flex h-6 w-6 items-center justify-center rounded-md bg-background/80 hover:bg-background border border-zinc-200 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors cursor-pointer",
             "aria-label": "Close PiP mode",
             title: "Close PiP mode",
-            children: /* @__PURE__ */ jsx29(X3, { className: "w-4 h-4" })
+            children: /* @__PURE__ */ jsx30(X3, { className: "w-4 h-4" })
           }
         ),
         /* @__PURE__ */ jsxs15(
@@ -89721,28 +89789,42 @@ function MCPAppsRendererBase({
               isFullscreen && "pt-14"
             ),
             children: [
-              showSpinner && /* @__PURE__ */ jsx29("div", { className: "flex absolute left-0 top-0 items-center justify-center w-full h-full z-10", children: /* @__PURE__ */ jsx29(Spinner, { className: "size-5" }) }),
-              /* @__PURE__ */ jsx29(
-                SandboxedIframe,
+              showSpinner && /* @__PURE__ */ jsx30("div", { className: "flex absolute left-0 top-0 items-center justify-center w-full h-full z-10", children: /* @__PURE__ */ jsx30(Spinner, { className: "size-5" }) }),
+              /* @__PURE__ */ jsxs15(
+                "div",
                 {
-                  ref: sandboxRef,
-                  html: widgetHtml,
-                  sandbox: IFRAME_SANDBOX_PERMISSIONS,
-                  csp: widgetCsp,
-                  permissions: widgetPermissions,
-                  permissive: cspMode === "permissive",
-                  onLoad: () => setIsReady(true),
-                  onMessage: handleSandboxMessage,
-                  title: `MCP App: ${toolName}`,
-                  className: cn(
-                    displayMode === "inline" && "w-full",
-                    displayMode === "fullscreen" && "w-full h-full rounded-none",
-                    displayMode === "pip" && "w-full h-full",
-                    displayMode !== "fullscreen" && prefersBorder && "rounded-lg",
-                    "overflow-hidden relative z-20",
-                    prefersBorder && "border border-zinc-200 dark:border-zinc-700"
-                  ),
-                  style: iframeStyle
+                  className: "relative w-full",
+                  style: { 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 }),
+                      invoked && !!toolOutput && /* @__PURE__ */ jsx30("span", { className: "text-xs text-muted-foreground", children: invoked })
+                    ] }) }),
+                    /* @__PURE__ */ jsx30(
+                      SandboxedIframe,
+                      {
+                        ref: sandboxRef,
+                        html: widgetHtml,
+                        sandbox: IFRAME_SANDBOX_PERMISSIONS,
+                        csp: widgetCsp,
+                        permissions: widgetPermissions,
+                        permissive: cspMode === "permissive",
+                        onLoad: () => setIsReady(true),
+                        onMessage: handleSandboxMessage,
+                        title: `MCP App: ${toolName}`,
+                        className: cn(
+                          displayMode === "inline" && "w-full",
+                          displayMode === "fullscreen" && "w-full h-full rounded-none",
+                          displayMode === "pip" && "w-full h-full",
+                          displayMode !== "fullscreen" && prefersBorder && "rounded-lg",
+                          "overflow-hidden relative z-20",
+                          prefersBorder && "border border-zinc-200 dark:border-zinc-700"
+                        ),
+                        style: iframeStyle
+                      }
+                    ),
+                    " "
+                  ]
                 }
               )
             ]
@@ -89776,6 +89858,8 @@ function mcpAppsRendererAreEqual(prev, next) {
   if (prev.onDisplayModeChange !== next.onDisplayModeChange) return false;
   if (prev.className !== next.className) return false;
   if (prev.serverBaseUrl !== next.serverBaseUrl) return false;
+  if (prev.invoking !== next.invoking) return false;
+  if (prev.invoked !== next.invoked) return false;
   return true;
 }
 var MCPAppsRenderer = memo(
@@ -89792,7 +89876,7 @@ import {
   remoteTextDefinition,
   UIResourceRenderer
 } from "@mcp-ui/client";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function isMcpUIResource(resource) {
   if (!resource?.mimeType) return false;
   const mimeType = resource.mimeType.toLowerCase();
@@ -89822,7 +89906,7 @@ function McpUIRenderer({
     // Add custom props as data attributes or in a way the UIResourceRenderer can access
     customProps
   } : uiResource;
-  return /* @__PURE__ */ jsx30("div", { className, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31("div", { className, children: /* @__PURE__ */ jsx31(
     UIResourceRenderer,
     {
       resource: resourceWithProps,
@@ -90035,7 +90119,7 @@ function injectConsoleInterceptor(iframe) {
 }
 
 // src/client/components/OpenAIComponentRenderer.tsx
-import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
 function Wrapper({
   children,
   className,
@@ -90044,7 +90128,7 @@ function Wrapper({
   if (noWrapper) {
     return children;
   }
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       className: cn(
@@ -90067,6 +90151,8 @@ function OpenAIComponentRendererBase({
   showConsole = true,
   customProps,
   serverBaseUrl: serverBaseUrlProp,
+  invoking,
+  invoked,
   onUpdateGlobals
 }) {
   const iframeRef = useRef7(null);
@@ -90751,17 +90837,21 @@ function OpenAIComponentRendererBase({
     }
   }, [resolvedTheme, widgetUrl, isReady, updateIframeGlobals]);
   if (error) {
-    return /* @__PURE__ */ jsx31("div", { className, children: /* @__PURE__ */ jsx31("div", { className: "bg-red-50/30 dark:bg-red-950/20 border border-red-200/50 dark:border-red-800/50 rounded-lg p-4", children: /* @__PURE__ */ jsxs16("p", { className: "text-sm text-red-600 dark:text-red-400", children: [
+    return /* @__PURE__ */ jsx32("div", { className, children: /* @__PURE__ */ jsx32("div", { className: "bg-red-50/30 dark:bg-red-950/20 border border-red-200/50 dark:border-red-800/50 rounded-lg p-4", children: /* @__PURE__ */ jsxs16("p", { className: "text-sm text-red-600 dark:text-red-400", children: [
       "Failed to load component: ",
       error
     ] }) }) });
   }
   if (!widgetUrl) {
-    return /* @__PURE__ */ jsx31(Wrapper, { className, noWrapper, children: /* @__PURE__ */ jsx31("div", { className: "flex absolute left-0 top-0 items-center justify-center w-full h-full", children: /* @__PURE__ */ jsx31(Spinner, { className: "size-5" }) }) });
+    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" }) }) });
   }
   return /* @__PURE__ */ jsxs16(Wrapper, { className, noWrapper, children: [
-    showSkeleton && /* @__PURE__ */ jsx31("div", { className: "flex absolute left-0 top-0 items-center justify-center w-full h-full z-0", children: /* @__PURE__ */ jsx31(Spinner, { className: "size-5" }) }),
-    showConsole && isSameOrigin && displayMode !== "fullscreen" && displayMode !== "pip" && /* @__PURE__ */ jsx31("div", { className: "absolute top-2 right-2 z-30 flex items-center gap-2", children: /* @__PURE__ */ jsx31(
+    displayMode === "inline" && (invoking || invoked) && /* @__PURE__ */ jsxs16("div", { className: "mb-1 px-1", children: [
+      invoking && !toolResult && /* @__PURE__ */ jsx32(TextShimmer, { className: "text-xs", children: invoking }),
+      invoked && toolResult && /* @__PURE__ */ jsx32("span", { className: "text-xs text-muted-foreground", children: invoked })
+    ] }),
+    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(
       MCPAppsDebugControls,
       {
         displayMode,
@@ -90792,14 +90882,14 @@ function OpenAIComponentRendererBase({
         onMouseEnter: () => displayMode === "pip" && setIsPipHovered(true),
         onMouseLeave: () => displayMode === "pip" && setIsPipHovered(false),
         children: [
-          displayMode === "fullscreen" && document.fullscreenElement && /* @__PURE__ */ jsx31(
+          displayMode === "fullscreen" && document.fullscreenElement && /* @__PURE__ */ jsx32(
             FullscreenNavbar,
             {
               title: toolName,
               onClose: () => handleDisplayModeChange("inline")
             }
           ),
-          displayMode === "pip" && /* @__PURE__ */ jsx31(
+          displayMode === "pip" && /* @__PURE__ */ jsx32(
             "button",
             {
               onClick: () => handleDisplayModeChange("inline"),
@@ -90815,10 +90905,10 @@ function OpenAIComponentRendererBase({
                 isPipHovered ? "opacity-100" : "opacity-0"
               ),
               "aria-label": "Exit Picture in Picture",
-              children: /* @__PURE__ */ jsx31(X4, { className: "w-4 h-4 text-foreground" })
+              children: /* @__PURE__ */ jsx32(X4, { className: "w-4 h-4 text-foreground" })
             }
           ),
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx32(
             "div",
             {
               className: cn(
@@ -90826,7 +90916,7 @@ function OpenAIComponentRendererBase({
                 displayMode === "fullscreen" && "pt-14",
                 centerVertically && "items-center"
               ),
-              children: /* @__PURE__ */ jsx31(
+              children: /* @__PURE__ */ jsx32(
                 "iframe",
                 {
                   ref: iframeRef,
@@ -90868,6 +90958,8 @@ function openAIComponentRendererAreEqual(prev, next) {
       return false;
     }
   }
+  if (prev.invoking !== next.invoking) return false;
+  if (prev.invoked !== next.invoked) return false;
   return true;
 }
 var OpenAIComponentRenderer = memo2(
@@ -90876,14 +90968,14 @@ var OpenAIComponentRenderer = memo2(
 );
 
 // src/client/components/ui/not-found.tsx
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
 function NotFound({
   message,
   className = "",
   vertical,
   noBorder
 }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       className: cn(`mt-2  rounded-md p-6 ${className}`, !noBorder && "border"),
@@ -90895,7 +90987,7 @@ function NotFound({
             vertical && "flex-col"
           ),
           children: [
-            /* @__PURE__ */ jsx32(
+            /* @__PURE__ */ jsx33(
               "svg",
               {
                 width: "40",
@@ -90904,7 +90996,7 @@ function NotFound({
                 version: "1.1",
                 xmlns: "http://www.w3.org/2000/svg",
                 className: "flex-shrink-0",
-                children: /* @__PURE__ */ jsx32("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs17(
+                children: /* @__PURE__ */ jsx33("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs17(
                   "g",
                   {
                     transform: "translate(5.320900, 5.320900)",
@@ -90912,9 +91004,9 @@ function NotFound({
                     className: "stroke-black dark:stroke-white",
                     strokeWidth: "4",
                     children: [
-                      /* @__PURE__ */ jsx32("path", { d: "M49.953025,-2.10854389 C63.26892,-2.21867124 76.6185256,2.70621155 86.9019463,12.6653164 L86.9019463,12.6653164 L87.505627,13.2592944 C97.5154947,23.2654892 102.640454,36.3074513 102.880738,49.4222247 C103.08932,77.4533067 113.877287,105.391753 135.242867,126.757333 C156.613383,148.127849 184.559216,158.914875 212.568138,159.119313 L212.568138,159.119313 L213.212264,159.134159 C225.843948,159.517566 238.363557,164.434972 248.121998,173.886137 L248.121998,173.886137 L248.725621,174.480088 C258.982114,184.732164 264.11035,198.171134 264.11035,211.6101 C264.11035,225.04592 258.984514,238.481745 248.732867,248.732867 C238.592792,258.872942 225.336706,263.997882 212.046872,264.107794 C198.731075,264.21792 185.381569,259.293085 175.098248,249.334078 L175.098248,249.334078 L174.494602,248.740134 C163.75802,238.008189 158.640853,223.784027 159.143413,209.719372 C158.258245,182.640933 147.489786,155.83332 126.828333,135.171867 C106.351297,114.694831 79.8363505,103.934873 53.0237258,102.891841 L53.0237258,102.891841 L52.2811438,102.865674 C38.4791718,103.347421 24.5325234,98.4328111 13.8776628,88.1140866 L13.8776628,88.1140866 L13.2739843,87.5201168 C3.12895117,77.3789607 -1.9984796,64.1195994 -2.10841888,50.8264755 C-2.21854669,37.5105567 2.70635908,24.1609269 12.6655135,13.8774565 L12.6655135,13.8774565 L13.2594878,13.2737797 C23.4005926,3.12880025 36.659927,-1.99860507 49.953025,-2.10854389 Z" }),
-                      /* @__PURE__ */ jsx32("circle", { cx: "50", cy: "212.0001", r: "52.5" }),
-                      /* @__PURE__ */ jsx32("circle", { cx: "212.0001", cy: "50", r: "52.5" })
+                      /* @__PURE__ */ jsx33("path", { d: "M49.953025,-2.10854389 C63.26892,-2.21867124 76.6185256,2.70621155 86.9019463,12.6653164 L86.9019463,12.6653164 L87.505627,13.2592944 C97.5154947,23.2654892 102.640454,36.3074513 102.880738,49.4222247 C103.08932,77.4533067 113.877287,105.391753 135.242867,126.757333 C156.613383,148.127849 184.559216,158.914875 212.568138,159.119313 L212.568138,159.119313 L213.212264,159.134159 C225.843948,159.517566 238.363557,164.434972 248.121998,173.886137 L248.121998,173.886137 L248.725621,174.480088 C258.982114,184.732164 264.11035,198.171134 264.11035,211.6101 C264.11035,225.04592 258.984514,238.481745 248.732867,248.732867 C238.592792,258.872942 225.336706,263.997882 212.046872,264.107794 C198.731075,264.21792 185.381569,259.293085 175.098248,249.334078 L175.098248,249.334078 L174.494602,248.740134 C163.75802,238.008189 158.640853,223.784027 159.143413,209.719372 C158.258245,182.640933 147.489786,155.83332 126.828333,135.171867 C106.351297,114.694831 79.8363505,103.934873 53.0237258,102.891841 L53.0237258,102.891841 L52.2811438,102.865674 C38.4791718,103.347421 24.5325234,98.4328111 13.8776628,88.1140866 L13.8776628,88.1140866 L13.2739843,87.5201168 C3.12895117,77.3789607 -1.9984796,64.1195994 -2.10841888,50.8264755 C-2.21854669,37.5105567 2.70635908,24.1609269 12.6655135,13.8774565 L12.6655135,13.8774565 L13.2594878,13.2737797 C23.4005926,3.12880025 36.659927,-1.99860507 49.953025,-2.10854389 Z" }),
+                      /* @__PURE__ */ jsx33("circle", { cx: "50", cy: "212.0001", r: "52.5" }),
+                      /* @__PURE__ */ jsx33("circle", { cx: "212.0001", cy: "50", r: "52.5" })
                     ]
                   }
                 ) })
@@ -90929,7 +91021,7 @@ function NotFound({
 }
 
 // src/client/components/tools/ToolResultDisplay.tsx
-import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 function RelativeTimeDisplay({ timestamp }) {
   const [label, setLabel] = useState12(() => getRelativeTime(timestamp));
   useEffect10(() => {
@@ -90938,7 +91030,7 @@ function RelativeTimeDisplay({ timestamp }) {
     const id = setInterval(update, 1e3);
     return () => clearInterval(id);
   }, [timestamp]);
-  return /* @__PURE__ */ jsx33("span", { children: label });
+  return /* @__PURE__ */ jsx34("span", { children: label });
 }
 function getRelativeTime(timestamp) {
   const now = Date.now();
@@ -90990,9 +91082,9 @@ function FormattedContentDisplay({ content }) {
     });
   }, []);
   if (!Array.isArray(content) || content.length === 0) {
-    return /* @__PURE__ */ jsx33("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: "No content" });
+    return /* @__PURE__ */ jsx34("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: "No content" });
   }
-  return /* @__PURE__ */ jsx33("div", { className: "space-y-4", children: content.map((item, idx) => {
+  return /* @__PURE__ */ jsx34("div", { className: "space-y-4", children: content.map((item, idx) => {
     if (item.type === "text") {
       const text = item.text || "";
       const isFormatted = formattedIndices.has(idx);
@@ -91010,7 +91102,7 @@ function FormattedContentDisplay({ content }) {
             "Text Content",
             isFormatted ? " (formatted)" : ""
           ] }),
-          canFormat && /* @__PURE__ */ jsx33(
+          canFormat && /* @__PURE__ */ jsx34(
             "button",
             {
               type: "button",
@@ -91021,7 +91113,7 @@ function FormattedContentDisplay({ content }) {
             }
           )
         ] }),
-        isFormatted && parsed !== null ? /* @__PURE__ */ jsx33(JSONDisplay, { data: parsed, filename: `content-${idx}.json` }) : /* @__PURE__ */ jsx33(
+        isFormatted && parsed !== null ? /* @__PURE__ */ jsx34(JSONDisplay, { data: parsed, filename: `content-${idx}.json` }) : /* @__PURE__ */ jsx34(
           "div",
           {
             className: "bg-gray-50 dark:bg-zinc-900 rounded-lg p-3 font-mono text-sm whitespace-pre-wrap break-words",
@@ -91033,9 +91125,9 @@ function FormattedContentDisplay({ content }) {
     }
     if (item.type === "image") {
       return /* @__PURE__ */ jsxs18("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx33("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "Image Content" }),
+        /* @__PURE__ */ jsx34("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "Image Content" }),
         /* @__PURE__ */ jsxs18("div", { className: "bg-gray-50 dark:bg-zinc-900 rounded-lg p-3", children: [
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             "img",
             {
               src: `data:${item.mimeType || "image/png"};base64,${item.data}`,
@@ -91044,7 +91136,7 @@ function FormattedContentDisplay({ content }) {
               "data-testid": "tool-execution-results-image-content"
             }
           ),
-          item.annotations && /* @__PURE__ */ jsx33("div", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsx33(
+          item.annotations && /* @__PURE__ */ jsx34("div", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsx34(
             JSONDisplay,
             {
               data: item.annotations,
@@ -91057,9 +91149,9 @@ function FormattedContentDisplay({ content }) {
     }
     if (item.type === "audio") {
       return /* @__PURE__ */ jsxs18("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx33("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "Audio Content" }),
+        /* @__PURE__ */ jsx34("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "Audio Content" }),
         /* @__PURE__ */ jsxs18("div", { className: "bg-gray-50 dark:bg-zinc-900 rounded-lg p-3", children: [
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             "audio",
             {
               controls: true,
@@ -91068,7 +91160,7 @@ function FormattedContentDisplay({ content }) {
               "data-testid": "tool-execution-results-audio-content"
             }
           ),
-          item.annotations && /* @__PURE__ */ jsx33("div", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsx33(
+          item.annotations && /* @__PURE__ */ jsx34("div", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsx34(
             JSONDisplay,
             {
               data: item.annotations,
@@ -91081,31 +91173,31 @@ function FormattedContentDisplay({ content }) {
     }
     if (item.type === "resource_link") {
       return /* @__PURE__ */ jsxs18("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx33("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "Resource Link" }),
+        /* @__PURE__ */ jsx34("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "Resource Link" }),
         /* @__PURE__ */ jsxs18("div", { className: "bg-gray-50 dark:bg-zinc-900 rounded-lg p-3 space-y-2", children: [
           /* @__PURE__ */ jsxs18("div", { className: "font-mono text-sm break-all", children: [
-            /* @__PURE__ */ jsx33("span", { className: "text-gray-600 dark:text-gray-400", children: "URI:" }),
+            /* @__PURE__ */ jsx34("span", { className: "text-gray-600 dark:text-gray-400", children: "URI:" }),
             " ",
             item.uri
           ] }),
           item.name && /* @__PURE__ */ jsxs18("div", { className: "text-sm", children: [
-            /* @__PURE__ */ jsx33("span", { className: "text-gray-600 dark:text-gray-400", children: "Name:" }),
+            /* @__PURE__ */ jsx34("span", { className: "text-gray-600 dark:text-gray-400", children: "Name:" }),
             " ",
             item.name
           ] }),
           item.description && /* @__PURE__ */ jsxs18("div", { className: "text-sm", children: [
-            /* @__PURE__ */ jsx33("span", { className: "text-gray-600 dark:text-gray-400", children: "Description:" }),
+            /* @__PURE__ */ jsx34("span", { className: "text-gray-600 dark:text-gray-400", children: "Description:" }),
             " ",
             item.description
           ] }),
           item.mimeType && /* @__PURE__ */ jsxs18("div", { className: "text-sm", children: [
-            /* @__PURE__ */ jsx33("span", { className: "text-gray-600 dark:text-gray-400", children: "MIME Type:" }),
+            /* @__PURE__ */ jsx34("span", { className: "text-gray-600 dark:text-gray-400", children: "MIME Type:" }),
             " ",
             item.mimeType
           ] }),
           item.annotations && /* @__PURE__ */ jsxs18("div", { className: "mt-2", children: [
-            /* @__PURE__ */ jsx33("div", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1", children: "Annotations:" }),
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34("div", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1", children: "Annotations:" }),
+            /* @__PURE__ */ jsx34(
               JSONDisplay,
               {
                 data: item.annotations,
@@ -91120,7 +91212,7 @@ function FormattedContentDisplay({ content }) {
     if (item.type === "resource") {
       const resource = item.resource || {};
       return /* @__PURE__ */ jsxs18("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx33("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "Embedded Resource" }),
+        /* @__PURE__ */ jsx34("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "Embedded Resource" }),
         /* @__PURE__ */ jsxs18("div", { className: "bg-gray-50 dark:bg-zinc-900 rounded-lg p-3 space-y-2", children: [
           /* @__PURE__ */ jsxs18(
             "div",
@@ -91128,14 +91220,14 @@ function FormattedContentDisplay({ content }) {
               className: "font-mono text-sm break-all",
               "data-testid": "tool-execution-results-resource-uri",
               children: [
-                /* @__PURE__ */ jsx33("span", { className: "text-gray-600 dark:text-gray-400", children: "URI:" }),
+                /* @__PURE__ */ jsx34("span", { className: "text-gray-600 dark:text-gray-400", children: "URI:" }),
                 " ",
                 resource.uri
               ]
             }
           ),
           resource.mimeType && /* @__PURE__ */ jsxs18("div", { className: "text-sm", children: [
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34(
               "span",
               {
                 className: "text-gray-600 dark:text-gray-400",
@@ -91147,8 +91239,8 @@ function FormattedContentDisplay({ content }) {
             resource.mimeType
           ] }),
           resource.text && /* @__PURE__ */ jsxs18("div", { "data-testid": "tool-execution-results-resource-text-content", children: [
-            /* @__PURE__ */ jsx33("div", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1", children: "Content:" }),
-            /* @__PURE__ */ jsx33("div", { className: "bg-white dark:bg-black rounded p-2 font-mono text-sm whitespace-pre-wrap break-words max-h-60 overflow-y-auto", children: resource.text })
+            /* @__PURE__ */ jsx34("div", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1", children: "Content:" }),
+            /* @__PURE__ */ jsx34("div", { className: "bg-white dark:bg-black rounded p-2 font-mono text-sm whitespace-pre-wrap break-words max-h-60 overflow-y-auto", children: resource.text })
           ] }),
           resource.blob && /* @__PURE__ */ jsxs18("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
             "[Binary content: ",
@@ -91156,8 +91248,8 @@ function FormattedContentDisplay({ content }) {
             " bytes]"
           ] }),
           resource.annotations && /* @__PURE__ */ jsxs18("div", { className: "mt-2", children: [
-            /* @__PURE__ */ jsx33("div", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1", children: "Annotations:" }),
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34("div", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1", children: "Annotations:" }),
+            /* @__PURE__ */ jsx34(
               JSONDisplay,
               {
                 data: resource.annotations,
@@ -91174,7 +91266,7 @@ function FormattedContentDisplay({ content }) {
         "Unknown Content Type: ",
         item.type || "N/A"
       ] }),
-      /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx34(
         JSONDisplay,
         {
           data: item,
@@ -91218,11 +91310,11 @@ function ToolResultDisplay({
     hasSeenComponentViewRef.current = false;
     setViewMode(null);
   }, [currentResult?.toolName]);
-  const memoizedArgs = useMemo8(
+  const memoizedArgs = useMemo9(
     () => result?.args,
     [result?.timestamp, selectedIndex]
   );
-  const memoizedResult = useMemo8(
+  const memoizedResult = useMemo9(
     () => result?.result,
     [result?.timestamp, result?.duration, selectedIndex]
   );
@@ -91237,15 +91329,15 @@ function ToolResultDisplay({
     });
   }, []);
   const { playground } = useWidgetDebug();
-  const widgetProtocol = useMemo8(
+  const widgetProtocol = useMemo9(
     () => result ? detectWidgetProtocol(result.toolMeta, result.result) : null,
     [result]
   );
-  const supportsBothProtocols = useMemo8(
+  const supportsBothProtocols = useMemo9(
     () => result ? hasBothProtocols(result.toolMeta) : false,
     [result]
   );
-  const activeProtocol = useMemo8(() => {
+  const activeProtocol = useMemo9(() => {
     if (!widgetProtocol) return null;
     if (widgetProtocol === "both") {
       if (playground.selectedProtocol) {
@@ -91255,36 +91347,40 @@ function ToolResultDisplay({
     }
     return widgetProtocol;
   }, [widgetProtocol, playground.selectedProtocol]);
-  const mcpAppsResourceUri = useMemo8(() => {
+  const mcpAppsResourceUri = useMemo9(() => {
     if (!result) return null;
     return supportsBothProtocols ? getResourceUriForProtocol("mcp-apps", result.toolMeta) : result.toolMeta?.ui?.resourceUri;
   }, [result, supportsBothProtocols]);
-  const hasMcpAppsResource = useMemo8(
+  const hasMcpAppsResource = useMemo9(
     () => (activeProtocol === "mcp-apps" || supportsBothProtocols) && !!mcpAppsResourceUri,
     [activeProtocol, supportsBothProtocols, mcpAppsResourceUri]
   );
-  const openaiOutputTemplate = useMemo8(() => {
+  const openaiOutputTemplate = useMemo9(() => {
     if (!result) return null;
     return supportsBothProtocols ? getResourceUriForProtocol("chatgpt-app", result.toolMeta) : result.toolMeta?.["openai/outputTemplate"];
   }, [result, supportsBothProtocols]);
-  const hasAppsSdkResource = useMemo8(
+  const hasAppsSdkResource = useMemo9(
     () => !!((activeProtocol === "chatgpt-app" || supportsBothProtocols) && openaiOutputTemplate && typeof openaiOutputTemplate === "string" && result?.appsSdkResource),
     [activeProtocol, supportsBothProtocols, openaiOutputTemplate, result]
   );
   const appsSdkUri = openaiOutputTemplate;
-  const content = useMemo8(() => result?.result?.content || [], [result]);
-  const mcpUIResources = useMemo8(
+  const content = useMemo9(() => result?.result?.content || [], [result]);
+  const mcpUIResources = useMemo9(
     () => content.filter(
       (item) => item.type === "resource" && isMcpUIResource(item.resource)
     ),
     [content]
   );
   const hasMcpUIResources = mcpUIResources.length > 0;
-  const hasContentOrStructured = useMemo8(
+  const activeUri = useMemo9(
+    () => appsSdkUri || mcpAppsResourceUri || mcpUIResources[0]?.resource?.uri || null,
+    [appsSdkUri, mcpAppsResourceUri, mcpUIResources]
+  );
+  const hasContentOrStructured = useMemo9(
     () => !!(content && content.length > 0 || result?.result?.structuredContent),
     [content, result]
   );
-  const isNonUIResult = useMemo8(
+  const isNonUIResult = useMemo9(
     () => !hasMcpAppsResource && !hasMcpUIResources && !hasAppsSdkResource && hasContentOrStructured,
     [
       hasMcpAppsResource,
@@ -91293,7 +91389,7 @@ function ToolResultDisplay({
       hasContentOrStructured
     ]
   );
-  const availableViews = useMemo8(() => {
+  const availableViews = useMemo9(() => {
     const views = [];
     if (hasMcpAppsResource || supportsBothProtocols && mcpAppsResourceUri) {
       views.push({ mode: "mcp-apps", label: "Component (MCP Apps)" });
@@ -91332,31 +91428,26 @@ function ToolResultDisplay({
     }
   }, [availableViews, viewMode]);
   if (results.length === 0) {
-    return /* @__PURE__ */ jsx33("div", { className: "flex flex-col h-full bg-white dark:bg-black border-t dark:border-zinc-700", children: /* @__PURE__ */ jsx33("div", { className: "flex-1 overflow-y-auto h-full", children: /* @__PURE__ */ jsx33("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx33("div", { className: "text-center", children: /* @__PURE__ */ jsx33(NotFound, { vertical: true, noBorder: true, message: "No Results yet" }) }) }) }) });
+    return /* @__PURE__ */ jsx34("div", { className: "flex flex-col h-full bg-white dark:bg-black border-t dark:border-zinc-700", children: /* @__PURE__ */ jsx34("div", { className: "flex-1 overflow-y-auto h-full", children: /* @__PURE__ */ jsx34("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx34("div", { className: "text-center", children: /* @__PURE__ */ jsx34(NotFound, { vertical: true, noBorder: true, message: "No Results yet" }) }) }) }) });
   }
-  return /* @__PURE__ */ jsx33("div", { className: "flex flex-col h-full bg-white dark:bg-black border-t dark:border-zinc-700", children: /* @__PURE__ */ jsx33("div", { className: "flex-1 overflow-y-auto h-full", children: /* @__PURE__ */ jsxs18("div", { className: "space-y-0 flex flex-col flex-1 h-full", children: [
-    /* @__PURE__ */ jsxs18(
-      "div",
-      {
-        className: `sticky top-0 z-20 flex items-center gap-2 px-4 pt-2 backdrop-blur-xs bg-white/50 dark:bg-black/50 ${hasMcpAppsResource || hasMcpUIResources || hasAppsSdkResource || isNonUIResult ? "border-b border-gray-200 dark:border-zinc-600 pb-2" : ""}`,
-        children: [
-          /* @__PURE__ */ jsx33("h3", { className: "text-sm font-medium hidden sm:block", children: "Response" }),
-          result.duration !== void 0 && /* @__PURE__ */ jsxs18("div", { className: "hidden sm:flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx33(Zap, { className: "h-3 w-3 text-gray-400" }),
-            /* @__PURE__ */ jsxs18("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
-              result.duration,
-              "ms"
-            ] })
-          ] }),
-          (hasAppsSdkResource || hasMcpAppsResource || hasMcpUIResources) && /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-4 sm:ml-4", children: [
-            (appsSdkUri || mcpAppsResourceUri || mcpUIResources[0]?.resource?.uri) && /* @__PURE__ */ jsxs18("span", { className: "hidden sm:inline text-xs text-gray-500 dark:text-gray-400", children: [
-              "URI:",
-              " ",
-              appsSdkUri || mcpAppsResourceUri || mcpUIResources[0]?.resource?.uri || "No URI"
+  return /* @__PURE__ */ jsxs18("div", { className: "relative flex flex-col h-full bg-white dark:bg-black border-t dark:border-zinc-700", children: [
+    /* @__PURE__ */ jsx34("div", { className: "flex-1 overflow-y-auto h-full", children: /* @__PURE__ */ jsxs18("div", { className: "space-y-0 flex flex-col flex-1 h-full", children: [
+      /* @__PURE__ */ jsxs18(
+        "div",
+        {
+          className: `sticky top-0 z-20 flex items-center gap-2 px-4 pt-2 backdrop-blur-xs bg-white/50 dark:bg-black/50 ${hasMcpAppsResource || hasMcpUIResources || hasAppsSdkResource || isNonUIResult ? "border-b border-gray-200 dark:border-zinc-600 pb-2" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx34("h3", { className: "text-sm font-medium hidden sm:block", children: "Response" }),
+            result.duration !== void 0 && /* @__PURE__ */ jsxs18("div", { className: "hidden sm:flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx34(Zap, { className: "h-3 w-3 text-gray-400" }),
+              /* @__PURE__ */ jsxs18("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+                result.duration,
+                "ms"
+              ] })
             ] }),
-            /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-2", children: availableViews.map((view, index) => /* @__PURE__ */ jsxs18(React6.Fragment, { children: [
-              index > 0 && /* @__PURE__ */ jsx33("span", { className: "text-xs text-zinc-400", children: "|" }),
-              /* @__PURE__ */ jsx33(
+            (hasAppsSdkResource || hasMcpAppsResource || hasMcpUIResources) && /* @__PURE__ */ jsx34("div", { className: "flex items-center gap-4 sm:ml-4", children: /* @__PURE__ */ jsx34("div", { className: "flex items-center gap-2", children: availableViews.map((view, index) => /* @__PURE__ */ jsxs18(React7.Fragment, { children: [
+              index > 0 && /* @__PURE__ */ jsx34("span", { className: "text-xs text-zinc-400", children: "|" }),
+              /* @__PURE__ */ jsx34(
                 "button",
                 {
                   "data-testid": `tool-result-view-${view.mode}`,
@@ -91365,247 +91456,267 @@ function ToolResultDisplay({
                   children: view.label
                 }
               )
-            ] }, view.mode)) })
-          ] }),
-          isNonUIResult && /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 sm:ml-4", children: [
-            /* @__PURE__ */ jsx33(
-              "button",
-              {
-                onClick: () => setFormattedMode(true),
-                className: `text-xs font-medium ${formattedMode ? "text-black dark:text-white" : "text-zinc-500 dark:text-zinc-400"}`,
-                children: "Formatted"
-              }
-            ),
-            /* @__PURE__ */ jsx33("span", { className: "text-xs text-zinc-400", children: "|" }),
-            /* @__PURE__ */ jsx33(
-              "button",
-              {
-                onClick: () => setFormattedMode(false),
-                className: `text-xs font-medium ${!formattedMode ? "text-black dark:text-white" : "text-zinc-500 dark:text-zinc-400"}`,
-                children: "Raw"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs18("div", { className: "ml-auto flex items-center gap-1", children: [
-            (hasMcpAppsResource || hasAppsSdkResource || hasMcpUIResources) && onMaximize && /* @__PURE__ */ jsx33(
-              Button,
-              {
-                "data-testid": "tool-result-maximize",
-                variant: "ghost",
-                size: "sm",
-                onClick: onMaximize,
-                title: isMaximized ? "Restore" : "Maximize",
-                children: isMaximized ? /* @__PURE__ */ jsx33(Minimize, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx33(Maximize, { className: "h-4 w-4" })
-              }
-            ),
-            toolResults.length > 1 && /* @__PURE__ */ jsxs18(
-              Select,
-              {
-                value: selectedIndex.toString(),
-                onValueChange: (value) => setSelectedIndex(parseInt(value)),
-                children: [
-                  /* @__PURE__ */ jsx33(SelectTrigger, { size: "sm", className: "w-[140px] h-8 text-xs", children: /* @__PURE__ */ jsx33(SelectValue, { children: /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", children: [
-                    /* @__PURE__ */ jsx33(History, { className: "h-3 w-3" }),
-                    /* @__PURE__ */ jsx33(RelativeTimeDisplay, { timestamp: result.timestamp })
-                  ] }) }) }),
-                  /* @__PURE__ */ jsx33(SelectContent, { children: toolResults.map((r2, idx) => /* @__PURE__ */ jsx33(SelectItem, { value: idx.toString(), children: /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx33(History, { className: "h-3 w-3" }),
-                    /* @__PURE__ */ jsx33("span", { children: getRelativeTime(r2.timestamp) }),
-                    /* @__PURE__ */ jsxs18("span", { className: "text-xs text-muted-foreground", children: [
-                      "(",
-                      new Date(r2.timestamp).toLocaleTimeString(),
-                      ")"
-                    ] })
-                  ] }) }, idx)) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx33(
-              Button,
-              {
-                "data-testid": `tool-result-copy-${originalResultIndex}`,
-                variant: "ghost",
-                size: "sm",
-                onClick: () => onCopy(originalResultIndex, copyableText),
-                children: copiedResult === originalResultIndex ? /* @__PURE__ */ jsx33(Check2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx33(Copy4, { className: "h-4 w-4" })
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    (() => {
-      const errorMessage = result.error || extractErrorMessage(result.result);
-      if (errorMessage) {
-        return /* @__PURE__ */ jsxs18("div", { className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-3 mx-4", children: [
-          /* @__PURE__ */ jsx33("p", { className: "text-red-800 dark:text-red-300 font-medium", children: "Error:" }),
-          /* @__PURE__ */ jsx33("p", { className: "text-red-700 dark:text-red-400 text-sm", children: errorMessage })
-        ] });
-      }
-      return (() => {
-        if (!viewMode) {
-          return /* @__PURE__ */ jsx33("div", { className: "flex items-center justify-center w-full h-[200px]", children: /* @__PURE__ */ jsx33(Spinner, { className: "size-5" }) });
-        }
-        switch (viewMode) {
-          case "chatgpt-app": {
-            if (!hasAppsSdkResource || !result.appsSdkResource) {
-              return /* @__PURE__ */ jsx33("div", { className: "px-4 pt-4", children: /* @__PURE__ */ jsx33("div", { className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-3", children: /* @__PURE__ */ jsx33("p", { className: "text-sm text-red-600 dark:text-red-400", children: "Apps SDK resource not available" }) }) });
-            }
-            const appsSdk = result.appsSdkResource;
-            if (appsSdk.isLoading) {
-              return /* @__PURE__ */ jsx33("div", { className: "flex items-center justify-center w-full h-[200px]", children: /* @__PURE__ */ jsx33(Spinner, { className: "size-5" }) });
-            }
-            if (appsSdk.error) {
-              return /* @__PURE__ */ jsxs18("div", { className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-3 mx-4", children: [
-                /* @__PURE__ */ jsx33("p", { className: "text-red-800 dark:text-red-300 font-medium", children: "Resource Error:" }),
-                /* @__PURE__ */ jsx33("p", { className: "text-red-700 dark:text-red-400 text-sm", children: appsSdk.error })
-              ] });
-            }
-            return /* @__PURE__ */ jsx33("div", { className: "flex-1", children: /* @__PURE__ */ jsx33(
-              OpenAIComponentRenderer,
-              {
-                componentUrl: appsSdk.uri,
-                toolName: result.toolName,
-                toolArgs: memoizedArgs,
-                toolResult: memoizedResult,
-                serverId,
-                readResource: memoizedReadResource,
-                className: "w-full h-full relative p-4"
-              },
-              `openai-${result.timestamp}`
-            ) });
-          }
-          case "mcp-apps": {
-            if (!hasMcpAppsResource || !mcpAppsResourceUri) {
-              return /* @__PURE__ */ jsx33("div", { className: "px-4 pt-4", children: /* @__PURE__ */ jsx33("div", { className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-3", children: /* @__PURE__ */ jsx33("p", { className: "text-sm text-red-600 dark:text-red-400", children: "MCP Apps resource not available" }) }) });
-            }
-            return /* @__PURE__ */ jsxs18("div", { className: "flex-1 relative", children: [
-              /* @__PURE__ */ jsx33("div", { className: "absolute top-2 right-2 z-30 flex items-center gap-2", children: /* @__PURE__ */ jsx33(
-                MCPAppsDebugControls,
+            ] }, view.mode)) }) }),
+            isNonUIResult && /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 sm:ml-4", children: [
+              /* @__PURE__ */ jsx34(
+                "button",
                 {
-                  toolCallId: `tool-${result.timestamp}`,
-                  displayMode: mcpAppsDisplayMode,
-                  onDisplayModeChange: setMcpAppsDisplayMode,
-                  propsContext: "tool",
-                  resourceUri: mcpAppsResourceUri,
-                  toolInput: result.args,
-                  resourceAnnotations: result.toolMeta,
-                  llmConfig: null,
-                  resource: null,
-                  onPropsChange: setActiveProps
+                  onClick: () => setFormattedMode(true),
+                  className: `text-xs font-medium ${formattedMode ? "text-black dark:text-white" : "text-zinc-500 dark:text-zinc-400"}`,
+                  children: "Formatted"
                 }
-              ) }),
-              /* @__PURE__ */ jsx33(
-                MCPAppsRenderer,
+              ),
+              /* @__PURE__ */ jsx34("span", { className: "text-xs text-zinc-400", children: "|" }),
+              /* @__PURE__ */ jsx34(
+                "button",
                 {
-                  serverId,
-                  toolCallId: `tool-${result.timestamp}`,
-                  toolName: result.toolName,
-                  toolInput: memoizedArgs,
-                  toolOutput: memoizedResult,
-                  toolMetadata: result.toolMeta,
-                  resourceUri: mcpAppsResourceUri,
-                  readResource: memoizedReadResource,
-                  className: "w-full h-full relative p-4",
-                  customProps: activeProps || void 0,
-                  displayMode: mcpAppsDisplayMode,
-                  onDisplayModeChange: setMcpAppsDisplayMode,
-                  onSendFollowUp: memoizedOnSendFollowUp,
-                  onRerun: onRerunTool
-                },
-                `mcp-apps-${result.timestamp}`
+                  onClick: () => setFormattedMode(false),
+                  className: `text-xs font-medium ${!formattedMode ? "text-black dark:text-white" : "text-zinc-500 dark:text-zinc-400"}`,
+                  children: "Raw"
+                }
               )
-            ] });
-          }
-          case "mcp-ui": {
-            if (!hasMcpUIResources) {
-              return /* @__PURE__ */ jsx33("div", { className: "px-4 pt-4", children: /* @__PURE__ */ jsx33("div", { className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-3", children: /* @__PURE__ */ jsx33("p", { className: "text-sm text-red-600 dark:text-red-400", children: "MCP-UI resource not available" }) }) });
-            }
-            return /* @__PURE__ */ jsxs18("div", { className: "space-y-0 h-full", children: [
-              mcpUIResources.map((item, idx) => /* @__PURE__ */ jsx33("div", { className: "mx-0 size-full", children: /* @__PURE__ */ jsx33(
-                McpUIRenderer,
+            ] }),
+            /* @__PURE__ */ jsxs18("div", { className: "ml-auto flex items-center gap-1", children: [
+              isMaximized && onRerunTool && /* @__PURE__ */ jsxs18(
+                Button,
                 {
-                  resource: item.resource,
-                  onUIAction: (_action) => {
-                  },
-                  className: "w-full h-full relative"
+                  "data-testid": "tool-result-rerun",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: onRerunTool,
+                  title: "Re-run with same arguments",
+                  children: [
+                    /* @__PURE__ */ jsx34(Play, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ jsx34("span", { className: "hidden sm:inline ml-1", children: "Re-run" })
+                  ]
                 }
-              ) }, idx)),
-              content.filter(
-                (item) => !(item.type === "resource" && isMcpUIResource(item.resource))
-              ).length > 0 && /* @__PURE__ */ jsx33("div", { className: "px-4", children: /* @__PURE__ */ jsx33(
-                JSONDisplay,
+              ),
+              (hasMcpAppsResource || hasAppsSdkResource || hasMcpUIResources) && onMaximize && /* @__PURE__ */ jsx34(
+                Button,
                 {
-                  data: content.filter(
-                    (item) => !(item.type === "resource" && isMcpUIResource(item.resource))
-                  ),
-                  filename: `tool-result-${result.toolName}-non-ui-${Date.now()}.json`
+                  "data-testid": "tool-result-maximize",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: onMaximize,
+                  title: isMaximized ? "Restore" : "Maximize",
+                  children: isMaximized ? /* @__PURE__ */ jsx34(Minimize, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx34(Maximize, { className: "h-4 w-4" })
                 }
-              ) })
-            ] });
-          }
-          case "json": {
-            if (isNonUIResult && formattedMode) {
-              const structuredContent = result.result?.structuredContent;
-              return /* @__PURE__ */ jsxs18(
-                "div",
+              ),
+              toolResults.length > 1 && /* @__PURE__ */ jsxs18(
+                Select,
                 {
-                  className: "px-4 pt-4 space-y-4",
-                  "data-testid": "tool-execution-results-content",
+                  value: selectedIndex.toString(),
+                  onValueChange: (value) => setSelectedIndex(parseInt(value)),
                   children: [
-                    structuredContent && /* @__PURE__ */ jsxs18(
-                      "div",
-                      {
-                        className: "space-y-2",
-                        "data-testid": "tool-execution-results-structured-content",
-                        children: [
-                          /* @__PURE__ */ jsx33("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "Structured Content" }),
-                          /* @__PURE__ */ jsx33(
-                            JSONDisplay,
-                            {
-                              data: structuredContent,
-                              filename: `structured-content-${result.toolName}-${Date.now()}.json`
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    content && content.length > 0 && /* @__PURE__ */ jsx33(FormattedContentDisplay, { content }),
-                    !structuredContent && (!content || content.length === 0) && /* @__PURE__ */ jsx33(
-                      "div",
-                      {
-                        className: "text-sm text-gray-500 dark:text-gray-400",
-                        "data-testid": "tool-execution-results-no-content",
-                        children: "No content to display"
-                      }
-                    )
+                    /* @__PURE__ */ jsx34(SelectTrigger, { size: "sm", className: "w-[140px] h-8 text-xs", children: /* @__PURE__ */ jsx34(SelectValue, { children: /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx34(History, { className: "h-3 w-3" }),
+                      /* @__PURE__ */ jsx34(RelativeTimeDisplay, { timestamp: result.timestamp })
+                    ] }) }) }),
+                    /* @__PURE__ */ jsx34(SelectContent, { children: toolResults.map((r2, idx) => /* @__PURE__ */ jsx34(SelectItem, { value: idx.toString(), children: /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx34(History, { className: "h-3 w-3" }),
+                      /* @__PURE__ */ jsx34("span", { children: getRelativeTime(r2.timestamp) }),
+                      /* @__PURE__ */ jsxs18("span", { className: "text-xs text-muted-foreground", children: [
+                        "(",
+                        new Date(r2.timestamp).toLocaleTimeString(),
+                        ")"
+                      ] })
+                    ] }) }, idx)) })
                   ]
                 }
-              );
+              ),
+              /* @__PURE__ */ jsx34(
+                Button,
+                {
+                  "data-testid": `tool-result-copy-${originalResultIndex}`,
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => onCopy(originalResultIndex, copyableText),
+                  children: copiedResult === originalResultIndex ? /* @__PURE__ */ jsx34(Check2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx34(Copy4, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      (() => {
+        const errorMessage = result.error || extractErrorMessage(result.result);
+        if (errorMessage) {
+          return /* @__PURE__ */ jsxs18("div", { className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-3 mx-4", children: [
+            /* @__PURE__ */ jsx34("p", { className: "text-red-800 dark:text-red-300 font-medium", children: "Error:" }),
+            /* @__PURE__ */ jsx34("p", { className: "text-red-700 dark:text-red-400 text-sm", children: errorMessage })
+          ] });
+        }
+        const widgetContent = (() => {
+          if (!viewMode) {
+            return /* @__PURE__ */ jsx34("div", { className: "flex items-center justify-center w-full h-[200px]", children: /* @__PURE__ */ jsx34(Spinner, { className: "size-5" }) });
+          }
+          switch (viewMode) {
+            case "chatgpt-app": {
+              if (!hasAppsSdkResource || !result.appsSdkResource) {
+                return /* @__PURE__ */ jsx34("div", { className: "px-4 pt-4", children: /* @__PURE__ */ jsx34("div", { className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-3", children: /* @__PURE__ */ jsx34("p", { className: "text-sm text-red-600 dark:text-red-400", children: "Apps SDK resource not available" }) }) });
+              }
+              const appsSdk = result.appsSdkResource;
+              if (appsSdk.isLoading) {
+                return /* @__PURE__ */ jsx34("div", { className: "flex items-center justify-center w-full h-[200px]", children: /* @__PURE__ */ jsx34(Spinner, { className: "size-5" }) });
+              }
+              if (appsSdk.error) {
+                return /* @__PURE__ */ jsxs18("div", { className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-3 mx-4", children: [
+                  /* @__PURE__ */ jsx34("p", { className: "text-red-800 dark:text-red-300 font-medium", children: "Resource Error:" }),
+                  /* @__PURE__ */ jsx34("p", { className: "text-red-700 dark:text-red-400 text-sm", children: appsSdk.error })
+                ] });
+              }
+              return /* @__PURE__ */ jsx34("div", { className: "flex-1", children: /* @__PURE__ */ jsx34(
+                OpenAIComponentRenderer,
+                {
+                  componentUrl: appsSdk.uri,
+                  toolName: result.toolName,
+                  toolArgs: memoizedArgs,
+                  toolResult: memoizedResult,
+                  serverId,
+                  readResource: memoizedReadResource,
+                  className: "w-full h-full relative p-4",
+                  invoking: result.toolMeta?.["openai/toolInvocation/invoking"],
+                  invoked: result.toolMeta?.["openai/toolInvocation/invoked"]
+                },
+                `openai-${result.timestamp}`
+              ) });
             }
-            return /* @__PURE__ */ jsx33("div", { className: "px-4 pt-4", children: /* @__PURE__ */ jsx33(
-              JSONDisplay,
-              {
-                data: result.result,
-                filename: `tool-result-${result.toolName}-${Date.now()}.json`
+            case "mcp-apps": {
+              if (!hasMcpAppsResource || !mcpAppsResourceUri) {
+                return /* @__PURE__ */ jsx34("div", { className: "px-4 pt-4", children: /* @__PURE__ */ jsx34("div", { className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-3", children: /* @__PURE__ */ jsx34("p", { className: "text-sm text-red-600 dark:text-red-400", children: "MCP Apps resource not available" }) }) });
+              }
+              return /* @__PURE__ */ jsxs18("div", { className: "flex-1 relative", children: [
+                /* @__PURE__ */ jsx34("div", { className: "absolute top-2 right-2 z-30 flex items-center gap-2", children: /* @__PURE__ */ jsx34(
+                  MCPAppsDebugControls,
+                  {
+                    toolCallId: `tool-${result.timestamp}`,
+                    displayMode: mcpAppsDisplayMode,
+                    onDisplayModeChange: setMcpAppsDisplayMode,
+                    propsContext: "tool",
+                    resourceUri: mcpAppsResourceUri,
+                    toolInput: result.args,
+                    resourceAnnotations: result.toolMeta,
+                    llmConfig: null,
+                    resource: null,
+                    onPropsChange: setActiveProps
+                  }
+                ) }),
+                /* @__PURE__ */ jsx34(
+                  MCPAppsRenderer,
+                  {
+                    serverId,
+                    invoking: result.toolMeta?.["openai/toolInvocation/invoking"],
+                    invoked: result.toolMeta?.["openai/toolInvocation/invoked"],
+                    toolCallId: `tool-${result.timestamp}`,
+                    toolName: result.toolName,
+                    toolInput: memoizedArgs,
+                    toolOutput: memoizedResult,
+                    toolMetadata: result.toolMeta,
+                    resourceUri: mcpAppsResourceUri,
+                    readResource: memoizedReadResource,
+                    className: "w-full h-full relative p-4",
+                    customProps: activeProps || void 0,
+                    displayMode: mcpAppsDisplayMode,
+                    onDisplayModeChange: setMcpAppsDisplayMode,
+                    onSendFollowUp: memoizedOnSendFollowUp,
+                    onRerun: onRerunTool
+                  },
+                  `mcp-apps-${result.timestamp}`
+                )
+              ] });
+            }
+            case "mcp-ui": {
+              if (!hasMcpUIResources) {
+                return /* @__PURE__ */ jsx34("div", { className: "px-4 pt-4", children: /* @__PURE__ */ jsx34("div", { className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-3", children: /* @__PURE__ */ jsx34("p", { className: "text-sm text-red-600 dark:text-red-400", children: "MCP-UI resource not available" }) }) });
+              }
+              return /* @__PURE__ */ jsxs18("div", { className: "space-y-0 h-full", children: [
+                mcpUIResources.map((item, idx) => /* @__PURE__ */ jsx34("div", { className: "mx-0 size-full", children: /* @__PURE__ */ jsx34(
+                  McpUIRenderer,
+                  {
+                    resource: item.resource,
+                    onUIAction: (_action) => {
+                    },
+                    className: "w-full h-full relative"
+                  }
+                ) }, idx)),
+                content.filter(
+                  (item) => !(item.type === "resource" && isMcpUIResource(item.resource))
+                ).length > 0 && /* @__PURE__ */ jsx34("div", { className: "px-4", children: /* @__PURE__ */ jsx34(
+                  JSONDisplay,
+                  {
+                    data: content.filter(
+                      (item) => !(item.type === "resource" && isMcpUIResource(item.resource))
+                    ),
+                    filename: `tool-result-${result.toolName}-non-ui-${Date.now()}.json`
+                  }
+                ) })
+              ] });
+            }
+            case "json": {
+              if (isNonUIResult && formattedMode) {
+                const structuredContent = result.result?.structuredContent;
+                return /* @__PURE__ */ jsxs18(
+                  "div",
+                  {
+                    className: "px-4 pt-4 space-y-4",
+                    "data-testid": "tool-execution-results-content",
+                    children: [
+                      structuredContent && /* @__PURE__ */ jsxs18(
+                        "div",
+                        {
+                          className: "space-y-2",
+                          "data-testid": "tool-execution-results-structured-content",
+                          children: [
+                            /* @__PURE__ */ jsx34("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "Structured Content" }),
+                            /* @__PURE__ */ jsx34(
+                              JSONDisplay,
+                              {
+                                data: structuredContent,
+                                filename: `structured-content-${result.toolName}-${Date.now()}.json`
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      content && content.length > 0 && /* @__PURE__ */ jsx34(FormattedContentDisplay, { content }),
+                      !structuredContent && (!content || content.length === 0) && /* @__PURE__ */ jsx34(
+                        "div",
+                        {
+                          className: "text-sm text-gray-500 dark:text-gray-400",
+                          "data-testid": "tool-execution-results-no-content",
+                          children: "No content to display"
+                        }
+                      )
+                    ]
+                  }
+                );
               }
-            ) });
+              return /* @__PURE__ */ jsx34("div", { className: "px-4 pt-4", children: /* @__PURE__ */ jsx34(
+                JSONDisplay,
+                {
+                  data: result.result,
+                  filename: `tool-result-${result.toolName}-${Date.now()}.json`
+                }
+              ) });
+            }
+            default:
+              return null;
           }
-          default:
-            return null;
-        }
-      })();
-    })()
-  ] }) }) });
+        })();
+        return widgetContent;
+      })()
+    ] }) }),
+    activeUri && (viewMode === "chatgpt-app" || viewMode === "mcp-apps" || viewMode === "mcp-ui") && /* @__PURE__ */ jsx34("div", { className: "absolute bottom-0 left-1/2 -translate-x-1/2 z-40 pointer-events-none", children: /* @__PURE__ */ jsx34("span", { className: "text-[11px] bg-gray-200 dark:bg-zinc-800 text-gray-500 dark:text-gray-400 px-3 py-0.5 rounded-t-xl font-mono max-w-[320px] truncate block", children: activeUri }) })
+  ] });
 }
 
 // src/client/components/chat/ToolResultRenderer.tsx
-import { useEffect as useEffect11, useMemo as useMemo9, useRef as useRef9, useState as useState13 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo10, useRef as useRef9, useState as useState13 } from "react";
 
 // src/client/components/chat/MCPUIResource.tsx
 import { UIResourceRenderer as UIResourceRenderer2 } from "@mcp-ui/client";
 import { memo as memo3 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var MCPUIResource = memo3(({ resource }) => {
   const handleUIAction = async (result) => {
     if (result.type === "tool") {
@@ -91622,7 +91733,7 @@ var MCPUIResource = memo3(({ resource }) => {
   if (!resource.uri?.startsWith("ui://")) {
     return null;
   }
-  return /* @__PURE__ */ jsx34("div", { className: "my-4 p-0 border h-[350px] rounded-2xl border-zinc-200 overflow-hidden bg-card", children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35("div", { className: "my-4 p-0 border h-[350px] rounded-2xl border-zinc-200 overflow-hidden bg-card", children: /* @__PURE__ */ jsx35(
     UIResourceRenderer2,
     {
       resource,
@@ -91641,7 +91752,7 @@ var MCPUIResource = memo3(({ resource }) => {
 });
 
 // src/client/components/chat/ToolResultRenderer.tsx
-import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
 function ModelContextBadge({ widgetId }) {
   const { getWidget } = useWidgetDebug();
   const widget = getWidget(widgetId);
@@ -91649,9 +91760,9 @@ function ModelContextBadge({ widgetId }) {
   if (!ctx?.content?.length && !ctx?.structuredContent) return null;
   const preview = ctx.content?.map((c2) => c2.text).join(" ") ?? JSON.stringify(ctx.structuredContent).slice(0, 80);
   return /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1.5 px-3 py-1.5 text-[11px] text-muted-foreground bg-muted/30 border border-border/40 rounded-md mt-1", children: [
-    /* @__PURE__ */ jsx35("span", { className: "inline-block w-1.5 h-1.5 rounded-full bg-blue-400 shrink-0" }),
-    /* @__PURE__ */ jsx35("span", { className: "font-medium", children: "State synced to model" }),
-    /* @__PURE__ */ jsx35("span", { className: "truncate opacity-60 max-w-[300px]", children: preview })
+    /* @__PURE__ */ jsx36("span", { className: "inline-block w-1.5 h-1.5 rounded-full bg-blue-400 shrink-0" }),
+    /* @__PURE__ */ jsx36("span", { className: "font-medium", children: "State synced to model" }),
+    /* @__PURE__ */ jsx36("span", { className: "truncate opacity-60 max-w-[300px]", children: preview })
   ] });
 }
 function ToolResultRenderer({
@@ -91669,11 +91780,11 @@ function ToolResultRenderer({
   const { playground } = useWidgetDebug();
   const [resourceData, setResourceData] = useState13(null);
   const fetchedUriRef = useRef9(null);
-  const toolCallId = useMemo9(
+  const toolCallId = useMemo10(
     () => `chat-tool-${toolName}-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
     [toolName]
   );
-  const parsedResult = useMemo9(() => {
+  const parsedResult = useMemo10(() => {
     if (!result) {
       return null;
     }
@@ -91687,16 +91798,16 @@ function ToolResultRenderer({
     }
     return result;
   }, [result]);
-  const toolMetaJson = useMemo9(() => JSON.stringify(toolMeta), [toolMeta]);
-  const widgetProtocol = useMemo9(
+  const toolMetaJson = useMemo10(() => JSON.stringify(toolMeta), [toolMeta]);
+  const widgetProtocol = useMemo10(
     () => detectWidgetProtocol(toolMeta, parsedResult),
     [toolMetaJson, parsedResult]
   );
-  const supportsBothProtocols = useMemo9(
+  const supportsBothProtocols = useMemo10(
     () => hasBothProtocols(toolMeta),
     [toolMetaJson]
   );
-  const activeProtocol = useMemo9(() => {
+  const activeProtocol = useMemo10(() => {
     if (!widgetProtocol) return null;
     if (widgetProtocol === "both") {
       if (playground.selectedProtocol) {
@@ -91706,21 +91817,21 @@ function ToolResultRenderer({
     }
     return widgetProtocol;
   }, [widgetProtocol, playground.selectedProtocol]);
-  const isMcpAppsTool = useMemo9(
+  const isMcpAppsTool = useMemo10(
     () => activeProtocol === "mcp-apps",
     [activeProtocol]
   );
-  const isAppsSdkTool = useMemo9(
+  const isAppsSdkTool = useMemo10(
     () => activeProtocol === "chatgpt-app",
     [activeProtocol]
   );
-  const hasAppsSdkComponent = useMemo9(
+  const hasAppsSdkComponent = useMemo10(
     () => !!(parsedResult?.content && Array.isArray(parsedResult.content) && parsedResult.content.some(
       (item) => item.type === "resource" && item.resource?.uri?.startsWith("ui://") && item.resource?.mimeType === "text/html+skybridge"
     )),
     [parsedResult]
   );
-  const extractedResource = useMemo9(() => {
+  const extractedResource = useMemo10(() => {
     if (hasAppsSdkComponent) {
       const resourceItem = parsedResult.content.find(
         (item) => item.type === "resource" && item.resource?.uri?.startsWith("ui://") && item.resource?.mimeType === "text/html+skybridge"
@@ -91729,9 +91840,9 @@ function ToolResultRenderer({
     }
     return null;
   }, [hasAppsSdkComponent, parsedResult]);
-  const memoizedToolArgs = useMemo9(() => toolArgs, [toolName, parsedResult]);
-  const memoizedResult = useMemo9(() => parsedResult, [toolName, parsedResult]);
-  const resourceUri = useMemo9(() => {
+  const memoizedToolArgs = useMemo10(() => toolArgs, [toolName, parsedResult]);
+  const memoizedResult = useMemo10(() => parsedResult, [toolName, parsedResult]);
+  const resourceUri = useMemo10(() => {
     if (supportsBothProtocols && activeProtocol) {
       return getResourceUriForProtocol(activeProtocol, toolMeta);
     } else if (isMcpAppsTool) {
@@ -91774,9 +91885,11 @@ function ToolResultRenderer({
       });
     }
   }, [extractedResource, resourceUri, activeProtocol, readResource]);
+  const invokingText = toolMeta?.["openai/toolInvocation/invoking"];
+  const invokedText = toolMeta?.["openai/toolInvocation/invoked"];
   if (supportsBothProtocols && resourceData && serverId && readResource) {
-    return /* @__PURE__ */ jsxs19("div", { className: "space-y-4 my-4", children: [
-      activeProtocol === "mcp-apps" && /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsxs19("div", { className: "my-4", children: [
+      activeProtocol === "mcp-apps" && /* @__PURE__ */ jsx36(
         MCPAppsRenderer,
         {
           serverId,
@@ -91785,6 +91898,8 @@ function ToolResultRenderer({
           toolInput: memoizedToolArgs,
           toolOutput: memoizedResult,
           toolMetadata: toolMeta,
+          invoking: invokingText,
+          invoked: invokedText,
           partialToolInput: partialToolArgs,
           resourceUri: resourceData.uri,
           readResource,
@@ -91794,7 +91909,7 @@ function ToolResultRenderer({
           cancelled
         }
       ),
-      activeProtocol === "chatgpt-app" && /* @__PURE__ */ jsx35(
+      activeProtocol === "chatgpt-app" && /* @__PURE__ */ jsx36(
         OpenAIComponentRenderer,
         {
           componentUrl: resourceData.uri,
@@ -91805,6 +91920,8 @@ function ToolResultRenderer({
           readResource,
           noWrapper: true,
           showConsole: false,
+          invoking: invokingText,
+          invoked: invokedText,
           serverBaseUrl
         }
       )
@@ -91812,7 +91929,7 @@ function ToolResultRenderer({
   }
   if (isMcpAppsTool && resourceUri && serverId && readResource) {
     return /* @__PURE__ */ jsxs19(Fragment7, { children: [
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx36(
         MCPAppsRenderer,
         {
           serverId,
@@ -91821,6 +91938,8 @@ function ToolResultRenderer({
           toolInput: memoizedToolArgs,
           toolOutput: memoizedResult,
           toolMetadata: toolMeta,
+          invoking: invokingText,
+          invoked: invokedText,
           partialToolInput: partialToolArgs,
           resourceUri: resourceData?.uri || resourceUri,
           readResource,
@@ -91830,11 +91949,11 @@ function ToolResultRenderer({
           serverBaseUrl
         }
       ),
-      /* @__PURE__ */ jsx35(ModelContextBadge, { widgetId: toolCallId })
+      /* @__PURE__ */ jsx36(ModelContextBadge, { widgetId: toolCallId })
     ] });
   }
   if ((isAppsSdkTool || hasAppsSdkComponent) && resourceUri && serverId && readResource) {
-    return /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx36(
       OpenAIComponentRenderer,
       {
         componentUrl: resourceData?.uri || resourceUri,
@@ -91846,12 +91965,14 @@ function ToolResultRenderer({
         noWrapper: true,
         className: "my-4",
         showConsole: false,
+        invoking: invokingText,
+        invoked: invokedText,
         serverBaseUrl
       }
     );
   }
   if ((isMcpAppsTool || isAppsSdkTool || hasAppsSdkComponent) && !resourceUri) {
-    return /* @__PURE__ */ jsx35("div", { className: "flex items-center justify-center w-full h-[200px] rounded border", children: /* @__PURE__ */ jsx35(Spinner, { className: "size-5" }) });
+    return /* @__PURE__ */ jsx36("div", { className: "flex items-center justify-center w-full h-[200px] rounded border", children: /* @__PURE__ */ jsx36(Spinner, { className: "size-5" }) });
   }
   if ((isMcpAppsTool || isAppsSdkTool) && (!serverId || !readResource)) {
     console.error(
@@ -91862,7 +91983,7 @@ function ToolResultRenderer({
         hasReadResource: !!readResource
       }
     );
-    return /* @__PURE__ */ jsx35("div", { className: "my-4 p-4 bg-red-50/30 dark:bg-red-950/20 border border-red-200/50 dark:border-red-800/50 rounded-lg", children: /* @__PURE__ */ jsx35("p", { className: "text-sm text-red-600 dark:text-red-400", children: "Cannot render widget: Missing required props (serverId or readResource)" }) });
+    return /* @__PURE__ */ jsx36("div", { className: "my-4 p-4 bg-red-50/30 dark:bg-red-950/20 border border-red-200/50 dark:border-red-800/50 rounded-lg", children: /* @__PURE__ */ jsx36("p", { className: "text-sm text-red-600 dark:text-red-400", children: "Cannot render widget: Missing required props (serverId or readResource)" }) });
   }
   const mcpUIResources = [];
   if (parsedResult?.content && Array.isArray(parsedResult.content)) {
@@ -91873,7 +91994,7 @@ function ToolResultRenderer({
     }
   }
   if (mcpUIResources.length > 0) {
-    return /* @__PURE__ */ jsx35(Fragment7, { children: mcpUIResources.map((resource) => /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx36(Fragment7, { children: mcpUIResources.map((resource) => /* @__PURE__ */ jsx36(
       MCPUIResource,
       {
         resource
@@ -91961,7 +92082,7 @@ function useKeyboardShortcuts(handlers) {
 }
 
 // src/client/hooks/useMCPPrompts.ts
-import { useState as useState14, useCallback as useCallback12, useEffect as useEffect13, useMemo as useMemo10 } from "react";
+import { useState as useState14, useCallback as useCallback12, useEffect as useEffect13, useMemo as useMemo11 } from "react";
 
 // src/client/telemetry/events.ts
 var MCPInspectorOpenEvent = class {
@@ -92274,7 +92395,7 @@ function useMCPPrompts({
   const [results, setResults] = useState14([]);
   const [isExecuting, setIsExecuting] = useState14(false);
   const [searchQuery, setSearchQuery] = useState14("");
-  const filteredPrompts = useMemo10(() => {
+  const filteredPrompts = useMemo11(() => {
     if (!searchQuery.trim()) return prompts;
     const query = searchQuery.toLowerCase();
     return prompts.filter(
@@ -92394,8 +92515,8 @@ function useMCPPrompts({
 
 // src/client/components/ui/badge.tsx
 import { cva as cva2 } from "class-variance-authority";
-import * as React7 from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import * as React8 from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var badgeVariants = cva2(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -92412,9 +92533,9 @@ var badgeVariants = cva2(
     }
   }
 );
-var Badge = React7.forwardRef(({ className, variant, asChild = false, ...props }, ref) => {
+var Badge = React8.forwardRef(({ className, variant, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     Comp,
     {
       ref,
@@ -92432,7 +92553,7 @@ import { SquarePen } from "lucide-react";
 // src/client/components/chat/ConfigurationDialog.tsx
 import { Check as Check3, ChevronsUpDown, Eye, EyeOff, Key, Loader2 as Loader22 } from "lucide-react";
 import { useEffect as useEffect14, useState as useState15 } from "react";
-import { jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
 var MODELS_CACHE_KEY = "mcp-inspector-models-cache";
 var CACHE_TTL_MS = 24 * 60 * 60 * 1e3;
 function getModelsCache() {
@@ -92587,24 +92708,24 @@ function ConfigurationDialog({
   const getProviderIcon = (provider) => {
     return `https://inspector-cdn.mcp-use.com/providers/${provider}.png`;
   };
-  return /* @__PURE__ */ jsx37(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs20(DialogContent, { className: "max-w-md", "data-testid": "chat-config-dialog", children: [
+  return /* @__PURE__ */ jsx38(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs20(DialogContent, { className: "max-w-md", "data-testid": "chat-config-dialog", children: [
     /* @__PURE__ */ jsxs20(DialogHeader, { children: [
-      /* @__PURE__ */ jsx37(DialogTitle, { children: "LLM Provider Configuration" }),
-      /* @__PURE__ */ jsx37(DialogDescription, { children: "Configure your LLM provider and API key to start chatting with the MCP server" })
+      /* @__PURE__ */ jsx38(DialogTitle, { children: "LLM Provider Configuration" }),
+      /* @__PURE__ */ jsx38(DialogDescription, { children: "Configure your LLM provider and API key to start chatting with the MCP server" })
     ] }),
     /* @__PURE__ */ jsxs20("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsxs20("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx37(Label2, { children: "Provider" }),
+        /* @__PURE__ */ jsx38(Label2, { children: "Provider" }),
         /* @__PURE__ */ jsxs20(
           Select,
           {
             value: tempProvider,
             onValueChange: (v2) => onProviderChange(v2),
             children: [
-              /* @__PURE__ */ jsx37(SelectTrigger, { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx37(SelectValue, {}) }),
+              /* @__PURE__ */ jsx38(SelectTrigger, { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx38(SelectValue, {}) }),
               /* @__PURE__ */ jsxs20(SelectContent, { children: [
-                /* @__PURE__ */ jsx37(SelectItem, { value: "openai", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx37(
+                /* @__PURE__ */ jsx38(SelectItem, { value: "openai", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx38(
                     "img",
                     {
                       src: getProviderIcon("openai"),
@@ -92612,10 +92733,10 @@ function ConfigurationDialog({
                       className: "w-4 h-4"
                     }
                   ),
-                  /* @__PURE__ */ jsx37("span", { children: "OpenAI" })
+                  /* @__PURE__ */ jsx38("span", { children: "OpenAI" })
                 ] }) }),
-                /* @__PURE__ */ jsx37(SelectItem, { value: "anthropic", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx37(
+                /* @__PURE__ */ jsx38(SelectItem, { value: "anthropic", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx38(
                     "img",
                     {
                       src: getProviderIcon("anthropic"),
@@ -92623,10 +92744,10 @@ function ConfigurationDialog({
                       className: "w-4 h-4"
                     }
                   ),
-                  /* @__PURE__ */ jsx37("span", { children: "Anthropic" })
+                  /* @__PURE__ */ jsx38("span", { children: "Anthropic" })
                 ] }) }),
-                /* @__PURE__ */ jsx37(SelectItem, { value: "google", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx37(
+                /* @__PURE__ */ jsx38(SelectItem, { value: "google", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx38(
                     "img",
                     {
                       src: getProviderIcon("google"),
@@ -92634,7 +92755,7 @@ function ConfigurationDialog({
                       className: "w-4 h-4"
                     }
                   ),
-                  /* @__PURE__ */ jsx37("span", { children: "Google" })
+                  /* @__PURE__ */ jsx38("span", { children: "Google" })
                 ] }) })
               ] })
             ]
@@ -92642,9 +92763,9 @@ function ConfigurationDialog({
         )
       ] }),
       /* @__PURE__ */ jsxs20("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx37(Label2, { children: "API Key" }),
+        /* @__PURE__ */ jsx38(Label2, { children: "API Key" }),
         /* @__PURE__ */ jsxs20("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             Input,
             {
               type: showPassword ? "text" : "password",
@@ -92655,7 +92776,7 @@ function ConfigurationDialog({
               "data-testid": "chat-config-api-key-input"
             }
           ),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             Button,
             {
               type: "button",
@@ -92663,25 +92784,25 @@ function ConfigurationDialog({
               size: "sm",
               className: "absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent",
               onClick: () => setShowPassword(!showPassword),
-              children: showPassword ? /* @__PURE__ */ jsx37(EyeOff, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx37(Eye, { className: "h-4 w-4 text-muted-foreground" })
+              children: showPassword ? /* @__PURE__ */ jsx38(EyeOff, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx38(Eye, { className: "h-4 w-4 text-muted-foreground" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx37("p", { className: "text-xs text-muted-foreground", children: "Your API key is stored locally and never sent to our servers" })
+        /* @__PURE__ */ jsx38("p", { className: "text-xs text-muted-foreground", children: "Your API key is stored locally and never sent to our servers" })
       ] }),
       tempApiKey.trim() && /* @__PURE__ */ jsxs20("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx37(Label2, { children: "Model" }),
+        /* @__PURE__ */ jsx38(Label2, { children: "Model" }),
         isLoadingModels ? /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-          /* @__PURE__ */ jsx37(Loader22, { className: "h-4 w-4 animate-spin" }),
-          /* @__PURE__ */ jsx37("span", { children: "Loading models..." })
-        ] }) : modelError ? /* @__PURE__ */ jsx37("div", { className: "text-sm text-destructive", children: modelError }) : models.length > 0 ? /* @__PURE__ */ jsxs20(
+          /* @__PURE__ */ jsx38(Loader22, { className: "h-4 w-4 animate-spin" }),
+          /* @__PURE__ */ jsx38("span", { children: "Loading models..." })
+        ] }) : modelError ? /* @__PURE__ */ jsx38("div", { className: "text-sm text-destructive", children: modelError }) : models.length > 0 ? /* @__PURE__ */ jsxs20(
           Popover,
           {
             open: comboboxOpen,
             modal: true,
             onOpenChange: setComboboxOpen,
             children: [
-              /* @__PURE__ */ jsx37(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs20(
+              /* @__PURE__ */ jsx38(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs20(
                 Button,
                 {
                   variant: "outline",
@@ -92691,12 +92812,12 @@ function ConfigurationDialog({
                   "data-testid": "chat-config-model-select",
                   children: [
                     tempModel ? models.find((model) => model.id === tempModel)?.displayName || models.find((model) => model.id === tempModel)?.id || "Select a model..." : "Select a model...",
-                    /* @__PURE__ */ jsx37(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+                    /* @__PURE__ */ jsx38(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsx37(PopoverContent, { className: "w-full p-0", align: "start", children: /* @__PURE__ */ jsxs20(Command, { children: [
-                /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38(PopoverContent, { className: "w-full p-0", align: "start", children: /* @__PURE__ */ jsxs20(Command, { children: [
+                /* @__PURE__ */ jsx38(
                   CommandInput,
                   {
                     placeholder: "Search models...",
@@ -92704,8 +92825,8 @@ function ConfigurationDialog({
                   }
                 ),
                 /* @__PURE__ */ jsxs20(CommandList, { children: [
-                  /* @__PURE__ */ jsx37(CommandEmpty, { children: "No model found." }),
-                  /* @__PURE__ */ jsx37(CommandGroup, { children: models.map((model) => /* @__PURE__ */ jsxs20(
+                  /* @__PURE__ */ jsx38(CommandEmpty, { children: "No model found." }),
+                  /* @__PURE__ */ jsx38(CommandGroup, { children: models.map((model) => /* @__PURE__ */ jsxs20(
                     CommandItem,
                     {
                       value: model.id,
@@ -92717,7 +92838,7 @@ function ConfigurationDialog({
                       },
                       children: [
                         model.displayName || model.id,
-                        /* @__PURE__ */ jsx37(
+                        /* @__PURE__ */ jsx38(
                           Check3,
                           {
                             className: cn(
@@ -92734,7 +92855,7 @@ function ConfigurationDialog({
               ] }) })
             ]
           }
-        ) : /* @__PURE__ */ jsx37(
+        ) : /* @__PURE__ */ jsx38(
           Input,
           {
             value: tempModel,
@@ -92745,7 +92866,7 @@ function ConfigurationDialog({
         )
       ] }),
       /* @__PURE__ */ jsxs20("div", { className: "flex justify-between", children: [
-        showClearButton && onClear && /* @__PURE__ */ jsx37(Button, { variant: "outline", onClick: onClear, children: "Clear Config" }),
+        showClearButton && onClear && /* @__PURE__ */ jsx38(Button, { variant: "outline", onClick: onClear, children: "Clear Config" }),
         /* @__PURE__ */ jsxs20(
           Button,
           {
@@ -92754,7 +92875,7 @@ function ConfigurationDialog({
             className: showClearButton ? "ml-auto" : "",
             "data-testid": "chat-config-save-button",
             children: [
-              /* @__PURE__ */ jsx37(Key, { className: "h-4 w-4 mr-2" }),
+              /* @__PURE__ */ jsx38(Key, { className: "h-4 w-4 mr-2" }),
               "Save Configuration"
             ]
           }
@@ -92765,7 +92886,7 @@ function ConfigurationDialog({
 }
 
 // src/client/components/chat/ChatHeader.tsx
-import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
 function ChatHeader({
   llmConfig,
   hasMessages,
@@ -92789,16 +92910,16 @@ function ChatHeader({
 }) {
   return /* @__PURE__ */ jsxs21("div", { className: "flex flex-row absolute top-0 right-0 z-10 w-full items-center justify-between p-1 pt-2 gap-2", children: [
     /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 rounded-full p-2 px-2 sm:px-4 bg-background/40 backdrop-blur-sm", children: [
-      !hideTitle && /* @__PURE__ */ jsx38("h3", { className: "text-xl sm:text-3xl font-base", children: "Chat" }),
-      llmConfig && !hideConfigButton && /* @__PURE__ */ jsx38(Fragment8, { children: /* @__PURE__ */ jsxs21(Tooltip, { children: [
-        /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs21(
+      !hideTitle && /* @__PURE__ */ jsx39("h3", { className: "text-xl sm:text-3xl font-base", children: "Chat" }),
+      llmConfig && !hideConfigButton && /* @__PURE__ */ jsx39(Fragment8, { children: /* @__PURE__ */ jsxs21(Tooltip, { children: [
+        /* @__PURE__ */ jsx39(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs21(
           Badge,
           {
             variant: "secondary",
             className: "hidden sm:flex ml-2 pl-1 font-mono text-[11px] cursor-pointer hover:bg-secondary/80 transition-colors",
             onClick: () => onConfigDialogOpenChange(true),
             children: [
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 "img",
                 {
                   src: `https://inspector-cdn.mcp-use.com/providers/${llmConfig.provider}.png`,
@@ -92812,19 +92933,19 @@ function ChatHeader({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx38(TooltipContent, { children: /* @__PURE__ */ jsx38("p", { children: "Change API Key" }) })
+        /* @__PURE__ */ jsx39(TooltipContent, { children: /* @__PURE__ */ jsx39("p", { children: "Change API Key" }) })
       ] }) })
     ] }),
     /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 pr-2 sm:pr-3 pt-0 sm:pt-2 shrink-0", children: [
       llmConfig && !hideConfigButton && /* @__PURE__ */ jsxs21(Tooltip, { children: [
-        /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx39(
           Button,
           {
             variant: "secondary",
             size: "sm",
             className: "p-2 sm:hidden",
             onClick: () => onConfigDialogOpenChange(true),
-            children: /* @__PURE__ */ jsx38(
+            children: /* @__PURE__ */ jsx39(
               "img",
               {
                 src: `https://inspector-cdn.mcp-use.com/providers/${llmConfig.provider}.png`,
@@ -92834,10 +92955,10 @@ function ChatHeader({
             )
           }
         ) }),
-        /* @__PURE__ */ jsx38(TooltipContent, { children: /* @__PURE__ */ jsx38("p", { children: "Change API Key" }) })
+        /* @__PURE__ */ jsx39(TooltipContent, { children: /* @__PURE__ */ jsx39("p", { children: "Change API Key" }) })
       ] }),
       hasMessages && /* @__PURE__ */ jsxs21(Tooltip, { children: [
-        /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsx39(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs21(
           Button,
           {
             variant: clearButtonVariant ?? "default",
@@ -92845,15 +92966,15 @@ function ChatHeader({
             className: `p-2 cursor-pointer ${clearButtonHideShortcut ? "sm:px-3" : "sm:pr-1 sm:pl-3"}`,
             onClick: onClearChat,
             children: [
-              !clearButtonHideIcon && /* @__PURE__ */ jsx38(SquarePen, { className: "h-4 w-4 sm:mr-2" }),
-              /* @__PURE__ */ jsx38("span", { className: "hidden sm:inline", children: clearButtonLabel ?? "New Chat" }),
-              !clearButtonHideShortcut && /* @__PURE__ */ jsx38("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: "\u2318O" })
+              !clearButtonHideIcon && /* @__PURE__ */ jsx39(SquarePen, { className: "h-4 w-4 sm:mr-2" }),
+              /* @__PURE__ */ jsx39("span", { className: "hidden sm:inline", children: clearButtonLabel ?? "New Chat" }),
+              !clearButtonHideShortcut && /* @__PURE__ */ jsx39("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: "\u2318O" })
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx38(TooltipContent, { children: /* @__PURE__ */ jsx38("p", { children: clearButtonLabel ?? "New Chat" }) })
+        /* @__PURE__ */ jsx39(TooltipContent, { children: /* @__PURE__ */ jsx39("p", { children: clearButtonLabel ?? "New Chat" }) })
       ] }),
-      !hideConfigButton && /* @__PURE__ */ jsx38(
+      !hideConfigButton && /* @__PURE__ */ jsx39(
         ConfigurationDialog,
         {
           open: configDialogOpen,
@@ -92952,7 +93073,7 @@ function formatFileSize(bytes) {
 }
 
 // src/client/components/chat/ChatInput.tsx
-import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
 function ChatInput({
   inputValue,
   isConnected,
@@ -92983,18 +93104,18 @@ function ChatInput({
   };
   const hasAttachments = attachments.length > 0;
   return /* @__PURE__ */ jsxs22("div", { className: "relative w-full", children: [
-    hasAttachments && /* @__PURE__ */ jsx39("div", { className: "absolute top-0 left-0 right-0 z-20 p-3 flex gap-2 flex-wrap", children: attachments.map((attachment, index) => /* @__PURE__ */ jsxs22(
+    hasAttachments && /* @__PURE__ */ jsx40("div", { className: "absolute top-0 left-0 right-0 z-20 p-3 flex gap-2 flex-wrap", children: attachments.map((attachment, index) => /* @__PURE__ */ jsxs22(
       "div",
       {
         className: "relative group bg-zinc-100/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-lg p-2 flex items-center gap-2 border border-zinc-200 dark:border-zinc-700",
         "data-testid": `chat-attachment-${index}`,
         children: [
-          /* @__PURE__ */ jsx39(ImageIcon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+          /* @__PURE__ */ jsx40(ImageIcon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
           /* @__PURE__ */ jsxs22("div", { className: "flex flex-col min-w-0", children: [
-            /* @__PURE__ */ jsx39("span", { className: "text-xs font-medium truncate max-w-[150px]", children: attachment.name || "Image" }),
-            attachment.size && /* @__PURE__ */ jsx39("span", { className: "text-xs text-muted-foreground", children: formatFileSize(attachment.size) })
+            /* @__PURE__ */ jsx40("span", { className: "text-xs font-medium truncate max-w-[150px]", children: attachment.name || "Image" }),
+            attachment.size && /* @__PURE__ */ jsx40("span", { className: "text-xs text-muted-foreground", children: formatFileSize(attachment.size) })
           ] }),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "button",
             {
               onClick: () => onAttachmentRemove(index),
@@ -93002,14 +93123,14 @@ function ChatInput({
               title: "Remove attachment",
               type: "button",
               "data-testid": `chat-attachment-remove-${index}`,
-              children: /* @__PURE__ */ jsx39(X5, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ jsx40(X5, { className: "h-3 w-3" })
             }
           )
         ]
       },
       index
     )) }),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       Textarea,
       {
         ref: textareaRef,
@@ -93028,7 +93149,7 @@ function ChatInput({
         "data-testid": "chat-input"
       }
     ),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       "input",
       {
         ref: fileInputRef,
@@ -93040,7 +93161,7 @@ function ChatInput({
         "aria-label": "Upload images"
       }
     ),
-    showAttachButton && /* @__PURE__ */ jsx39("div", { className: "absolute left-0 p-3 bottom-0", children: /* @__PURE__ */ jsx39(
+    showAttachButton && /* @__PURE__ */ jsx40("div", { className: "absolute left-0 p-3 bottom-0", children: /* @__PURE__ */ jsx40(
       Button,
       {
         variant: "ghost",
@@ -93051,7 +93172,7 @@ function ChatInput({
         title: "Attach images",
         type: "button",
         "data-testid": "chat-attach-button",
-        children: /* @__PURE__ */ jsx39(Paperclip, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx40(Paperclip, { className: "h-4 w-4" })
       }
     ) })
   ] });
@@ -93059,12 +93180,12 @@ function ChatInput({
 
 // src/client/components/chat/PromptResultsList.tsx
 import { MessageSquare, X as X6 } from "lucide-react";
-import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
 function PromptResultsList({
   promptResults,
   onDeletePromptResult
 }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
       className: "absolute top-4 left-4 right-4 flex gap-2 overflow-x-auto z-20 flex-nowrap",
@@ -93078,9 +93199,9 @@ function PromptResultsList({
           type: "button",
           className: "flex items-center gap-2 bg-zinc-200 text-zinc-700 dark:text-zinc-300 text-[10px] px-1.5 py-0.5 dark:bg-zinc-700 rounded-lg border border-zinc-200 dark:border-zinc-300 font-medium hover:bg-zinc-300 dark:hover:bg-zinc-600",
           children: [
-            /* @__PURE__ */ jsx40(MessageSquare, { className: "h-3.5 w-3.5 shrink-0" }),
-            /* @__PURE__ */ jsx40("span", { className: "truncate", title: promptName, children: promptName }),
-            /* @__PURE__ */ jsx40(
+            /* @__PURE__ */ jsx41(MessageSquare, { className: "h-3.5 w-3.5 shrink-0" }),
+            /* @__PURE__ */ jsx41("span", { className: "truncate", title: promptName, children: promptName }),
+            /* @__PURE__ */ jsx41(
               "span",
               {
                 className: "ml-1 h-4 w-4 rounded-full bg-zinc-400 dark:bg-zinc-600 hover:bg-zinc-500 dark:hover:bg-zinc-500 flex items-center justify-center cursor-pointer shrink-0 transition-colors",
@@ -93091,7 +93212,7 @@ function PromptResultsList({
                 title: "Remove prompt",
                 role: "button",
                 tabIndex: 0,
-                children: /* @__PURE__ */ jsx40(X6, { className: "h-2.5 w-2.5 text-white" })
+                children: /* @__PURE__ */ jsx41(X6, { className: "h-2.5 w-2.5 text-white" })
               }
             )
           ]
@@ -93105,7 +93226,7 @@ function PromptResultsList({
 // src/client/components/chat/PromptsDropdown.tsx
 import { MessageSquare as MessageSquare2 } from "lucide-react";
 import { useEffect as useEffect15 } from "react";
-import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
 function PromptsDropdown({
   isOpen,
   focusedIndex,
@@ -93122,15 +93243,15 @@ function PromptsDropdown({
       }
     }
   }, [focusedIndex]);
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       className: "absolute bottom-full left-0 right-0 max-w-3xl w-full max-h-[300px] overflow-y-auto rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-lg z-30 flex flex-col gap-2 mb-1",
       "data-testid": "chat-prompts-dropdown",
       children: /* @__PURE__ */ jsxs24("div", { className: "p-2", children: [
-        /* @__PURE__ */ jsx41("div", { className: "text-xs font-medium text-zinc-900 dark:text-zinc-100 mb-2", children: "Prompts" }),
+        /* @__PURE__ */ jsx42("div", { className: "text-xs font-medium text-zinc-900 dark:text-zinc-100 mb-2", children: "Prompts" }),
         prompts.map((prompt, index) => /* @__PURE__ */ jsxs24(Tooltip, { children: [
-          /* @__PURE__ */ jsx41(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs24(
+          /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs24(
             Button,
             {
               id: `prompt-${index}`,
@@ -93143,15 +93264,15 @@ function PromptsDropdown({
               onClick: () => onPromptSelect(prompt),
               "data-testid": `chat-prompt-option-${index}`,
               children: [
-                /* @__PURE__ */ jsx41("div", { className: "flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx41(MessageSquare2, { className: "h-4 w-4 text-zinc-600 dark:text-zinc-400" }) }),
-                /* @__PURE__ */ jsx41("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs24("div", { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx42("div", { className: "flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx42(MessageSquare2, { className: "h-4 w-4 text-zinc-600 dark:text-zinc-400" }) }),
+                /* @__PURE__ */ jsx42("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs24("div", { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100 flex items-center gap-2", children: [
                   prompt.name,
-                  selectedPrompt?.name === prompt.name && /* @__PURE__ */ jsx41(Spinner, { className: "size-3 text-zinc-600 dark:text-zinc-400" })
+                  selectedPrompt?.name === prompt.name && /* @__PURE__ */ jsx42(Spinner, { className: "size-3 text-zinc-600 dark:text-zinc-400" })
                 ] }) })
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx41(TooltipContent, { children: prompt.description })
+          /* @__PURE__ */ jsx42(TooltipContent, { children: prompt.description })
         ] }, index))
       ] })
     }
@@ -93159,7 +93280,7 @@ function PromptsDropdown({
 }
 
 // src/client/components/chat/ChatInputArea.tsx
-import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
 function ChatInputArea({
   inputValue,
   isConnected,
@@ -93185,8 +93306,8 @@ function ChatInputArea({
   onFollowupSelect
 }) {
   const canSend = inputValue.trim() || promptResults.length > 0 || attachments.length > 0;
-  return /* @__PURE__ */ jsx42("div", { className: "w-full flex flex-col justify-center items-center p-2 sm:p-4 sm:pt-0 text-foreground", children: /* @__PURE__ */ jsxs25("div", { className: "relative w-full max-w-3xl backdrop-blur-xl", children: [
-    followups.length > 0 && /* @__PURE__ */ jsx42("div", { className: "mb-2 flex flex-wrap gap-2", children: followups.map((followup) => /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43("div", { className: "w-full flex flex-col justify-center items-center p-2 sm:p-4 sm:pt-0 text-foreground", children: /* @__PURE__ */ jsxs25("div", { className: "relative w-full max-w-3xl backdrop-blur-xl", children: [
+    followups.length > 0 && /* @__PURE__ */ jsx43("div", { className: "mb-2 flex flex-wrap gap-2", children: followups.map((followup) => /* @__PURE__ */ jsx43(
       Button,
       {
         type: "button",
@@ -93199,7 +93320,7 @@ function ChatInputArea({
       },
       followup
     )) }),
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(
       PromptsDropdown,
       {
         isOpen: promptsDropdownOpen,
@@ -93209,14 +93330,14 @@ function ChatInputArea({
         onPromptSelect
       }
     ),
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(
       PromptResultsList,
       {
         promptResults,
         onDeletePromptResult
       }
     ),
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(
       ChatInput,
       {
         inputValue,
@@ -93237,16 +93358,16 @@ function ChatInputArea({
         onAttachmentRemove
       }
     ),
-    /* @__PURE__ */ jsx42("div", { className: "absolute right-0 p-3 bottom-0 flex items-center gap-2", children: isLoading ? /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43("div", { className: "absolute right-0 p-3 bottom-0 flex items-center gap-2", children: isLoading ? /* @__PURE__ */ jsx43(
       Button,
       {
         className: "min-w-none h-auto w-auto aspect-square rounded-full items-center justify-center flex",
         title: "Stop streaming",
         type: "button",
         onClick: onStopStreaming,
-        children: /* @__PURE__ */ jsx42(Square, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx43(Square, { className: "h-4 w-4" })
       }
-    ) : /* @__PURE__ */ jsx42(
+    ) : /* @__PURE__ */ jsx43(
       Button,
       {
         disabled: !canSend || !isConnected || isLoading,
@@ -93255,14 +93376,14 @@ function ChatInputArea({
         type: "button",
         onClick: onSendMessage,
         "data-testid": "chat-send-button",
-        children: /* @__PURE__ */ jsx42(Send, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx43(Send, { className: "h-4 w-4" })
       }
     ) })
   ] }) });
 }
 
 // src/client/components/ui/aurora-background.tsx
-import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
 function AuroraBackground({
   className,
   children,
@@ -93278,7 +93399,7 @@ function AuroraBackground({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           "div",
           {
             className: "absolute inset-0 overflow-hidden dark:opacity-50 dark:contrast-200",
@@ -93295,7 +93416,7 @@ function AuroraBackground({
               "--white": "#fff",
               "--transparent": "transparent"
             },
-            children: /* @__PURE__ */ jsx43(
+            children: /* @__PURE__ */ jsx44(
               "div",
               {
                 className: cn(
@@ -93313,9 +93434,9 @@ function AuroraBackground({
 }
 
 // src/client/components/ui/blur-fade.tsx
-import { AnimatePresence, motion, useInView } from "motion/react";
+import { AnimatePresence, motion as motion2, useInView } from "motion/react";
 import { useRef as useRef11 } from "react";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function BlurFade({
   children,
   className,
@@ -93345,8 +93466,8 @@ function BlurFade({
     }
   };
   const combinedVariants = variant || defaultVariants;
-  return /* @__PURE__ */ jsx44(AnimatePresence, { children: /* @__PURE__ */ jsx44(
-    motion.div,
+  return /* @__PURE__ */ jsx45(AnimatePresence, { children: /* @__PURE__ */ jsx45(
+    motion2.div,
     {
       ref,
       initial: "hidden",
@@ -93367,7 +93488,7 @@ function BlurFade({
 
 // src/client/components/chat/ChatLandingForm.tsx
 import { ArrowUp, Loader2 as Loader23 } from "lucide-react";
-import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
 function ChatLandingForm({
   mcpServerUrl,
   inputValue,
@@ -93397,9 +93518,9 @@ function ChatLandingForm({
   onQuickQuestionSelect
 }) {
   const canSend = inputValue.trim() || promptResults.length > 0 || attachments.length > 0;
-  return /* @__PURE__ */ jsx45(AuroraBackground, { children: /* @__PURE__ */ jsxs27(BlurFade, { className: "w-full max-w-4xl mx-auto px-2 sm:px-4", children: [
+  return /* @__PURE__ */ jsx46(AuroraBackground, { children: /* @__PURE__ */ jsxs27(BlurFade, { className: "w-full max-w-4xl mx-auto px-2 sm:px-4", children: [
     /* @__PURE__ */ jsxs27("div", { className: "text-center mb-6 sm:mb-8", children: [
-      /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx46(
         "h1",
         {
           className: "text-2xl sm:text-4xl font-light mb-2 dark:text-white",
@@ -93407,11 +93528,11 @@ function ChatLandingForm({
           children: "Chat with MCP Server"
         }
       ),
-      !hideServerUrl && /* @__PURE__ */ jsx45("p", { className: "text-xs sm:text-sm text-zinc-600 dark:text-zinc-400 font-light break-all px-2", children: mcpServerUrl })
+      !hideServerUrl && /* @__PURE__ */ jsx46("p", { className: "text-xs sm:text-sm text-zinc-600 dark:text-zinc-400 font-light break-all px-2", children: mcpServerUrl })
     ] }),
     /* @__PURE__ */ jsxs27("form", { onSubmit, className: "space-y-6", children: [
-      /* @__PURE__ */ jsx45("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs27("div", { className: "relative w-full max-w-2xl", children: [
-        /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx46("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs27("div", { className: "relative w-full max-w-2xl", children: [
+        /* @__PURE__ */ jsx46(
           PromptsDropdown,
           {
             prompts,
@@ -93421,14 +93542,14 @@ function ChatLandingForm({
             onPromptSelect
           }
         ),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           PromptResultsList,
           {
             promptResults,
             onDeletePromptResult
           }
         ),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           ChatInput,
           {
             inputValue,
@@ -93449,7 +93570,7 @@ function ChatLandingForm({
             onAttachmentRemove
           }
         ),
-        /* @__PURE__ */ jsx45("div", { className: "absolute right-0 p-3 bottom-0", children: /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46("div", { className: "absolute right-0 p-3 bottom-0", children: /* @__PURE__ */ jsx46(
           Button,
           {
             type: "submit",
@@ -93461,11 +93582,11 @@ function ChatLandingForm({
             ),
             disabled: isLoading || !canSend || !isConnected,
             "data-testid": "chat-send-button",
-            children: isLoading ? /* @__PURE__ */ jsx45(Loader23, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx45(ArrowUp, { className: "h-4 w-4" })
+            children: isLoading ? /* @__PURE__ */ jsx46(Loader23, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx46(ArrowUp, { className: "h-4 w-4" })
           }
         ) })
       ] }) }),
-      quickQuestions.length > 0 && /* @__PURE__ */ jsx45("div", { className: "flex flex-wrap items-center justify-center gap-2 px-2", children: quickQuestions.map((question) => /* @__PURE__ */ jsx45(
+      quickQuestions.length > 0 && /* @__PURE__ */ jsx46("div", { className: "flex flex-wrap items-center justify-center gap-2 px-2", children: quickQuestions.map((question) => /* @__PURE__ */ jsx46(
         Button,
         {
           type: "button",
@@ -93478,15 +93599,15 @@ function ChatLandingForm({
         },
         question
       )) }),
-      llmConfig && !hideModelBadge && /* @__PURE__ */ jsx45("div", { className: "flex justify-center mt-4", children: /* @__PURE__ */ jsxs27(Tooltip, { children: [
-        /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs27(
+      llmConfig && !hideModelBadge && /* @__PURE__ */ jsx46("div", { className: "flex justify-center mt-4", children: /* @__PURE__ */ jsxs27(Tooltip, { children: [
+        /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs27(
           Badge,
           {
             variant: "secondary",
             className: "pl-1 font-mono text-[11px] cursor-pointer hover:bg-secondary/80 transition-colors",
             onClick: () => onConfigDialogOpenChange(true),
             children: [
-              /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsx46(
                 "img",
                 {
                   src: `https://inspector-cdn.mcp-use.com/providers/${llmConfig.provider}.png`,
@@ -93500,7 +93621,7 @@ function ChatLandingForm({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx45(TooltipContent, { children: /* @__PURE__ */ jsx45("p", { children: "Change API Key" }) })
+        /* @__PURE__ */ jsx46(TooltipContent, { children: /* @__PURE__ */ jsx46("p", { children: "Change API Key" }) })
       ] }) })
     ] })
   ] }) });
@@ -93508,21 +93629,21 @@ function ChatLandingForm({
 
 // src/client/components/chat/ConfigureEmptyState.tsx
 import { Key as Key2, Settings as Settings2 } from "lucide-react";
-import { jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
 function ConfigureEmptyState({
   onConfigureClick
 }) {
   return /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [
-    /* @__PURE__ */ jsx46(Key2, { className: "h-12 w-12 text-muted-foreground mb-4" }),
-    /* @__PURE__ */ jsx46("h3", { className: "text-lg font-semibold mb-2", children: "Configure Your LLM Provider" }),
-    /* @__PURE__ */ jsx46("p", { className: "text-sm text-muted-foreground mb-4 max-w-md", children: "To start chatting with the MCP server, you need to configure your LLM provider and API key. Your credentials are stored locally and used only for this chat." }),
+    /* @__PURE__ */ jsx47(Key2, { className: "h-12 w-12 text-muted-foreground mb-4" }),
+    /* @__PURE__ */ jsx47("h3", { className: "text-lg font-semibold mb-2", children: "Configure Your LLM Provider" }),
+    /* @__PURE__ */ jsx47("p", { className: "text-sm text-muted-foreground mb-4 max-w-md", children: "To start chatting with the MCP server, you need to configure your LLM provider and API key. Your credentials are stored locally and used only for this chat." }),
     /* @__PURE__ */ jsxs28(
       Button,
       {
         onClick: onConfigureClick,
         "data-testid": "chat-configure-api-key-button",
         children: [
-          /* @__PURE__ */ jsx46(Settings2, { className: "h-4 w-4 mr-2" }),
+          /* @__PURE__ */ jsx47(Settings2, { className: "h-4 w-4 mr-2" }),
           "Configure API Key"
         ]
       }
@@ -93530,49 +93651,6 @@ function ConfigureEmptyState({
   ] });
 }
 
-// src/client/components/ui/text-shimmer.tsx
-import { motion as motion2 } from "motion/react";
-import { useMemo as useMemo11 } from "react";
-import { jsx as jsx47 } from "react/jsx-runtime";
-function TextShimmer({
-  children,
-  as: Component = "p",
-  className,
-  duration = 2,
-  spread = 2
-}) {
-  const MotionComponent = motion2.create(
-    Component
-  );
-  const dynamicSpread = useMemo11(() => {
-    return children.length * spread;
-  }, [children, spread]);
-  return /* @__PURE__ */ jsx47(
-    MotionComponent,
-    {
-      className: cn(
-        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text",
-        "text-transparent [--base-color:#a1a1aa] [--base-gradient-color:#000]",
-        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
-        "dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff] dark:[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]",
-        className
-      ),
-      initial: { backgroundPosition: "100% center" },
-      animate: { backgroundPosition: "0% center" },
-      transition: {
-        repeat: Infinity,
-        duration,
-        ease: "linear"
-      },
-      style: {
-        "--spread": `${dynamicSpread}px`,
-        backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`
-      },
-      children
-    }
-  );
-}
-
 // src/client/components/chat/MessageList.tsx
 import { memo as memo4, useEffect as useEffect16, useRef as useRef12 } from "react";