@mcp-use/inspector 2.1.0-canary.2 → 2.1.0

package/dist/client/index.js

@@ -5177,7 +5177,7 @@ var init_module = __esm({
   }
 });
 
-// ../mcp-use/dist/chunk-AGEVMNKQ.js
+// ../mcp-use/dist/chunk-MOAF7545.js
 import { RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps";
 import {
   CreateMessageRequestSchema,
@@ -5345,12 +5345,12 @@ function setTelemetrySource(source) {
   Tel.getInstance().setSource(source);
 }
 var VERSION, _a3, BaseTelemetryEvent, _a4, MCPAgentExecutionEvent, _a5, ServerRunEvent, _a6, ServerInitializeEvent, _a7, ServerToolCallEvent, _a8, ServerResourceCallEvent, _a9, ServerPromptCallEvent, _a10, ServerContextEvent, _a11, MCPClientInitEvent, _a12, ConnectorInitEvent, _a13, ClientAddServerEvent, _a14, ClientRemoveServerEvent, USER_ID_STORAGE_KEY, cachedEnvironment, _a15, Telemetry2, Tel, _a16, BaseConnector, _a17, ConnectionManager;
-var init_chunk_AGEVMNKQ = __esm({
-  "../mcp-use/dist/chunk-AGEVMNKQ.js"() {
+var init_chunk_MOAF7545 = __esm({
+  "../mcp-use/dist/chunk-MOAF7545.js"() {
     "use strict";
     init_chunk_QWQYAQCK();
     init_chunk_3GQAWCBQ();
-    VERSION = "1.24.1-canary.2";
+    VERSION = "1.24.1";
     __name(getPackageVersion2, "getPackageVersion");
     BaseTelemetryEvent = (_a3 = class {
     }, __name(_a3, "BaseTelemetryEvent"), _a3);
@@ -6620,7 +6620,7 @@ var init_chunk_AGEVMNKQ = __esm({
   }
 });
 
-// ../mcp-use/dist/chunk-SQFWZZPB.js
+// ../mcp-use/dist/chunk-WRL45O5E.js
 import {
   Client
 } from "@modelcontextprotocol/sdk/client/index.js";
@@ -6685,10 +6685,10 @@ function createConnectorFromConfig(serverConfig, connectorOptions) {
   throw new Error("Cannot determine connector type from config");
 }
 var _a18, SseConnectionManager, _a19, HttpConnector, _a20, MCPSession, _a21, BaseMCPClient;
-var init_chunk_SQFWZZPB = __esm({
-  "../mcp-use/dist/chunk-SQFWZZPB.js"() {
+var init_chunk_WRL45O5E = __esm({
+  "../mcp-use/dist/chunk-WRL45O5E.js"() {
     "use strict";
-    init_chunk_AGEVMNKQ();
+    init_chunk_MOAF7545();
     init_chunk_QWQYAQCK();
     init_chunk_3GQAWCBQ();
     SseConnectionManager = (_a18 = class extends ConnectionManager {
@@ -7947,7 +7947,7 @@ var init_chunk_SQFWZZPB = __esm({
   }
 });
 
-// ../mcp-use/dist/chunk-Y73WX6WU.js
+// ../mcp-use/dist/chunk-FDNVT4RA.js
 import {
   discoverOAuthProtectedResourceMetadata,
   discoverAuthorizationServerMetadata,
@@ -8257,11 +8257,11 @@ async function onMcpAuthorization() {
   }
 }
 var _a22, BrowserMCPClient, _a23, BrowserOAuthClientProvider;
-var init_chunk_Y73WX6WU = __esm({
-  "../mcp-use/dist/chunk-Y73WX6WU.js"() {
+var init_chunk_FDNVT4RA = __esm({
+  "../mcp-use/dist/chunk-FDNVT4RA.js"() {
     "use strict";
-    init_chunk_SQFWZZPB();
-    init_chunk_AGEVMNKQ();
+    init_chunk_WRL45O5E();
+    init_chunk_MOAF7545();
     init_chunk_QWQYAQCK();
     init_chunk_3GQAWCBQ();
     __name(trackBrowserClientInit, "trackBrowserClientInit");
@@ -27978,18 +27978,18 @@ var init_stdio_transport = __esm({
   }
 });
 
-// ../mcp-use/dist/stdio-3ARCVLF2.js
-var stdio_3ARCVLF2_exports = {};
-__export(stdio_3ARCVLF2_exports, {
+// ../mcp-use/dist/stdio-MZVPQHDD.js
+var stdio_MZVPQHDD_exports = {};
+__export(stdio_MZVPQHDD_exports, {
   StdioConnector: () => StdioConnector
 });
 import { Client as Client2 } from "@modelcontextprotocol/sdk/client/index.js";
 import process2 from "process";
 var _a38, StdioConnectionManager, _a39, StdioConnector;
-var init_stdio_3ARCVLF2 = __esm({
-  "../mcp-use/dist/stdio-3ARCVLF2.js"() {
+var init_stdio_MZVPQHDD = __esm({
+  "../mcp-use/dist/stdio-MZVPQHDD.js"() {
     "use strict";
-    init_chunk_AGEVMNKQ();
+    init_chunk_MOAF7545();
     init_chunk_QWQYAQCK();
     init_chunk_3GQAWCBQ();
     init_stdio_transport();
@@ -28133,9 +28133,9 @@ var init_stdio_3ARCVLF2 = __esm({
   }
 });
 
-// ../mcp-use/dist/client-3AZJMEZD.js
-var client_3AZJMEZD_exports = {};
-__export(client_3AZJMEZD_exports, {
+// ../mcp-use/dist/client-W7K33MEL.js
+var client_W7K33MEL_exports = {};
+__export(client_W7K33MEL_exports, {
   BaseCodeExecutor: () => BaseCodeExecutor,
   E2BCodeExecutor: () => E2BCodeExecutor,
   MCPClient: () => MCPClient,
@@ -28275,12 +28275,12 @@ function trackNodeClientInit(config, codeMode, callbacks) {
   }).catch((e2) => logger.debug(`Failed to track MCPClient init: ${e2}`));
 }
 var _a40, BaseCodeExecutor, _a41, E2BCodeExecutor, vm, vmCheckAttempted, _a42, VMCodeExecutor, _a43, CodeModeConnector, _a44, MCPClient;
-var init_client_3AZJMEZD = __esm({
-  "../mcp-use/dist/client-3AZJMEZD.js"() {
+var init_client_W7K33MEL = __esm({
+  "../mcp-use/dist/client-W7K33MEL.js"() {
     "use strict";
     init_chunk_LG5NSHEL();
-    init_chunk_SQFWZZPB();
-    init_chunk_AGEVMNKQ();
+    init_chunk_WRL45O5E();
+    init_chunk_MOAF7545();
     init_chunk_QWQYAQCK();
     init_chunk_3GQAWCBQ();
     init_fs();
@@ -29217,7 +29217,7 @@ ${shim}
           clientInfo: serverConfig.clientInfo ?? this.config.clientInfo
         };
         if ("command" in merged && "args" in merged) {
-          const { StdioConnector: StdioConnector2 } = await Promise.resolve().then(() => (init_stdio_3ARCVLF2(), stdio_3ARCVLF2_exports));
+          const { StdioConnector: StdioConnector2 } = await Promise.resolve().then(() => (init_stdio_MZVPQHDD(), stdio_MZVPQHDD_exports));
           const stdioConfig = merged;
           return new StdioConnector2({
             command: stdioConfig.command,
@@ -74896,11 +74896,11 @@ var _a45, BaseAdapter, _a46, LangChainAdapter, _a47, MCPServerTool, PresentActiv
 var init_browser = __esm({
   "../mcp-use/dist/src/browser.js"() {
     "use strict";
-    init_chunk_Y73WX6WU();
+    init_chunk_FDNVT4RA();
     init_chunk_UJPHRNQP();
     init_chunk_LG5NSHEL();
-    init_chunk_SQFWZZPB();
-    init_chunk_AGEVMNKQ();
+    init_chunk_WRL45O5E();
+    init_chunk_MOAF7545();
     init_chunk_QWQYAQCK();
     init_chunk_3GQAWCBQ();
     init_dist3();
@@ -76247,7 +76247,7 @@ Raw error: ${result}`
             logger.debug(
               `Creating MCPClient with ${Object.keys(this.mcpServersConfig).length} server(s)...`
             );
-            const { MCPClient: MCPClient2 } = await Promise.resolve().then(() => (init_client_3AZJMEZD(), client_3AZJMEZD_exports));
+            const { MCPClient: MCPClient2 } = await Promise.resolve().then(() => (init_client_W7K33MEL(), client_W7K33MEL_exports));
             this.client = new MCPClient2({ mcpServers: this.mcpServersConfig });
             logger.debug("\u2705 MCPClient created successfully");
           }
@@ -80030,6 +80030,7 @@ import {
   Copy as Copy3,
   Maximize2,
   Monitor,
+  Moon,
   MousePointer2,
   PictureInPicture,
   Pointer,
@@ -80038,6 +80039,7 @@ import {
   ShieldOff,
   Smartphone,
   SquareDashedMousePointer,
+  Sun,
   Tablet,
   Trash2 as Trash22
 } from "lucide-react";
@@ -80194,6 +80196,71 @@ function useResourceProps(resourceUri) {
   };
 }
 
+// src/client/context/ThemeContext.tsx
+import { createContext as createContext2, use as use3, useEffect as useEffect2, useState as useState4 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var ThemeContext = createContext2(void 0);
+function useTheme() {
+  const context2 = use3(ThemeContext);
+  if (context2 === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context2;
+}
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "theme",
+  forcedTheme
+}) {
+  const [theme, setTheme] = useState4(forcedTheme || defaultTheme);
+  const [mounted, setMounted] = useState4(false);
+  const getSystemTheme = () => {
+    if (typeof window === "undefined") return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  };
+  const resolvedTheme = theme === "system" ? getSystemTheme() : theme;
+  const applyTheme = (newTheme) => {
+    const root = document.documentElement;
+    const actualTheme = newTheme === "system" ? getSystemTheme() : newTheme;
+    root.classList.remove("light", "dark");
+    root.classList.add(actualTheme);
+    if (!forcedTheme) {
+      localStorage.setItem(storageKey, newTheme);
+    }
+  };
+  useEffect2(() => {
+    setMounted(true);
+    const storedTheme = localStorage.getItem(storageKey);
+    const initialTheme = forcedTheme || storedTheme || defaultTheme;
+    setTheme(initialTheme);
+    applyTheme(initialTheme);
+  }, [defaultTheme, storageKey, forcedTheme]);
+  useEffect2(() => {
+    if (theme !== "system") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      applyTheme("system");
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [theme]);
+  useEffect2(() => {
+    if (!mounted) return;
+    applyTheme(theme);
+  }, [theme, mounted]);
+  const handleSetTheme = (newTheme) => {
+    if (forcedTheme) {
+      console.warn(
+        "[ThemeProvider] Theme is forced via URL parameter, ignoring setTheme call"
+      );
+      return;
+    }
+    setTheme(newTheme);
+  };
+  return /* @__PURE__ */ jsx14(ThemeContext, { value: { theme, setTheme: handleSetTheme, resolvedTheme }, children });
+}
+
 // src/client/components/IframeConsole.tsx
 import {
   ChevronDown as ChevronDown2,
@@ -80204,11 +80271,11 @@ import {
   TrashIcon,
   X
 } from "lucide-react";
-import { useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState6 } from "react";
 import { toast } from "sonner";
 
 // src/client/hooks/useIframeConsole.ts
-import { useCallback as useCallback4, useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef2, useState as useState5 } from "react";
 
 // src/client/console-log-bus.ts
 var ConsoleLogBus = class {
@@ -80245,8 +80312,8 @@ function useIframeConsole(options = {}) {
     maxLogs = 1e3,
     proxyToPageConsole = false
   } = options;
-  const [logs, setLogs] = useState4([]);
-  const [isOpen, setIsOpen] = useState4(false);
+  const [logs, setLogs] = useState5([]);
+  const [isOpen, setIsOpen] = useState5(false);
   const logIdCounterRef = useRef2(0);
   const addLog = useCallback4(
     (entry) => {
@@ -80298,7 +80365,7 @@ function useIframeConsole(options = {}) {
     setLogs([]);
     logIdCounterRef.current = 0;
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!enabled) return;
     const handleMessage = (event) => {
       if (event.data && event.data.type === "iframe-console-log" && event.data.level && Array.isArray(event.data.args)) {
@@ -80315,7 +80382,7 @@ function useIframeConsole(options = {}) {
       window.removeEventListener("message", handleMessage);
     };
   }, [enabled, addLog]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!enabled) return;
     return consoleLogBus.subscribe(addLog);
   }, [enabled, addLog]);
@@ -80331,25 +80398,25 @@ function useIframeConsole(options = {}) {
 // src/client/components/ui/sheet.tsx
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { XIcon as XIcon2 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsx14(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+  return /* @__PURE__ */ jsx15(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
 function SheetTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+  return /* @__PURE__ */ jsx15(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
 }
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ jsx15(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     SheetPrimitive.Overlay,
     {
       "data-slot": "sheet-overlay",
@@ -80368,7 +80435,7 @@ function SheetContent({
   ...props
 }) {
   return /* @__PURE__ */ jsxs6(SheetPortal, { children: [
-    /* @__PURE__ */ jsx14(SheetOverlay, {}),
+    /* @__PURE__ */ jsx15(SheetOverlay, {}),
     /* @__PURE__ */ jsxs6(
       SheetPrimitive.Content,
       {
@@ -80385,8 +80452,8 @@ function SheetContent({
         children: [
           children,
           /* @__PURE__ */ jsxs6(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
-            /* @__PURE__ */ jsx14(XIcon2, { className: "size-4" }),
-            /* @__PURE__ */ jsx14("span", { className: "sr-only", children: "Close" })
+            /* @__PURE__ */ jsx15(XIcon2, { className: "size-4" }),
+            /* @__PURE__ */ jsx15("span", { className: "sr-only", children: "Close" })
           ] })
         ]
       }
@@ -80394,7 +80461,7 @@ function SheetContent({
   ] });
 }
 function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       "data-slot": "sheet-header",
@@ -80407,7 +80474,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     SheetPrimitive.Title,
     {
       "data-slot": "sheet-title",
@@ -80420,7 +80487,7 @@ function SheetDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     SheetPrimitive.Description,
     {
       "data-slot": "sheet-description",
@@ -80432,12 +80499,12 @@ function SheetDescription({
 
 // src/client/components/ui/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     TooltipPrimitive.Provider,
     {
       "data-slot": "tooltip-provider",
@@ -80449,12 +80516,12 @@ function TooltipProvider({
 function Tooltip({
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(TooltipProvider, { children: /* @__PURE__ */ jsx15(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+  return /* @__PURE__ */ jsx16(TooltipProvider, { children: /* @__PURE__ */ jsx16(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
 }
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsx16(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
@@ -80462,7 +80529,7 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx16(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs7(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -80474,14 +80541,14 @@ function TooltipContent({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx15(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+        /* @__PURE__ */ jsx16(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
       ]
     }
   ) });
 }
 
 // src/client/components/IframeConsole.tsx
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var MIN_HEIGHT = 200;
 var MAX_HEIGHT_RATIO = 0.9;
 function formatArg(arg) {
@@ -80506,7 +80573,7 @@ function LogLevelBadge({ level }) {
     debug: "bg-purple-500",
     trace: "bg-gray-500"
   };
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "span",
     {
       className: cn(
@@ -80518,7 +80585,7 @@ function LogLevelBadge({ level }) {
   );
 }
 function LogEntry({ log }) {
-  const [expanded, setExpanded] = useState5(false);
+  const [expanded, setExpanded] = useState6(false);
   const formattedTime = useMemo2(() => {
     try {
       const date = new Date(log.timestamp);
@@ -80563,10 +80630,10 @@ function LogEntry({ log }) {
         className: cn("flex items-center gap-2 px-2 py-1.5", headerHover),
         onClick: () => setExpanded((v2) => !v2),
         children: [
-          /* @__PURE__ */ jsx16("span", { className: "text-zinc-400 dark:text-zinc-500 shrink-0", children: expanded ? /* @__PURE__ */ jsx16(ChevronDown2, { className: "size-3" }) : /* @__PURE__ */ jsx16(ChevronRight, { className: "size-3" }) }),
-          /* @__PURE__ */ jsx16(LogLevelBadge, { level: log.level }),
-          /* @__PURE__ */ jsx16("span", { className: "text-zinc-500 dark:text-zinc-400 text-[10px] shrink-0", children: formattedTime }),
-          !expanded && /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17("span", { className: "text-zinc-400 dark:text-zinc-500 shrink-0", children: expanded ? /* @__PURE__ */ jsx17(ChevronDown2, { className: "size-3" }) : /* @__PURE__ */ jsx17(ChevronRight, { className: "size-3" }) }),
+          /* @__PURE__ */ jsx17(LogLevelBadge, { level: log.level }),
+          /* @__PURE__ */ jsx17("span", { className: "text-zinc-500 dark:text-zinc-400 text-[10px] shrink-0", children: formattedTime }),
+          !expanded && /* @__PURE__ */ jsx17(
             "span",
             {
               className: cn(
@@ -80578,26 +80645,26 @@ function LogEntry({ log }) {
               children: inlinePreview
             }
           ),
-          expanded && log.url && /* @__PURE__ */ jsx16("span", { className: "text-zinc-400 dark:text-zinc-500 text-[10px] truncate flex-1", children: (() => {
+          expanded && log.url && /* @__PURE__ */ jsx17("span", { className: "text-zinc-400 dark:text-zinc-500 text-[10px] truncate flex-1", children: (() => {
             try {
               return new URL(log.url).pathname;
             } catch {
               return log.url;
             }
           })() }),
-          expanded && /* @__PURE__ */ jsx16(
+          expanded && /* @__PURE__ */ jsx17(
             "button",
             {
               onClick: copyLog,
               "aria-label": "Copy log",
               className: "ml-auto shrink-0 opacity-0 group-hover:opacity-100 transition-opacity p-0.5 rounded text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200",
-              children: /* @__PURE__ */ jsx16(Copy2, { className: "size-3" })
+              children: /* @__PURE__ */ jsx17(Copy2, { className: "size-3" })
             }
           )
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsx16("div", { className: "pl-8 pr-2 pb-2 select-text", children: log.args.map((arg, idx) => /* @__PURE__ */ jsx16(
+    expanded && /* @__PURE__ */ jsx17("div", { className: "pl-8 pr-2 pb-2 select-text", children: log.args.map((arg, idx) => /* @__PURE__ */ jsx17(
       "pre",
       {
         className: cn(
@@ -80634,7 +80701,7 @@ function IframeConsole({
   iframeId,
   enabled = true
 }) {
-  const [proxyToPageConsole, setProxyToPageConsole] = useState5(() => {
+  const [proxyToPageConsole, setProxyToPageConsole] = useState6(() => {
     if (typeof window === "undefined") return true;
     try {
       const stored = localStorage.getItem(PROXY_TOGGLE_KEY);
@@ -80643,7 +80710,7 @@ function IframeConsole({
       return true;
     }
   });
-  const [height, setHeight] = useState5(() => {
+  const [height, setHeight] = useState6(() => {
     if (typeof window === "undefined") return 400;
     try {
       const stored = localStorage.getItem(CONSOLE_HEIGHT_KEY);
@@ -80673,20 +80740,20 @@ function IframeConsole({
     window.addEventListener("mousemove", onMouseMove);
     window.addEventListener("mouseup", onMouseUp);
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     try {
       localStorage.setItem(CONSOLE_HEIGHT_KEY, String(height));
     } catch {
     }
   }, [height]);
-  const [activeFilter, setActiveFilter] = useState5("all");
-  const [searchQuery, setSearchQuery] = useState5("");
+  const [activeFilter, setActiveFilter] = useState6("all");
+  const [searchQuery, setSearchQuery] = useState6("");
   const { logs, clearLogs, isOpen, setIsOpen } = useIframeConsole({
     enabled,
     proxyToPageConsole
   });
   const scrollContainerRef = useRef3(null);
-  useEffect3(() => {
+  useEffect4(() => {
     try {
       localStorage.setItem(PROXY_TOGGLE_KEY, String(proxyToPageConsole));
     } catch {
@@ -80726,7 +80793,7 @@ function IframeConsole({
     }
     return result;
   }, [logs, activeFilter, searchQuery]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (isOpen && !searchQuery && scrollContainerRef.current) {
       scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
     }
@@ -80748,8 +80815,8 @@ ${args}`;
     }
   };
   return /* @__PURE__ */ jsxs8(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ jsx16(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(Tooltip, { children: [
-      /* @__PURE__ */ jsx16(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx17(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(Tooltip, { children: [
+      /* @__PURE__ */ jsx17(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(
         Button,
         {
           variant: "outline",
@@ -80757,8 +80824,8 @@ ${args}`;
           className: "relative bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm shadow-sm hover:bg-white dark:hover:bg-zinc-900",
           onClick: () => setIsOpen(true),
           children: [
-            /* @__PURE__ */ jsx16(TerminalIcon, { className: "size-4" }),
-            totalCount > 0 && /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17(TerminalIcon, { className: "size-4" }),
+            totalCount > 0 && /* @__PURE__ */ jsx17(
               "span",
               {
                 className: cn(
@@ -80771,7 +80838,7 @@ ${args}`;
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx16(TooltipContent, { children: /* @__PURE__ */ jsxs8("div", { className: "text-xs space-y-1", children: [
+      /* @__PURE__ */ jsx17(TooltipContent, { children: /* @__PURE__ */ jsxs8("div", { className: "text-xs space-y-1", children: [
         /* @__PURE__ */ jsxs8("p", { className: "font-semibold", children: [
           totalCount,
           " console ",
@@ -80800,7 +80867,7 @@ ${args}`;
         className: "flex flex-col p-0 transition-none m-0 gap-0",
         style: { height },
         children: [
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(
             "div",
             {
               className: "h-1.5 w-full shrink-0 cursor-ns-resize bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors",
@@ -80810,7 +80877,7 @@ ${args}`;
           /* @__PURE__ */ jsxs8(SheetHeader, { className: "px-4 py-4 m-0 border-b border-zinc-200 dark:border-zinc-800 shrink-0", children: [
             /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsxs8(SheetTitle, { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx16(TerminalIcon, { className: "size-4" }),
+                /* @__PURE__ */ jsx17(TerminalIcon, { className: "size-4" }),
                 "Widget Console Logs",
                 logs.length > 0 && /* @__PURE__ */ jsxs8("span", { className: "text-sm font-normal text-zinc-500 dark:text-zinc-400", children: [
                   "(",
@@ -80822,7 +80889,7 @@ ${args}`;
               ] }),
               /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-4 pr-4", children: [
                 /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx16(
+                  /* @__PURE__ */ jsx17(
                     Switch,
                     {
                       id: "proxy-console-toggle",
@@ -80830,7 +80897,7 @@ ${args}`;
                       onCheckedChange: setProxyToPageConsole
                     }
                   ),
-                  /* @__PURE__ */ jsx16(
+                  /* @__PURE__ */ jsx17(
                     Label2,
                     {
                       htmlFor: "proxy-console-toggle",
@@ -80848,7 +80915,7 @@ ${args}`;
                       onClick: copyAllLogs,
                       className: "-my-2",
                       children: [
-                        /* @__PURE__ */ jsx16(Copy2, { className: "size-4 mr-1" }),
+                        /* @__PURE__ */ jsx17(Copy2, { className: "size-4 mr-1" }),
                         "Copy All"
                       ]
                     }
@@ -80861,7 +80928,7 @@ ${args}`;
                       onClick: clearLogs,
                       className: "-my-2",
                       children: [
-                        /* @__PURE__ */ jsx16(TrashIcon, { className: "size-4 mr-1" }),
+                        /* @__PURE__ */ jsx17(TrashIcon, { className: "size-4 mr-1" }),
                         "Clear"
                       ]
                     }
@@ -80880,7 +80947,7 @@ ${args}`;
                   ),
                   children: [
                     "All",
-                    totalCount > 0 && /* @__PURE__ */ jsx16("span", { className: "ml-1 text-[10px] opacity-70", children: totalCount })
+                    totalCount > 0 && /* @__PURE__ */ jsx17("span", { className: "ml-1 text-[10px] opacity-70", children: totalCount })
                   ]
                 }
               ),
@@ -80895,8 +80962,8 @@ ${args}`;
                       activeFilter === level ? "bg-zinc-200 dark:bg-zinc-700 text-zinc-900 dark:text-zinc-100" : "text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx16("span", { className: cn(count > 0 && levelFilterColors[level]), children: level.charAt(0).toUpperCase() + level.slice(1) }),
-                      count > 0 && /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17("span", { className: cn(count > 0 && levelFilterColors[level]), children: level.charAt(0).toUpperCase() + level.slice(1) }),
+                      count > 0 && /* @__PURE__ */ jsx17(
                         "span",
                         {
                           className: cn(
@@ -80912,8 +80979,8 @@ ${args}`;
                 );
               }),
               /* @__PURE__ */ jsxs8("div", { className: "ml-auto flex items-center gap-1 relative", children: [
-                /* @__PURE__ */ jsx16(Search, { className: "absolute left-2 size-3 text-zinc-400 dark:text-zinc-500 pointer-events-none" }),
-                /* @__PURE__ */ jsx16(
+                /* @__PURE__ */ jsx17(Search, { className: "absolute left-2 size-3 text-zinc-400 dark:text-zinc-500 pointer-events-none" }),
+                /* @__PURE__ */ jsx17(
                   "input",
                   {
                     type: "text",
@@ -80923,28 +80990,28 @@ ${args}`;
                     className: "pl-6 pr-6 py-0.5 text-xs rounded border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:outline-none focus:ring-1 focus:ring-zinc-400 dark:focus:ring-zinc-500 w-44"
                   }
                 ),
-                searchQuery && /* @__PURE__ */ jsx16(
+                searchQuery && /* @__PURE__ */ jsx17(
                   "button",
                   {
                     onClick: () => setSearchQuery(""),
                     "aria-label": "Clear search",
                     className: "absolute right-1.5 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300",
-                    children: /* @__PURE__ */ jsx16(X, { className: "size-3" })
+                    children: /* @__PURE__ */ jsx17(X, { className: "size-3" })
                   }
                 )
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(
             "div",
             {
               ref: scrollContainerRef,
               className: "flex-1 overflow-auto bg-zinc-50 dark:bg-zinc-950",
-              children: filteredLogs.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "flex items-center justify-center h-full text-zinc-500 dark:text-zinc-400", children: /* @__PURE__ */ jsxs8("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsx16(TerminalIcon, { className: "size-8 mx-auto mb-2 opacity-50" }),
-                /* @__PURE__ */ jsx16("p", { className: "text-sm", children: logs.length === 0 ? "No console logs yet" : searchQuery ? `No logs match "${searchQuery}"` : "No logs match the current filter" }),
-                /* @__PURE__ */ jsx16("p", { className: "text-xs mt-1", children: logs.length === 0 ? "Logs from iframes will appear here" : `${logs.length} log${logs.length !== 1 ? "s" : ""} hidden by filter` })
-              ] }) }) : /* @__PURE__ */ jsx16("div", { children: filteredLogs.map((log) => /* @__PURE__ */ jsx16(LogEntry, { log }, log.id)) })
+              children: filteredLogs.length === 0 ? /* @__PURE__ */ jsx17("div", { className: "flex items-center justify-center h-full text-zinc-500 dark:text-zinc-400", children: /* @__PURE__ */ jsxs8("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsx17(TerminalIcon, { className: "size-8 mx-auto mb-2 opacity-50" }),
+                /* @__PURE__ */ jsx17("p", { className: "text-sm", children: logs.length === 0 ? "No console logs yet" : searchQuery ? `No logs match "${searchQuery}"` : "No logs match the current filter" }),
+                /* @__PURE__ */ jsx17("p", { className: "text-xs mt-1", children: logs.length === 0 ? "Logs from iframes will appear here" : `${logs.length} log${logs.length !== 1 ? "s" : ""} hidden by filter` })
+              ] }) }) : /* @__PURE__ */ jsx17("div", { children: filteredLogs.map((log) => /* @__PURE__ */ jsx17(LogEntry, { log }, log.id)) })
             }
           )
         ]
@@ -81159,11 +81226,11 @@ Based on this information, suggest 3-5 common customizable properties like theme
 
 // src/client/components/resources/PropsConfigDialog.tsx
 import { Loader2, Plus as Plus2, Sparkles, Trash2 } from "lucide-react";
-import { useEffect as useEffect4, useMemo as useMemo3, useState as useState6 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo3, useState as useState7 } from "react";
 import { toast as toast2 } from "sonner";
 
 // src/client/components/shared/SchemaFormField.tsx
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function resolveRef2(schema, rootSchema) {
   if (!schema?.$ref) return schema;
   const ref = schema.$ref;
@@ -81221,9 +81288,9 @@ function SchemaFormField({
     return /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxs9(Label2, { htmlFor: name, className: "text-sm font-medium", children: [
         name,
-        required && /* @__PURE__ */ jsx17("span", { className: "text-red-500 ml-1", children: "*" })
+        required && /* @__PURE__ */ jsx18("span", { className: "text-red-500 ml-1", children: "*" })
       ] }),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(
         Textarea,
         {
           id: name,
@@ -81234,14 +81301,14 @@ function SchemaFormField({
           disabled
         }
       ),
-      typedProp?.description && /* @__PURE__ */ jsx17("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: typedProp.description })
+      typedProp?.description && /* @__PURE__ */ jsx18("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: typedProp.description })
     ] });
   }
   if (isEnum && enumValues) {
     return /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxs9(Label2, { htmlFor: name, className: "text-sm font-medium", children: [
         name,
-        required && /* @__PURE__ */ jsx17("span", { className: "text-red-500 ml-1", children: "*" })
+        required && /* @__PURE__ */ jsx18("span", { className: "text-red-500 ml-1", children: "*" })
       ] }),
       /* @__PURE__ */ jsxs9(
         Select,
@@ -81250,25 +81317,25 @@ function SchemaFormField({
           onValueChange: onChange,
           disabled,
           children: [
-            /* @__PURE__ */ jsx17(SelectTrigger, { id: name, className: "w-full", children: /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx18(SelectTrigger, { id: name, className: "w-full", children: /* @__PURE__ */ jsx18(
               SelectValue,
               {
                 placeholder: typedProp.description || "Select an option"
               }
             ) }),
-            /* @__PURE__ */ jsx17(SelectContent, { children: enumValues.map((option, index) => /* @__PURE__ */ jsx17(SelectItem, { value: option, children: typedProp.enumNames?.[index] || option }, option)) })
+            /* @__PURE__ */ jsx18(SelectContent, { children: enumValues.map((option, index) => /* @__PURE__ */ jsx18(SelectItem, { value: option, children: typedProp.enumNames?.[index] || option }, option)) })
           ]
         }
       ),
-      typedProp.description && /* @__PURE__ */ jsx17("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: typedProp.description })
+      typedProp.description && /* @__PURE__ */ jsx18("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: typedProp.description })
     ] });
   }
   return /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxs9(Label2, { htmlFor: name, className: "text-sm font-medium", children: [
       name,
-      required && /* @__PURE__ */ jsx17("span", { className: "text-red-500 ml-1", children: "*" })
+      required && /* @__PURE__ */ jsx18("span", { className: "text-red-500 ml-1", children: "*" })
     ] }),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       Input,
       {
         id: name,
@@ -81279,12 +81346,12 @@ function SchemaFormField({
         disabled
       }
     ),
-    typedProp?.description && /* @__PURE__ */ jsx17("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: typedProp.description })
+    typedProp?.description && /* @__PURE__ */ jsx18("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: typedProp.description })
   ] });
 }
 
 // src/client/components/resources/PropsConfigDialog.tsx
-import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function PropsConfigDialog({
   open,
   onOpenChange,
@@ -81389,15 +81456,15 @@ function PropsConfigDialog({
     return null;
   }, [resourceAnnotations, resource.annotations, resource.uri, resource.name]);
   const hasSchema = !!propsSchema;
-  const [presetName, setPresetName] = useState6("");
-  const [schemaValues, setSchemaValues] = useState6({});
-  const [propPairs, setPropPairs] = useState6([
+  const [presetName, setPresetName] = useState7("");
+  const [schemaValues, setSchemaValues] = useState7({});
+  const [propPairs, setPropPairs] = useState7([
     { id: crypto.randomUUID(), key: "", value: "" }
   ]);
-  const [isGenerating, setIsGenerating] = useState6(false);
-  const [generationError, setGenerationError] = useState6(null);
+  const [isGenerating, setIsGenerating] = useState7(false);
+  const [generationError, setGenerationError] = useState7(null);
   const { generateProps, isAvailable } = usePropsLLM({ llmConfig });
-  useEffect4(() => {
+  useEffect5(() => {
     if (open) {
       if (editingPreset) {
         setPresetName(editingPreset.name);
@@ -81533,14 +81600,14 @@ function PropsConfigDialog({
       description: `Preset "${preset.name}" saved successfully.`
     });
   };
-  return /* @__PURE__ */ jsx18(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx19(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs10(
     DialogContent,
     {
       className: "sm:max-w-[600px] max-h-[80vh] flex flex-col",
       "data-testid": "props-config-dialog",
       children: [
         /* @__PURE__ */ jsxs10(DialogHeader, { children: [
-          /* @__PURE__ */ jsx18(DialogTitle, { children: editingPreset ? "Edit Preset" : "Create Props Preset" }),
+          /* @__PURE__ */ jsx19(DialogTitle, { children: editingPreset ? "Edit Preset" : "Create Props Preset" }),
           /* @__PURE__ */ jsxs10(DialogDescription, { children: [
             "Configure props for ",
             resource.name || resource.uri,
@@ -81549,8 +81616,8 @@ function PropsConfigDialog({
         ] }),
         /* @__PURE__ */ jsxs10("div", { className: "flex-1 overflow-y-auto space-y-4 py-4", children: [
           /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx18(Label2, { htmlFor: "preset-name", children: "Preset Name" }),
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx19(Label2, { htmlFor: "preset-name", children: "Preset Name" }),
+            /* @__PURE__ */ jsx19(
               Input,
               {
                 id: "preset-name",
@@ -81564,7 +81631,7 @@ function PropsConfigDialog({
           ] }),
           /* @__PURE__ */ jsxs10("div", { className: "space-y-2 p-3 bg-muted rounded-lg", children: [
             /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsx18(Label2, { className: "text-sm font-medium", children: "Generate with AI" }),
+              /* @__PURE__ */ jsx19(Label2, { className: "text-sm font-medium", children: "Generate with AI" }),
               isAvailable && /* @__PURE__ */ jsxs10("span", { className: "text-xs text-muted-foreground", children: [
                 "Using ",
                 llmConfig?.provider,
@@ -81573,7 +81640,7 @@ function PropsConfigDialog({
                 ")"
               ] })
             ] }),
-            isAvailable ? /* @__PURE__ */ jsx18(
+            isAvailable ? /* @__PURE__ */ jsx19(
               Button,
               {
                 onClick: handleGenerateWithLLM,
@@ -81588,17 +81655,17 @@ function PropsConfigDialog({
                     "data-testid": "props-config-generating",
                     className: "flex items-center gap-2",
                     children: [
-                      /* @__PURE__ */ jsx18(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+                      /* @__PURE__ */ jsx19(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
                       "Generating..."
                     ]
                   }
                 ) : /* @__PURE__ */ jsxs10(Fragment5, { children: [
-                  /* @__PURE__ */ jsx18(Sparkles, { className: "h-4 w-4 mr-2" }),
+                  /* @__PURE__ */ jsx19(Sparkles, { className: "h-4 w-4 mr-2" }),
                   "Generate Props with LLM"
                 ] })
               }
-            ) : /* @__PURE__ */ jsx18("p", { className: "text-xs text-muted-foreground", children: "LLM not configured. Please configure LLM in the Chat tab to use this feature." }),
-            generationError && /* @__PURE__ */ jsx18(
+            ) : /* @__PURE__ */ jsx19("p", { className: "text-xs text-muted-foreground", children: "LLM not configured. Please configure LLM in the Chat tab to use this feature." }),
+            generationError && /* @__PURE__ */ jsx19(
               "p",
               {
                 className: "text-xs text-destructive",
@@ -81608,11 +81675,11 @@ function PropsConfigDialog({
             )
           ] }),
           /* @__PURE__ */ jsxs10("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsx18(Label2, { className: "text-sm font-medium", children: "Props" }),
+            /* @__PURE__ */ jsx19(Label2, { className: "text-sm font-medium", children: "Props" }),
             hasSchema ? (
               // Schema-based form
-              /* @__PURE__ */ jsx18("div", { className: "space-y-4", children: Object.entries(propsSchema.properties || {}).map(
-                ([key, propDef]) => /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx19("div", { className: "space-y-4", children: Object.entries(propsSchema.properties || {}).map(
+                ([key, propDef]) => /* @__PURE__ */ jsx19(
                   SchemaFormField,
                   {
                     name: key,
@@ -81629,7 +81696,7 @@ function PropsConfigDialog({
             ) : (
               // Generic key-value form
               /* @__PURE__ */ jsxs10(Fragment5, { children: [
-                /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs10(
+                /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs10(
                   Button,
                   {
                     onClick: handleAddPair,
@@ -81638,14 +81705,14 @@ function PropsConfigDialog({
                     disabled: isGenerating,
                     "data-testid": "props-config-add-prop",
                     children: [
-                      /* @__PURE__ */ jsx18(Plus2, { className: "h-4 w-4 mr-1" }),
+                      /* @__PURE__ */ jsx19(Plus2, { className: "h-4 w-4 mr-1" }),
                       "Add Prop"
                     ]
                   }
                 ) }),
                 propPairs.map((pair, index) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsxs10("div", { className: "flex-1 grid grid-cols-2 gap-2", children: [
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       Input,
                       {
                         placeholder: "Key",
@@ -81655,7 +81722,7 @@ function PropsConfigDialog({
                         "data-testid": `props-config-key-${index}`
                       }
                     ),
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       Input,
                       {
                         placeholder: "Value",
@@ -81666,7 +81733,7 @@ function PropsConfigDialog({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx18(
+                  /* @__PURE__ */ jsx19(
                     Button,
                     {
                       variant: "ghost",
@@ -81675,7 +81742,7 @@ function PropsConfigDialog({
                       disabled: propPairs.length === 1 || isGenerating,
                       className: "h-9 w-9 p-0",
                       "data-testid": `props-config-remove-${index}`,
-                      children: /* @__PURE__ */ jsx18(Trash2, { className: "h-4 w-4 text-muted-foreground" })
+                      children: /* @__PURE__ */ jsx19(Trash2, { className: "h-4 w-4 text-muted-foreground" })
                     }
                   )
                 ] }, pair.id))
@@ -81684,7 +81751,7 @@ function PropsConfigDialog({
           ] })
         ] }),
         /* @__PURE__ */ jsxs10(DialogFooter, { children: [
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             Button,
             {
               variant: "outline",
@@ -81712,71 +81779,6 @@ function PropsConfigDialog({
   ) });
 }
 
-// src/client/context/ThemeContext.tsx
-import { createContext as createContext2, use as use3, useEffect as useEffect5, useState as useState7 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var ThemeContext = createContext2(void 0);
-function useTheme() {
-  const context2 = use3(ThemeContext);
-  if (context2 === void 0) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context2;
-}
-function ThemeProvider({
-  children,
-  defaultTheme = "system",
-  storageKey = "theme",
-  forcedTheme
-}) {
-  const [theme, setTheme] = useState7(forcedTheme || defaultTheme);
-  const [mounted, setMounted] = useState7(false);
-  const getSystemTheme = () => {
-    if (typeof window === "undefined") return "light";
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  };
-  const resolvedTheme = theme === "system" ? getSystemTheme() : theme;
-  const applyTheme = (newTheme) => {
-    const root = document.documentElement;
-    const actualTheme = newTheme === "system" ? getSystemTheme() : newTheme;
-    root.classList.remove("light", "dark");
-    root.classList.add(actualTheme);
-    if (!forcedTheme) {
-      localStorage.setItem(storageKey, newTheme);
-    }
-  };
-  useEffect5(() => {
-    setMounted(true);
-    const storedTheme = localStorage.getItem(storageKey);
-    const initialTheme = forcedTheme || storedTheme || defaultTheme;
-    setTheme(initialTheme);
-    applyTheme(initialTheme);
-  }, [defaultTheme, storageKey, forcedTheme]);
-  useEffect5(() => {
-    if (theme !== "system") return;
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => {
-      applyTheme("system");
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [theme]);
-  useEffect5(() => {
-    if (!mounted) return;
-    applyTheme(theme);
-  }, [theme, mounted]);
-  const handleSetTheme = (newTheme) => {
-    if (forcedTheme) {
-      console.warn(
-        "[ThemeProvider] Theme is forced via URL parameter, ignoring setTheme call"
-      );
-      return;
-    }
-    setTheme(newTheme);
-  };
-  return /* @__PURE__ */ jsx19(ThemeContext, { value: { theme, setTheme: handleSetTheme, resolvedTheme }, children });
-}
-
 // src/client/hooks/usePrismTheme.ts
 import { githubGist } from "react-syntax-highlighter/dist/cjs/styles/hljs";
 var githubGistDark = {
@@ -82319,6 +82321,7 @@ function MCPAppsDebugControls({
   protocol = "mcp-apps",
   onUpdateGlobals
 }) {
+  const { resolvedTheme, setTheme } = useTheme();
   const { playground, updatePlaygroundSettings, widgets, clearCspViolations } = useWidgetDebug();
   const widget = widgets.get(toolCallId);
   const cspViolations = widget?.cspViolations ?? [];
@@ -82519,6 +82522,29 @@ function MCPAppsDebugControls({
         }
       )
     ] }),
+    /* @__PURE__ */ jsxs13(Tooltip, { children: [
+      /* @__PURE__ */ jsx24(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx24(
+        Button,
+        {
+          "data-testid": "debugger-theme-button",
+          variant: "outline",
+          size: "sm",
+          className: "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",
+          onClick: () => {
+            const newTheme = resolvedTheme === "dark" ? "light" : "dark";
+            setTheme(newTheme);
+            if (onUpdateGlobals) {
+              onUpdateGlobals({ theme: newTheme });
+            }
+          },
+          children: resolvedTheme === "dark" ? /* @__PURE__ */ jsx24(Moon, { className: "size-3.5" }) : /* @__PURE__ */ jsx24(Sun, { className: "size-3.5" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs13(TooltipContent, { children: [
+        "Theme: ",
+        resolvedTheme === "dark" ? "Dark" : "Light"
+      ] })
+    ] }),
     /* @__PURE__ */ jsxs13(Dialog, { open: localeDialogOpen, onOpenChange: setLocaleDialogOpen, children: [
       /* @__PURE__ */ jsxs13(Tooltip, { children: [
         /* @__PURE__ */ jsx24(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx24(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx24(