From d8092cf00dcf68f4343bc6ad413c51a6304d228c Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Mon, 26 Jan 2026 20:30:40 +0000
Subject: [PATCH 01/33] Fix MCP Apps rendering issue and add comprehensive
 logging

- Fixed AppRenderer useEffect dependency array to include resourceContent
  This ensures the component re-evaluates when resource content arrives
- Added detailed console logging throughout the app lifecycle:
  * Resource fetch and response tracking in App.tsx
  * Setup conditions and AppBridge creation in AppRenderer.tsx
  * HTML parsing and iframe rendering steps
  * PostMessageTransport and AppBridge connection status
  * App tool filtering and selection in AppsTab.tsx
- Refactored AppsTab selectedTool rendering for better tracking

The issue was that resourceContent prop updates weren't triggering
the AppRenderer setup effect. Now the effect properly responds to
both resourceUri and resourceContent changes.

Co-authored-by: Cliff Hall <cliffhall@users.noreply.github.com>
---
 client/package.json                   |   1 +
 client/src/App.tsx                    |  55 ++++-
 client/src/components/AppRenderer.tsx | 254 ++++++++++++++++++++++
 client/src/components/AppsTab.tsx     | 157 ++++++++++++++
 package-lock.json                     | 300 ++++++++++++++++++++++----
 5 files changed, 723 insertions(+), 44 deletions(-)
 create mode 100644 client/src/components/AppRenderer.tsx
 create mode 100644 client/src/components/AppsTab.tsx

diff --git a/client/package.json b/client/package.json
index 1feec2122..0d2a6a26e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,6 +25,7 @@
     "cleanup:e2e": "node e2e/global-teardown.js"
   },
   "dependencies": {
+    "@modelcontextprotocol/ext-apps": "^1.0.0",
     "@modelcontextprotocol/sdk": "^1.25.2",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.3",
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 39fc2812a..0a8d536a4 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -51,6 +51,7 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import {
+  AppWindow,
   Bell,
   Files,
   FolderTree,
@@ -75,6 +76,7 @@ import SamplingTab, { PendingRequest } from "./components/SamplingTab";
 import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 import TasksTab from "./components/TasksTab";
+import AppsTab from "./components/AppsTab";
 import { InspectorConfig } from "./lib/configurationTypes";
 import {
   getMCPProxyAddress,
@@ -308,11 +310,13 @@ const App = () => {
       ...(serverCapabilities?.prompts ? ["prompts"] : []),
       ...(serverCapabilities?.tools ? ["tools"] : []),
       ...(serverCapabilities?.tasks ? ["tasks"] : []),
+      "apps",
       "ping",
       "sampling",
       "elicitations",
       "roots",
       "auth",
+      "metadata",
     ];
 
     if (!validTabs.includes(originatingTab)) return;
@@ -440,11 +444,13 @@ const App = () => {
         ...(serverCapabilities?.prompts ? ["prompts"] : []),
         ...(serverCapabilities?.tools ? ["tools"] : []),
         ...(serverCapabilities?.tasks ? ["tasks"] : []),
+        "apps",
         "ping",
         "sampling",
         "elicitations",
         "roots",
         "auth",
+        "metadata",
       ];
 
       const isValidTab = validTabs.includes(hash);
@@ -473,6 +479,13 @@ const App = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mcpClient, activeTab]);
 
+  useEffect(() => {
+    if (mcpClient && activeTab === "apps" && serverCapabilities?.tools) {
+      void listTools();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mcpClient, activeTab, serverCapabilities?.tools]);
+
   useEffect(() => {
     localStorage.setItem("lastCommand", command);
   }, [command]);
@@ -757,11 +770,13 @@ const App = () => {
             ...(serverCapabilities?.prompts ? ["prompts"] : []),
             ...(serverCapabilities?.tools ? ["tools"] : []),
             ...(serverCapabilities?.tasks ? ["tasks"] : []),
+            "apps",
             "ping",
             "sampling",
             "elicitations",
             "roots",
             "auth",
+            "metadata",
           ];
 
           if (validTabs.includes(originatingTab)) {
@@ -851,6 +866,7 @@ const App = () => {
   };
 
   const readResource = async (uri: string) => {
+    console.log("[App] Reading resource:", uri);
     lastToolCallOriginTabRef.current = currentTabRef.current;
 
     const response = await sendMCPRequest(
@@ -861,12 +877,25 @@ const App = () => {
       ReadResourceResultSchema,
       "resources",
     );
+    console.log("[App] Resource read response:", {
+      uri,
+      responseLength: JSON.stringify(response).length,
+      hasContents: !!(response as { contents?: unknown[] }).contents,
+    });
     const content = JSON.stringify(response, null, 2);
     setResourceContent(content);
-    setResourceContentMap((prev) => ({
-      ...prev,
-      [uri]: content,
-    }));
+    setResourceContentMap((prev) => {
+      const updated = {
+        ...prev,
+        [uri]: content,
+      };
+      console.log("[App] Updated resourceContentMap:", {
+        uri,
+        contentLength: content.length,
+        mapKeys: Object.keys(updated),
+      });
+      return updated;
+    });
   };
 
   const subscribeToResource = async (uri: string) => {
@@ -1308,6 +1337,10 @@ const App = () => {
                   <ListTodo className="w-4 h-4 mr-2" />
                   Tasks
                 </TabsTrigger>
+                <TabsTrigger value="apps">
+                  <AppWindow className="w-4 h-4 mr-2" />
+                  Apps
+                </TabsTrigger>
                 <TabsTrigger value="ping">
                   <Bell className="w-4 h-4 mr-2" />
                   Ping
@@ -1497,6 +1530,20 @@ const App = () => {
                       error={errors.tasks}
                       nextCursor={nextTaskCursor}
                     />
+                    <AppsTab
+                      tools={tools}
+                      listTools={() => {
+                        clearError("tools");
+                        listTools();
+                      }}
+                      error={errors.tools}
+                      mcpClient={mcpClient}
+                      onReadResource={(uri: string) => {
+                        clearError("resources");
+                        readResource(uri);
+                      }}
+                      resourceContentMap={resourceContentMap}
+                    />
                     <ConsoleTab />
                     <PingTab
                       onPingClick={() => {
diff --git a/client/src/components/AppRenderer.tsx b/client/src/components/AppRenderer.tsx
new file mode 100644
index 000000000..64654c8f2
--- /dev/null
+++ b/client/src/components/AppRenderer.tsx
@@ -0,0 +1,254 @@
+import { useEffect, useRef, useState } from "react";
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { Tool } from "@modelcontextprotocol/sdk/types.js";
+import {
+  AppBridge,
+  PostMessageTransport,
+  getToolUiResourceUri,
+  buildAllowAttribute,
+} from "@modelcontextprotocol/ext-apps/app-bridge";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { AlertCircle, Loader2 } from "lucide-react";
+
+interface AppRendererProps {
+  tool: Tool;
+  mcpClient: Client | null;
+  onReadResource: (uri: string) => void;
+  resourceContent: string;
+}
+
+interface UIResourceMeta {
+  ui?: {
+    resourceUri?: string;
+    permissions?: Record<string, unknown>;
+    csp?: string;
+  };
+}
+
+const AppRenderer = ({
+  tool,
+  mcpClient,
+  onReadResource,
+  resourceContent,
+}: AppRendererProps) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const bridgeRef = useRef<AppBridge | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [initialized, setInitialized] = useState(false);
+
+  // Extract UI metadata from tool
+  const resourceUri = getToolUiResourceUri(tool);
+  const meta = (tool as Tool & { _meta?: UIResourceMeta })._meta;
+  const permissions = meta?.ui?.permissions;
+
+  // Fetch UI resource when component mounts or tool changes
+  useEffect(() => {
+    console.log("[AppRenderer] Resource fetch check:", {
+      resourceUri,
+      hasResourceContent: !!resourceContent,
+      resourceContentLength: resourceContent?.length || 0,
+    });
+
+    if (resourceUri && !resourceContent) {
+      console.log("[AppRenderer] Fetching resource:", resourceUri);
+      setLoading(true);
+      setError(null);
+      onReadResource(resourceUri);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [resourceUri, resourceContent]);
+
+  // Set up AppBridge and render the app
+  useEffect(() => {
+    console.log("[AppRenderer] Setup check:", {
+      hasResourceContent: !!resourceContent,
+      hasIframe: !!iframeRef.current,
+      hasMcpClient: !!mcpClient,
+      resourceContentPreview: resourceContent?.substring(0, 100),
+    });
+
+    if (!resourceContent || !iframeRef.current || !mcpClient) {
+      console.log("[AppRenderer] Setup conditions not met, skipping");
+      return;
+    }
+
+    console.log("[AppRenderer] Starting app setup");
+    const iframe = iframeRef.current;
+    let bridge: AppBridge | null = null;
+    let transport: PostMessageTransport | null = null;
+
+    const setupApp = async () => {
+      try {
+        console.log("[AppRenderer] Creating AppBridge...");
+        // Create AppBridge with the MCP client
+        bridge = new AppBridge(
+          mcpClient,
+          { name: "MCP Inspector", version: "0.19.0" },
+          {
+            openLinks: {},
+            serverTools: {},
+            logging: {},
+          },
+          {
+            hostContext: {
+              theme: document.documentElement.classList.contains("dark")
+                ? "dark"
+                : "light",
+            },
+          },
+        );
+
+        // Set up event handlers
+        bridge.oninitialized = () => {
+          console.log("MCP App initialized");
+          setInitialized(true);
+          setLoading(false);
+        };
+
+        bridge.onerror = (error: Error) => {
+          console.error("MCP App error:", error);
+          setError(error.message || "An error occurred");
+        };
+
+        // Create the iframe document with the UI resource content
+        const iframeDoc =
+          iframe.contentDocument || iframe.contentWindow?.document;
+        if (!iframeDoc) {
+          throw new Error("Could not access iframe document");
+        }
+
+        // Parse the resource content to extract HTML
+        let htmlContent = resourceContent;
+        console.log("[AppRenderer] Parsing resource content...");
+        try {
+          const parsed = JSON.parse(resourceContent);
+          console.log("[AppRenderer] Parsed JSON:", {
+            hasContents: !!parsed.contents,
+            isArray: Array.isArray(parsed.contents),
+            contentsLength: parsed.contents?.length,
+          });
+          if (parsed.contents && Array.isArray(parsed.contents)) {
+            // MCP resource response format
+            const textContent = parsed.contents.find(
+              (c: { type: string; text?: string }) =>
+                c.type === "text" && c.text,
+            );
+            if (textContent?.text) {
+              htmlContent = textContent.text;
+              console.log(
+                "[AppRenderer] Extracted HTML from contents, length:",
+                htmlContent.length,
+              );
+            }
+          }
+        } catch (err) {
+          console.log("[AppRenderer] Not JSON, using content as-is:", err);
+        }
+
+        // Write the HTML content to the iframe
+        console.log("[AppRenderer] Writing HTML to iframe...");
+        iframeDoc.open();
+        iframeDoc.write(htmlContent);
+        iframeDoc.close();
+        console.log("[AppRenderer] HTML written to iframe");
+
+        // Wait for iframe to load
+        await new Promise<void>((resolve) => {
+          if (iframe.contentWindow) {
+            iframe.contentWindow.addEventListener("load", () => resolve(), {
+              once: true,
+            });
+          } else {
+            resolve();
+          }
+        });
+
+        // Create PostMessageTransport for communication
+        if (!iframe.contentWindow) {
+          throw new Error("Iframe contentWindow not available");
+        }
+
+        console.log("[AppRenderer] Creating PostMessageTransport...");
+        transport = new PostMessageTransport(
+          iframe.contentWindow,
+          iframe.contentWindow,
+        );
+
+        // Connect the bridge
+        console.log("[AppRenderer] Connecting AppBridge...");
+        await bridge.connect(transport);
+        console.log("[AppRenderer] AppBridge connected successfully");
+
+        bridgeRef.current = bridge;
+      } catch (err) {
+        console.error("Error setting up MCP App:", err);
+        setError(err instanceof Error ? err.message : "Failed to set up app");
+        setLoading(false);
+      }
+    };
+
+    setupApp();
+
+    // Cleanup
+    return () => {
+      if (bridge) {
+        bridge.close().catch(console.error);
+      }
+      bridgeRef.current = null;
+      setInitialized(false);
+    };
+  }, [resourceContent, mcpClient]);
+
+  // Build iframe attributes
+  const allowAttribute = buildAllowAttribute(permissions);
+
+  if (!resourceUri) {
+    return (
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertDescription>
+          No UI resource URI found in tool metadata
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {loading && (
+        <Alert>
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <AlertDescription>Loading MCP App...</AlertDescription>
+        </Alert>
+      )}
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      <iframe
+        ref={iframeRef}
+        className="w-full flex-1 border rounded"
+        sandbox="allow-scripts allow-same-origin"
+        allow={allowAttribute}
+        style={{
+          minHeight: "400px",
+          display: loading ? "none" : "block",
+        }}
+        title={`MCP App: ${tool.name}`}
+      />
+
+      {initialized && (
+        <div className="text-xs text-muted-foreground mt-2">
+          App connected • {tool.name}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AppRenderer;
diff --git a/client/src/components/AppsTab.tsx b/client/src/components/AppsTab.tsx
new file mode 100644
index 000000000..9bbb167e9
--- /dev/null
+++ b/client/src/components/AppsTab.tsx
@@ -0,0 +1,157 @@
+import { useEffect, useState, useCallback } from "react";
+import { TabsContent } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { AlertCircle, RefreshCw, X } from "lucide-react";
+import { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import AppRenderer from "./AppRenderer";
+
+interface AppsTabProps {
+  tools: Tool[];
+  listTools: () => void;
+  error: string | null;
+  mcpClient: Client | null;
+  onReadResource: (uri: string) => void;
+  resourceContentMap: Record<string, string>;
+}
+
+// Type guard to check if a tool has UI metadata
+const hasUIMetadata = (tool: Tool): boolean => {
+  const meta = (tool as { _meta?: { ui?: { resourceUri?: string } } })._meta;
+  return !!meta?.ui?.resourceUri;
+};
+
+const AppsTab = ({
+  tools,
+  listTools,
+  error,
+  mcpClient,
+  onReadResource,
+  resourceContentMap,
+}: AppsTabProps) => {
+  const [appTools, setAppTools] = useState<Tool[]>([]);
+  const [selectedTool, setSelectedTool] = useState<Tool | null>(null);
+
+  // Filter tools that have UI metadata
+  useEffect(() => {
+    const filtered = tools.filter(hasUIMetadata);
+    console.log("[AppsTab] Filtered app tools:", {
+      totalTools: tools.length,
+      appTools: filtered.length,
+      appToolNames: filtered.map((t) => t.name),
+    });
+    setAppTools(filtered);
+
+    // If current selected tool is no longer available, reset selection
+    if (selectedTool && !filtered.find((t) => t.name === selectedTool.name)) {
+      setSelectedTool(null);
+    }
+  }, [tools, selectedTool]);
+
+  const handleRefresh = useCallback(() => {
+    listTools();
+  }, [listTools]);
+
+  const handleCloseApp = useCallback(() => {
+    setSelectedTool(null);
+  }, []);
+
+  return (
+    <TabsContent value="apps" className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-2xl font-bold">MCP Apps</h2>
+        <Button onClick={handleRefresh} variant="outline" size="sm">
+          <RefreshCw className="w-4 h-4 mr-2" />
+          Refresh
+        </Button>
+      </div>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {appTools.length === 0 ? (
+        <Alert>
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            No MCP Apps available. Apps are tools that include a{" "}
+            <code className="text-xs bg-muted px-1 py-0.5 rounded">
+              _meta.ui.resourceUri
+            </code>{" "}
+            field in their tool definition.
+          </AlertDescription>
+        </Alert>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {appTools.map((tool) => {
+            const meta = (tool as { _meta?: { ui?: { resourceUri?: string } } })
+              ._meta;
+            const resourceUri = meta?.ui?.resourceUri || "";
+
+            return (
+              <div
+                key={tool.name}
+                className="border rounded-lg p-4 hover:border-primary cursor-pointer transition-colors"
+                onClick={() => setSelectedTool(tool)}
+              >
+                <h3 className="font-semibold text-lg mb-2">{tool.name}</h3>
+                {tool.description && (
+                  <p className="text-sm text-muted-foreground mb-3">
+                    {tool.description}
+                  </p>
+                )}
+                <div className="text-xs text-muted-foreground">
+                  <span className="font-mono bg-muted px-1 py-0.5 rounded">
+                    {resourceUri}
+                  </span>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {selectedTool &&
+        (() => {
+          const resourceUri =
+            (
+              selectedTool as Tool & {
+                _meta?: { ui?: { resourceUri?: string } };
+              }
+            )._meta?.ui?.resourceUri || "";
+          const content = resourceContentMap[resourceUri] || "";
+
+          console.log("[AppsTab] Rendering app:", {
+            toolName: selectedTool.name,
+            resourceUri,
+            hasContent: !!content,
+            contentLength: content.length,
+            resourceContentMapKeys: Object.keys(resourceContentMap),
+          });
+
+          return (
+            <div className="mt-6 border-t pt-6">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-xl font-semibold">{selectedTool.name}</h3>
+                <Button onClick={handleCloseApp} variant="ghost" size="sm">
+                  <X className="w-4 h-4" />
+                </Button>
+              </div>
+              <AppRenderer
+                tool={selectedTool}
+                mcpClient={mcpClient}
+                onReadResource={onReadResource}
+                resourceContent={content}
+              />
+            </div>
+          );
+        })()}
+    </TabsContent>
+  );
+};
+
+export default AppsTab;
diff --git a/package-lock.json b/package-lock.json
index 0055b4334..eb33add39 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -115,6 +115,7 @@
       "version": "0.19.0",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
+        "@modelcontextprotocol/ext-apps": "^1.0.0",
         "@modelcontextprotocol/sdk": "^1.25.2",
         "@radix-ui/react-checkbox": "^1.1.4",
         "@radix-ui/react-dialog": "^1.1.3",
@@ -227,6 +228,7 @@
       "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@csstools/css-calc": "^2.1.3",
         "@csstools/css-color-parser": "^3.0.9",
@@ -240,7 +242,8 @@
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "dev": true,
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
@@ -273,7 +276,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -819,6 +821,7 @@
         }
       ],
       "license": "MIT-0",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -839,6 +842,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -863,6 +867,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@csstools/color-helpers": "^5.1.0",
         "@csstools/css-calc": "^2.1.4"
@@ -1884,6 +1889,7 @@
       "integrity": "sha512-kazxw2L9IPuZpQ0mEt9lu9Z98SqR74xcagANmMBU16X0lS23yPc0+S6hGLUz8kVRlomZEs/5S/Zlpqwf5yu6OQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/environment": "30.2.0",
         "@jest/fake-timers": "30.2.0",
@@ -1912,6 +1918,7 @@
       "integrity": "sha512-/QPTL7OBJQ5ac09UDRa3EQes4gt1FTEG/8jZ/4v5IVzx+Cv7dLxlVIvfvSVRiiX2drWyXeBjkMSR8hvOWSog5g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/fake-timers": "30.2.0",
         "@jest/types": "30.2.0",
@@ -1928,6 +1935,7 @@
       "integrity": "sha512-HI3tRLjRxAbBy0VO8dqqm7Hb2mIa8d5bg/NJkyQcOk7V118ObQML8RC5luTF/Zsg4474a+gDvhce7eTnP4GhYw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/types": "30.2.0",
         "@sinonjs/fake-timers": "^13.0.0",
@@ -1946,6 +1954,7 @@
       "integrity": "sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@sinclair/typebox": "^0.34.0"
       },
@@ -1959,6 +1968,7 @@
       "integrity": "sha512-H9xg1/sfVvyfU7o3zMfBEjQ1gcsdeTMgqHoYdN79tuLqfTtuu7WckRA1R5whDwOzxaZAeMKTYWqP+WCAi0CHsg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/pattern": "30.0.1",
         "@jest/schemas": "30.0.5",
@@ -1977,7 +1987,8 @@
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.41.tgz",
       "integrity": "sha512-6gS8pZzSXdyRHTIqoqSVknxolr1kzfy4/CeDnrzsVz8TTIWUbOBr6gnzOmTYJ3eXQNh4IYHIGi5aIL7sOZ2G/g==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@jest/environment-jsdom-abstract/node_modules/@sinonjs/fake-timers": {
       "version": "13.0.5",
@@ -1985,6 +1996,7 @@
       "integrity": "sha512-36/hTbH2uaWuGVERyC6da9YwGWnzUZXuPro/F2LfsdOsLnCojz/iSH8MxUt/FD2S5XBSVPhmArFUXcpCQ2Hkiw==",
       "dev": true,
       "license": "BSD-3-Clause",
+      "peer": true,
       "dependencies": {
         "@sinonjs/commons": "^3.0.1"
       }
@@ -1995,6 +2007,7 @@
       "integrity": "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "@types/tough-cookie": "*",
@@ -2007,6 +2020,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -2026,6 +2040,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -2036,6 +2051,7 @@
       "integrity": "sha512-y4DKFLZ2y6DxTWD4cDe07RglV88ZiNEdlRfGtqahfbIjfsw1nMCPx49Uev4IA/hWn3sDKyAnSPwoYSsAEdcimw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@jest/types": "30.2.0",
@@ -2057,6 +2073,7 @@
       "integrity": "sha512-JNNNl2rj4b5ICpmAcq+WbLH83XswjPbjH4T7yvGzfAGCPh1rw+xVNbtk+FnRslvt9lkCcdn9i1oAoKUuFsOxRw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/types": "30.2.0",
         "@types/node": "*",
@@ -2072,6 +2089,7 @@
       "integrity": "sha512-QKNsM0o3Xe6ISQU869e+DhG+4CK/48aHYdJZGlFQVTjnbvgpcKyxpzk29fGiO7i/J8VENZ+d2iGnSsvmuHywlA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/types": "30.2.0",
         "@types/node": "*",
@@ -2090,6 +2108,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2103,6 +2122,7 @@
       "integrity": "sha512-9uBdv/B4EefsuAL+pWqueZyZS2Ba+LxfFeQ9DN14HU4bN8bhaxKdkpjpB6fs9+pSjIBu+FXQHImEg8j/Lw0+vA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/schemas": "30.0.5",
         "ansi-styles": "^5.2.0",
@@ -2117,7 +2137,8 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@jest/expect": {
       "version": "29.7.0",
@@ -2186,6 +2207,7 @@
       "integrity": "sha512-gWp7NfQW27LaBQz3TITS8L7ZCQ0TLvtmI//4OwlQRx4rnWxcPNIYjxZpDcN4+UlGxgm3jS5QPz8IPTCkb59wZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "jest-regex-util": "30.0.1"
@@ -2200,6 +2222,7 @@
       "integrity": "sha512-jHEQgBXAgc+Gh4g0p3bCevgRCVRkB4VB70zhoAE48gxeSr1hfUOsM/C2WoJgVL7Eyg//hudYENbm3Ne+/dRVVA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
@@ -2401,6 +2424,49 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@modelcontextprotocol/ext-apps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/ext-apps/-/ext-apps-1.0.0.tgz",
+      "integrity": "sha512-d5vGKBhWkRoa3xlKOynF8kd+sTSY2D3QSjTMCs46/ddOUOSn5e/E0SaShixFm7H7mNlj4uY0RuU0jAsPM/0qwA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "workspaces": [
+        "examples/*"
+      ],
+      "optionalDependencies": {
+        "@oven/bun-darwin-aarch64": "^1.2.21",
+        "@oven/bun-darwin-x64": "^1.2.21",
+        "@oven/bun-darwin-x64-baseline": "^1.2.21",
+        "@oven/bun-linux-aarch64": "^1.2.21",
+        "@oven/bun-linux-aarch64-musl": "^1.2.21",
+        "@oven/bun-linux-x64": "^1.2.21",
+        "@oven/bun-linux-x64-baseline": "^1.2.21",
+        "@oven/bun-linux-x64-musl": "^1.2.21",
+        "@oven/bun-linux-x64-musl-baseline": "^1.2.21",
+        "@oven/bun-windows-x64": "^1.2.21",
+        "@oven/bun-windows-x64-baseline": "^1.2.21",
+        "@rollup/rollup-darwin-arm64": "^4.53.3",
+        "@rollup/rollup-darwin-x64": "^4.53.3",
+        "@rollup/rollup-linux-arm64-gnu": "^4.53.3",
+        "@rollup/rollup-linux-x64-gnu": "^4.53.3",
+        "@rollup/rollup-win32-arm64-msvc": "^4.53.3",
+        "@rollup/rollup-win32-x64-msvc": "^4.53.3"
+      },
+      "peerDependencies": {
+        "@modelcontextprotocol/sdk": "^1.24.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "zod": "^3.25.0 || ^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@modelcontextprotocol/inspector-cli": {
       "resolved": "cli",
       "link": true
@@ -2521,6 +2587,149 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@oven/bun-darwin-aarch64": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-darwin-aarch64/-/bun-darwin-aarch64-1.3.6.tgz",
+      "integrity": "sha512-27rypIapNkYboOSylkf1tD9UW9Ado2I+P1NBL46Qz29KmOjTL6WuJ7mHDC5O66CYxlOkF5r93NPDAC3lFHYBXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@oven/bun-darwin-x64": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-darwin-x64/-/bun-darwin-x64-1.3.6.tgz",
+      "integrity": "sha512-I82xGzPkBxzBKgbl8DsA0RfMQCWTWjNmLjIEkW1ECiv3qK02kHGQ5FGUr/29L/SuvnGsULW4tBTRNZiMzL37nA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@oven/bun-darwin-x64-baseline": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-darwin-x64-baseline/-/bun-darwin-x64-baseline-1.3.6.tgz",
+      "integrity": "sha512-nqtr+pTsHqusYpG2OZc6s+AmpWDB/FmBvstrK0y5zkti4OqnCuu7Ev2xNjS7uyb47NrAFF40pWqkpaio5XEd7w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@oven/bun-linux-aarch64": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-linux-aarch64/-/bun-linux-aarch64-1.3.6.tgz",
+      "integrity": "sha512-YaQEAYjBanoOOtpqk/c5GGcfZIyxIIkQ2m1TbHjedRmJNwxzWBhGinSARFkrRIc3F8pRIGAopXKvJ/2rjN1LzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oven/bun-linux-aarch64-musl": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-linux-aarch64-musl/-/bun-linux-aarch64-musl-1.3.6.tgz",
+      "integrity": "sha512-FR+iJt17rfFgYgpxL3M67AUwujOgjw52ZJzB9vElI5jQXNjTyOKf8eH4meSk4vjlYF3h/AjKYd6pmN0OIUlVKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oven/bun-linux-x64": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-linux-x64/-/bun-linux-x64-1.3.6.tgz",
+      "integrity": "sha512-egfngj0dfJ868cf30E7B+ye9KUWSebYxOG4l9YP5eWeMXCtenpenx0zdKtAn9qxJgEJym5AN6trtlk+J6x8Lig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oven/bun-linux-x64-baseline": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-linux-x64-baseline/-/bun-linux-x64-baseline-1.3.6.tgz",
+      "integrity": "sha512-jRmnX18ak8WzqLrex3siw0PoVKyIeI5AiCv4wJLgSs7VKfOqrPycfHIWfIX2jdn7ngqbHFPzI09VBKANZ4Pckg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oven/bun-linux-x64-musl": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-linux-x64-musl/-/bun-linux-x64-musl-1.3.6.tgz",
+      "integrity": "sha512-YeXcJ9K6vJAt1zSkeA21J6pTe7PgDMLTHKGI3nQBiMYnYf7Ob3K+b/ChSCznrJG7No5PCPiQPg4zTgA+BOTmSA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oven/bun-linux-x64-musl-baseline": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-linux-x64-musl-baseline/-/bun-linux-x64-musl-baseline-1.3.6.tgz",
+      "integrity": "sha512-7FjVnxnRTp/AgWqSQRT/Vt9TYmvnZ+4M+d9QOKh/Lf++wIFXFGSeAgD6bV1X/yr2UPVmZDk+xdhr2XkU7l2v3w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oven/bun-windows-x64": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-windows-x64/-/bun-windows-x64-1.3.6.tgz",
+      "integrity": "sha512-Sr1KwUcbB0SEpnSPO22tNJppku2khjFluEst+mTGhxHzAGQTQncNeJxDnt3F15n+p9Q+mlcorxehd68n1siikQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@oven/bun-windows-x64-baseline": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@oven/bun-windows-x64-baseline/-/bun-windows-x64-baseline-1.3.6.tgz",
+      "integrity": "sha512-PFUa7JL4lGoyyppeS4zqfuoXXih+gSE0XxhDMrCPVEUev0yhGNd/tbWBvcdpYnUth80owENoGjc8s5Knopv9wA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@playwright/test": {
       "version": "1.57.0",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.57.0.tgz",
@@ -3523,7 +3732,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3537,7 +3745,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3607,7 +3814,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3705,7 +3911,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3747,7 +3952,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3789,7 +3993,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3945,7 +4148,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -4195,7 +4399,6 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.2.tgz",
       "integrity": "sha512-LPM2G3Syo1GLzXLGJAKdqoU35XvrWzGJ21/7sgZTUpbkBaOasTj8tjwn6w+hCkqaa1TfJ/w67rJSwYItlJ2mYw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -4234,7 +4437,6 @@
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -4246,7 +4448,6 @@
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -4387,7 +4588,6 @@
       "integrity": "sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.49.0",
         "@typescript-eslint/types": "8.49.0",
@@ -4770,7 +4970,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5243,7 +5442,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -6083,7 +6281,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/domexception": {
       "version": "4.0.0",
@@ -6341,7 +6540,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -6639,7 +6837,6 @@
       "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
       "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.1",
@@ -7733,7 +7930,6 @@
       "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/core": "^29.7.0",
         "@jest/types": "^29.6.3",
@@ -8074,6 +8270,7 @@
       "integrity": "sha512-zbBTiqr2Vl78pKp/laGBREYzbZx9ZtqPjOK4++lL4BNDhxRnahg51HtoDrk9/VjIy9IthNEWdKVd7H5bqBhiWQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/environment": "30.2.0",
         "@jest/environment-jsdom-abstract": "30.2.0",
@@ -8099,6 +8296,7 @@
       "integrity": "sha512-/QPTL7OBJQ5ac09UDRa3EQes4gt1FTEG/8jZ/4v5IVzx+Cv7dLxlVIvfvSVRiiX2drWyXeBjkMSR8hvOWSog5g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/fake-timers": "30.2.0",
         "@jest/types": "30.2.0",
@@ -8115,6 +8313,7 @@
       "integrity": "sha512-HI3tRLjRxAbBy0VO8dqqm7Hb2mIa8d5bg/NJkyQcOk7V118ObQML8RC5luTF/Zsg4474a+gDvhce7eTnP4GhYw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/types": "30.2.0",
         "@sinonjs/fake-timers": "^13.0.0",
@@ -8133,6 +8332,7 @@
       "integrity": "sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@sinclair/typebox": "^0.34.0"
       },
@@ -8146,6 +8346,7 @@
       "integrity": "sha512-H9xg1/sfVvyfU7o3zMfBEjQ1gcsdeTMgqHoYdN79tuLqfTtuu7WckRA1R5whDwOzxaZAeMKTYWqP+WCAi0CHsg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/pattern": "30.0.1",
         "@jest/schemas": "30.0.5",
@@ -8164,7 +8365,8 @@
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.41.tgz",
       "integrity": "sha512-6gS8pZzSXdyRHTIqoqSVknxolr1kzfy4/CeDnrzsVz8TTIWUbOBr6gnzOmTYJ3eXQNh4IYHIGi5aIL7sOZ2G/g==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/jest-environment-jsdom/node_modules/@sinonjs/fake-timers": {
       "version": "13.0.5",
@@ -8172,6 +8374,7 @@
       "integrity": "sha512-36/hTbH2uaWuGVERyC6da9YwGWnzUZXuPro/F2LfsdOsLnCojz/iSH8MxUt/FD2S5XBSVPhmArFUXcpCQ2Hkiw==",
       "dev": true,
       "license": "BSD-3-Clause",
+      "peer": true,
       "dependencies": {
         "@sinonjs/commons": "^3.0.1"
       }
@@ -8182,6 +8385,7 @@
       "integrity": "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "@types/tough-cookie": "*",
@@ -8194,6 +8398,7 @@
       "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 14"
       }
@@ -8204,6 +8409,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -8223,6 +8429,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -8233,6 +8440,7 @@
       "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@asamuzakjp/css-color": "^3.2.0",
         "rrweb-cssom": "^0.8.0"
@@ -8247,6 +8455,7 @@
       "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "whatwg-mimetype": "^4.0.0",
         "whatwg-url": "^14.0.0"
@@ -8261,6 +8470,7 @@
       "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "whatwg-encoding": "^3.1.1"
       },
@@ -8274,6 +8484,7 @@
       "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "agent-base": "^7.1.0",
         "debug": "^4.3.4"
@@ -8288,6 +8499,7 @@
       "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "agent-base": "^7.1.2",
         "debug": "4"
@@ -8302,6 +8514,7 @@
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -8315,6 +8528,7 @@
       "integrity": "sha512-y4DKFLZ2y6DxTWD4cDe07RglV88ZiNEdlRfGtqahfbIjfsw1nMCPx49Uev4IA/hWn3sDKyAnSPwoYSsAEdcimw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@jest/types": "30.2.0",
@@ -8336,6 +8550,7 @@
       "integrity": "sha512-JNNNl2rj4b5ICpmAcq+WbLH83XswjPbjH4T7yvGzfAGCPh1rw+xVNbtk+FnRslvt9lkCcdn9i1oAoKUuFsOxRw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/types": "30.2.0",
         "@types/node": "*",
@@ -8351,6 +8566,7 @@
       "integrity": "sha512-QKNsM0o3Xe6ISQU869e+DhG+4CK/48aHYdJZGlFQVTjnbvgpcKyxpzk29fGiO7i/J8VENZ+d2iGnSsvmuHywlA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/types": "30.2.0",
         "@types/node": "*",
@@ -8369,6 +8585,7 @@
       "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssstyle": "^4.2.1",
         "data-urls": "^5.0.0",
@@ -8409,6 +8626,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8422,6 +8640,7 @@
       "integrity": "sha512-9uBdv/B4EefsuAL+pWqueZyZS2Ba+LxfFeQ9DN14HU4bN8bhaxKdkpjpB6fs9+pSjIBu+FXQHImEg8j/Lw0+vA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/schemas": "30.0.5",
         "ansi-styles": "^5.2.0",
@@ -8436,7 +8655,8 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/jest-environment-jsdom/node_modules/tough-cookie": {
       "version": "5.1.2",
@@ -8444,6 +8664,7 @@
       "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
       "dev": true,
       "license": "BSD-3-Clause",
+      "peer": true,
       "dependencies": {
         "tldts": "^6.1.32"
       },
@@ -8457,6 +8678,7 @@
       "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "punycode": "^2.3.1"
       },
@@ -8470,6 +8692,7 @@
       "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "xml-name-validator": "^5.0.0"
       },
@@ -8483,6 +8706,7 @@
       "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "iconv-lite": "0.6.3"
       },
@@ -8496,6 +8720,7 @@
       "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -8506,6 +8731,7 @@
       "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tr46": "^5.1.0",
         "webidl-conversions": "^7.0.0"
@@ -8520,6 +8746,7 @@
       "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -9114,7 +9341,6 @@
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -9153,7 +9379,6 @@
       "integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "abab": "^2.0.6",
         "acorn": "^8.8.1",
@@ -9492,6 +9717,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -10369,7 +10595,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -10545,6 +10770,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -10560,6 +10786,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -10714,7 +10941,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -10727,7 +10953,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -10741,7 +10966,8 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/react-refresh": {
       "version": "0.18.0",
@@ -11149,7 +11375,8 @@
       "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
       "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/run-applescript": {
       "version": "7.1.0",
@@ -11815,7 +12042,6 @@
       "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -11954,7 +12180,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -11978,6 +12203,7 @@
       "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tldts-core": "^6.1.86"
       },
@@ -11990,7 +12216,8 @@
       "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
       "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tmpl": {
       "version": "1.0.5",
@@ -12163,7 +12390,6 @@
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -12220,7 +12446,6 @@
       "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "~0.27.0",
         "get-tsconfig": "^4.7.5"
@@ -12774,7 +12999,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -12983,7 +13207,6 @@
       "integrity": "sha512-ITcnkFeR3+fI8P1wMgItjGrR10170d8auB4EpMLPqmx6uxElH3a/hHGQabSHKdqd4FXWO1nFIp9rRn7JQ34ACQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -13077,7 +13300,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13497,7 +13719,6 @@
       "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
       "dev": true,
       "license": "ISC",
-      "peer": true,
       "bin": {
         "yaml": "bin.mjs"
       },
@@ -13585,7 +13806,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

From 689bc3f263d5c1d31f273eb5c11a297d15160837 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Mon, 26 Jan 2026 20:43:55 +0000
Subject: [PATCH 02/33] Fix MCP Apps iframe rendering issue

The app was getting stuck on 'Loading MCP App...' because the iframe was
hidden (display: none) until the oninitialized event fired. However, the
PostMessage handshake requires the iframe to be visible to complete.

This fix:
- Sets loading to false immediately after writing HTML to the iframe
- Makes the iframe visible before establishing PostMessage transport
- Allows the AppBridge initialization handshake to complete successfully
- Removes redundant setLoading(false) from oninitialized callback

The iframe is now visible and ready for PostMessage communication before
the AppBridge connect() call, enabling proper initialization.

Co-authored-by: Cliff Hall <cliffhall@users.noreply.github.com>
---
 client/src/components/AppRenderer.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/components/AppRenderer.tsx b/client/src/components/AppRenderer.tsx
index 64654c8f2..68b70a8e7 100644
--- a/client/src/components/AppRenderer.tsx
+++ b/client/src/components/AppRenderer.tsx
@@ -101,9 +101,8 @@ const AppRenderer = ({
 
         // Set up event handlers
         bridge.oninitialized = () => {
-          console.log("MCP App initialized");
+          console.log("[AppRenderer] MCP App initialized successfully");
           setInitialized(true);
-          setLoading(false);
         };
 
         bridge.onerror = (error: Error) => {
@@ -153,6 +152,11 @@ const AppRenderer = ({
         iframeDoc.close();
         console.log("[AppRenderer] HTML written to iframe");
 
+        // Clear loading state so iframe becomes visible
+        // This is required for PostMessage communication to work
+        setLoading(false);
+        console.log("[AppRenderer] Iframe now visible, ready for PostMessage");
+
         // Wait for iframe to load
         await new Promise<void>((resolve) => {
           if (iframe.contentWindow) {

From cc7ab7f7b73a554804efed4a5f319ae9b61e1ce4 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Mon, 26 Jan 2026 21:03:57 +0000
Subject: [PATCH 03/33] Fix MCP Apps HTML extraction to match spec

The AppRenderer was incorrectly checking for a 'type' field in resource
contents, but TextResourceContents objects only have uri, mimeType, and
text fields according to the MCP specification.

Fixed by checking for the presence of the 'text' field directly instead
of checking a non-existent 'type' field. This allows the HTML content
to be properly extracted and rendered in the iframe.

Co-authored-by: Cliff Hall <cliffhall@users.noreply.github.com>
---
 client/src/components/AppRenderer.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/src/components/AppRenderer.tsx b/client/src/components/AppRenderer.tsx
index 68b70a8e7..c9a1a2023 100644
--- a/client/src/components/AppRenderer.tsx
+++ b/client/src/components/AppRenderer.tsx
@@ -128,16 +128,23 @@ const AppRenderer = ({
             contentsLength: parsed.contents?.length,
           });
           if (parsed.contents && Array.isArray(parsed.contents)) {
-            // MCP resource response format
+            // MCP resource response format: TextResourceContents has uri, mimeType?, and text
             const textContent = parsed.contents.find(
-              (c: { type: string; text?: string }) =>
-                c.type === "text" && c.text,
+              (c: { uri?: string; mimeType?: string; text?: string }) =>
+                c.text !== undefined,
             );
             if (textContent?.text) {
               htmlContent = textContent.text;
               console.log(
                 "[AppRenderer] Extracted HTML from contents, length:",
                 htmlContent.length,
+                "mimeType:",
+                textContent.mimeType,
+              );
+            } else {
+              console.warn(
+                "[AppRenderer] No text content found in contents array:",
+                parsed.contents,
               );
             }
           }

From eb11d46c2edb831a4573e1cd540891c7c4ff27eb Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Mon, 26 Jan 2026 21:38:23 +0000
Subject: [PATCH 04/33] Add comprehensive tests for MCP Apps support

- Add tests for AppsTab component (13 tests)
- Add tests for AppRenderer component (17 tests)
- Update jest.config.cjs to handle ES modules from @modelcontextprotocol/ext-apps
- All 478 tests pass successfully

Co-authored-by: Cliff Hall <cliffhall@users.noreply.github.com>
---
 client/jest.config.cjs                        |   9 +
 .../components/__tests__/AppRenderer.test.tsx | 349 ++++++++++++++++++
 .../src/components/__tests__/AppsTab.test.tsx | 284 ++++++++++++++
 3 files changed, 642 insertions(+)
 create mode 100644 client/src/components/__tests__/AppRenderer.test.tsx
 create mode 100644 client/src/components/__tests__/AppsTab.test.tsx

diff --git a/client/jest.config.cjs b/client/jest.config.cjs
index 9b793eae6..3ee647fe3 100644
--- a/client/jest.config.cjs
+++ b/client/jest.config.cjs
@@ -13,8 +13,17 @@ module.exports = {
         tsconfig: "tsconfig.jest.json",
       },
     ],
+    "^.+\\.m?js$": [
+      "ts-jest",
+      {
+        tsconfig: "tsconfig.jest.json",
+      },
+    ],
   },
   extensionsToTreatAsEsm: [".ts", ".tsx"],
+  transformIgnorePatterns: [
+    "node_modules/(?!(@modelcontextprotocol)/)",
+  ],
   testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
   // Exclude directories and files that don't need to be tested
   testPathIgnorePatterns: [
diff --git a/client/src/components/__tests__/AppRenderer.test.tsx b/client/src/components/__tests__/AppRenderer.test.tsx
new file mode 100644
index 000000000..f221f547e
--- /dev/null
+++ b/client/src/components/__tests__/AppRenderer.test.tsx
@@ -0,0 +1,349 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, jest, beforeEach } from "@jest/globals";
+import AppRenderer from "../AppRenderer";
+import { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+
+// Mock the ext-apps module
+jest.mock("@modelcontextprotocol/ext-apps/app-bridge", () => {
+  class MockAppBridge {
+    oninitialized: (() => void) | null = null;
+    onerror: ((error: Error) => void) | null = null;
+
+    async connect() {
+      // Simulate successful connection
+      setTimeout(() => {
+        if (this.oninitialized) {
+          this.oninitialized();
+        }
+      }, 0);
+    }
+
+    async close() {
+      // Mock close
+    }
+  }
+
+  class MockPostMessageTransport {
+    constructor(_source: Window | null, _target: Window | null) {
+      // Mock constructor
+    }
+  }
+
+  return {
+    AppBridge: MockAppBridge,
+    PostMessageTransport: MockPostMessageTransport,
+    getToolUiResourceUri: (tool: Tool) => {
+      const meta = (
+        tool as Tool & { _meta?: { ui?: { resourceUri?: string } } }
+      )._meta;
+      return meta?.ui?.resourceUri || null;
+    },
+    buildAllowAttribute: (permissions?: Record<string, unknown>) => {
+      return permissions ? "custom-permissions" : "";
+    },
+  };
+});
+
+describe("AppRenderer", () => {
+  const mockTool: Tool = {
+    name: "testApp",
+    description: "Test app with UI",
+    inputSchema: {
+      type: "object" as const,
+      properties: {},
+    },
+    _meta: {
+      ui: {
+        resourceUri: "ui://test-app",
+      },
+    },
+  } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+  const mockMcpClient = {
+    request: jest.fn(),
+  } as unknown as Client;
+
+  const defaultProps = {
+    tool: mockTool,
+    mcpClient: mockMcpClient,
+    onReadResource: jest.fn(),
+    resourceContent: "",
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should display loading state initially", () => {
+    render(<AppRenderer {...defaultProps} />);
+
+    expect(screen.getByText(/Loading MCP App/i)).toBeInTheDocument();
+  });
+
+  it("should call onReadResource when resourceContent is empty", () => {
+    const mockOnReadResource = jest.fn();
+    render(
+      <AppRenderer
+        {...defaultProps}
+        onReadResource={mockOnReadResource}
+        resourceContent=""
+      />,
+    );
+
+    expect(mockOnReadResource).toHaveBeenCalledWith("ui://test-app");
+  });
+
+  it("should not call onReadResource when resourceContent is provided", () => {
+    const mockOnReadResource = jest.fn();
+    render(
+      <AppRenderer
+        {...defaultProps}
+        onReadResource={mockOnReadResource}
+        resourceContent="<html>test</html>"
+      />,
+    );
+
+    expect(mockOnReadResource).not.toHaveBeenCalled();
+  });
+
+  it("should display error when no resource URI is found", () => {
+    const toolWithoutUri: Tool = {
+      name: "noUriTool",
+      description: "Tool without UI",
+      inputSchema: {
+        type: "object" as const,
+        properties: {},
+      },
+    };
+
+    render(<AppRenderer {...defaultProps} tool={toolWithoutUri} />);
+
+    expect(screen.getByText(/No UI resource URI found/i)).toBeInTheDocument();
+  });
+
+  it("should render iframe with proper attributes", async () => {
+    render(
+      <AppRenderer
+        {...defaultProps}
+        resourceContent="<html><body>Test</body></html>"
+      />,
+    );
+
+    await waitFor(() => {
+      const iframe = document.querySelector("iframe");
+      expect(iframe).toBeInTheDocument();
+      expect(iframe).toHaveAttribute(
+        "sandbox",
+        "allow-scripts allow-same-origin",
+      );
+      expect(iframe).toHaveAttribute("title", "MCP App: testApp");
+    });
+  });
+
+  it("should display initialized message when app connects", async () => {
+    render(
+      <AppRenderer
+        {...defaultProps}
+        resourceContent="<html><body>Test</body></html>"
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/App connected/i)).toBeInTheDocument();
+      expect(screen.getByText(/testApp/)).toBeInTheDocument();
+    });
+  });
+
+  it("should handle JSON resource content with MCP format", async () => {
+    const jsonContent = JSON.stringify({
+      contents: [
+        {
+          uri: "ui://test-app",
+          mimeType: "text/html",
+          text: "<html><body>Test App</body></html>",
+        },
+      ],
+    });
+
+    render(<AppRenderer {...defaultProps} resourceContent={jsonContent} />);
+
+    await waitFor(() => {
+      const iframe = document.querySelector("iframe");
+      expect(iframe).toBeInTheDocument();
+    });
+  });
+
+  it("should handle plain HTML resource content", async () => {
+    const htmlContent = "<html><body>Plain HTML</body></html>";
+
+    render(<AppRenderer {...defaultProps} resourceContent={htmlContent} />);
+
+    await waitFor(() => {
+      const iframe = document.querySelector("iframe");
+      expect(iframe).toBeInTheDocument();
+    });
+  });
+
+  it("should apply custom permissions to iframe", async () => {
+    const toolWithPermissions: Tool = {
+      ...mockTool,
+      _meta: {
+        ui: {
+          resourceUri: "ui://test-app",
+          permissions: {
+            camera: true,
+            microphone: true,
+          },
+        },
+      },
+    } as Tool & {
+      _meta?: {
+        ui?: { resourceUri?: string; permissions?: Record<string, unknown> };
+      };
+    };
+
+    render(
+      <AppRenderer
+        {...defaultProps}
+        tool={toolWithPermissions}
+        resourceContent="<html><body>Test</body></html>"
+      />,
+    );
+
+    await waitFor(() => {
+      const iframe = document.querySelector("iframe");
+      expect(iframe).toHaveAttribute("allow", "custom-permissions");
+    });
+  });
+
+  it("should update when resourceContent changes", async () => {
+    const { rerender } = render(
+      <AppRenderer {...defaultProps} resourceContent="" />,
+    );
+
+    expect(screen.getByText(/Loading MCP App/i)).toBeInTheDocument();
+
+    // Update with content
+    rerender(
+      <AppRenderer
+        {...defaultProps}
+        resourceContent="<html><body>Updated</body></html>"
+      />,
+    );
+
+    await waitFor(() => {
+      const iframe = document.querySelector("iframe");
+      expect(iframe).toBeInTheDocument();
+    });
+  });
+
+  it("should cleanup on unmount", async () => {
+    const { unmount } = render(
+      <AppRenderer
+        {...defaultProps}
+        resourceContent="<html><body>Test</body></html>"
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/App connected/i)).toBeInTheDocument();
+    });
+
+    // Unmount should not throw errors
+    unmount();
+  });
+
+  it("should handle missing contentWindow gracefully", () => {
+    // This test verifies that the component handles edge cases
+    // The actual error handling is tested through the error display
+    render(
+      <AppRenderer
+        {...defaultProps}
+        mcpClient={null}
+        resourceContent="<html><body>Test</body></html>"
+      />,
+    );
+
+    // Should still show loading state
+    expect(screen.getByText(/Loading MCP App/i)).toBeInTheDocument();
+  });
+
+  it("should set minimum height on iframe", async () => {
+    render(
+      <AppRenderer
+        {...defaultProps}
+        resourceContent="<html><body>Test</body></html>"
+      />,
+    );
+
+    await waitFor(() => {
+      const iframe = document.querySelector("iframe");
+      expect(iframe).toHaveStyle({ minHeight: "400px" });
+    });
+  });
+
+  it("should have proper styling classes on iframe", async () => {
+    render(
+      <AppRenderer
+        {...defaultProps}
+        resourceContent="<html><body>Test</body></html>"
+      />,
+    );
+
+    await waitFor(() => {
+      const iframe = document.querySelector("iframe");
+      expect(iframe).toHaveClass("w-full", "flex-1", "border", "rounded");
+    });
+  });
+
+  it("should handle JSON parsing errors gracefully", async () => {
+    const invalidJson = "{invalid json content}";
+
+    render(<AppRenderer {...defaultProps} resourceContent={invalidJson} />);
+
+    // Should still attempt to render as HTML
+    await waitFor(() => {
+      const iframe = document.querySelector("iframe");
+      expect(iframe).toBeInTheDocument();
+    });
+  });
+
+  it("should handle empty contents array in JSON response", async () => {
+    const jsonContent = JSON.stringify({
+      contents: [],
+    });
+
+    render(<AppRenderer {...defaultProps} resourceContent={jsonContent} />);
+
+    await waitFor(() => {
+      const iframe = document.querySelector("iframe");
+      expect(iframe).toBeInTheDocument();
+    });
+  });
+
+  it("should extract text from first text content in MCP response", async () => {
+    const jsonContent = JSON.stringify({
+      contents: [
+        {
+          uri: "ui://test-app",
+          mimeType: "application/json",
+          text: '{"data": "not html"}',
+        },
+        {
+          uri: "ui://test-app",
+          mimeType: "text/html",
+          text: "<html><body>Actual HTML</body></html>",
+        },
+      ],
+    });
+
+    render(<AppRenderer {...defaultProps} resourceContent={jsonContent} />);
+
+    await waitFor(() => {
+      const iframe = document.querySelector("iframe");
+      expect(iframe).toBeInTheDocument();
+    });
+  });
+});
diff --git a/client/src/components/__tests__/AppsTab.test.tsx b/client/src/components/__tests__/AppsTab.test.tsx
new file mode 100644
index 000000000..81d81fdb6
--- /dev/null
+++ b/client/src/components/__tests__/AppsTab.test.tsx
@@ -0,0 +1,284 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, jest, beforeEach } from "@jest/globals";
+import AppsTab from "../AppsTab";
+import { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { Tabs } from "../ui/tabs";
+
+// Mock AppRenderer component
+jest.mock("../AppRenderer", () => {
+  return function MockAppRenderer({
+    tool,
+    resourceContent,
+  }: {
+    tool: Tool;
+    resourceContent: string;
+  }) {
+    return (
+      <div data-testid="app-renderer">
+        <div>Tool: {tool.name}</div>
+        <div>Content: {resourceContent || "No content"}</div>
+      </div>
+    );
+  };
+});
+
+describe("AppsTab", () => {
+  const mockAppTool: Tool = {
+    name: "weatherApp",
+    description: "Weather app with UI",
+    inputSchema: {
+      type: "object" as const,
+      properties: {},
+    },
+    _meta: {
+      ui: {
+        resourceUri: "ui://weather-app",
+      },
+    },
+  } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+  const mockRegularTool: Tool = {
+    name: "regularTool",
+    description: "Regular tool without UI",
+    inputSchema: {
+      type: "object" as const,
+      properties: {},
+    },
+  };
+
+  const defaultProps = {
+    tools: [],
+    listTools: jest.fn(),
+    error: null,
+    mcpClient: null,
+    onReadResource: jest.fn(),
+    resourceContentMap: {},
+  };
+
+  const renderAppsTab = (props = {}) => {
+    return render(
+      <Tabs defaultValue="apps">
+        <AppsTab {...defaultProps} {...props} />
+      </Tabs>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should display message when no apps are available", () => {
+    renderAppsTab();
+
+    expect(screen.getByText(/No MCP Apps available/i)).toBeInTheDocument();
+    expect(screen.getByText(/_meta\.ui\.resourceUri/)).toBeInTheDocument();
+  });
+
+  it("should filter and display only tools with UI metadata", () => {
+    renderAppsTab({
+      tools: [mockAppTool, mockRegularTool],
+    });
+
+    // Should show the app tool
+    expect(screen.getByText("weatherApp")).toBeInTheDocument();
+    expect(screen.getByText("Weather app with UI")).toBeInTheDocument();
+    expect(screen.getByText("ui://weather-app")).toBeInTheDocument();
+
+    // Should not show the regular tool
+    expect(screen.queryByText("regularTool")).not.toBeInTheDocument();
+  });
+
+  it("should display multiple app tools in a grid", () => {
+    const mockAppTool2: Tool = {
+      name: "calendarApp",
+      description: "Calendar app with UI",
+      inputSchema: {
+        type: "object" as const,
+        properties: {},
+      },
+      _meta: {
+        ui: {
+          resourceUri: "ui://calendar-app",
+        },
+      },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+    renderAppsTab({
+      tools: [mockAppTool, mockAppTool2],
+    });
+
+    expect(screen.getByText("weatherApp")).toBeInTheDocument();
+    expect(screen.getByText("calendarApp")).toBeInTheDocument();
+  });
+
+  it("should call listTools when refresh button is clicked", () => {
+    const mockListTools = jest.fn();
+    renderAppsTab({
+      tools: [mockAppTool],
+      listTools: mockListTools,
+    });
+
+    const refreshButton = screen.getByRole("button", { name: /refresh/i });
+    fireEvent.click(refreshButton);
+
+    expect(mockListTools).toHaveBeenCalledTimes(1);
+  });
+
+  it("should display error message when error prop is provided", () => {
+    const errorMessage = "Failed to fetch tools";
+    renderAppsTab({
+      error: errorMessage,
+    });
+
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+  });
+
+  it("should open app renderer when an app card is clicked", () => {
+    renderAppsTab({
+      tools: [mockAppTool],
+      resourceContentMap: { "ui://weather-app": "<html>test</html>" },
+    });
+
+    const appCard = screen.getByText("weatherApp").closest("div");
+    expect(appCard).toBeTruthy();
+    fireEvent.click(appCard!);
+
+    // AppRenderer should be rendered
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+    expect(screen.getByText("Tool: weatherApp")).toBeInTheDocument();
+  });
+
+  it("should close app renderer when close button is clicked", () => {
+    renderAppsTab({
+      tools: [mockAppTool],
+      resourceContentMap: { "ui://weather-app": "<html>test</html>" },
+    });
+
+    // Open the app
+    const appCard = screen.getByText("weatherApp").closest("div");
+    fireEvent.click(appCard!);
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+
+    // Close the app
+    const closeButton = screen.getByRole("button", { name: "" }); // X button has no text
+    fireEvent.click(closeButton);
+
+    // AppRenderer should be removed
+    expect(screen.queryByTestId("app-renderer")).not.toBeInTheDocument();
+  });
+
+  it("should pass resourceContent to AppRenderer", () => {
+    const resourceContent = "<html><body>Weather App UI</body></html>";
+    renderAppsTab({
+      tools: [mockAppTool],
+      resourceContentMap: { "ui://weather-app": resourceContent },
+    });
+
+    // Open the app
+    const appCard = screen.getByText("weatherApp").closest("div");
+    fireEvent.click(appCard!);
+
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+    expect(screen.getByText(`Content: ${resourceContent}`)).toBeInTheDocument();
+  });
+
+  it("should handle tool without description", () => {
+    const toolWithoutDescription: Tool = {
+      name: "noDescriptionApp",
+      inputSchema: {
+        type: "object" as const,
+        properties: {},
+      },
+      _meta: {
+        ui: {
+          resourceUri: "ui://no-description-app",
+        },
+      },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+    renderAppsTab({
+      tools: [toolWithoutDescription],
+    });
+
+    expect(screen.getByText("noDescriptionApp")).toBeInTheDocument();
+    expect(screen.getByText("ui://no-description-app")).toBeInTheDocument();
+  });
+
+  it("should reset selected tool when tools list changes and selected tool is removed", () => {
+    const { rerender } = renderAppsTab({
+      tools: [mockAppTool],
+      resourceContentMap: { "ui://weather-app": "<html>test</html>" },
+    });
+
+    // Select the app
+    const appCard = screen.getByText("weatherApp").closest("div");
+    fireEvent.click(appCard!);
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+
+    // Update tools list to remove the selected tool
+    rerender(
+      <Tabs defaultValue="apps">
+        <AppsTab
+          {...defaultProps}
+          tools={[]}
+          resourceContentMap={{ "ui://weather-app": "<html>test</html>" }}
+        />
+      </Tabs>,
+    );
+
+    // AppRenderer should be removed
+    expect(screen.queryByTestId("app-renderer")).not.toBeInTheDocument();
+  });
+
+  it("should maintain selected tool when tools list updates but includes the same tool", () => {
+    const { rerender } = renderAppsTab({
+      tools: [mockAppTool],
+      resourceContentMap: { "ui://weather-app": "<html>test</html>" },
+    });
+
+    // Select the app
+    const appCard = screen.getByText("weatherApp").closest("div");
+    fireEvent.click(appCard!);
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+
+    // Update tools list with the same tool
+    rerender(
+      <Tabs defaultValue="apps">
+        <AppsTab
+          {...defaultProps}
+          tools={[mockAppTool]}
+          resourceContentMap={{ "ui://weather-app": "<html>test</html>" }}
+        />
+      </Tabs>,
+    );
+
+    // AppRenderer should still be rendered
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+  });
+
+  it("should display app cards with hover effect", () => {
+    renderAppsTab({
+      tools: [mockAppTool],
+    });
+
+    const appCard = screen.getByText("weatherApp").closest("div");
+    expect(appCard).toHaveClass("hover:border-primary");
+    expect(appCard).toHaveClass("cursor-pointer");
+  });
+
+  it("should handle empty resourceContentMap", () => {
+    renderAppsTab({
+      tools: [mockAppTool],
+      resourceContentMap: {},
+    });
+
+    // Open the app
+    const appCard = screen.getByText("weatherApp").closest("div");
+    fireEvent.click(appCard!);
+
+    // AppRenderer should still be rendered but with no content
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+    expect(screen.getByText("Content: No content")).toBeInTheDocument();
+  });
+});

From 5cc25db4a3c5a2bd0272ccd1315dc40b5b8bb889 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Mon, 26 Jan 2026 22:16:51 +0000
Subject: [PATCH 05/33] Add MCP Apps support to Inspector

- Add AppsTab component for detecting and listing MCP apps
- Add AppRenderer component with full AppBridge integration
- Implement UI resource fetching and sandboxed iframe rendering
- Add PostMessage transport for bidirectional JSON-RPC communication
- Include comprehensive test coverage (30 new tests)
- Auto-populate apps when tab becomes active
- Support theme awareness and configurable permissions

Co-authored-by: Cliff Hall <cliffhall@users.noreply.github.com>
---
 client/jest.config.cjs                               | 4 +---
 client/src/components/__tests__/AppRenderer.test.tsx | 1 +
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/jest.config.cjs b/client/jest.config.cjs
index 3ee647fe3..704852961 100644
--- a/client/jest.config.cjs
+++ b/client/jest.config.cjs
@@ -21,9 +21,7 @@ module.exports = {
     ],
   },
   extensionsToTreatAsEsm: [".ts", ".tsx"],
-  transformIgnorePatterns: [
-    "node_modules/(?!(@modelcontextprotocol)/)",
-  ],
+  transformIgnorePatterns: ["node_modules/(?!(@modelcontextprotocol)/)"],
   testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
   // Exclude directories and files that don't need to be tested
   testPathIgnorePatterns: [
diff --git a/client/src/components/__tests__/AppRenderer.test.tsx b/client/src/components/__tests__/AppRenderer.test.tsx
index f221f547e..2da08f431 100644
--- a/client/src/components/__tests__/AppRenderer.test.tsx
+++ b/client/src/components/__tests__/AppRenderer.test.tsx
@@ -26,6 +26,7 @@ jest.mock("@modelcontextprotocol/ext-apps/app-bridge", () => {
   }
 
   class MockPostMessageTransport {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     constructor(_source: Window | null, _target: Window | null) {
       // Mock constructor
     }

From 3b054b4da08517cce53ef23e60c07bb32b0fa8f5 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Tue, 27 Jan 2026 19:50:16 +0000
Subject: [PATCH 06/33] Prefer structuredContent over content field in tool
 responses

Some MCP servers return different data in structuredContent vs content fields.
This change ensures that when structuredContent is present, it is used
exclusively for display instead of showing both fields.

Changes:
- Modified ToolResults.tsx to only show content when structuredContent is absent
- Removed unused checkContentCompatibility function
- Updated test cases to reflect new behavior

Co-authored-by: Cliff Hall <cliffhall@users.noreply.github.com>
---
 client/src/components/ToolResults.tsx         | 165 +++++-------------
 .../components/__tests__/ToolsTab.test.tsx    |  25 +--
 2 files changed, 57 insertions(+), 133 deletions(-)

diff --git a/client/src/components/ToolResults.tsx b/client/src/components/ToolResults.tsx
index 38d1d0382..ac5494885 100644
--- a/client/src/components/ToolResults.tsx
+++ b/client/src/components/ToolResults.tsx
@@ -15,56 +15,6 @@ interface ToolResultsProps {
   isPollingTask?: boolean;
 }
 
-const checkContentCompatibility = (
-  structuredContent: unknown,
-  unstructuredContent: Array<{
-    type: string;
-    text?: string;
-    [key: string]: unknown;
-  }>,
-): { isCompatible: boolean; message: string } => {
-  // Look for at least one text content block that matches the structured content
-  const textBlocks = unstructuredContent.filter(
-    (block) => block.type === "text",
-  );
-
-  if (textBlocks.length === 0) {
-    return {
-      isCompatible: false,
-      message: "No text blocks to match structured content",
-    };
-  }
-
-  // Check if any text block contains JSON that matches the structured content
-  for (const textBlock of textBlocks) {
-    const textContent = textBlock.text;
-    if (!textContent) {
-      continue;
-    }
-
-    try {
-      const parsedContent = JSON.parse(textContent);
-      const isEqual =
-        JSON.stringify(parsedContent) === JSON.stringify(structuredContent);
-
-      if (isEqual) {
-        return {
-          isCompatible: true,
-          message: `Structured content matches text block${textBlocks.length > 1 ? " (multiple blocks)" : ""}${unstructuredContent.length > textBlocks.length ? " + other content" : ""}`,
-        };
-      }
-    } catch {
-      // Continue to next text block if this one doesn't parse as JSON
-      continue;
-    }
-  }
-
-  return {
-    isCompatible: false,
-    message: "No text block matches structured content",
-  };
-};
-
 const ToolResults = ({
   toolResult,
   selectedTool,
@@ -123,19 +73,6 @@ const ToolResults = ({
       }
     }
 
-    let compatibilityResult = null;
-    if (
-      structuredResult.structuredContent &&
-      structuredResult.content.length > 0 &&
-      selectedTool &&
-      hasOutputSchema(selectedTool.name)
-    ) {
-      compatibilityResult = checkContentCompatibility(
-        structuredResult.structuredContent,
-        structuredResult.content,
-      );
-    }
-
     return (
       <>
         <h4 className="font-semibold mb-2">
@@ -188,66 +125,48 @@ const ToolResults = ({
               </div>
             </div>
           )}
-        {structuredResult.content.length > 0 && (
-          <div className="mb-4">
-            {structuredResult.structuredContent && (
-              <>
-                <h5 className="font-semibold mb-2 text-sm">
-                  Unstructured Content:
-                </h5>
-                {compatibilityResult && (
-                  <div
-                    className={`mb-2 p-2 rounded text-sm ${
-                      compatibilityResult.isCompatible
-                        ? "bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200"
-                        : "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
-                    }`}
-                  >
-                    {compatibilityResult.isCompatible ? "✓" : "⚠"}{" "}
-                    {compatibilityResult.message}
-                  </div>
-                )}
-              </>
-            )}
-            {structuredResult.content.map((item, index) => (
-              <div key={index} className="mb-2">
-                {item.type === "text" && (
-                  <JsonView data={item.text} isError={isError} />
-                )}
-                {item.type === "image" && (
-                  <img
-                    src={`data:${item.mimeType};base64,${item.data}`}
-                    alt="Tool result image"
-                    className="max-w-full h-auto"
-                  />
-                )}
-                {item.type === "resource" &&
-                  (item.resource?.mimeType?.startsWith("audio/") &&
-                  "blob" in item.resource ? (
-                    <audio
-                      controls
-                      src={`data:${item.resource.mimeType};base64,${item.resource.blob}`}
-                      className="w-full"
-                    >
-                      <p>Your browser does not support audio playback</p>
-                    </audio>
-                  ) : (
-                    <JsonView data={item.resource} />
-                  ))}
-                {item.type === "resource_link" && (
-                  <ResourceLinkView
-                    uri={item.uri}
-                    name={item.name}
-                    description={item.description}
-                    mimeType={item.mimeType}
-                    resourceContent={resourceContent[item.uri] || ""}
-                    onReadResource={onReadResource}
-                  />
-                )}
-              </div>
-            ))}
-          </div>
-        )}
+        {structuredResult.content.length > 0 &&
+          !structuredResult.structuredContent && (
+            <div className="mb-4">
+              {structuredResult.content.map((item, index) => (
+                <div key={index} className="mb-2">
+                  {item.type === "text" && (
+                    <JsonView data={item.text} isError={isError} />
+                  )}
+                  {item.type === "image" && (
+                    <img
+                      src={`data:${item.mimeType};base64,${item.data}`}
+                      alt="Tool result image"
+                      className="max-w-full h-auto"
+                    />
+                  )}
+                  {item.type === "resource" &&
+                    (item.resource?.mimeType?.startsWith("audio/") &&
+                    "blob" in item.resource ? (
+                      <audio
+                        controls
+                        src={`data:${item.resource.mimeType};base64,${item.resource.blob}`}
+                        className="w-full"
+                      >
+                        <p>Your browser does not support audio playback</p>
+                      </audio>
+                    ) : (
+                      <JsonView data={item.resource} />
+                    ))}
+                  {item.type === "resource_link" && (
+                    <ResourceLinkView
+                      uri={item.uri}
+                      name={item.name}
+                      description={item.description}
+                      mimeType={item.mimeType}
+                      resourceContent={resourceContent[item.uri] || ""}
+                      onReadResource={onReadResource}
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
       </>
     );
   } else if ("toolResult" in toolResult) {
diff --git a/client/src/components/__tests__/ToolsTab.test.tsx b/client/src/components/__tests__/ToolsTab.test.tsx
index cb9ebf4ef..a563c0dc3 100644
--- a/client/src/components/__tests__/ToolsTab.test.tsx
+++ b/client/src/components/__tests__/ToolsTab.test.tsx
@@ -483,7 +483,7 @@ describe("ToolsTab", () => {
       ).toBeInTheDocument();
     });
 
-    it("should show unstructured content title when both structured and unstructured exist", () => {
+    it("should prefer structured content when both structured and unstructured exist", () => {
       const resultWithBoth = {
         content: [{ type: "text", text: '{"temperature": 25}' }],
         structuredContent: { temperature: 25 },
@@ -496,7 +496,10 @@ describe("ToolsTab", () => {
       });
 
       expect(screen.getByText("Structured Content:")).toBeInTheDocument();
-      expect(screen.getByText("Unstructured Content:")).toBeInTheDocument();
+      // Should not show unstructured content when structured content is present
+      expect(
+        screen.queryByText("Unstructured Content:"),
+      ).not.toBeInTheDocument();
     });
 
     it("should not show unstructured content title when only unstructured exists", () => {
@@ -514,7 +517,7 @@ describe("ToolsTab", () => {
       ).not.toBeInTheDocument();
     });
 
-    it("should show compatibility check when tool has output schema", () => {
+    it("should show only structured content when tool has output schema", () => {
       const compatibleResult = {
         content: [{ type: "text", text: '{"temperature": 25}' }],
         structuredContent: { temperature: 25 },
@@ -526,13 +529,14 @@ describe("ToolsTab", () => {
         toolResult: compatibleResult,
       });
 
-      // Should show compatibility result
+      // Should show structured content and not show unstructured content
+      expect(screen.getByText("Structured Content:")).toBeInTheDocument();
       expect(
-        screen.getByText(/structured content matches/i),
-      ).toBeInTheDocument();
+        screen.queryByText(/structured content matches/i),
+      ).not.toBeInTheDocument();
     });
 
-    it("should accept multiple content blocks with structured output", () => {
+    it("should prefer structured content over multiple content blocks", () => {
       const multipleBlocksResult = {
         content: [
           { type: "text", text: "Here is the weather data:" },
@@ -548,10 +552,11 @@ describe("ToolsTab", () => {
         toolResult: multipleBlocksResult,
       });
 
-      // Should show compatible result with multiple blocks
+      // Should show structured content and hide unstructured content blocks
+      expect(screen.getByText("Structured Content:")).toBeInTheDocument();
       expect(
-        screen.getByText(/structured content matches.*multiple/i),
-      ).toBeInTheDocument();
+        screen.queryByText("Here is the weather data:"),
+      ).not.toBeInTheDocument();
     });
 
     it("should accept mixed content types with structured output", () => {

From 939f3fa313e2d27f96ce371ce9cba6583d5af20f Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 27 Jan 2026 15:08:46 -0500
Subject: [PATCH 07/33] Revert "Prefer structuredContent over content field in
 tool responses"

This reverts commit 3b054b4da08517cce53ef23e60c07bb32b0fa8f5.

Claude did not do the right thing.
---
 client/src/components/ToolResults.tsx         | 165 +++++++++++++-----
 .../components/__tests__/ToolsTab.test.tsx    |  25 ++-
 2 files changed, 133 insertions(+), 57 deletions(-)

diff --git a/client/src/components/ToolResults.tsx b/client/src/components/ToolResults.tsx
index ac5494885..38d1d0382 100644
--- a/client/src/components/ToolResults.tsx
+++ b/client/src/components/ToolResults.tsx
@@ -15,6 +15,56 @@ interface ToolResultsProps {
   isPollingTask?: boolean;
 }
 
+const checkContentCompatibility = (
+  structuredContent: unknown,
+  unstructuredContent: Array<{
+    type: string;
+    text?: string;
+    [key: string]: unknown;
+  }>,
+): { isCompatible: boolean; message: string } => {
+  // Look for at least one text content block that matches the structured content
+  const textBlocks = unstructuredContent.filter(
+    (block) => block.type === "text",
+  );
+
+  if (textBlocks.length === 0) {
+    return {
+      isCompatible: false,
+      message: "No text blocks to match structured content",
+    };
+  }
+
+  // Check if any text block contains JSON that matches the structured content
+  for (const textBlock of textBlocks) {
+    const textContent = textBlock.text;
+    if (!textContent) {
+      continue;
+    }
+
+    try {
+      const parsedContent = JSON.parse(textContent);
+      const isEqual =
+        JSON.stringify(parsedContent) === JSON.stringify(structuredContent);
+
+      if (isEqual) {
+        return {
+          isCompatible: true,
+          message: `Structured content matches text block${textBlocks.length > 1 ? " (multiple blocks)" : ""}${unstructuredContent.length > textBlocks.length ? " + other content" : ""}`,
+        };
+      }
+    } catch {
+      // Continue to next text block if this one doesn't parse as JSON
+      continue;
+    }
+  }
+
+  return {
+    isCompatible: false,
+    message: "No text block matches structured content",
+  };
+};
+
 const ToolResults = ({
   toolResult,
   selectedTool,
@@ -73,6 +123,19 @@ const ToolResults = ({
       }
     }
 
+    let compatibilityResult = null;
+    if (
+      structuredResult.structuredContent &&
+      structuredResult.content.length > 0 &&
+      selectedTool &&
+      hasOutputSchema(selectedTool.name)
+    ) {
+      compatibilityResult = checkContentCompatibility(
+        structuredResult.structuredContent,
+        structuredResult.content,
+      );
+    }
+
     return (
       <>
         <h4 className="font-semibold mb-2">
@@ -125,48 +188,66 @@ const ToolResults = ({
               </div>
             </div>
           )}
-        {structuredResult.content.length > 0 &&
-          !structuredResult.structuredContent && (
-            <div className="mb-4">
-              {structuredResult.content.map((item, index) => (
-                <div key={index} className="mb-2">
-                  {item.type === "text" && (
-                    <JsonView data={item.text} isError={isError} />
-                  )}
-                  {item.type === "image" && (
-                    <img
-                      src={`data:${item.mimeType};base64,${item.data}`}
-                      alt="Tool result image"
-                      className="max-w-full h-auto"
-                    />
-                  )}
-                  {item.type === "resource" &&
-                    (item.resource?.mimeType?.startsWith("audio/") &&
-                    "blob" in item.resource ? (
-                      <audio
-                        controls
-                        src={`data:${item.resource.mimeType};base64,${item.resource.blob}`}
-                        className="w-full"
-                      >
-                        <p>Your browser does not support audio playback</p>
-                      </audio>
-                    ) : (
-                      <JsonView data={item.resource} />
-                    ))}
-                  {item.type === "resource_link" && (
-                    <ResourceLinkView
-                      uri={item.uri}
-                      name={item.name}
-                      description={item.description}
-                      mimeType={item.mimeType}
-                      resourceContent={resourceContent[item.uri] || ""}
-                      onReadResource={onReadResource}
-                    />
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
+        {structuredResult.content.length > 0 && (
+          <div className="mb-4">
+            {structuredResult.structuredContent && (
+              <>
+                <h5 className="font-semibold mb-2 text-sm">
+                  Unstructured Content:
+                </h5>
+                {compatibilityResult && (
+                  <div
+                    className={`mb-2 p-2 rounded text-sm ${
+                      compatibilityResult.isCompatible
+                        ? "bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200"
+                        : "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
+                    }`}
+                  >
+                    {compatibilityResult.isCompatible ? "✓" : "⚠"}{" "}
+                    {compatibilityResult.message}
+                  </div>
+                )}
+              </>
+            )}
+            {structuredResult.content.map((item, index) => (
+              <div key={index} className="mb-2">
+                {item.type === "text" && (
+                  <JsonView data={item.text} isError={isError} />
+                )}
+                {item.type === "image" && (
+                  <img
+                    src={`data:${item.mimeType};base64,${item.data}`}
+                    alt="Tool result image"
+                    className="max-w-full h-auto"
+                  />
+                )}
+                {item.type === "resource" &&
+                  (item.resource?.mimeType?.startsWith("audio/") &&
+                  "blob" in item.resource ? (
+                    <audio
+                      controls
+                      src={`data:${item.resource.mimeType};base64,${item.resource.blob}`}
+                      className="w-full"
+                    >
+                      <p>Your browser does not support audio playback</p>
+                    </audio>
+                  ) : (
+                    <JsonView data={item.resource} />
+                  ))}
+                {item.type === "resource_link" && (
+                  <ResourceLinkView
+                    uri={item.uri}
+                    name={item.name}
+                    description={item.description}
+                    mimeType={item.mimeType}
+                    resourceContent={resourceContent[item.uri] || ""}
+                    onReadResource={onReadResource}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        )}
       </>
     );
   } else if ("toolResult" in toolResult) {
diff --git a/client/src/components/__tests__/ToolsTab.test.tsx b/client/src/components/__tests__/ToolsTab.test.tsx
index a563c0dc3..cb9ebf4ef 100644
--- a/client/src/components/__tests__/ToolsTab.test.tsx
+++ b/client/src/components/__tests__/ToolsTab.test.tsx
@@ -483,7 +483,7 @@ describe("ToolsTab", () => {
       ).toBeInTheDocument();
     });
 
-    it("should prefer structured content when both structured and unstructured exist", () => {
+    it("should show unstructured content title when both structured and unstructured exist", () => {
       const resultWithBoth = {
         content: [{ type: "text", text: '{"temperature": 25}' }],
         structuredContent: { temperature: 25 },
@@ -496,10 +496,7 @@ describe("ToolsTab", () => {
       });
 
       expect(screen.getByText("Structured Content:")).toBeInTheDocument();
-      // Should not show unstructured content when structured content is present
-      expect(
-        screen.queryByText("Unstructured Content:"),
-      ).not.toBeInTheDocument();
+      expect(screen.getByText("Unstructured Content:")).toBeInTheDocument();
     });
 
     it("should not show unstructured content title when only unstructured exists", () => {
@@ -517,7 +514,7 @@ describe("ToolsTab", () => {
       ).not.toBeInTheDocument();
     });
 
-    it("should show only structured content when tool has output schema", () => {
+    it("should show compatibility check when tool has output schema", () => {
       const compatibleResult = {
         content: [{ type: "text", text: '{"temperature": 25}' }],
         structuredContent: { temperature: 25 },
@@ -529,14 +526,13 @@ describe("ToolsTab", () => {
         toolResult: compatibleResult,
       });
 
-      // Should show structured content and not show unstructured content
-      expect(screen.getByText("Structured Content:")).toBeInTheDocument();
+      // Should show compatibility result
       expect(
-        screen.queryByText(/structured content matches/i),
-      ).not.toBeInTheDocument();
+        screen.getByText(/structured content matches/i),
+      ).toBeInTheDocument();
     });
 
-    it("should prefer structured content over multiple content blocks", () => {
+    it("should accept multiple content blocks with structured output", () => {
       const multipleBlocksResult = {
         content: [
           { type: "text", text: "Here is the weather data:" },
@@ -552,11 +548,10 @@ describe("ToolsTab", () => {
         toolResult: multipleBlocksResult,
       });
 
-      // Should show structured content and hide unstructured content blocks
-      expect(screen.getByText("Structured Content:")).toBeInTheDocument();
+      // Should show compatible result with multiple blocks
       expect(
-        screen.queryByText("Here is the weather data:"),
-      ).not.toBeInTheDocument();
+        screen.getByText(/structured content matches.*multiple/i),
+      ).toBeInTheDocument();
     });
 
     it("should accept mixed content types with structured output", () => {

From b5b5910841caeeec101acaec30a0d5b1e85fef3a Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 29 Jan 2026 11:48:54 -0500
Subject: [PATCH 08/33] feat: integrate @mcp-ui/client for MCP application
 rendering

This commit implements the integration of `@mcp-ui/client` to handle the
rendering of Model Context Protocol (MCP) applications within the inspector.
It includes refactoring the rendering logic, improving resource fetching
in the main application state, and setting up a secure sandbox environment.

Changes per file:

- client/package.json:
  - Added `@mcp-ui/client` as a dependency.

- client/src/components/AppRenderer.tsx:
  - Refactored to use `McpUiAppRenderer` from `@mcp-ui/client`.
  - Implemented HTML parsing logic for MCP resource responses.
  - Configured host context (theme) and sandbox URL for the renderer.
  - Replaced iframe-based manual rendering with the official component.

- client/src/App.tsx:
  - Added `fetchingResources` state to prevent duplicate concurrent resource requests.
  - Enhanced `readResource` with better error handling and state tracking.
  - Optimized resource content mapping to better support application state.

- client/src/components/AppsTab.tsx:
  - Updated to use `getToolUiResourceUri` utility from `@modelcontextprotocol/ext-apps`
    instead of manual metadata property access.
  - Simplified tool filtering and selection logic.

- client/public/sandbox_proxy.html:
  - Added a sandbox proxy page to facilitate secure communication between
    the inspector and the rendered MCP applications.

- client/bin/client.js:
  - Added server rewrites to ensure `sandbox_proxy.html` is served correctly.
  - Implemented specific `Cache-Control` headers for `sandbox_proxy.html` to
    prevent stale cached versions.

- client/vite.config.ts:
  - Explicitly configured `publicDir: "public"` to ensure the sandbox proxy
    is included in the build output.

- client/src/components/__tests__/AppRenderer.test.tsx:
  - Updated tests to mock the new `@mcp-ui/client` component.
  - Adjusted assertions to verify correct props are passed to the renderer.
  - Enhanced mock MCP client to include required methods like `getServerCapabilities`.
---
 client/bin/client.js                          |  17 +-
 client/package.json                           |   1 +
 client/public/sandbox_proxy.html              |  52 ++++
 client/src/App.tsx                            |  63 ++--
 client/src/components/AppRenderer.tsx         | 276 ++++-------------
 client/src/components/AppsTab.tsx             |  15 +-
 .../components/__tests__/AppRenderer.test.tsx | 287 +++---------------
 client/vite.config.ts                         |   1 +
 8 files changed, 225 insertions(+), 487 deletions(-)
 create mode 100644 client/public/sandbox_proxy.html

diff --git a/client/bin/client.js b/client/bin/client.js
index 2a7419e66..47aea2dd8 100755
--- a/client/bin/client.js
+++ b/client/bin/client.js
@@ -12,7 +12,12 @@ const distPath = join(__dirname, "../dist");
 const server = http.createServer((request, response) => {
   const handlerOptions = {
     public: distPath,
-    rewrites: [{ source: "/**", destination: "/index.html" }],
+    cleanUrls: false,
+    rewrites: [
+      { source: "/sandbox_proxy.html", destination: "/sandbox_proxy.html" },
+      { source: "/index.html", destination: "/index.html" },
+      { source: "/**", destination: "/index.html" },
+    ],
     headers: [
       {
         // Ensure index.html is never cached
@@ -24,6 +29,16 @@ const server = http.createServer((request, response) => {
           },
         ],
       },
+      {
+        // Ensure sandbox_proxy.html is never cached
+        source: "sandbox_proxy.html",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "no-cache, no-store, max-age=0",
+          },
+        ],
+      },
       {
         // Allow long-term caching for hashed assets
         source: "assets/**",
diff --git a/client/package.json b/client/package.json
index 0d2a6a26e..1ac32027c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,6 +25,7 @@
     "cleanup:e2e": "node e2e/global-teardown.js"
   },
   "dependencies": {
+    "@mcp-ui/client": "^6.0.0",
     "@modelcontextprotocol/ext-apps": "^1.0.0",
     "@modelcontextprotocol/sdk": "^1.25.2",
     "@radix-ui/react-checkbox": "^1.1.4",
diff --git a/client/public/sandbox_proxy.html b/client/public/sandbox_proxy.html
new file mode 100644
index 000000000..2e2faf802
--- /dev/null
+++ b/client/public/sandbox_proxy.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>MCP App Sandbox Proxy</title>
+    <style>
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>
+      (function () {
+        const SANDBOX_PROXY_READY_METHOD =
+          "ui/notifications/sandbox-proxy-ready";
+        const SANDBOX_RESOURCE_READY_METHOD =
+          "ui/notifications/sandbox-resource-ready";
+
+        // Notify host that we are ready to receive the app resource
+        window.parent.postMessage(
+          {
+            jsonrpc: "2.0",
+            method: SANDBOX_PROXY_READY_METHOD,
+            params: {},
+          },
+          "*",
+        );
+
+        // Listen for the app resource (HTML) from the host
+        window.addEventListener("message", (event) => {
+          const message = event.data;
+          if (message && message.method === SANDBOX_RESOURCE_READY_METHOD) {
+            const { html } = message.params;
+            if (html) {
+              // Write the HTML to the document
+              document.open();
+              document.write(html);
+              document.close();
+            }
+          }
+        });
+      })();
+    </script>
+  </body>
+</html>
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 0a8d536a4..072ca0aa6 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -128,6 +128,9 @@ const App = () => {
   const [resourceContentMap, setResourceContentMap] = useState<
     Record<string, string>
   >({});
+  const [fetchingResources, setFetchingResources] = useState<Set<string>>(
+    new Set(),
+  );
   const [prompts, setPrompts] = useState<Prompt[]>([]);
   const [promptContent, setPromptContent] = useState<string>("");
   const [tools, setTools] = useState<Tool[]>([]);
@@ -866,36 +869,48 @@ const App = () => {
   };
 
   const readResource = async (uri: string) => {
+    if (fetchingResources.has(uri) || resourceContentMap[uri]) {
+      return;
+    }
+
     console.log("[App] Reading resource:", uri);
+    setFetchingResources((prev) => new Set(prev).add(uri));
     lastToolCallOriginTabRef.current = currentTabRef.current;
 
-    const response = await sendMCPRequest(
-      {
-        method: "resources/read" as const,
-        params: { uri },
-      },
-      ReadResourceResultSchema,
-      "resources",
-    );
-    console.log("[App] Resource read response:", {
-      uri,
-      responseLength: JSON.stringify(response).length,
-      hasContents: !!(response as { contents?: unknown[] }).contents,
-    });
-    const content = JSON.stringify(response, null, 2);
-    setResourceContent(content);
-    setResourceContentMap((prev) => {
-      const updated = {
+    try {
+      const response = await sendMCPRequest(
+        {
+          method: "resources/read" as const,
+          params: { uri },
+        },
+        ReadResourceResultSchema,
+        "resources",
+      );
+      console.log("[App] Resource read response:", {
+        uri,
+        responseLength: JSON.stringify(response).length,
+        hasContents: !!(response as { contents?: unknown[] }).contents,
+      });
+      const content = JSON.stringify(response, null, 2);
+      setResourceContent(content);
+      setResourceContentMap((prev) => ({
         ...prev,
         [uri]: content,
-      };
-      console.log("[App] Updated resourceContentMap:", {
-        uri,
-        contentLength: content.length,
-        mapKeys: Object.keys(updated),
+      }));
+    } catch (error) {
+      console.error(`[App] Failed to read resource ${uri}:`, error);
+      const errorString = (error as Error).message ?? String(error);
+      setResourceContentMap((prev) => ({
+        ...prev,
+        [uri]: JSON.stringify({ error: errorString }),
+      }));
+    } finally {
+      setFetchingResources((prev) => {
+        const next = new Set(prev);
+        next.delete(uri);
+        return next;
       });
-      return updated;
-    });
+    }
   };
 
   const subscribeToResource = async (uri: string) => {
diff --git a/client/src/components/AppRenderer.tsx b/client/src/components/AppRenderer.tsx
index c9a1a2023..c5687c913 100644
--- a/client/src/components/AppRenderer.tsx
+++ b/client/src/components/AppRenderer.tsx
@@ -1,14 +1,13 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import { Tool } from "@modelcontextprotocol/sdk/types.js";
 import {
-  AppBridge,
-  PostMessageTransport,
-  getToolUiResourceUri,
-  buildAllowAttribute,
-} from "@modelcontextprotocol/ext-apps/app-bridge";
+  AppRenderer as McpUiAppRenderer,
+  type McpUiHostContext,
+} from "@mcp-ui/client";
+import { getToolUiResourceUri } from "@modelcontextprotocol/ext-apps/app-bridge";
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { AlertCircle, Loader2 } from "lucide-react";
+import { AlertCircle } from "lucide-react";
 
 interface AppRendererProps {
   tool: Tool;
@@ -17,202 +16,57 @@ interface AppRendererProps {
   resourceContent: string;
 }
 
-interface UIResourceMeta {
-  ui?: {
-    resourceUri?: string;
-    permissions?: Record<string, unknown>;
-    csp?: string;
-  };
-}
-
 const AppRenderer = ({
   tool,
   mcpClient,
   onReadResource,
   resourceContent,
 }: AppRendererProps) => {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const bridgeRef = useRef<AppBridge | null>(null);
-  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [initialized, setInitialized] = useState(false);
 
   // Extract UI metadata from tool
   const resourceUri = getToolUiResourceUri(tool);
-  const meta = (tool as Tool & { _meta?: UIResourceMeta })._meta;
-  const permissions = meta?.ui?.permissions;
-
-  // Fetch UI resource when component mounts or tool changes
-  useEffect(() => {
-    console.log("[AppRenderer] Resource fetch check:", {
-      resourceUri,
-      hasResourceContent: !!resourceContent,
-      resourceContentLength: resourceContent?.length || 0,
-    });
-
-    if (resourceUri && !resourceContent) {
-      console.log("[AppRenderer] Fetching resource:", resourceUri);
-      setLoading(true);
-      setError(null);
-      onReadResource(resourceUri);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [resourceUri, resourceContent]);
-
-  // Set up AppBridge and render the app
-  useEffect(() => {
-    console.log("[AppRenderer] Setup check:", {
-      hasResourceContent: !!resourceContent,
-      hasIframe: !!iframeRef.current,
-      hasMcpClient: !!mcpClient,
-      resourceContentPreview: resourceContent?.substring(0, 100),
-    });
-
-    if (!resourceContent || !iframeRef.current || !mcpClient) {
-      console.log("[AppRenderer] Setup conditions not met, skipping");
-      return;
-    }
 
-    console.log("[AppRenderer] Starting app setup");
-    const iframe = iframeRef.current;
-    let bridge: AppBridge | null = null;
-    let transport: PostMessageTransport | null = null;
-
-    const setupApp = async () => {
+  // Parse HTML from resourceContent if it's a JSON-encoded resource response
+  const html = useMemo(() => {
+    let retval = "";
+    if (resourceContent) {
       try {
-        console.log("[AppRenderer] Creating AppBridge...");
-        // Create AppBridge with the MCP client
-        bridge = new AppBridge(
-          mcpClient,
-          { name: "MCP Inspector", version: "0.19.0" },
-          {
-            openLinks: {},
-            serverTools: {},
-            logging: {},
-          },
-          {
-            hostContext: {
-              theme: document.documentElement.classList.contains("dark")
-                ? "dark"
-                : "light",
-            },
-          },
-        );
-
-        // Set up event handlers
-        bridge.oninitialized = () => {
-          console.log("[AppRenderer] MCP App initialized successfully");
-          setInitialized(true);
-        };
-
-        bridge.onerror = (error: Error) => {
-          console.error("MCP App error:", error);
-          setError(error.message || "An error occurred");
-        };
-
-        // Create the iframe document with the UI resource content
-        const iframeDoc =
-          iframe.contentDocument || iframe.contentWindow?.document;
-        if (!iframeDoc) {
-          throw new Error("Could not access iframe document");
+        const parsed = JSON.parse(resourceContent);
+        if (parsed.error) {
+          setError(parsed.error);
+          return "";
         }
-
-        // Parse the resource content to extract HTML
-        let htmlContent = resourceContent;
-        console.log("[AppRenderer] Parsing resource content...");
-        try {
-          const parsed = JSON.parse(resourceContent);
-          console.log("[AppRenderer] Parsed JSON:", {
-            hasContents: !!parsed.contents,
-            isArray: Array.isArray(parsed.contents),
-            contentsLength: parsed.contents?.length,
-          });
-          if (parsed.contents && Array.isArray(parsed.contents)) {
-            // MCP resource response format: TextResourceContents has uri, mimeType?, and text
-            const textContent = parsed.contents.find(
-              (c: { uri?: string; mimeType?: string; text?: string }) =>
-                c.text !== undefined,
-            );
-            if (textContent?.text) {
-              htmlContent = textContent.text;
-              console.log(
-                "[AppRenderer] Extracted HTML from contents, length:",
-                htmlContent.length,
-                "mimeType:",
-                textContent.mimeType,
-              );
-            } else {
-              console.warn(
-                "[AppRenderer] No text content found in contents array:",
-                parsed.contents,
-              );
-            }
-          }
-        } catch (err) {
-          console.log("[AppRenderer] Not JSON, using content as-is:", err);
+        if (parsed.contents && Array.isArray(parsed.contents)) {
+          // MCP resource response format: TextResourceContents has uri, mimeType?, and text
+          const textContent = parsed.contents.find(
+            (c: { text?: string }) => c.text !== undefined,
+          );
+          retval = textContent?.text || resourceContent;
         }
-
-        // Write the HTML content to the iframe
-        console.log("[AppRenderer] Writing HTML to iframe...");
-        iframeDoc.open();
-        iframeDoc.write(htmlContent);
-        iframeDoc.close();
-        console.log("[AppRenderer] HTML written to iframe");
-
-        // Clear loading state so iframe becomes visible
-        // This is required for PostMessage communication to work
-        setLoading(false);
-        console.log("[AppRenderer] Iframe now visible, ready for PostMessage");
-
-        // Wait for iframe to load
-        await new Promise<void>((resolve) => {
-          if (iframe.contentWindow) {
-            iframe.contentWindow.addEventListener("load", () => resolve(), {
-              once: true,
-            });
-          } else {
-            resolve();
-          }
-        });
-
-        // Create PostMessageTransport for communication
-        if (!iframe.contentWindow) {
-          throw new Error("Iframe contentWindow not available");
-        }
-
-        console.log("[AppRenderer] Creating PostMessageTransport...");
-        transport = new PostMessageTransport(
-          iframe.contentWindow,
-          iframe.contentWindow,
-        );
-
-        // Connect the bridge
-        console.log("[AppRenderer] Connecting AppBridge...");
-        await bridge.connect(transport);
-        console.log("[AppRenderer] AppBridge connected successfully");
-
-        bridgeRef.current = bridge;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
       } catch (err) {
-        console.error("Error setting up MCP App:", err);
-        setError(err instanceof Error ? err.message : "Failed to set up app");
-        setLoading(false);
-      }
-    };
-
-    setupApp();
-
-    // Cleanup
-    return () => {
-      if (bridge) {
-        bridge.close().catch(console.error);
+        retval = resourceContent;
       }
-      bridgeRef.current = null;
-      setInitialized(false);
-    };
-  }, [resourceContent, mcpClient]);
+    }
+    return retval;
+  }, [resourceContent]);
 
-  // Build iframe attributes
-  const allowAttribute = buildAllowAttribute(permissions);
+  // Fetch UI resource when component mounts or tool changes
+  useEffect(() => {
+    if (resourceUri && !resourceContent && !error) {
+      onReadResource(resourceUri);
+    }
+  }, [resourceUri, resourceContent, onReadResource, error]);
+
+  const hostContext: McpUiHostContext = useMemo(
+    () => ({
+      theme: document.documentElement.classList.contains("dark")
+        ? "dark"
+        : "light",
+    }),
+    [],
+  );
 
   if (!resourceUri) {
     return (
@@ -225,39 +79,39 @@ const AppRenderer = ({
     );
   }
 
+  if (!mcpClient) {
+    return (
+      <Alert>
+        <AlertCircle className="h-4 w-4" />
+        <AlertDescription>Waiting for MCP client...</AlertDescription>
+      </Alert>
+    );
+  }
+
   return (
     <div className="flex flex-col h-full">
-      {loading && (
-        <Alert>
-          <Loader2 className="h-4 w-4 animate-spin" />
-          <AlertDescription>Loading MCP App...</AlertDescription>
-        </Alert>
-      )}
-
       {error && (
-        <Alert variant="destructive">
+        <Alert variant="destructive" className="mb-4">
           <AlertCircle className="h-4 w-4" />
           <AlertDescription>{error}</AlertDescription>
         </Alert>
       )}
 
-      <iframe
-        ref={iframeRef}
-        className="w-full flex-1 border rounded"
-        sandbox="allow-scripts allow-same-origin"
-        allow={allowAttribute}
-        style={{
-          minHeight: "400px",
-          display: loading ? "none" : "block",
-        }}
-        title={`MCP App: ${tool.name}`}
-      />
-
-      {initialized && (
-        <div className="text-xs text-muted-foreground mt-2">
-          App connected • {tool.name}
-        </div>
-      )}
+      <div
+        className="flex-1 border rounded overflow-hidden"
+        style={{ minHeight: "400px" }}
+      >
+        <McpUiAppRenderer
+          client={mcpClient}
+          toolName={tool.name}
+          html={html}
+          hostContext={hostContext}
+          sandbox={{
+            url: new URL("/sandbox_proxy.html", window.location.origin),
+          }}
+          onError={(err) => setError(err.message)}
+        />
+      </div>
     </div>
   );
 };
diff --git a/client/src/components/AppsTab.tsx b/client/src/components/AppsTab.tsx
index 9bbb167e9..ce23ea7ce 100644
--- a/client/src/components/AppsTab.tsx
+++ b/client/src/components/AppsTab.tsx
@@ -5,6 +5,7 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
 import { AlertCircle, RefreshCw, X } from "lucide-react";
 import { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { getToolUiResourceUri } from "@modelcontextprotocol/ext-apps/app-bridge";
 import AppRenderer from "./AppRenderer";
 
 interface AppsTabProps {
@@ -18,8 +19,7 @@ interface AppsTabProps {
 
 // Type guard to check if a tool has UI metadata
 const hasUIMetadata = (tool: Tool): boolean => {
-  const meta = (tool as { _meta?: { ui?: { resourceUri?: string } } })._meta;
-  return !!meta?.ui?.resourceUri;
+  return !!getToolUiResourceUri(tool);
 };
 
 const AppsTab = ({
@@ -88,9 +88,7 @@ const AppsTab = ({
       ) : (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {appTools.map((tool) => {
-            const meta = (tool as { _meta?: { ui?: { resourceUri?: string } } })
-              ._meta;
-            const resourceUri = meta?.ui?.resourceUri || "";
+            const resourceUri = getToolUiResourceUri(tool) || "";
 
             return (
               <div
@@ -117,12 +115,7 @@ const AppsTab = ({
 
       {selectedTool &&
         (() => {
-          const resourceUri =
-            (
-              selectedTool as Tool & {
-                _meta?: { ui?: { resourceUri?: string } };
-              }
-            )._meta?.ui?.resourceUri || "";
+          const resourceUri = getToolUiResourceUri(selectedTool) || "";
           const content = resourceContentMap[resourceUri] || "";
 
           console.log("[AppsTab] Rendering app:", {
diff --git a/client/src/components/__tests__/AppRenderer.test.tsx b/client/src/components/__tests__/AppRenderer.test.tsx
index 2da08f431..18ea93e29 100644
--- a/client/src/components/__tests__/AppRenderer.test.tsx
+++ b/client/src/components/__tests__/AppRenderer.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { describe, it, jest, beforeEach } from "@jest/globals";
 import AppRenderer from "../AppRenderer";
@@ -6,46 +6,23 @@ import { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 
 // Mock the ext-apps module
-jest.mock("@modelcontextprotocol/ext-apps/app-bridge", () => {
-  class MockAppBridge {
-    oninitialized: (() => void) | null = null;
-    onerror: ((error: Error) => void) | null = null;
-
-    async connect() {
-      // Simulate successful connection
-      setTimeout(() => {
-        if (this.oninitialized) {
-          this.oninitialized();
-        }
-      }, 0);
-    }
-
-    async close() {
-      // Mock close
-    }
-  }
-
-  class MockPostMessageTransport {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    constructor(_source: Window | null, _target: Window | null) {
-      // Mock constructor
-    }
-  }
-
-  return {
-    AppBridge: MockAppBridge,
-    PostMessageTransport: MockPostMessageTransport,
-    getToolUiResourceUri: (tool: Tool) => {
-      const meta = (
-        tool as Tool & { _meta?: { ui?: { resourceUri?: string } } }
-      )._meta;
-      return meta?.ui?.resourceUri || null;
-    },
-    buildAllowAttribute: (permissions?: Record<string, unknown>) => {
-      return permissions ? "custom-permissions" : "";
-    },
-  };
-});
+jest.mock("@modelcontextprotocol/ext-apps/app-bridge", () => ({
+  getToolUiResourceUri: (tool: Tool) => {
+    const meta = (tool as Tool & { _meta?: { ui?: { resourceUri?: string } } })
+      ._meta;
+    return meta?.ui?.resourceUri || null;
+  },
+}));
+
+// Mock @mcp-ui/client
+jest.mock("@mcp-ui/client", () => ({
+  AppRenderer: ({ toolName, html }: { toolName: string; html: string }) => (
+    <div data-testid="mcp-ui-app-renderer">
+      <div data-testid="tool-name">{toolName}</div>
+      <div data-testid="html-content">{html}</div>
+    </div>
+  ),
+}));
 
 describe("AppRenderer", () => {
   const mockTool: Tool = {
@@ -64,6 +41,8 @@ describe("AppRenderer", () => {
 
   const mockMcpClient = {
     request: jest.fn(),
+    getServerCapabilities: jest.fn().mockReturnValue({}),
+    setNotificationHandler: jest.fn(),
   } as unknown as Client;
 
   const defaultProps = {
@@ -77,10 +56,9 @@ describe("AppRenderer", () => {
     jest.clearAllMocks();
   });
 
-  it("should display loading state initially", () => {
-    render(<AppRenderer {...defaultProps} />);
-
-    expect(screen.getByText(/Loading MCP App/i)).toBeInTheDocument();
+  it("should display waiting state when mcpClient is null", () => {
+    render(<AppRenderer {...defaultProps} mcpClient={null} />);
+    expect(screen.getByText(/Waiting for MCP client/i)).toBeInTheDocument();
   });
 
   it("should call onReadResource when resourceContent is empty", () => {
@@ -96,19 +74,6 @@ describe("AppRenderer", () => {
     expect(mockOnReadResource).toHaveBeenCalledWith("ui://test-app");
   });
 
-  it("should not call onReadResource when resourceContent is provided", () => {
-    const mockOnReadResource = jest.fn();
-    render(
-      <AppRenderer
-        {...defaultProps}
-        onReadResource={mockOnReadResource}
-        resourceContent="<html>test</html>"
-      />,
-    );
-
-    expect(mockOnReadResource).not.toHaveBeenCalled();
-  });
-
   it("should display error when no resource URI is found", () => {
     const toolWithoutUri: Tool = {
       name: "noUriTool",
@@ -121,10 +86,12 @@ describe("AppRenderer", () => {
 
     render(<AppRenderer {...defaultProps} tool={toolWithoutUri} />);
 
-    expect(screen.getByText(/No UI resource URI found/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/No UI resource URI found in tool metadata/i),
+    ).toBeInTheDocument();
   });
 
-  it("should render iframe with proper attributes", async () => {
+  it("should render McpUiAppRenderer when client and resource are ready", () => {
     render(
       <AppRenderer
         {...defaultProps}
@@ -132,32 +99,14 @@ describe("AppRenderer", () => {
       />,
     );
 
-    await waitFor(() => {
-      const iframe = document.querySelector("iframe");
-      expect(iframe).toBeInTheDocument();
-      expect(iframe).toHaveAttribute(
-        "sandbox",
-        "allow-scripts allow-same-origin",
-      );
-      expect(iframe).toHaveAttribute("title", "MCP App: testApp");
-    });
-  });
-
-  it("should display initialized message when app connects", async () => {
-    render(
-      <AppRenderer
-        {...defaultProps}
-        resourceContent="<html><body>Test</body></html>"
-      />,
+    expect(screen.getByTestId("mcp-ui-app-renderer")).toBeInTheDocument();
+    expect(screen.getByTestId("tool-name")).toHaveTextContent("testApp");
+    expect(screen.getByTestId("html-content")).toHaveTextContent(
+      "<html><body>Test</body></html>",
     );
-
-    await waitFor(() => {
-      expect(screen.getByText(/App connected/i)).toBeInTheDocument();
-      expect(screen.getByText(/testApp/)).toBeInTheDocument();
-    });
   });
 
-  it("should handle JSON resource content with MCP format", async () => {
+  it("should handle JSON resource content with MCP format", () => {
     const jsonContent = JSON.stringify({
       contents: [
         {
@@ -170,122 +119,31 @@ describe("AppRenderer", () => {
 
     render(<AppRenderer {...defaultProps} resourceContent={jsonContent} />);
 
-    await waitFor(() => {
-      const iframe = document.querySelector("iframe");
-      expect(iframe).toBeInTheDocument();
-    });
-  });
-
-  it("should handle plain HTML resource content", async () => {
-    const htmlContent = "<html><body>Plain HTML</body></html>";
-
-    render(<AppRenderer {...defaultProps} resourceContent={htmlContent} />);
-
-    await waitFor(() => {
-      const iframe = document.querySelector("iframe");
-      expect(iframe).toBeInTheDocument();
-    });
-  });
-
-  it("should apply custom permissions to iframe", async () => {
-    const toolWithPermissions: Tool = {
-      ...mockTool,
-      _meta: {
-        ui: {
-          resourceUri: "ui://test-app",
-          permissions: {
-            camera: true,
-            microphone: true,
-          },
-        },
-      },
-    } as Tool & {
-      _meta?: {
-        ui?: { resourceUri?: string; permissions?: Record<string, unknown> };
-      };
-    };
-
-    render(
-      <AppRenderer
-        {...defaultProps}
-        tool={toolWithPermissions}
-        resourceContent="<html><body>Test</body></html>"
-      />,
+    expect(screen.getByTestId("html-content")).toHaveTextContent(
+      "<html><body>Test App</body></html>",
     );
-
-    await waitFor(() => {
-      const iframe = document.querySelector("iframe");
-      expect(iframe).toHaveAttribute("allow", "custom-permissions");
-    });
   });
 
-  it("should update when resourceContent changes", async () => {
-    const { rerender } = render(
-      <AppRenderer {...defaultProps} resourceContent="" />,
-    );
-
-    expect(screen.getByText(/Loading MCP App/i)).toBeInTheDocument();
-
-    // Update with content
-    rerender(
-      <AppRenderer
-        {...defaultProps}
-        resourceContent="<html><body>Updated</body></html>"
-      />,
-    );
-
-    await waitFor(() => {
-      const iframe = document.querySelector("iframe");
-      expect(iframe).toBeInTheDocument();
+  it("should display error from JSON resource response", () => {
+    const errorJson = JSON.stringify({
+      error: "Failed to load resource",
     });
-  });
-
-  it("should cleanup on unmount", async () => {
-    const { unmount } = render(
-      <AppRenderer
-        {...defaultProps}
-        resourceContent="<html><body>Test</body></html>"
-      />,
-    );
 
-    await waitFor(() => {
-      expect(screen.getByText(/App connected/i)).toBeInTheDocument();
-    });
+    render(<AppRenderer {...defaultProps} resourceContent={errorJson} />);
 
-    // Unmount should not throw errors
-    unmount();
+    expect(screen.getByText("Failed to load resource")).toBeInTheDocument();
   });
 
-  it("should handle missing contentWindow gracefully", () => {
-    // This test verifies that the component handles edge cases
-    // The actual error handling is tested through the error display
-    render(
-      <AppRenderer
-        {...defaultProps}
-        mcpClient={null}
-        resourceContent="<html><body>Test</body></html>"
-      />,
-    );
-
-    // Should still show loading state
-    expect(screen.getByText(/Loading MCP App/i)).toBeInTheDocument();
-  });
+  it("should handle invalid JSON gracefully by using as-is", () => {
+    const invalidJson = "{invalid json}";
+    render(<AppRenderer {...defaultProps} resourceContent={invalidJson} />);
 
-  it("should set minimum height on iframe", async () => {
-    render(
-      <AppRenderer
-        {...defaultProps}
-        resourceContent="<html><body>Test</body></html>"
-      />,
+    expect(screen.getByTestId("html-content")).toHaveTextContent(
+      "{invalid json}",
     );
-
-    await waitFor(() => {
-      const iframe = document.querySelector("iframe");
-      expect(iframe).toHaveStyle({ minHeight: "400px" });
-    });
   });
 
-  it("should have proper styling classes on iframe", async () => {
+  it("should set minimum height on container", () => {
     render(
       <AppRenderer
         {...defaultProps}
@@ -293,58 +151,7 @@ describe("AppRenderer", () => {
       />,
     );
 
-    await waitFor(() => {
-      const iframe = document.querySelector("iframe");
-      expect(iframe).toHaveClass("w-full", "flex-1", "border", "rounded");
-    });
-  });
-
-  it("should handle JSON parsing errors gracefully", async () => {
-    const invalidJson = "{invalid json content}";
-
-    render(<AppRenderer {...defaultProps} resourceContent={invalidJson} />);
-
-    // Should still attempt to render as HTML
-    await waitFor(() => {
-      const iframe = document.querySelector("iframe");
-      expect(iframe).toBeInTheDocument();
-    });
-  });
-
-  it("should handle empty contents array in JSON response", async () => {
-    const jsonContent = JSON.stringify({
-      contents: [],
-    });
-
-    render(<AppRenderer {...defaultProps} resourceContent={jsonContent} />);
-
-    await waitFor(() => {
-      const iframe = document.querySelector("iframe");
-      expect(iframe).toBeInTheDocument();
-    });
-  });
-
-  it("should extract text from first text content in MCP response", async () => {
-    const jsonContent = JSON.stringify({
-      contents: [
-        {
-          uri: "ui://test-app",
-          mimeType: "application/json",
-          text: '{"data": "not html"}',
-        },
-        {
-          uri: "ui://test-app",
-          mimeType: "text/html",
-          text: "<html><body>Actual HTML</body></html>",
-        },
-      ],
-    });
-
-    render(<AppRenderer {...defaultProps} resourceContent={jsonContent} />);
-
-    await waitFor(() => {
-      const iframe = document.querySelector("iframe");
-      expect(iframe).toBeInTheDocument();
-    });
+    const container = screen.getByTestId("mcp-ui-app-renderer").parentElement;
+    expect(container).toHaveStyle({ minHeight: "400px" });
   });
 });
diff --git a/client/vite.config.ts b/client/vite.config.ts
index fa817c7b0..1271aefb9 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -4,6 +4,7 @@ import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  publicDir: "public",
   plugins: [react()],
   server: {
     host: true,

From 9a16f13d87f6936e8d7427e0601eb6b1d656a454 Mon Sep 17 00:00:00 2001
From: Cliff Hall <cliff@futurescale.com>
Date: Thu, 29 Jan 2026 15:45:22 -0500
Subject: [PATCH 09/33] Potential fix for code scanning alert no. 37:
 Client-side cross-site scripting

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 client/public/sandbox_proxy.html | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/client/public/sandbox_proxy.html b/client/public/sandbox_proxy.html
index 2e2faf802..70051e120 100644
--- a/client/public/sandbox_proxy.html
+++ b/client/public/sandbox_proxy.html
@@ -16,6 +16,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js"></script>
     <script>
       (function () {
         const SANDBOX_PROXY_READY_METHOD =
@@ -36,12 +37,21 @@
         // Listen for the app resource (HTML) from the host
         window.addEventListener("message", (event) => {
           const message = event.data;
-          if (message && message.method === SANDBOX_RESOURCE_READY_METHOD) {
+          if (
+            message &&
+            typeof message === "object" &&
+            message.method === SANDBOX_RESOURCE_READY_METHOD &&
+            message.params &&
+            typeof message.params.html === "string"
+          ) {
             const { html } = message.params;
             if (html) {
-              // Write the HTML to the document
+              // Sanitize the HTML before writing it to the document
+              const safeHtml = window.DOMPurify
+                ? window.DOMPurify.sanitize(html)
+                : html;
               document.open();
-              document.write(html);
+              document.write(safeHtml);
               document.close();
             }
           }

From b4000dfa156e7b201784acc793bad51188e24d38 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 29 Jan 2026 15:48:02 -0500
Subject: [PATCH 10/33] Update package-lock.json  - npm install  - npm audit
 fix

---
 package-lock.json | 308 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 226 insertions(+), 82 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index eb33add39..132949a7d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -115,6 +115,7 @@
       "version": "0.19.0",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
+        "@mcp-ui/client": "^6.0.0",
         "@modelcontextprotocol/ext-apps": "^1.0.0",
         "@modelcontextprotocol/sdk": "^1.25.2",
         "@radix-ui/react-checkbox": "^1.1.4",
@@ -228,7 +229,6 @@
       "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@csstools/css-calc": "^2.1.3",
         "@csstools/css-color-parser": "^3.0.9",
@@ -242,8 +242,7 @@
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "dev": true,
-      "license": "ISC",
-      "peer": true
+      "license": "ISC"
     },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
@@ -276,6 +275,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -821,7 +821,6 @@
         }
       ],
       "license": "MIT-0",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -842,7 +841,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -867,7 +865,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@csstools/color-helpers": "^5.1.0",
         "@csstools/css-calc": "^2.1.4"
@@ -1889,7 +1886,6 @@
       "integrity": "sha512-kazxw2L9IPuZpQ0mEt9lu9Z98SqR74xcagANmMBU16X0lS23yPc0+S6hGLUz8kVRlomZEs/5S/Zlpqwf5yu6OQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/environment": "30.2.0",
         "@jest/fake-timers": "30.2.0",
@@ -1918,7 +1914,6 @@
       "integrity": "sha512-/QPTL7OBJQ5ac09UDRa3EQes4gt1FTEG/8jZ/4v5IVzx+Cv7dLxlVIvfvSVRiiX2drWyXeBjkMSR8hvOWSog5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/fake-timers": "30.2.0",
         "@jest/types": "30.2.0",
@@ -1935,7 +1930,6 @@
       "integrity": "sha512-HI3tRLjRxAbBy0VO8dqqm7Hb2mIa8d5bg/NJkyQcOk7V118ObQML8RC5luTF/Zsg4474a+gDvhce7eTnP4GhYw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/types": "30.2.0",
         "@sinonjs/fake-timers": "^13.0.0",
@@ -1954,7 +1948,6 @@
       "integrity": "sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@sinclair/typebox": "^0.34.0"
       },
@@ -1968,7 +1961,6 @@
       "integrity": "sha512-H9xg1/sfVvyfU7o3zMfBEjQ1gcsdeTMgqHoYdN79tuLqfTtuu7WckRA1R5whDwOzxaZAeMKTYWqP+WCAi0CHsg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/pattern": "30.0.1",
         "@jest/schemas": "30.0.5",
@@ -1987,8 +1979,7 @@
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.41.tgz",
       "integrity": "sha512-6gS8pZzSXdyRHTIqoqSVknxolr1kzfy4/CeDnrzsVz8TTIWUbOBr6gnzOmTYJ3eXQNh4IYHIGi5aIL7sOZ2G/g==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@jest/environment-jsdom-abstract/node_modules/@sinonjs/fake-timers": {
       "version": "13.0.5",
@@ -1996,7 +1987,6 @@
       "integrity": "sha512-36/hTbH2uaWuGVERyC6da9YwGWnzUZXuPro/F2LfsdOsLnCojz/iSH8MxUt/FD2S5XBSVPhmArFUXcpCQ2Hkiw==",
       "dev": true,
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "@sinonjs/commons": "^3.0.1"
       }
@@ -2007,7 +1997,6 @@
       "integrity": "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "@types/tough-cookie": "*",
@@ -2020,7 +2009,6 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -2040,7 +2028,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -2051,7 +2038,6 @@
       "integrity": "sha512-y4DKFLZ2y6DxTWD4cDe07RglV88ZiNEdlRfGtqahfbIjfsw1nMCPx49Uev4IA/hWn3sDKyAnSPwoYSsAEdcimw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@jest/types": "30.2.0",
@@ -2073,7 +2059,6 @@
       "integrity": "sha512-JNNNl2rj4b5ICpmAcq+WbLH83XswjPbjH4T7yvGzfAGCPh1rw+xVNbtk+FnRslvt9lkCcdn9i1oAoKUuFsOxRw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/types": "30.2.0",
         "@types/node": "*",
@@ -2089,7 +2074,6 @@
       "integrity": "sha512-QKNsM0o3Xe6ISQU869e+DhG+4CK/48aHYdJZGlFQVTjnbvgpcKyxpzk29fGiO7i/J8VENZ+d2iGnSsvmuHywlA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/types": "30.2.0",
         "@types/node": "*",
@@ -2108,7 +2092,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2122,7 +2105,6 @@
       "integrity": "sha512-9uBdv/B4EefsuAL+pWqueZyZS2Ba+LxfFeQ9DN14HU4bN8bhaxKdkpjpB6fs9+pSjIBu+FXQHImEg8j/Lw0+vA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/schemas": "30.0.5",
         "ansi-styles": "^5.2.0",
@@ -2137,8 +2119,7 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@jest/expect": {
       "version": "29.7.0",
@@ -2207,7 +2188,6 @@
       "integrity": "sha512-gWp7NfQW27LaBQz3TITS8L7ZCQ0TLvtmI//4OwlQRx4rnWxcPNIYjxZpDcN4+UlGxgm3jS5QPz8IPTCkb59wZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "jest-regex-util": "30.0.1"
@@ -2222,7 +2202,6 @@
       "integrity": "sha512-jHEQgBXAgc+Gh4g0p3bCevgRCVRkB4VB70zhoAE48gxeSr1hfUOsM/C2WoJgVL7Eyg//hudYENbm3Ne+/dRVVA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
@@ -2424,6 +2403,68 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mcp-ui/client": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@mcp-ui/client/-/client-6.0.0.tgz",
+      "integrity": "sha512-dHIQGjFOoBWBntSRUJH5YFeq7xi2rEPS0EwokeNAnMg6xrjGjvNd6vTWDHFRC04OlO/ogvM1r5+xUoo0OETaaQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@modelcontextprotocol/ext-apps": "^0.3.1",
+        "@modelcontextprotocol/sdk": "^1.24.0",
+        "@quilted/threads": "^3.1.3",
+        "@r2wc/react-to-web-component": "^2.0.4",
+        "@remote-dom/core": "^1.8.0",
+        "@remote-dom/react": "^1.2.2",
+        "zod": "^3.23.8"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
+      }
+    },
+    "node_modules/@mcp-ui/client/node_modules/@modelcontextprotocol/ext-apps": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/ext-apps/-/ext-apps-0.3.1.tgz",
+      "integrity": "sha512-Iivz2KwWK8xlRbiWwFB/C4NXqE8VJBoRCbBkJCN98ST2UbQvA6kfyebcLsypiqylJS467XOOaBcI9DeQ3t+zqA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "workspaces": [
+        "examples/*"
+      ],
+      "optionalDependencies": {
+        "@oven/bun-darwin-aarch64": "^1.2.21",
+        "@oven/bun-darwin-x64": "^1.2.21",
+        "@oven/bun-darwin-x64-baseline": "^1.2.21",
+        "@oven/bun-linux-aarch64": "^1.2.21",
+        "@oven/bun-linux-aarch64-musl": "^1.2.21",
+        "@oven/bun-linux-x64": "^1.2.21",
+        "@oven/bun-linux-x64-baseline": "^1.2.21",
+        "@oven/bun-linux-x64-musl": "^1.2.21",
+        "@oven/bun-linux-x64-musl-baseline": "^1.2.21",
+        "@oven/bun-windows-x64": "^1.2.21",
+        "@oven/bun-windows-x64-baseline": "^1.2.21",
+        "@rollup/rollup-darwin-arm64": "^4.53.3",
+        "@rollup/rollup-darwin-x64": "^4.53.3",
+        "@rollup/rollup-linux-arm64-gnu": "^4.53.3",
+        "@rollup/rollup-linux-x64-gnu": "^4.53.3",
+        "@rollup/rollup-win32-arm64-msvc": "^4.53.3",
+        "@rollup/rollup-win32-x64-msvc": "^4.53.3"
+      },
+      "peerDependencies": {
+        "@modelcontextprotocol/sdk": "^1.24.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "zod": "^3.25.0 || ^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@modelcontextprotocol/ext-apps": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@modelcontextprotocol/ext-apps/-/ext-apps-1.0.0.tgz",
@@ -2484,6 +2525,7 @@
       "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.25.2.tgz",
       "integrity": "sha512-LZFeo4F9M5qOhC/Uc1aQSrBHxMrvxett+9KLHt7OhcExtoiRN9DKgbZffMP/nxjutWDQpfMDfP3nkHI4X9ijww==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@hono/node-server": "^1.19.7",
         "ajv": "^8.17.1",
@@ -2746,6 +2788,67 @@
         "node": ">=18"
       }
     },
+    "node_modules/@preact/signals-core": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.12.2.tgz",
+      "integrity": "sha512-5Yf8h1Ke3SMHr15xl630KtwPTW4sYDFkkxS0vQ8UiQLWwZQnrF9IKaVG1mN5VcJz52EcWs2acsc/Npjha/7ysA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
+    "node_modules/@quilted/events": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@quilted/events/-/events-2.1.3.tgz",
+      "integrity": "sha512-4fHaSLND8rmZ+tce9/4FNmG5UWTRpFtM54kOekf3tLON4ZLLnYzjjldELD35efd7+lT5+E3cdkacqc56d+kCrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@preact/signals-core": "^1.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@quilted/threads": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@quilted/threads/-/threads-3.3.1.tgz",
+      "integrity": "sha512-0ASnjTH+hOu1Qwzi9NnsVcsbMhWVx8pEE8SXIHknqcc/1rXAU0QlKw9ARq0W43FAdzyVeuXeXtZN27ZC0iALKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@quilted/events": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@preact/signals-core": "^1.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@preact/signals-core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@r2wc/core": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@r2wc/core/-/core-1.3.0.tgz",
+      "integrity": "sha512-aPBnND92Itl+SWWbWyyxdFFF0+RqKB6dptGHEdiPB8ZvnHWHlVzOfEvbEcyUYGtB6HBdsfkVuBiaGYyBFVTzVQ==",
+      "license": "MIT"
+    },
+    "node_modules/@r2wc/react-to-web-component": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@r2wc/react-to-web-component/-/react-to-web-component-2.1.0.tgz",
+      "integrity": "sha512-m/PzgUOEiL1HxmvfP5LgBLqB7sHeRj+d1QAeZklwS4OEI2HUU+xTpT3hhJipH5DQoFInDqDTfe0lNFFKcrqk4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@r2wc/core": "^1.3.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@radix-ui/number": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
@@ -3690,6 +3793,61 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
+    "node_modules/@remote-dom/core": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@remote-dom/core/-/core-1.10.1.tgz",
+      "integrity": "sha512-MlbUOGuHjOrB7uOkaYkIoLUG8lDK8/H1D7MHnGkgqbG6jwjwQSlGPHhbwnD6HYWsTGpAPOP02Byd8wBt9U6TEw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remote-dom/polyfill": "^1.5.1",
+        "htm": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@preact/signals-core": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@preact/signals-core": {
+          "optional": true
+        },
+        "preact": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@remote-dom/polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@remote-dom/polyfill/-/polyfill-1.5.1.tgz",
+      "integrity": "sha512-eaWdIVKZpNfbqspKkRQLVxiFv/7vIw8u0FVA5oy52YANFbO/WVT0GU+PQmRt/QUSijaB36HBAqx7stjo8HGpVQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@remote-dom/react": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@remote-dom/react/-/react-1.2.2.tgz",
+      "integrity": "sha512-PkvioODONTr1M0StGDYsR4Ssf5M0Rd4+IlWVvVoK3Zrw8nr7+5mJkgNofaj/z7i8Aep78L28PCW8/WduUt4unA==",
+      "license": "MIT",
+      "dependencies": {
+        "@remote-dom/core": "^1.7.0",
+        "@types/react": "^18.0.0",
+        "htm": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.53",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
@@ -4148,8 +4306,7 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -4399,6 +4556,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.2.tgz",
       "integrity": "sha512-LPM2G3Syo1GLzXLGJAKdqoU35XvrWzGJ21/7sgZTUpbkBaOasTj8tjwn6w+hCkqaa1TfJ/w67rJSwYItlJ2mYw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -4414,7 +4572,6 @@
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
       "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/qs": {
@@ -4435,8 +4592,8 @@
       "version": "18.3.27",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
-      "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -4448,6 +4605,7 @@
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -4588,6 +4746,7 @@
       "integrity": "sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.49.0",
         "@typescript-eslint/types": "8.49.0",
@@ -4970,6 +5129,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5442,6 +5602,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -6075,7 +6236,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/data-uri-to-buffer": {
@@ -6251,9 +6411,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/diff": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.4.tgz",
+      "integrity": "sha512-X07nttJQkwkfKfvTPG/KSnE2OMdcUCao6+eXF3wmnIQRn2aPAHH3VxDbDOdegkd6JbPsXqShpvEOHfAT+nCNwQ==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.3.1"
@@ -6281,8 +6441,7 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/domexception": {
       "version": "4.0.0",
@@ -6540,6 +6699,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -6837,6 +6997,7 @@
       "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
       "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.1",
@@ -7451,15 +7612,21 @@
       }
     },
     "node_modules/hono": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.3.tgz",
-      "integrity": "sha512-PmQi306+M/ct/m5s66Hrg+adPnkD5jiO6IjA7WhWw0gSBSo1EcRegwuI1deZ+wd5pzCGynCcn2DprnE4/yEV4w==",
+      "version": "4.11.7",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.7.tgz",
+      "integrity": "sha512-l7qMiNee7t82bH3SeyUCt9UF15EVmaBvsppY2zQtrbIhl/yzBTny+YUxsVjSjQ6gaqaeVtZmGocom8TzBlA4Yw==",
       "license": "MIT",
       "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
     },
+    "node_modules/htm": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/htm/-/htm-3.1.1.tgz",
+      "integrity": "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -7930,6 +8097,7 @@
       "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/core": "^29.7.0",
         "@jest/types": "^29.6.3",
@@ -8270,7 +8438,6 @@
       "integrity": "sha512-zbBTiqr2Vl78pKp/laGBREYzbZx9ZtqPjOK4++lL4BNDhxRnahg51HtoDrk9/VjIy9IthNEWdKVd7H5bqBhiWQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/environment": "30.2.0",
         "@jest/environment-jsdom-abstract": "30.2.0",
@@ -8296,7 +8463,6 @@
       "integrity": "sha512-/QPTL7OBJQ5ac09UDRa3EQes4gt1FTEG/8jZ/4v5IVzx+Cv7dLxlVIvfvSVRiiX2drWyXeBjkMSR8hvOWSog5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/fake-timers": "30.2.0",
         "@jest/types": "30.2.0",
@@ -8313,7 +8479,6 @@
       "integrity": "sha512-HI3tRLjRxAbBy0VO8dqqm7Hb2mIa8d5bg/NJkyQcOk7V118ObQML8RC5luTF/Zsg4474a+gDvhce7eTnP4GhYw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/types": "30.2.0",
         "@sinonjs/fake-timers": "^13.0.0",
@@ -8332,7 +8497,6 @@
       "integrity": "sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@sinclair/typebox": "^0.34.0"
       },
@@ -8346,7 +8510,6 @@
       "integrity": "sha512-H9xg1/sfVvyfU7o3zMfBEjQ1gcsdeTMgqHoYdN79tuLqfTtuu7WckRA1R5whDwOzxaZAeMKTYWqP+WCAi0CHsg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/pattern": "30.0.1",
         "@jest/schemas": "30.0.5",
@@ -8365,8 +8528,7 @@
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.41.tgz",
       "integrity": "sha512-6gS8pZzSXdyRHTIqoqSVknxolr1kzfy4/CeDnrzsVz8TTIWUbOBr6gnzOmTYJ3eXQNh4IYHIGi5aIL7sOZ2G/g==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/jest-environment-jsdom/node_modules/@sinonjs/fake-timers": {
       "version": "13.0.5",
@@ -8374,7 +8536,6 @@
       "integrity": "sha512-36/hTbH2uaWuGVERyC6da9YwGWnzUZXuPro/F2LfsdOsLnCojz/iSH8MxUt/FD2S5XBSVPhmArFUXcpCQ2Hkiw==",
       "dev": true,
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "@sinonjs/commons": "^3.0.1"
       }
@@ -8385,7 +8546,6 @@
       "integrity": "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "@types/tough-cookie": "*",
@@ -8398,7 +8558,6 @@
       "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 14"
       }
@@ -8409,7 +8568,6 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -8429,7 +8587,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -8440,7 +8597,6 @@
       "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@asamuzakjp/css-color": "^3.2.0",
         "rrweb-cssom": "^0.8.0"
@@ -8455,7 +8611,6 @@
       "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "whatwg-mimetype": "^4.0.0",
         "whatwg-url": "^14.0.0"
@@ -8470,7 +8625,6 @@
       "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "whatwg-encoding": "^3.1.1"
       },
@@ -8484,7 +8638,6 @@
       "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "agent-base": "^7.1.0",
         "debug": "^4.3.4"
@@ -8499,7 +8652,6 @@
       "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "agent-base": "^7.1.2",
         "debug": "4"
@@ -8514,7 +8666,6 @@
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -8528,7 +8679,6 @@
       "integrity": "sha512-y4DKFLZ2y6DxTWD4cDe07RglV88ZiNEdlRfGtqahfbIjfsw1nMCPx49Uev4IA/hWn3sDKyAnSPwoYSsAEdcimw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@jest/types": "30.2.0",
@@ -8550,7 +8700,6 @@
       "integrity": "sha512-JNNNl2rj4b5ICpmAcq+WbLH83XswjPbjH4T7yvGzfAGCPh1rw+xVNbtk+FnRslvt9lkCcdn9i1oAoKUuFsOxRw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/types": "30.2.0",
         "@types/node": "*",
@@ -8566,7 +8715,6 @@
       "integrity": "sha512-QKNsM0o3Xe6ISQU869e+DhG+4CK/48aHYdJZGlFQVTjnbvgpcKyxpzk29fGiO7i/J8VENZ+d2iGnSsvmuHywlA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/types": "30.2.0",
         "@types/node": "*",
@@ -8585,7 +8733,6 @@
       "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssstyle": "^4.2.1",
         "data-urls": "^5.0.0",
@@ -8626,7 +8773,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8640,7 +8786,6 @@
       "integrity": "sha512-9uBdv/B4EefsuAL+pWqueZyZS2Ba+LxfFeQ9DN14HU4bN8bhaxKdkpjpB6fs9+pSjIBu+FXQHImEg8j/Lw0+vA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/schemas": "30.0.5",
         "ansi-styles": "^5.2.0",
@@ -8655,8 +8800,7 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/jest-environment-jsdom/node_modules/tough-cookie": {
       "version": "5.1.2",
@@ -8664,7 +8808,6 @@
       "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
       "dev": true,
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "tldts": "^6.1.32"
       },
@@ -8678,7 +8821,6 @@
       "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "punycode": "^2.3.1"
       },
@@ -8692,7 +8834,6 @@
       "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "xml-name-validator": "^5.0.0"
       },
@@ -8706,7 +8847,6 @@
       "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "iconv-lite": "0.6.3"
       },
@@ -8720,7 +8860,6 @@
       "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -8731,7 +8870,6 @@
       "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tr46": "^5.1.0",
         "webidl-conversions": "^7.0.0"
@@ -8746,7 +8884,6 @@
       "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -9341,6 +9478,7 @@
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -9379,6 +9517,7 @@
       "integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "abab": "^2.0.6",
         "acorn": "^8.8.1",
@@ -9717,7 +9856,6 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -10595,6 +10733,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -10770,7 +10909,6 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -10786,7 +10924,6 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -10941,6 +11078,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -10953,6 +11091,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -10966,8 +11105,7 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/react-refresh": {
       "version": "0.18.0",
@@ -11375,8 +11513,7 @@
       "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
       "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/run-applescript": {
       "version": "7.1.0",
@@ -12042,6 +12179,7 @@
       "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -12180,6 +12318,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -12203,7 +12342,6 @@
       "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tldts-core": "^6.1.86"
       },
@@ -12216,8 +12354,7 @@
       "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
       "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/tmpl": {
       "version": "1.0.5",
@@ -12390,6 +12527,7 @@
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -12446,6 +12584,7 @@
       "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "~0.27.0",
         "get-tsconfig": "^4.7.5"
@@ -12999,6 +13138,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -13207,6 +13347,7 @@
       "integrity": "sha512-ITcnkFeR3+fI8P1wMgItjGrR10170d8auB4EpMLPqmx6uxElH3a/hHGQabSHKdqd4FXWO1nFIp9rRn7JQ34ACQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -13300,6 +13441,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13719,6 +13861,7 @@
       "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
       "dev": true,
       "license": "ISC",
+      "peer": true,
       "bin": {
         "yaml": "bin.mjs"
       },
@@ -13806,6 +13949,7 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

From 6f4c294d6b281271182b9abd5171286baab32b9a Mon Sep 17 00:00:00 2001
From: Cliff Hall <cliff@futurescale.com>
Date: Thu, 29 Jan 2026 15:56:34 -0500
Subject: [PATCH 11/33] Potential fix for code scanning alert no. 38:
 Client-side cross-site scripting

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 client/public/sandbox_proxy.html | 42 +++++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/client/public/sandbox_proxy.html b/client/public/sandbox_proxy.html
index 70051e120..892e1e267 100644
--- a/client/public/sandbox_proxy.html
+++ b/client/public/sandbox_proxy.html
@@ -24,6 +24,35 @@
         const SANDBOX_RESOURCE_READY_METHOD =
           "ui/notifications/sandbox-resource-ready";
 
+        // Optionally restrict which origins are allowed to send sandbox HTML.
+        // Fill this array with explicit origins (for example, ["https://your-app.com"]).
+        // Leaving it empty will accept messages from any origin, but HTML is still sanitized.
+        const ALLOWED_ORIGINS = [];
+
+        function sanitizeHtml(html) {
+          if (window.DOMPurify && typeof window.DOMPurify.sanitize === "function") {
+            return window.DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: false });
+          }
+
+          // Very conservative fallback: strip <script> tags and common inline event handlers.
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(html, "text/html");
+
+          // Remove all <script> elements.
+          doc.querySelectorAll("script").forEach((el) => el.remove());
+
+          // Remove inline event handlers such as onclick, onload, etc.
+          doc.querySelectorAll("*").forEach((el) => {
+            [...el.attributes].forEach((attr) => {
+              if (/^on/i.test(attr.name)) {
+                el.removeAttribute(attr.name);
+              }
+            });
+          });
+
+          return doc.documentElement.innerHTML;
+        }
+
         // Notify host that we are ready to receive the app resource
         window.parent.postMessage(
           {
@@ -36,6 +65,15 @@
 
         // Listen for the app resource (HTML) from the host
         window.addEventListener("message", (event) => {
+          // If ALLOWED_ORIGINS is non-empty, enforce origin restriction.
+          if (
+            Array.isArray(ALLOWED_ORIGINS) &&
+            ALLOWED_ORIGINS.length > 0 &&
+            !ALLOWED_ORIGINS.includes(event.origin)
+          ) {
+            return;
+          }
+
           const message = event.data;
           if (
             message &&
@@ -47,9 +85,7 @@
             const { html } = message.params;
             if (html) {
               // Sanitize the HTML before writing it to the document
-              const safeHtml = window.DOMPurify
-                ? window.DOMPurify.sanitize(html)
-                : html;
+              const safeHtml = sanitizeHtml(html);
               document.open();
               document.write(safeHtml);
               document.close();

From 6ec23b86f8d131ac755382e6ec96fcf1b88d1027 Mon Sep 17 00:00:00 2001
From: Cliff Hall <cliff@futurescale.com>
Date: Thu, 29 Jan 2026 16:00:01 -0500
Subject: [PATCH 12/33] Potential fix for code scanning alert no. 39:
 Client-side cross-site scripting

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 client/public/sandbox_proxy.html | 20 +++-----------------
 1 file changed, 3 insertions(+), 17 deletions(-)

diff --git a/client/public/sandbox_proxy.html b/client/public/sandbox_proxy.html
index 892e1e267..8265fe11e 100644
--- a/client/public/sandbox_proxy.html
+++ b/client/public/sandbox_proxy.html
@@ -34,23 +34,9 @@
             return window.DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: false });
           }
 
-          // Very conservative fallback: strip <script> tags and common inline event handlers.
-          const parser = new DOMParser();
-          const doc = parser.parseFromString(html, "text/html");
-
-          // Remove all <script> elements.
-          doc.querySelectorAll("script").forEach((el) => el.remove());
-
-          // Remove inline event handlers such as onclick, onload, etc.
-          doc.querySelectorAll("*").forEach((el) => {
-            [...el.attributes].forEach((attr) => {
-              if (/^on/i.test(attr.name)) {
-                el.removeAttribute(attr.name);
-              }
-            });
-          });
-
-          return doc.documentElement.innerHTML;
+          // If DOMPurify is not available, do not attempt to sanitize manually.
+          // Returning an empty string avoids rendering untrusted HTML with a weak sanitizer.
+          return "";
         }
 
         // Notify host that we are ready to receive the app resource

From 700d24fe3d7deec1c2963a3c8c94c3f43c687b78 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 29 Jan 2026 16:01:52 -0500
Subject: [PATCH 13/33] prettier

---
 client/public/sandbox_proxy.html | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/client/public/sandbox_proxy.html b/client/public/sandbox_proxy.html
index 8265fe11e..d56ba9f6b 100644
--- a/client/public/sandbox_proxy.html
+++ b/client/public/sandbox_proxy.html
@@ -30,8 +30,13 @@
         const ALLOWED_ORIGINS = [];
 
         function sanitizeHtml(html) {
-          if (window.DOMPurify && typeof window.DOMPurify.sanitize === "function") {
-            return window.DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: false });
+          if (
+            window.DOMPurify &&
+            typeof window.DOMPurify.sanitize === "function"
+          ) {
+            return window.DOMPurify.sanitize(html, {
+              RETURN_TRUSTED_TYPE: false,
+            });
           }
 
           // If DOMPurify is not available, do not attempt to sanitize manually.

From 7871e6e7b9a5ffe5229f841ba6a61b6639b7eb76 Mon Sep 17 00:00:00 2001
From: Cliff Hall <cliff@futurescale.com>
Date: Thu, 29 Jan 2026 16:04:04 -0500
Subject: [PATCH 14/33] Update client/src/components/AppsTab.tsx

Co-authored-by: Ola Hungerford <olahungerford@gmail.com>
---
 client/src/components/AppsTab.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/AppsTab.tsx b/client/src/components/AppsTab.tsx
index ce23ea7ce..e761a3e24 100644
--- a/client/src/components/AppsTab.tsx
+++ b/client/src/components/AppsTab.tsx
@@ -130,7 +130,7 @@ const AppsTab = ({
             <div className="mt-6 border-t pt-6">
               <div className="flex items-center justify-between mb-4">
                 <h3 className="text-xl font-semibold">{selectedTool.name}</h3>
-                <Button onClick={handleCloseApp} variant="ghost" size="sm">
+                <Button onClick={handleCloseApp} variant="ghost" size="sm" aria-label="Close app">
                   <X className="w-4 h-4" />
                 </Button>
               </div>

From 211ad3ce8bab9fa62f23fd63d73fac62b19f36fb Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 29 Jan 2026 16:04:51 -0500
Subject: [PATCH 15/33] prettier

---
 client/src/components/AppsTab.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/components/AppsTab.tsx b/client/src/components/AppsTab.tsx
index e761a3e24..089ba6ffa 100644
--- a/client/src/components/AppsTab.tsx
+++ b/client/src/components/AppsTab.tsx
@@ -130,7 +130,12 @@ const AppsTab = ({
             <div className="mt-6 border-t pt-6">
               <div className="flex items-center justify-between mb-4">
                 <h3 className="text-xl font-semibold">{selectedTool.name}</h3>
-                <Button onClick={handleCloseApp} variant="ghost" size="sm" aria-label="Close app">
+                <Button
+                  onClick={handleCloseApp}
+                  variant="ghost"
+                  size="sm"
+                  aria-label="Close app"
+                >
                   <X className="w-4 h-4" />
                 </Button>
               </div>

From e5dbe4cae5ae5b239db2897ad4f96bb86af0c73d Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 29 Jan 2026 16:10:21 -0500
Subject: [PATCH 16/33] In AppsTab.test.tsx, fetch button by aria-label

---
 client/src/components/__tests__/AppsTab.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/__tests__/AppsTab.test.tsx b/client/src/components/__tests__/AppsTab.test.tsx
index 81d81fdb6..bf9baba10 100644
--- a/client/src/components/__tests__/AppsTab.test.tsx
+++ b/client/src/components/__tests__/AppsTab.test.tsx
@@ -161,7 +161,7 @@ describe("AppsTab", () => {
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
 
     // Close the app
-    const closeButton = screen.getByRole("button", { name: "" }); // X button has no text
+    const closeButton = screen.getByRole("button", { name: /close app/i });
     fireEvent.click(closeButton);
 
     // AppRenderer should be removed

From 7c4e9df07190d502b55aac83baafb4ecdf420d5a Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 29 Jan 2026 17:02:37 -0500
Subject: [PATCH 17/33] relative imports

---
 client/src/components/__tests__/AuthDebugger.test.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/__tests__/AuthDebugger.test.tsx b/client/src/components/__tests__/AuthDebugger.test.tsx
index 5d5042ea5..b05a48981 100644
--- a/client/src/components/__tests__/AuthDebugger.test.tsx
+++ b/client/src/components/__tests__/AuthDebugger.test.tsx
@@ -8,8 +8,8 @@ import {
 import "@testing-library/jest-dom";
 import { describe, it, beforeEach, jest } from "@jest/globals";
 import AuthDebugger, { AuthDebuggerProps } from "../AuthDebugger";
-import { TooltipProvider } from "@/components/ui/tooltip";
-import { SESSION_KEYS } from "@/lib/constants";
+import { TooltipProvider } from "../ui/tooltip";
+import { SESSION_KEYS } from "../../lib/constants";
 
 const mockOAuthTokens = {
   access_token: "test_access_token",
@@ -55,7 +55,7 @@ import {
   discoverOAuthProtectedResourceMetadata,
 } from "@modelcontextprotocol/sdk/client/auth.js";
 import { OAuthMetadata } from "@modelcontextprotocol/sdk/shared/auth.js";
-import { EMPTY_DEBUGGER_STATE } from "@/lib/auth-types";
+import { EMPTY_DEBUGGER_STATE } from "../../lib/auth-types";
 
 // Mock local auth module
 jest.mock("@/lib/auth", () => ({
@@ -106,7 +106,7 @@ jest.mock("@/lib/auth", () => ({
   discoverScopes: jest.fn().mockResolvedValue("read write" as never),
 }));
 
-import { discoverScopes } from "@/lib/auth";
+import { discoverScopes } from "../../lib/auth";
 
 // Type the mocked functions properly
 const mockDiscoverAuthorizationServerMetadata =

From 4a84f25cfbc62cea4419749610da78fb3a104b56 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 29 Jan 2026 17:23:38 -0500
Subject: [PATCH 18/33] Remove sanitization logic from sandbox_proxy.html. It's
 breaking the app rendering. Will sort out what best practices for this HTML
 is later

---
 client/public/sandbox_proxy.html | 123 ++++++++++---------------------
 1 file changed, 40 insertions(+), 83 deletions(-)

diff --git a/client/public/sandbox_proxy.html b/client/public/sandbox_proxy.html
index d56ba9f6b..a2738f592 100644
--- a/client/public/sandbox_proxy.html
+++ b/client/public/sandbox_proxy.html
@@ -1,89 +1,46 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <title>MCP App Sandbox Proxy</title>
-    <style>
-      body,
-      html {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js"></script>
-    <script>
-      (function () {
-        const SANDBOX_PROXY_READY_METHOD =
-          "ui/notifications/sandbox-proxy-ready";
-        const SANDBOX_RESOURCE_READY_METHOD =
-          "ui/notifications/sandbox-resource-ready";
+<head>
+  <meta charset="utf-8">
+  <title>MCP App Sandbox Proxy</title>
+  <style>
+    body, html {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script>
+    (function() {
+      const SANDBOX_PROXY_READY_METHOD = "ui/notifications/sandbox-proxy-ready";
+      const SANDBOX_RESOURCE_READY_METHOD = "ui/notifications/sandbox-resource-ready";
 
-        // Optionally restrict which origins are allowed to send sandbox HTML.
-        // Fill this array with explicit origins (for example, ["https://your-app.com"]).
-        // Leaving it empty will accept messages from any origin, but HTML is still sanitized.
-        const ALLOWED_ORIGINS = [];
+      // Notify host that we are ready to receive the app resource
+      window.parent.postMessage({
+        jsonrpc: "2.0",
+        method: SANDBOX_PROXY_READY_METHOD,
+        params: {}
+      }, "*");
 
-        function sanitizeHtml(html) {
-          if (
-            window.DOMPurify &&
-            typeof window.DOMPurify.sanitize === "function"
-          ) {
-            return window.DOMPurify.sanitize(html, {
-              RETURN_TRUSTED_TYPE: false,
-            });
+      // Listen for the app resource (HTML) from the host
+      window.addEventListener("message", (event) => {
+        const message = event.data;
+        if (message && message.method === SANDBOX_RESOURCE_READY_METHOD) {
+          const { html } = message.params;
+          if (html) {
+            // Write the HTML to the document
+            document.open();
+            document.write(html);
+            document.close();
           }
-
-          // If DOMPurify is not available, do not attempt to sanitize manually.
-          // Returning an empty string avoids rendering untrusted HTML with a weak sanitizer.
-          return "";
         }
-
-        // Notify host that we are ready to receive the app resource
-        window.parent.postMessage(
-          {
-            jsonrpc: "2.0",
-            method: SANDBOX_PROXY_READY_METHOD,
-            params: {},
-          },
-          "*",
-        );
-
-        // Listen for the app resource (HTML) from the host
-        window.addEventListener("message", (event) => {
-          // If ALLOWED_ORIGINS is non-empty, enforce origin restriction.
-          if (
-            Array.isArray(ALLOWED_ORIGINS) &&
-            ALLOWED_ORIGINS.length > 0 &&
-            !ALLOWED_ORIGINS.includes(event.origin)
-          ) {
-            return;
-          }
-
-          const message = event.data;
-          if (
-            message &&
-            typeof message === "object" &&
-            message.method === SANDBOX_RESOURCE_READY_METHOD &&
-            message.params &&
-            typeof message.params.html === "string"
-          ) {
-            const { html } = message.params;
-            if (html) {
-              // Sanitize the HTML before writing it to the document
-              const safeHtml = sanitizeHtml(html);
-              document.open();
-              document.write(safeHtml);
-              document.close();
-            }
-          }
-        });
-      })();
-    </script>
-  </body>
+      });
+    })();
+  </script>
+</body>
 </html>

From 8b70df5d4c66c4988fe43301bafa584a2b3eed87 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 29 Jan 2026 18:53:27 -0500
Subject: [PATCH 19/33] In sandbox_proxy.html,formatting In AppsTab.tsx   - Add
 app window     - when an app is selected,       - show input form for apps
 that have an input schema       - button shows app       - if app is shown,
 show maximize button         - if maximized,           - show minimize button
           - hide app list * In AppsTab.test.tsx   - test new layout and
 controls * In AppRenderer.tsx     - accept toolInput     - pass to
 McpUiAppRenderer

---
 client/public/sandbox_proxy.html              |  88 +--
 client/src/components/AppRenderer.tsx         |   3 +
 client/src/components/AppsTab.tsx             | 546 +++++++++++++++---
 .../src/components/__tests__/AppsTab.test.tsx | 177 +++++-
 4 files changed, 682 insertions(+), 132 deletions(-)

diff --git a/client/public/sandbox_proxy.html b/client/public/sandbox_proxy.html
index a2738f592..2e2faf802 100644
--- a/client/public/sandbox_proxy.html
+++ b/client/public/sandbox_proxy.html
@@ -1,46 +1,52 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <title>MCP App Sandbox Proxy</title>
-  <style>
-    body, html {
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-  </style>
-</head>
-<body>
-  <div id="root"></div>
-  <script>
-    (function() {
-      const SANDBOX_PROXY_READY_METHOD = "ui/notifications/sandbox-proxy-ready";
-      const SANDBOX_RESOURCE_READY_METHOD = "ui/notifications/sandbox-resource-ready";
+  <head>
+    <meta charset="utf-8" />
+    <title>MCP App Sandbox Proxy</title>
+    <style>
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>
+      (function () {
+        const SANDBOX_PROXY_READY_METHOD =
+          "ui/notifications/sandbox-proxy-ready";
+        const SANDBOX_RESOURCE_READY_METHOD =
+          "ui/notifications/sandbox-resource-ready";
 
-      // Notify host that we are ready to receive the app resource
-      window.parent.postMessage({
-        jsonrpc: "2.0",
-        method: SANDBOX_PROXY_READY_METHOD,
-        params: {}
-      }, "*");
+        // Notify host that we are ready to receive the app resource
+        window.parent.postMessage(
+          {
+            jsonrpc: "2.0",
+            method: SANDBOX_PROXY_READY_METHOD,
+            params: {},
+          },
+          "*",
+        );
 
-      // Listen for the app resource (HTML) from the host
-      window.addEventListener("message", (event) => {
-        const message = event.data;
-        if (message && message.method === SANDBOX_RESOURCE_READY_METHOD) {
-          const { html } = message.params;
-          if (html) {
-            // Write the HTML to the document
-            document.open();
-            document.write(html);
-            document.close();
+        // Listen for the app resource (HTML) from the host
+        window.addEventListener("message", (event) => {
+          const message = event.data;
+          if (message && message.method === SANDBOX_RESOURCE_READY_METHOD) {
+            const { html } = message.params;
+            if (html) {
+              // Write the HTML to the document
+              document.open();
+              document.write(html);
+              document.close();
+            }
           }
-        }
-      });
-    })();
-  </script>
-</body>
+        });
+      })();
+    </script>
+  </body>
 </html>
diff --git a/client/src/components/AppRenderer.tsx b/client/src/components/AppRenderer.tsx
index c5687c913..f8c9232a9 100644
--- a/client/src/components/AppRenderer.tsx
+++ b/client/src/components/AppRenderer.tsx
@@ -14,6 +14,7 @@ interface AppRendererProps {
   mcpClient: Client | null;
   onReadResource: (uri: string) => void;
   resourceContent: string;
+  toolInput?: Record<string, unknown>;
 }
 
 const AppRenderer = ({
@@ -21,6 +22,7 @@ const AppRenderer = ({
   mcpClient,
   onReadResource,
   resourceContent,
+  toolInput,
 }: AppRendererProps) => {
   const [error, setError] = useState<string | null>(null);
 
@@ -106,6 +108,7 @@ const AppRenderer = ({
           toolName={tool.name}
           html={html}
           hostContext={hostContext}
+          toolInput={toolInput}
           sandbox={{
             url: new URL("/sandbox_proxy.html", window.location.origin),
           }}
diff --git a/client/src/components/AppsTab.tsx b/client/src/components/AppsTab.tsx
index 089ba6ffa..3f940953d 100644
--- a/client/src/components/AppsTab.tsx
+++ b/client/src/components/AppsTab.tsx
@@ -1,12 +1,40 @@
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useRef } from "react";
 import { TabsContent } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { AlertCircle, RefreshCw, X } from "lucide-react";
+import {
+  AlertCircle,
+  X,
+  Play,
+  ChevronRight,
+  Maximize2,
+  Minimize2,
+} from "lucide-react";
 import { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import { getToolUiResourceUri } from "@modelcontextprotocol/ext-apps/app-bridge";
 import AppRenderer from "./AppRenderer";
+import ListPane from "./ListPane";
+import IconDisplay, { WithIcons } from "./IconDisplay";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Input } from "@/components/ui/input";
+import DynamicJsonForm, { DynamicJsonFormRef } from "./DynamicJsonForm";
+import { JsonSchemaType, JsonValue } from "@/utils/jsonUtils";
+import {
+  generateDefaultValue,
+  isPropertyRequired,
+  normalizeUnionType,
+  resolveRef,
+} from "@/utils/schemaUtils";
 
 interface AppsTabProps {
   tools: Tool[];
@@ -32,6 +60,20 @@ const AppsTab = ({
 }: AppsTabProps) => {
   const [appTools, setAppTools] = useState<Tool[]>([]);
   const [selectedTool, setSelectedTool] = useState<Tool | null>(null);
+  const [params, setParams] = useState<Record<string, unknown>>({});
+  const [isAppOpen, setIsAppOpen] = useState(false);
+  const [isMaximized, setIsMaximized] = useState(false);
+  const [hasValidationErrors, setHasValidationErrors] = useState(false);
+  const formRefs = useRef<Record<string, DynamicJsonFormRef | null>>({});
+
+  // Function to check if any form has validation errors
+  const checkValidationErrors = useCallback(() => {
+    const errors = Object.values(formRefs.current).some(
+      (ref) => ref && !ref.validateJson().isValid,
+    );
+    setHasValidationErrors(errors);
+    return errors;
+  }, []);
 
   // Filter tools that have UI metadata
   useEffect(() => {
@@ -46,108 +88,440 @@ const AppsTab = ({
     // If current selected tool is no longer available, reset selection
     if (selectedTool && !filtered.find((t) => t.name === selectedTool.name)) {
       setSelectedTool(null);
+      setIsAppOpen(false);
     }
   }, [tools, selectedTool]);
 
+  useEffect(() => {
+    if (selectedTool) {
+      const initialParams = Object.entries(
+        selectedTool.inputSchema.properties ?? [],
+      ).map(([key, value]) => {
+        // First resolve any $ref references
+        const resolvedValue = resolveRef(
+          value as JsonSchemaType,
+          selectedTool.inputSchema as JsonSchemaType,
+        );
+        return [
+          key,
+          generateDefaultValue(
+            resolvedValue,
+            key,
+            selectedTool.inputSchema as JsonSchemaType,
+          ),
+        ];
+      });
+      setParams(Object.fromEntries(initialParams));
+      setHasValidationErrors(false);
+      formRefs.current = {};
+    } else {
+      setParams({});
+      setIsAppOpen(false);
+    }
+  }, [selectedTool]);
+
   const handleRefresh = useCallback(() => {
     listTools();
   }, [listTools]);
 
   const handleCloseApp = useCallback(() => {
+    setIsAppOpen(false);
+  }, []);
+
+  const handleOpenApp = useCallback(() => {
+    if (!checkValidationErrors()) {
+      setIsAppOpen(true);
+    }
+  }, [checkValidationErrors]);
+
+  const handleSelectTool = useCallback((tool: Tool) => {
+    setSelectedTool(tool);
+    setIsAppOpen(false);
+  }, []);
+
+  const handleDeselectTool = useCallback(() => {
     setSelectedTool(null);
+    setIsAppOpen(false);
+    setIsMaximized(false);
   }, []);
 
   return (
     <TabsContent value="apps" className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold">MCP Apps</h2>
-        <Button onClick={handleRefresh} variant="outline" size="sm">
-          <RefreshCw className="w-4 h-4 mr-2" />
-          Refresh
-        </Button>
-      </div>
+      <div
+        className={
+          isMaximized
+            ? "grid grid-cols-1 gap-4"
+            : "grid grid-cols-1 md:grid-cols-2 gap-4"
+        }
+      >
+        {!isMaximized && (
+          <ListPane
+            items={appTools}
+            listItems={handleRefresh}
+            clearItems={handleDeselectTool}
+            setSelectedItem={handleSelectTool}
+            renderItem={(tool) => {
+              const resourceUri = getToolUiResourceUri(tool) || "";
+              return (
+                <div className="flex items-start w-full gap-2">
+                  <div className="flex-shrink-0 mt-1">
+                    <IconDisplay icons={(tool as WithIcons).icons} size="sm" />
+                  </div>
+                  <div className="flex flex-col flex-1 min-w-0">
+                    <span className="truncate font-semibold">{tool.name}</span>
+                    {tool.description && (
+                      <span className="text-sm text-gray-500 text-left line-clamp-2">
+                        {tool.description}
+                      </span>
+                    )}
+                    <span className="text-[10px] text-muted-foreground font-mono mt-1 truncate">
+                      {resourceUri}
+                    </span>
+                  </div>
+                  <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400 mt-1" />
+                </div>
+              );
+            }}
+            title="MCP Apps"
+            buttonText="Refresh Apps"
+          />
+        )}
 
-      {error && (
-        <Alert variant="destructive">
-          <AlertCircle className="h-4 w-4" />
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      )}
-
-      {appTools.length === 0 ? (
-        <Alert>
-          <AlertCircle className="h-4 w-4" />
-          <AlertDescription>
-            No MCP Apps available. Apps are tools that include a{" "}
-            <code className="text-xs bg-muted px-1 py-0.5 rounded">
-              _meta.ui.resourceUri
-            </code>{" "}
-            field in their tool definition.
-          </AlertDescription>
-        </Alert>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {appTools.map((tool) => {
-            const resourceUri = getToolUiResourceUri(tool) || "";
-
-            return (
-              <div
-                key={tool.name}
-                className="border rounded-lg p-4 hover:border-primary cursor-pointer transition-colors"
-                onClick={() => setSelectedTool(tool)}
-              >
-                <h3 className="font-semibold text-lg mb-2">{tool.name}</h3>
-                {tool.description && (
-                  <p className="text-sm text-muted-foreground mb-3">
-                    {tool.description}
-                  </p>
+        <div className="bg-card border border-border rounded-lg shadow">
+          <div className="p-4 border-b border-gray-200 dark:border-border">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                {selectedTool && (
+                  <IconDisplay
+                    icons={(selectedTool as WithIcons).icons}
+                    size="md"
+                  />
                 )}
-                <div className="text-xs text-muted-foreground">
-                  <span className="font-mono bg-muted px-1 py-0.5 rounded">
-                    {resourceUri}
-                  </span>
-                </div>
+                <h3 className="font-semibold">
+                  {selectedTool ? selectedTool.name : "Select an app"}
+                </h3>
               </div>
-            );
-          })}
-        </div>
-      )}
-
-      {selectedTool &&
-        (() => {
-          const resourceUri = getToolUiResourceUri(selectedTool) || "";
-          const content = resourceContentMap[resourceUri] || "";
-
-          console.log("[AppsTab] Rendering app:", {
-            toolName: selectedTool.name,
-            resourceUri,
-            hasContent: !!content,
-            contentLength: content.length,
-            resourceContentMapKeys: Object.keys(resourceContentMap),
-          });
-
-          return (
-            <div className="mt-6 border-t pt-6">
-              <div className="flex items-center justify-between mb-4">
-                <h3 className="text-xl font-semibold">{selectedTool.name}</h3>
-                <Button
-                  onClick={handleCloseApp}
-                  variant="ghost"
-                  size="sm"
-                  aria-label="Close app"
-                >
-                  <X className="w-4 h-4" />
-                </Button>
+              <div className="flex items-center gap-2">
+                {selectedTool && isAppOpen && (
+                  <Button
+                    onClick={() => setIsMaximized(!isMaximized)}
+                    variant="ghost"
+                    size="sm"
+                    aria-label={isMaximized ? "Minimize" : "Maximize"}
+                  >
+                    {isMaximized ? (
+                      <Minimize2 className="w-4 h-4" />
+                    ) : (
+                      <Maximize2 className="w-4 h-4" />
+                    )}
+                  </Button>
+                )}
+                {selectedTool && (
+                  <Button
+                    onClick={handleDeselectTool}
+                    variant="ghost"
+                    size="sm"
+                    aria-label="Close app"
+                  >
+                    <X className="w-4 h-4" />
+                  </Button>
+                )}
               </div>
-              <AppRenderer
-                tool={selectedTool}
-                mcpClient={mcpClient}
-                onReadResource={onReadResource}
-                resourceContent={content}
-              />
             </div>
-          );
-        })()}
+          </div>
+
+          <div className="p-4">
+            {error && (
+              <Alert variant="destructive" className="mb-4">
+                <AlertCircle className="h-4 w-4" />
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            {selectedTool ? (
+              (() => {
+                const resourceUri = getToolUiResourceUri(selectedTool) || "";
+                const content = resourceContentMap[resourceUri] || "";
+
+                return (
+                  <div className="space-y-4">
+                    {!isAppOpen ? (
+                      <div className="space-y-4">
+                        {selectedTool.description && (
+                          <p className="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-wrap">
+                            {selectedTool.description}
+                          </p>
+                        )}
+
+                        <div className="space-y-4 border rounded-lg p-4 bg-muted/30">
+                          <h4 className="font-medium text-sm">App Input</h4>
+                          {Object.entries(
+                            selectedTool.inputSchema.properties ?? [],
+                          ).map(([key, value]) => {
+                            // First resolve any $ref references
+                            const resolvedValue = resolveRef(
+                              value as JsonSchemaType,
+                              selectedTool.inputSchema as JsonSchemaType,
+                            );
+                            const prop = normalizeUnionType(resolvedValue);
+                            const inputSchema =
+                              selectedTool.inputSchema as JsonSchemaType;
+                            const required = isPropertyRequired(
+                              key,
+                              inputSchema,
+                            );
+
+                            return (
+                              <div key={key} className="space-y-2">
+                                <div className="flex justify-between">
+                                  <Label
+                                    htmlFor={key}
+                                    className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                                  >
+                                    {key}
+                                    {required && (
+                                      <span className="text-red-500 ml-1">
+                                        *
+                                      </span>
+                                    )}
+                                  </Label>
+                                  {prop.nullable ? (
+                                    <div className="flex items-center space-x-2">
+                                      <Checkbox
+                                        id={`${key}-null`}
+                                        checked={params[key] === null}
+                                        onCheckedChange={(checked: boolean) =>
+                                          setParams({
+                                            ...params,
+                                            [key]: checked
+                                              ? null
+                                              : prop.type === "array"
+                                                ? undefined
+                                                : prop.default !== null
+                                                  ? prop.default
+                                                  : prop.type === "boolean"
+                                                    ? false
+                                                    : prop.type === "string"
+                                                      ? ""
+                                                      : undefined,
+                                          })
+                                        }
+                                      />
+                                      <label
+                                        htmlFor={`${key}-null`}
+                                        className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                                      >
+                                        null
+                                      </label>
+                                    </div>
+                                  ) : null}
+                                </div>
+
+                                <div
+                                  className={`${prop.nullable && params[key] === null ? "pointer-events-none opacity-50" : ""}`}
+                                >
+                                  {prop.type === "boolean" ? (
+                                    <div className="flex items-center space-x-2">
+                                      <Checkbox
+                                        id={key}
+                                        checked={!!params[key]}
+                                        onCheckedChange={(checked: boolean) =>
+                                          setParams({
+                                            ...params,
+                                            [key]: checked,
+                                          })
+                                        }
+                                      />
+                                      <label
+                                        htmlFor={key}
+                                        className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                                      >
+                                        {prop.description ||
+                                          "Toggle this option"}
+                                      </label>
+                                    </div>
+                                  ) : prop.type === "string" && prop.enum ? (
+                                    <Select
+                                      value={
+                                        params[key] === undefined
+                                          ? ""
+                                          : String(params[key])
+                                      }
+                                      onValueChange={(value) => {
+                                        setParams({
+                                          ...params,
+                                          [key]:
+                                            value === "" ? undefined : value,
+                                        });
+                                      }}
+                                    >
+                                      <SelectTrigger id={key}>
+                                        <SelectValue
+                                          placeholder={
+                                            prop.description ||
+                                            "Select an option"
+                                          }
+                                        />
+                                      </SelectTrigger>
+                                      <SelectContent>
+                                        {prop.enum.map((option) => (
+                                          <SelectItem
+                                            key={option}
+                                            value={option}
+                                          >
+                                            {option}
+                                          </SelectItem>
+                                        ))}
+                                      </SelectContent>
+                                    </Select>
+                                  ) : prop.type === "string" ? (
+                                    <Textarea
+                                      id={key}
+                                      placeholder={prop.description}
+                                      value={
+                                        params[key] === undefined
+                                          ? ""
+                                          : String(params[key])
+                                      }
+                                      onChange={(e) => {
+                                        setParams({
+                                          ...params,
+                                          [key]:
+                                            e.target.value === ""
+                                              ? undefined
+                                              : e.target.value,
+                                        });
+                                      }}
+                                    />
+                                  ) : prop.type === "object" ||
+                                    prop.type === "array" ? (
+                                    <DynamicJsonForm
+                                      ref={(ref) =>
+                                        (formRefs.current[key] = ref)
+                                      }
+                                      schema={{
+                                        type: prop.type,
+                                        properties: prop.properties,
+                                        description: prop.description,
+                                        items: prop.items,
+                                      }}
+                                      value={
+                                        (params[key] as JsonValue) ??
+                                        generateDefaultValue(prop)
+                                      }
+                                      onChange={(newValue: JsonValue) => {
+                                        setParams({
+                                          ...params,
+                                          [key]: newValue,
+                                        });
+                                        setTimeout(checkValidationErrors, 100);
+                                      }}
+                                    />
+                                  ) : prop.type === "number" ||
+                                    prop.type === "integer" ? (
+                                    <Input
+                                      type="number"
+                                      id={key}
+                                      placeholder={prop.description}
+                                      value={
+                                        params[key] === undefined
+                                          ? ""
+                                          : String(params[key])
+                                      }
+                                      onChange={(e) => {
+                                        const value = e.target.value;
+                                        if (value === "") {
+                                          setParams({
+                                            ...params,
+                                            [key]: undefined,
+                                          });
+                                        } else {
+                                          const num = Number(value);
+                                          setParams({
+                                            ...params,
+                                            [key]: isNaN(num) ? value : num,
+                                          });
+                                        }
+                                      }}
+                                    />
+                                  ) : (
+                                    <DynamicJsonForm
+                                      ref={(ref) =>
+                                        (formRefs.current[key] = ref)
+                                      }
+                                      schema={{
+                                        type: prop.type,
+                                        properties: prop.properties,
+                                        description: prop.description,
+                                        items: prop.items,
+                                      }}
+                                      value={params[key] as JsonValue}
+                                      onChange={(newValue: JsonValue) => {
+                                        setParams({
+                                          ...params,
+                                          [key]: newValue,
+                                        });
+                                        setTimeout(checkValidationErrors, 100);
+                                      }}
+                                    />
+                                  )}
+                                </div>
+                              </div>
+                            );
+                          })}
+
+                          <Button
+                            onClick={handleOpenApp}
+                            className="w-full"
+                            disabled={hasValidationErrors}
+                          >
+                            <Play className="w-4 h-4 mr-2" />
+                            Open App
+                          </Button>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="space-y-4">
+                        <div className="flex justify-end">
+                          <Button
+                            onClick={handleCloseApp}
+                            variant="outline"
+                            size="sm"
+                          >
+                            Back to Input
+                          </Button>
+                        </div>
+                        <div className="h-[600px]">
+                          <AppRenderer
+                            tool={selectedTool}
+                            mcpClient={mcpClient}
+                            onReadResource={onReadResource}
+                            resourceContent={content}
+                            toolInput={params}
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                );
+              })()
+            ) : (
+              <div className="flex flex-col items-center justify-center py-12 text-muted-foreground space-y-4">
+                <AlertCircle className="w-12 h-12 opacity-20" />
+                <p>Select an app from the list to get started</p>
+                {appTools.length === 0 && (
+                  <p className="text-xs text-center max-w-[200px]">
+                    No MCP Apps available. Apps are tools that include a{" "}
+                    <code className="bg-muted px-1 rounded">
+                      _meta.ui.resourceUri
+                    </code>
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
     </TabsContent>
   );
 };
diff --git a/client/src/components/__tests__/AppsTab.test.tsx b/client/src/components/__tests__/AppsTab.test.tsx
index bf9baba10..f38987c25 100644
--- a/client/src/components/__tests__/AppsTab.test.tsx
+++ b/client/src/components/__tests__/AppsTab.test.tsx
@@ -10,14 +10,17 @@ jest.mock("../AppRenderer", () => {
   return function MockAppRenderer({
     tool,
     resourceContent,
+    toolInput,
   }: {
     tool: Tool;
     resourceContent: string;
+    toolInput?: Record<string, unknown>;
   }) {
     return (
       <div data-testid="app-renderer">
         <div>Tool: {tool.name}</div>
         <div>Content: {resourceContent || "No content"}</div>
+        <div data-testid="tool-input">{JSON.stringify(toolInput)}</div>
       </div>
     );
   };
@@ -134,7 +137,7 @@ describe("AppsTab", () => {
     expect(screen.getByText(errorMessage)).toBeInTheDocument();
   });
 
-  it("should open app renderer when an app card is clicked", () => {
+  it("should open app renderer when an app card is clicked and Open App button is clicked", () => {
     renderAppsTab({
       tools: [mockAppTool],
       resourceContentMap: { "ui://weather-app": "<html>test</html>" },
@@ -144,6 +147,14 @@ describe("AppsTab", () => {
     expect(appCard).toBeTruthy();
     fireEvent.click(appCard!);
 
+    // Should see the input form now, not the renderer yet
+    expect(screen.queryByTestId("app-renderer")).not.toBeInTheDocument();
+    expect(screen.getByText("App Input")).toBeInTheDocument();
+
+    // Click Open App button
+    const openAppButton = screen.getByRole("button", { name: /open app/i });
+    fireEvent.click(openAppButton);
+
     // AppRenderer should be rendered
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
     expect(screen.getByText("Tool: weatherApp")).toBeInTheDocument();
@@ -158,9 +169,10 @@ describe("AppsTab", () => {
     // Open the app
     const appCard = screen.getByText("weatherApp").closest("div");
     fireEvent.click(appCard!);
+    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
 
-    // Close the app
+    // Close the app (Deselect tool)
     const closeButton = screen.getByRole("button", { name: /close app/i });
     fireEvent.click(closeButton);
 
@@ -178,6 +190,7 @@ describe("AppsTab", () => {
     // Open the app
     const appCard = screen.getByText("weatherApp").closest("div");
     fireEvent.click(appCard!);
+    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
 
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
     expect(screen.getByText(`Content: ${resourceContent}`)).toBeInTheDocument();
@@ -214,6 +227,7 @@ describe("AppsTab", () => {
     // Select the app
     const appCard = screen.getByText("weatherApp").closest("div");
     fireEvent.click(appCard!);
+    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
 
     // Update tools list to remove the selected tool
@@ -240,6 +254,7 @@ describe("AppsTab", () => {
     // Select the app
     const appCard = screen.getByText("weatherApp").closest("div");
     fireEvent.click(appCard!);
+    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
 
     // Update tools list with the same tool
@@ -257,14 +272,76 @@ describe("AppsTab", () => {
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
   });
 
-  it("should display app cards with hover effect", () => {
+  it("should maximize and minimize the app window", () => {
+    renderAppsTab({
+      tools: [mockAppTool],
+    });
+
+    // Select the app
+    const appCard = screen.getByText("weatherApp").closest("div");
+    fireEvent.click(appCard!);
+
+    // Initially, Maximize button should not be visible (app not open)
+    expect(
+      screen.queryByRole("button", { name: /maximize/i }),
+    ).not.toBeInTheDocument();
+
+    // Open the app
+    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+
+    // Now Maximize button should be visible
+    expect(
+      screen.getByRole("button", { name: /maximize/i }),
+    ).toBeInTheDocument();
+
+    // Initially, ListPane should be visible
+    expect(screen.getByText("MCP Apps")).toBeInTheDocument();
+
+    // Click Maximize
+    const maximizeButton = screen.getByRole("button", { name: /maximize/i });
+    fireEvent.click(maximizeButton);
+
+    // ListPane should be hidden
+    expect(screen.queryByText("MCP Apps")).not.toBeInTheDocument();
+
+    // Click Minimize
+    const minimizeButton = screen.getByRole("button", { name: /minimize/i });
+    fireEvent.click(minimizeButton);
+
+    // ListPane should be visible again
+    expect(screen.getByText("MCP Apps")).toBeInTheDocument();
+  });
+
+  it("should reset maximized state when app is closed", () => {
     renderAppsTab({
       tools: [mockAppTool],
     });
 
+    // Select the app
     const appCard = screen.getByText("weatherApp").closest("div");
-    expect(appCard).toHaveClass("hover:border-primary");
-    expect(appCard).toHaveClass("cursor-pointer");
+    fireEvent.click(appCard!);
+
+    // Open the app
+    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+
+    // Maximize
+    fireEvent.click(screen.getByRole("button", { name: /maximize/i }));
+    expect(screen.queryByText("MCP Apps")).not.toBeInTheDocument();
+
+    // Close app (deselect tool)
+    fireEvent.click(screen.getByRole("button", { name: /close app/i }));
+
+    // ListPane should be visible again
+    expect(screen.getByText("MCP Apps")).toBeInTheDocument();
+  });
+
+  it("should display app cards in the list", () => {
+    renderAppsTab({
+      tools: [mockAppTool],
+    });
+
+    const appItem = screen.getByText("weatherApp").closest("div");
+    expect(appItem).toBeTruthy();
   });
 
   it("should handle empty resourceContentMap", () => {
@@ -276,9 +353,99 @@ describe("AppsTab", () => {
     // Open the app
     const appCard = screen.getByText("weatherApp").closest("div");
     fireEvent.click(appCard!);
+    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
 
     // AppRenderer should still be rendered but with no content
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
     expect(screen.getByText("Content: No content")).toBeInTheDocument();
   });
+
+  it("should handle various input types and pass them to AppRenderer", () => {
+    const toolWithComplexSchema: Tool = {
+      name: "complexApp",
+      inputSchema: {
+        type: "object",
+        properties: {
+          text: { type: "string" },
+          toggle: { type: "boolean" },
+          number: { type: "number" },
+          choice: { type: "string", enum: ["a", "b"] },
+        },
+      },
+      _meta: { ui: { resourceUri: "ui://complex" } },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+    renderAppsTab({
+      tools: [toolWithComplexSchema],
+    });
+
+    fireEvent.click(screen.getByText("complexApp"));
+
+    // Fill the form
+    fireEvent.change(screen.getByLabelText("text"), {
+      target: { value: "hello" },
+    });
+    // Checkboxes are often rendered with a label next to them, let's look for the text
+    const toggleLabel = screen.getByText(/Toggle this option/i);
+    fireEvent.click(toggleLabel);
+    fireEvent.change(screen.getByLabelText("number"), {
+      target: { value: "42" },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+
+    const toolInput = JSON.parse(
+      screen.getByTestId("tool-input").textContent || "{}",
+    );
+    expect(toolInput.text).toBe("hello");
+    expect(toolInput.toggle).toBe(true);
+    expect(toolInput.number).toBe(42);
+  });
+
+  it("should handle nullable fields", () => {
+    const toolWithNullable: Tool = {
+      name: "nullableApp",
+      inputSchema: {
+        type: "object",
+        properties: {
+          nullableField: { type: ["string", "null"] },
+        },
+      },
+      _meta: { ui: { resourceUri: "ui://nullable" } },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+    renderAppsTab({
+      tools: [toolWithNullable],
+    });
+
+    fireEvent.click(screen.getByText("nullableApp"));
+
+    // Check the 'null' checkbox
+    const nullCheckbox = screen.getByLabelText("null");
+    fireEvent.click(nullCheckbox);
+
+    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+
+    const toolInput = JSON.parse(
+      screen.getByTestId("tool-input").textContent || "{}",
+    );
+    expect(toolInput.nullableField).toBe(null);
+  });
+
+  it("should allow going back to input form from app renderer", () => {
+    renderAppsTab({
+      tools: [mockAppTool],
+    });
+
+    fireEvent.click(screen.getByText("weatherApp"));
+    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+
+    const backButton = screen.getByRole("button", { name: /back to input/i });
+    fireEvent.click(backButton);
+
+    expect(screen.queryByTestId("app-renderer")).not.toBeInTheDocument();
+    expect(screen.getByText("App Input")).toBeInTheDocument();
+  });
 });

From d7c3ef34b4b386c02c4c9f55f987f361897fc1b8 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 29 Jan 2026 19:26:23 -0500
Subject: [PATCH 20/33] In AppsTab.tsx, if an app has no inputSchema, just show
 it, otherwise show the form and the "back to form" button when showing the
 app.

* In AppsTab.test.tsx
  - test new behavior

* In ListPane.tsx
  - remove the Clear button

* In ListPane.test.tsx
  - remove test for clear button
---
 client/src/components/AppsTab.tsx             |  31 +++--
 client/src/components/ListPane.tsx            |  20 ++--
 .../src/components/__tests__/AppsTab.test.tsx | 113 ++++++++++++++----
 .../components/__tests__/ListPane.test.tsx    |   8 +-
 4 files changed, 127 insertions(+), 45 deletions(-)

diff --git a/client/src/components/AppsTab.tsx b/client/src/components/AppsTab.tsx
index 3f940953d..ece7b017b 100644
--- a/client/src/components/AppsTab.tsx
+++ b/client/src/components/AppsTab.tsx
@@ -136,7 +136,10 @@ const AppsTab = ({
 
   const handleSelectTool = useCallback((tool: Tool) => {
     setSelectedTool(tool);
-    setIsAppOpen(false);
+    const hasFields =
+      tool.inputSchema.properties &&
+      Object.keys(tool.inputSchema.properties).length > 0;
+    setIsAppOpen(!hasFields);
   }, []);
 
   const handleDeselectTool = useCallback(() => {
@@ -158,7 +161,6 @@ const AppsTab = ({
           <ListPane
             items={appTools}
             listItems={handleRefresh}
-            clearItems={handleDeselectTool}
             setSelectedItem={handleSelectTool}
             renderItem={(tool) => {
               const resourceUri = getToolUiResourceUri(tool) || "";
@@ -174,7 +176,7 @@ const AppsTab = ({
                         {tool.description}
                       </span>
                     )}
-                    <span className="text-[10px] text-muted-foreground font-mono mt-1 truncate">
+                    <span className="text-[10px] text-muted-foreground text-right font-mono mt-1 truncate">
                       {resourceUri}
                     </span>
                   </div>
@@ -242,6 +244,9 @@ const AppsTab = ({
               (() => {
                 const resourceUri = getToolUiResourceUri(selectedTool) || "";
                 const content = resourceContentMap[resourceUri] || "";
+                const hasFields =
+                  selectedTool.inputSchema.properties &&
+                  Object.keys(selectedTool.inputSchema.properties).length > 0;
 
                 return (
                   <div className="space-y-4">
@@ -482,15 +487,17 @@ const AppsTab = ({
                       </div>
                     ) : (
                       <div className="space-y-4">
-                        <div className="flex justify-end">
-                          <Button
-                            onClick={handleCloseApp}
-                            variant="outline"
-                            size="sm"
-                          >
-                            Back to Input
-                          </Button>
-                        </div>
+                        {hasFields && (
+                          <div className="flex justify-end">
+                            <Button
+                              onClick={handleCloseApp}
+                              variant="outline"
+                              size="sm"
+                            >
+                              Back to Input
+                            </Button>
+                          </div>
+                        )}
                         <div className="h-[600px]">
                           <AppRenderer
                             tool={selectedTool}
diff --git a/client/src/components/ListPane.tsx b/client/src/components/ListPane.tsx
index 8cc2c1fe7..e88aadb5a 100644
--- a/client/src/components/ListPane.tsx
+++ b/client/src/components/ListPane.tsx
@@ -6,7 +6,7 @@ import { useState, useMemo, useRef } from "react";
 type ListPaneProps<T> = {
   items: T[];
   listItems: () => void;
-  clearItems: () => void;
+  clearItems?: () => void;
   setSelectedItem: (item: T) => void;
   renderItem: (item: T) => React.ReactNode;
   title: string;
@@ -101,14 +101,16 @@ const ListPane = <T extends object>({
         >
           {buttonText}
         </Button>
-        <Button
-          variant="outline"
-          className="w-full mb-4"
-          onClick={clearItems}
-          disabled={items.length === 0}
-        >
-          Clear
-        </Button>
+        {clearItems && (
+          <Button
+            variant="outline"
+            className="w-full mb-4"
+            onClick={clearItems}
+            disabled={items.length === 0}
+          >
+            Clear
+          </Button>
+        )}
         <div className="space-y-2 overflow-y-auto max-h-96">
           {filteredItems.map((item, index) => (
             <div
diff --git a/client/src/components/__tests__/AppsTab.test.tsx b/client/src/components/__tests__/AppsTab.test.tsx
index f38987c25..9f0a75da1 100644
--- a/client/src/components/__tests__/AppsTab.test.tsx
+++ b/client/src/components/__tests__/AppsTab.test.tsx
@@ -137,13 +137,24 @@ describe("AppsTab", () => {
     expect(screen.getByText(errorMessage)).toBeInTheDocument();
   });
 
-  it("should open app renderer when an app card is clicked and Open App button is clicked", () => {
+  it("should open app renderer when an app card is clicked and Open App button is clicked if fields exist", () => {
+    const toolWithFields: Tool = {
+      name: "fieldsApp",
+      inputSchema: {
+        type: "object",
+        properties: {
+          field1: { type: "string" },
+        },
+      },
+      _meta: { ui: { resourceUri: "ui://fields" } },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
     renderAppsTab({
-      tools: [mockAppTool],
-      resourceContentMap: { "ui://weather-app": "<html>test</html>" },
+      tools: [toolWithFields],
+      resourceContentMap: { "ui://fields": "<html>test</html>" },
     });
 
-    const appCard = screen.getByText("weatherApp").closest("div");
+    const appCard = screen.getByText("fieldsApp").closest("div");
     expect(appCard).toBeTruthy();
     fireEvent.click(appCard!);
 
@@ -157,7 +168,7 @@ describe("AppsTab", () => {
 
     // AppRenderer should be rendered
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
-    expect(screen.getByText("Tool: weatherApp")).toBeInTheDocument();
+    expect(screen.getByText("Tool: fieldsApp")).toBeInTheDocument();
   });
 
   it("should close app renderer when close button is clicked", () => {
@@ -169,7 +180,7 @@ describe("AppsTab", () => {
     // Open the app
     const appCard = screen.getByText("weatherApp").closest("div");
     fireEvent.click(appCard!);
-    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+    // weatherApp has no properties in mockAppTool, so it should be open immediately
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
 
     // Close the app (Deselect tool)
@@ -190,7 +201,7 @@ describe("AppsTab", () => {
     // Open the app
     const appCard = screen.getByText("weatherApp").closest("div");
     fireEvent.click(appCard!);
-    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+    // weatherApp has no properties in mockAppTool, so it should be open immediately
 
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
     expect(screen.getByText(`Content: ${resourceContent}`)).toBeInTheDocument();
@@ -227,7 +238,7 @@ describe("AppsTab", () => {
     // Select the app
     const appCard = screen.getByText("weatherApp").closest("div");
     fireEvent.click(appCard!);
-    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+    // weatherApp has no properties in mockAppTool, so it should be open immediately
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
 
     // Update tools list to remove the selected tool
@@ -254,7 +265,7 @@ describe("AppsTab", () => {
     // Select the app
     const appCard = screen.getByText("weatherApp").closest("div");
     fireEvent.click(appCard!);
-    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+    // weatherApp has no properties in mockAppTool, so it should be open immediately
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
 
     // Update tools list with the same tool
@@ -280,14 +291,7 @@ describe("AppsTab", () => {
     // Select the app
     const appCard = screen.getByText("weatherApp").closest("div");
     fireEvent.click(appCard!);
-
-    // Initially, Maximize button should not be visible (app not open)
-    expect(
-      screen.queryByRole("button", { name: /maximize/i }),
-    ).not.toBeInTheDocument();
-
-    // Open the app
-    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+    // weatherApp has no properties in mockAppTool, so it should be open immediately
 
     // Now Maximize button should be visible
     expect(
@@ -320,9 +324,7 @@ describe("AppsTab", () => {
     // Select the app
     const appCard = screen.getByText("weatherApp").closest("div");
     fireEvent.click(appCard!);
-
-    // Open the app
-    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+    // weatherApp has no properties in mockAppTool, so it should be open immediately
 
     // Maximize
     fireEvent.click(screen.getByRole("button", { name: /maximize/i }));
@@ -353,7 +355,7 @@ describe("AppsTab", () => {
     // Open the app
     const appCard = screen.getByText("weatherApp").closest("div");
     fireEvent.click(appCard!);
-    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+    // weatherApp has no properties in mockAppTool, so it should be open immediately
 
     // AppRenderer should still be rendered but with no content
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
@@ -433,11 +435,76 @@ describe("AppsTab", () => {
   });
 
   it("should allow going back to input form from app renderer", () => {
+    const toolWithFields: Tool = {
+      name: "fieldsApp",
+      inputSchema: {
+        type: "object",
+        properties: {
+          field1: { type: "string" },
+        },
+      },
+      _meta: { ui: { resourceUri: "ui://fields" } },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
     renderAppsTab({
-      tools: [mockAppTool],
+      tools: [toolWithFields],
+    });
+
+    fireEvent.click(screen.getByText("fieldsApp"));
+    fireEvent.click(screen.getByRole("button", { name: /open app/i }));
+
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+
+    const backButton = screen.queryByRole("button", { name: /back to input/i });
+    expect(backButton).toBeInTheDocument();
+  });
+
+  it("should skip input form if tool has no input fields", () => {
+    const toolNoFields: Tool = {
+      name: "noFieldsApp",
+      inputSchema: {
+        type: "object",
+        properties: {},
+      },
+      _meta: { ui: { resourceUri: "ui://no-fields" } },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+    renderAppsTab({
+      tools: [toolNoFields],
     });
 
-    fireEvent.click(screen.getByText("weatherApp"));
+    fireEvent.click(screen.getByText("noFieldsApp"));
+
+    // Should see the renderer immediately
+    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
+    expect(screen.getByText("Tool: noFieldsApp")).toBeInTheDocument();
+
+    // Should NOT see the back button
+    expect(
+      screen.queryByRole("button", { name: /back to input/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should allow going back to input form from app renderer if fields exist", () => {
+    const toolWithFields: Tool = {
+      name: "fieldsApp",
+      inputSchema: {
+        type: "object",
+        properties: {
+          field1: { type: "string" },
+        },
+      },
+      _meta: { ui: { resourceUri: "ui://fields" } },
+    } as Tool & { _meta?: { ui?: { resourceUri?: string } } };
+
+    renderAppsTab({
+      tools: [toolWithFields],
+    });
+
+    fireEvent.click(screen.getByText("fieldsApp"));
+
+    // Should see input form first
+    expect(screen.getByText("App Input")).toBeInTheDocument();
     fireEvent.click(screen.getByRole("button", { name: /open app/i }));
 
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
diff --git a/client/src/components/__tests__/ListPane.test.tsx b/client/src/components/__tests__/ListPane.test.tsx
index 26b5b9a4a..e930a52a2 100644
--- a/client/src/components/__tests__/ListPane.test.tsx
+++ b/client/src/components/__tests__/ListPane.test.tsx
@@ -13,7 +13,6 @@ describe("ListPane", () => {
   const defaultProps = {
     items: mockItems,
     listItems: jest.fn(),
-    clearItems: jest.fn(),
     setSelectedItem: jest.fn(),
     renderItem: (item: (typeof mockItems)[0]) => <div>{item.name}</div>,
     title: "List tools",
@@ -36,6 +35,13 @@ describe("ListPane", () => {
       expect(
         screen.getByRole("button", { name: "Load Tools" }),
       ).toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "Clear" }),
+      ).not.toBeInTheDocument();
+    });
+
+    it("should render Clear button when clearItems prop is provided", () => {
+      renderListPane({ clearItems: jest.fn() });
       expect(screen.getByRole("button", { name: "Clear" })).toBeInTheDocument();
     });
 

From 529ca11611edc5f7b13feaf4c4e20fbd9a328d34 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 30 Jan 2026 13:23:43 -0500
Subject: [PATCH 21/33] In AppRenderer.tsx,   - remove onReadResource and
 resourceContent, not needed since mcpClient is being passed

* In App.tsx and AppsTab.tsx,
  - remove the passing of these variables
---
 client/src/App.tsx                    |  5 ---
 client/src/components/AppRenderer.tsx | 45 ++-------------------------
 client/src/components/AppsTab.tsx     | 19 +----------
 3 files changed, 3 insertions(+), 66 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 072ca0aa6..8bda3f378 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1553,11 +1553,6 @@ const App = () => {
                       }}
                       error={errors.tools}
                       mcpClient={mcpClient}
-                      onReadResource={(uri: string) => {
-                        clearError("resources");
-                        readResource(uri);
-                      }}
-                      resourceContentMap={resourceContentMap}
                     />
                     <ConsoleTab />
                     <PingTab
diff --git a/client/src/components/AppRenderer.tsx b/client/src/components/AppRenderer.tsx
index f8c9232a9..63262cee1 100644
--- a/client/src/components/AppRenderer.tsx
+++ b/client/src/components/AppRenderer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import { Tool } from "@modelcontextprotocol/sdk/types.js";
 import {
@@ -12,55 +12,15 @@ import { AlertCircle } from "lucide-react";
 interface AppRendererProps {
   tool: Tool;
   mcpClient: Client | null;
-  onReadResource: (uri: string) => void;
-  resourceContent: string;
   toolInput?: Record<string, unknown>;
 }
 
-const AppRenderer = ({
-  tool,
-  mcpClient,
-  onReadResource,
-  resourceContent,
-  toolInput,
-}: AppRendererProps) => {
+const AppRenderer = ({ tool, mcpClient, toolInput }: AppRendererProps) => {
   const [error, setError] = useState<string | null>(null);
 
   // Extract UI metadata from tool
   const resourceUri = getToolUiResourceUri(tool);
 
-  // Parse HTML from resourceContent if it's a JSON-encoded resource response
-  const html = useMemo(() => {
-    let retval = "";
-    if (resourceContent) {
-      try {
-        const parsed = JSON.parse(resourceContent);
-        if (parsed.error) {
-          setError(parsed.error);
-          return "";
-        }
-        if (parsed.contents && Array.isArray(parsed.contents)) {
-          // MCP resource response format: TextResourceContents has uri, mimeType?, and text
-          const textContent = parsed.contents.find(
-            (c: { text?: string }) => c.text !== undefined,
-          );
-          retval = textContent?.text || resourceContent;
-        }
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      } catch (err) {
-        retval = resourceContent;
-      }
-    }
-    return retval;
-  }, [resourceContent]);
-
-  // Fetch UI resource when component mounts or tool changes
-  useEffect(() => {
-    if (resourceUri && !resourceContent && !error) {
-      onReadResource(resourceUri);
-    }
-  }, [resourceUri, resourceContent, onReadResource, error]);
-
   const hostContext: McpUiHostContext = useMemo(
     () => ({
       theme: document.documentElement.classList.contains("dark")
@@ -106,7 +66,6 @@ const AppRenderer = ({
         <McpUiAppRenderer
           client={mcpClient}
           toolName={tool.name}
-          html={html}
           hostContext={hostContext}
           toolInput={toolInput}
           sandbox={{
diff --git a/client/src/components/AppsTab.tsx b/client/src/components/AppsTab.tsx
index ece7b017b..e8cd5474e 100644
--- a/client/src/components/AppsTab.tsx
+++ b/client/src/components/AppsTab.tsx
@@ -41,8 +41,6 @@ interface AppsTabProps {
   listTools: () => void;
   error: string | null;
   mcpClient: Client | null;
-  onReadResource: (uri: string) => void;
-  resourceContentMap: Record<string, string>;
 }
 
 // Type guard to check if a tool has UI metadata
@@ -50,14 +48,7 @@ const hasUIMetadata = (tool: Tool): boolean => {
   return !!getToolUiResourceUri(tool);
 };
 
-const AppsTab = ({
-  tools,
-  listTools,
-  error,
-  mcpClient,
-  onReadResource,
-  resourceContentMap,
-}: AppsTabProps) => {
+const AppsTab = ({ tools, listTools, error, mcpClient }: AppsTabProps) => {
   const [appTools, setAppTools] = useState<Tool[]>([]);
   const [selectedTool, setSelectedTool] = useState<Tool | null>(null);
   const [params, setParams] = useState<Record<string, unknown>>({});
@@ -163,7 +154,6 @@ const AppsTab = ({
             listItems={handleRefresh}
             setSelectedItem={handleSelectTool}
             renderItem={(tool) => {
-              const resourceUri = getToolUiResourceUri(tool) || "";
               return (
                 <div className="flex items-start w-full gap-2">
                   <div className="flex-shrink-0 mt-1">
@@ -176,9 +166,6 @@ const AppsTab = ({
                         {tool.description}
                       </span>
                     )}
-                    <span className="text-[10px] text-muted-foreground text-right font-mono mt-1 truncate">
-                      {resourceUri}
-                    </span>
                   </div>
                   <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400 mt-1" />
                 </div>
@@ -242,8 +229,6 @@ const AppsTab = ({
 
             {selectedTool ? (
               (() => {
-                const resourceUri = getToolUiResourceUri(selectedTool) || "";
-                const content = resourceContentMap[resourceUri] || "";
                 const hasFields =
                   selectedTool.inputSchema.properties &&
                   Object.keys(selectedTool.inputSchema.properties).length > 0;
@@ -502,8 +487,6 @@ const AppsTab = ({
                           <AppRenderer
                             tool={selectedTool}
                             mcpClient={mcpClient}
-                            onReadResource={onReadResource}
-                            resourceContent={content}
                             toolInput={params}
                           />
                         </div>

From 853d789a505014680fff356be21425a271790b99 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 30 Jan 2026 13:42:13 -0500
Subject: [PATCH 22/33] In AppRenderer.test.tsx, and AppsTab.test.tsx   -
 remove tests that fail after having removed onReadResource and
 resourceContent

---
 .../components/__tests__/AppRenderer.test.tsx | 74 +------------------
 .../src/components/__tests__/AppsTab.test.tsx | 43 +----------
 2 files changed, 7 insertions(+), 110 deletions(-)

diff --git a/client/src/components/__tests__/AppRenderer.test.tsx b/client/src/components/__tests__/AppRenderer.test.tsx
index 18ea93e29..5482bc5bc 100644
--- a/client/src/components/__tests__/AppRenderer.test.tsx
+++ b/client/src/components/__tests__/AppRenderer.test.tsx
@@ -16,10 +16,9 @@ jest.mock("@modelcontextprotocol/ext-apps/app-bridge", () => ({
 
 // Mock @mcp-ui/client
 jest.mock("@mcp-ui/client", () => ({
-  AppRenderer: ({ toolName, html }: { toolName: string; html: string }) => (
+  AppRenderer: ({ toolName }: { toolName: string }) => (
     <div data-testid="mcp-ui-app-renderer">
       <div data-testid="tool-name">{toolName}</div>
-      <div data-testid="html-content">{html}</div>
     </div>
   ),
 }));
@@ -48,8 +47,6 @@ describe("AppRenderer", () => {
   const defaultProps = {
     tool: mockTool,
     mcpClient: mockMcpClient,
-    onReadResource: jest.fn(),
-    resourceContent: "",
   };
 
   beforeEach(() => {
@@ -61,19 +58,6 @@ describe("AppRenderer", () => {
     expect(screen.getByText(/Waiting for MCP client/i)).toBeInTheDocument();
   });
 
-  it("should call onReadResource when resourceContent is empty", () => {
-    const mockOnReadResource = jest.fn();
-    render(
-      <AppRenderer
-        {...defaultProps}
-        onReadResource={mockOnReadResource}
-        resourceContent=""
-      />,
-    );
-
-    expect(mockOnReadResource).toHaveBeenCalledWith("ui://test-app");
-  });
-
   it("should display error when no resource URI is found", () => {
     const toolWithoutUri: Tool = {
       name: "noUriTool",
@@ -91,65 +75,15 @@ describe("AppRenderer", () => {
     ).toBeInTheDocument();
   });
 
-  it("should render McpUiAppRenderer when client and resource are ready", () => {
-    render(
-      <AppRenderer
-        {...defaultProps}
-        resourceContent="<html><body>Test</body></html>"
-      />,
-    );
+  it("should render McpUiAppRenderer when client is ready", () => {
+    render(<AppRenderer {...defaultProps} />);
 
     expect(screen.getByTestId("mcp-ui-app-renderer")).toBeInTheDocument();
     expect(screen.getByTestId("tool-name")).toHaveTextContent("testApp");
-    expect(screen.getByTestId("html-content")).toHaveTextContent(
-      "<html><body>Test</body></html>",
-    );
-  });
-
-  it("should handle JSON resource content with MCP format", () => {
-    const jsonContent = JSON.stringify({
-      contents: [
-        {
-          uri: "ui://test-app",
-          mimeType: "text/html",
-          text: "<html><body>Test App</body></html>",
-        },
-      ],
-    });
-
-    render(<AppRenderer {...defaultProps} resourceContent={jsonContent} />);
-
-    expect(screen.getByTestId("html-content")).toHaveTextContent(
-      "<html><body>Test App</body></html>",
-    );
-  });
-
-  it("should display error from JSON resource response", () => {
-    const errorJson = JSON.stringify({
-      error: "Failed to load resource",
-    });
-
-    render(<AppRenderer {...defaultProps} resourceContent={errorJson} />);
-
-    expect(screen.getByText("Failed to load resource")).toBeInTheDocument();
-  });
-
-  it("should handle invalid JSON gracefully by using as-is", () => {
-    const invalidJson = "{invalid json}";
-    render(<AppRenderer {...defaultProps} resourceContent={invalidJson} />);
-
-    expect(screen.getByTestId("html-content")).toHaveTextContent(
-      "{invalid json}",
-    );
   });
 
   it("should set minimum height on container", () => {
-    render(
-      <AppRenderer
-        {...defaultProps}
-        resourceContent="<html><body>Test</body></html>"
-      />,
-    );
+    render(<AppRenderer {...defaultProps} />);
 
     const container = screen.getByTestId("mcp-ui-app-renderer").parentElement;
     expect(container).toHaveStyle({ minHeight: "400px" });
diff --git a/client/src/components/__tests__/AppsTab.test.tsx b/client/src/components/__tests__/AppsTab.test.tsx
index 9f0a75da1..27868fcad 100644
--- a/client/src/components/__tests__/AppsTab.test.tsx
+++ b/client/src/components/__tests__/AppsTab.test.tsx
@@ -9,17 +9,14 @@ import { Tabs } from "../ui/tabs";
 jest.mock("../AppRenderer", () => {
   return function MockAppRenderer({
     tool,
-    resourceContent,
     toolInput,
   }: {
     tool: Tool;
-    resourceContent: string;
     toolInput?: Record<string, unknown>;
   }) {
     return (
       <div data-testid="app-renderer">
         <div>Tool: {tool.name}</div>
-        <div>Content: {resourceContent || "No content"}</div>
         <div data-testid="tool-input">{JSON.stringify(toolInput)}</div>
       </div>
     );
@@ -55,8 +52,6 @@ describe("AppsTab", () => {
     listTools: jest.fn(),
     error: null,
     mcpClient: null,
-    onReadResource: jest.fn(),
-    resourceContentMap: {},
   };
 
   const renderAppsTab = (props = {}) => {
@@ -86,7 +81,6 @@ describe("AppsTab", () => {
     // Should show the app tool
     expect(screen.getByText("weatherApp")).toBeInTheDocument();
     expect(screen.getByText("Weather app with UI")).toBeInTheDocument();
-    expect(screen.getByText("ui://weather-app")).toBeInTheDocument();
 
     // Should not show the regular tool
     expect(screen.queryByText("regularTool")).not.toBeInTheDocument();
@@ -151,7 +145,6 @@ describe("AppsTab", () => {
 
     renderAppsTab({
       tools: [toolWithFields],
-      resourceContentMap: { "ui://fields": "<html>test</html>" },
     });
 
     const appCard = screen.getByText("fieldsApp").closest("div");
@@ -174,7 +167,6 @@ describe("AppsTab", () => {
   it("should close app renderer when close button is clicked", () => {
     renderAppsTab({
       tools: [mockAppTool],
-      resourceContentMap: { "ui://weather-app": "<html>test</html>" },
     });
 
     // Open the app
@@ -191,22 +183,6 @@ describe("AppsTab", () => {
     expect(screen.queryByTestId("app-renderer")).not.toBeInTheDocument();
   });
 
-  it("should pass resourceContent to AppRenderer", () => {
-    const resourceContent = "<html><body>Weather App UI</body></html>";
-    renderAppsTab({
-      tools: [mockAppTool],
-      resourceContentMap: { "ui://weather-app": resourceContent },
-    });
-
-    // Open the app
-    const appCard = screen.getByText("weatherApp").closest("div");
-    fireEvent.click(appCard!);
-    // weatherApp has no properties in mockAppTool, so it should be open immediately
-
-    expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
-    expect(screen.getByText(`Content: ${resourceContent}`)).toBeInTheDocument();
-  });
-
   it("should handle tool without description", () => {
     const toolWithoutDescription: Tool = {
       name: "noDescriptionApp",
@@ -226,13 +202,11 @@ describe("AppsTab", () => {
     });
 
     expect(screen.getByText("noDescriptionApp")).toBeInTheDocument();
-    expect(screen.getByText("ui://no-description-app")).toBeInTheDocument();
   });
 
   it("should reset selected tool when tools list changes and selected tool is removed", () => {
     const { rerender } = renderAppsTab({
       tools: [mockAppTool],
-      resourceContentMap: { "ui://weather-app": "<html>test</html>" },
     });
 
     // Select the app
@@ -244,11 +218,7 @@ describe("AppsTab", () => {
     // Update tools list to remove the selected tool
     rerender(
       <Tabs defaultValue="apps">
-        <AppsTab
-          {...defaultProps}
-          tools={[]}
-          resourceContentMap={{ "ui://weather-app": "<html>test</html>" }}
-        />
+        <AppsTab {...defaultProps} tools={[]} />
       </Tabs>,
     );
 
@@ -259,7 +229,6 @@ describe("AppsTab", () => {
   it("should maintain selected tool when tools list updates but includes the same tool", () => {
     const { rerender } = renderAppsTab({
       tools: [mockAppTool],
-      resourceContentMap: { "ui://weather-app": "<html>test</html>" },
     });
 
     // Select the app
@@ -271,11 +240,7 @@ describe("AppsTab", () => {
     // Update tools list with the same tool
     rerender(
       <Tabs defaultValue="apps">
-        <AppsTab
-          {...defaultProps}
-          tools={[mockAppTool]}
-          resourceContentMap={{ "ui://weather-app": "<html>test</html>" }}
-        />
+        <AppsTab {...defaultProps} tools={[mockAppTool]} />
       </Tabs>,
     );
 
@@ -349,7 +314,6 @@ describe("AppsTab", () => {
   it("should handle empty resourceContentMap", () => {
     renderAppsTab({
       tools: [mockAppTool],
-      resourceContentMap: {},
     });
 
     // Open the app
@@ -357,9 +321,8 @@ describe("AppsTab", () => {
     fireEvent.click(appCard!);
     // weatherApp has no properties in mockAppTool, so it should be open immediately
 
-    // AppRenderer should still be rendered but with no content
+    // AppRenderer should still be rendered
     expect(screen.getByTestId("app-renderer")).toBeInTheDocument();
-    expect(screen.getByText("Content: No content")).toBeInTheDocument();
   });
 
   it("should handle various input types and pass them to AppRenderer", () => {

From b1a44359575d8b767cc81d17202d854e986e315d Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 30 Jan 2026 16:01:55 -0500
Subject: [PATCH 23/33] Serving the sandbox_proxy.html from a separate port,
 using the proxy instead of the webclient server.

* In App.tsx
  - pass the path to the sandbox endpoint on the proxy to the AppsTab

* In AppsTab.tsx
  - accept the sandboxPath property and pass it to the AppRenderer

* In AppRenderer.tsx
  - accept the sandboxPath property and pass it to the McpUiAppRenderer

* In client.js
  - remove the rewrite and header config for sandbox_proxy.html

* In server/src/index.ts
  - add a /sandbox endpoint that reads and returns the sandbox_proxy.html file with no-cache header

* In server/package.json
  - add shx for cross-platform copy function
  - in build script, copy static folder to build folder

* Moved sandbox_proxy.html from client/public to server/static
---
 client/bin/client.js                          | 11 ----
 client/src/App.tsx                            |  1 +
 client/src/components/AppRenderer.tsx         | 10 ++-
 client/src/components/AppsTab.tsx             | 10 ++-
 package-lock.json                             | 63 ++++++++++++++++---
 server/package.json                           |  3 +-
 server/src/index.ts                           | 19 ++++++
 .../static}/sandbox_proxy.html                |  0
 8 files changed, 93 insertions(+), 24 deletions(-)
 rename {client/public => server/static}/sandbox_proxy.html (100%)

diff --git a/client/bin/client.js b/client/bin/client.js
index 47aea2dd8..8bbc86e94 100755
--- a/client/bin/client.js
+++ b/client/bin/client.js
@@ -14,7 +14,6 @@ const server = http.createServer((request, response) => {
     public: distPath,
     cleanUrls: false,
     rewrites: [
-      { source: "/sandbox_proxy.html", destination: "/sandbox_proxy.html" },
       { source: "/index.html", destination: "/index.html" },
       { source: "/**", destination: "/index.html" },
     ],
@@ -29,16 +28,6 @@ const server = http.createServer((request, response) => {
           },
         ],
       },
-      {
-        // Ensure sandbox_proxy.html is never cached
-        source: "sandbox_proxy.html",
-        headers: [
-          {
-            key: "Cache-Control",
-            value: "no-cache, no-store, max-age=0",
-          },
-        ],
-      },
       {
         // Allow long-term caching for hashed assets
         source: "assets/**",
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 8bda3f378..75329bc5b 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1546,6 +1546,7 @@ const App = () => {
                       nextCursor={nextTaskCursor}
                     />
                     <AppsTab
+                      sandboxPath={`${getMCPProxyAddress(config)}/sandbox`}
                       tools={tools}
                       listTools={() => {
                         clearError("tools");
diff --git a/client/src/components/AppRenderer.tsx b/client/src/components/AppRenderer.tsx
index 63262cee1..a23b9d679 100644
--- a/client/src/components/AppRenderer.tsx
+++ b/client/src/components/AppRenderer.tsx
@@ -10,12 +10,18 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
 import { AlertCircle } from "lucide-react";
 
 interface AppRendererProps {
+  sandboxPath: string;
   tool: Tool;
   mcpClient: Client | null;
   toolInput?: Record<string, unknown>;
 }
 
-const AppRenderer = ({ tool, mcpClient, toolInput }: AppRendererProps) => {
+const AppRenderer = ({
+  sandboxPath,
+  tool,
+  mcpClient,
+  toolInput,
+}: AppRendererProps) => {
   const [error, setError] = useState<string | null>(null);
 
   // Extract UI metadata from tool
@@ -69,7 +75,7 @@ const AppRenderer = ({ tool, mcpClient, toolInput }: AppRendererProps) => {
           hostContext={hostContext}
           toolInput={toolInput}
           sandbox={{
-            url: new URL("/sandbox_proxy.html", window.location.origin),
+            url: new URL(sandboxPath, window.location.origin),
           }}
           onError={(err) => setError(err.message)}
         />
diff --git a/client/src/components/AppsTab.tsx b/client/src/components/AppsTab.tsx
index e8cd5474e..6bd9a5092 100644
--- a/client/src/components/AppsTab.tsx
+++ b/client/src/components/AppsTab.tsx
@@ -37,6 +37,7 @@ import {
 } from "@/utils/schemaUtils";
 
 interface AppsTabProps {
+  sandboxPath: string;
   tools: Tool[];
   listTools: () => void;
   error: string | null;
@@ -48,7 +49,13 @@ const hasUIMetadata = (tool: Tool): boolean => {
   return !!getToolUiResourceUri(tool);
 };
 
-const AppsTab = ({ tools, listTools, error, mcpClient }: AppsTabProps) => {
+const AppsTab = ({
+  sandboxPath,
+  tools,
+  listTools,
+  error,
+  mcpClient,
+}: AppsTabProps) => {
   const [appTools, setAppTools] = useState<Tool[]>([]);
   const [selectedTool, setSelectedTool] = useState<Tool | null>(null);
   const [params, setParams] = useState<Record<string, unknown>>({});
@@ -485,6 +492,7 @@ const AppsTab = ({ tools, listTools, error, mcpClient }: AppsTabProps) => {
                         )}
                         <div className="h-[600px]">
                           <AppRenderer
+                            sandboxPath={sandboxPath}
                             tool={selectedTool}
                             mcpClient={mcpClient}
                             toolInput={params}
diff --git a/package-lock.json b/package-lock.json
index 132949a7d..251bbef09 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7332,7 +7332,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/fsevents": {
@@ -7478,7 +7477,6 @@
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "deprecated": "Glob versions prior to v9 are no longer supported",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "fs.realpath": "^1.0.0",
@@ -7810,7 +7808,6 @@
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
       "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "once": "^1.3.0",
@@ -7823,6 +7820,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
+    "node_modules/interpret": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+      "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -7856,7 +7862,6 @@
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -10050,7 +10055,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -10463,7 +10467,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -10488,7 +10491,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
@@ -11219,6 +11221,17 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==",
+      "dependencies": {
+        "resolve": "^1.1.6"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -11262,7 +11275,6 @@
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
       "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.16.1",
@@ -11743,6 +11755,39 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/shelljs": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz",
+      "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      },
+      "bin": {
+        "shjs": "bin/shjs"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/shx": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/shx/-/shx-0.3.4.tgz",
+      "integrity": "sha512-N6A9MLVqjxZYcVn8hLmtneQWIJtp8IKzMP4eMnx+nqkvXoqinUPCbUFLp2UcWTEIUONhlk0ewxr/jaVGlc+J+g==",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.3",
+        "shelljs": "^0.8.5"
+      },
+      "bin": {
+        "shx": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -12147,7 +12192,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -13972,6 +14016,7 @@
         "cors": "^2.8.5",
         "express": "^5.1.0",
         "shell-quote": "^1.8.3",
+        "shx": "^0.3.4",
         "spawn-rx": "^5.1.2",
         "ws": "^8.18.0",
         "zod": "^3.25.76"
diff --git a/server/package.json b/server/package.json
index 622b889d3..d5ea33620 100644
--- a/server/package.json
+++ b/server/package.json
@@ -14,7 +14,7 @@
     "build"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && shx cp -R static build",
     "start": "node build/index.js",
     "dev": "tsx watch --clear-screen=false src/index.ts",
     "dev:windows": "tsx watch --clear-screen=false src/index.ts < NUL"
@@ -32,6 +32,7 @@
     "cors": "^2.8.5",
     "express": "^5.1.0",
     "shell-quote": "^1.8.3",
+    "shx": "^0.3.4",
     "spawn-rx": "^5.1.2",
     "ws": "^8.18.0",
     "zod": "^3.25.76"
diff --git a/server/src/index.ts b/server/src/index.ts
index 388fdaca7..5e10cc371 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -28,6 +28,9 @@ import express from "express";
 import { findActualExecutable } from "spawn-rx";
 import mcpProxy from "./mcpProxy.js";
 import { randomUUID, randomBytes, timingSafeEqual } from "node:crypto";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+import { readFileSync } from "fs";
 
 const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";
 
@@ -787,6 +790,22 @@ app.get("/config", originValidationMiddleware, authMiddleware, (req, res) => {
   }
 });
 
+app.get("/sandbox", (req, res) => {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+  const filePath = join(__dirname, "..", "static", "sandbox_proxy.html");
+  let sandboxHtml;
+
+  try {
+    sandboxHtml = readFileSync(filePath, "utf-8");
+  } catch (e) {
+    sandboxHtml = "MCP Apps sandbox not loaded: " + e;
+  }
+
+  res.set("Cache-Control", "no-cache, no-store, max-age=0");
+  res.send(sandboxHtml);
+});
+
 const PORT = parseInt(
   process.env.SERVER_PORT || DEFAULT_MCP_PROXY_LISTEN_PORT,
   10,
diff --git a/client/public/sandbox_proxy.html b/server/static/sandbox_proxy.html
similarity index 100%
rename from client/public/sandbox_proxy.html
rename to server/static/sandbox_proxy.html

From 00ee07b49a65cd6061076cac8b55c329b6a87751 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 30 Jan 2026 16:18:05 -0500
Subject: [PATCH 24/33] In client.js   - return to original state

---
 client/bin/client.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/client/bin/client.js b/client/bin/client.js
index 8bbc86e94..2a7419e66 100755
--- a/client/bin/client.js
+++ b/client/bin/client.js
@@ -12,11 +12,7 @@ const distPath = join(__dirname, "../dist");
 const server = http.createServer((request, response) => {
   const handlerOptions = {
     public: distPath,
-    cleanUrls: false,
-    rewrites: [
-      { source: "/index.html", destination: "/index.html" },
-      { source: "/**", destination: "/index.html" },
-    ],
+    rewrites: [{ source: "/**", destination: "/index.html" }],
     headers: [
       {
         // Ensure index.html is never cached

From d107fb4ac17142bf9e98a4f51d6bc9732c9918c7 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 30 Jan 2026 16:36:25 -0500
Subject: [PATCH 25/33] In vite.config.ts   - return to original state

---
 client/vite.config.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/vite.config.ts b/client/vite.config.ts
index 1271aefb9..fa817c7b0 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -4,7 +4,6 @@ import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  publicDir: "public",
   plugins: [react()],
   server: {
     host: true,

From 35b7fff6268578b13777a29918314d7974d2d942 Mon Sep 17 00:00:00 2001
From: Cliff Hall <cliff@futurescale.com>
Date: Fri, 30 Jan 2026 16:58:41 -0500
Subject: [PATCH 26/33] Potential fix for code scanning alert no. 41: Missing
 rate limiting

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 server/package.json | 3 ++-
 server/src/index.ts | 8 +++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/server/package.json b/server/package.json
index d5ea33620..231affbe1 100644
--- a/server/package.json
+++ b/server/package.json
@@ -35,6 +35,7 @@
     "shx": "^0.3.4",
     "spawn-rx": "^5.1.2",
     "ws": "^8.18.0",
-    "zod": "^3.25.76"
+    "zod": "^3.25.76",
+    "express-rate-limit": "^8.2.1"
   }
 }
diff --git a/server/src/index.ts b/server/src/index.ts
index 5e10cc371..fe8b9db48 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -25,6 +25,7 @@ import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/
 import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
 import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
 import express from "express";
+import rateLimit from "express-rate-limit";
 import { findActualExecutable } from "spawn-rx";
 import mcpProxy from "./mcpProxy.js";
 import { randomUUID, randomBytes, timingSafeEqual } from "node:crypto";
@@ -34,6 +35,11 @@ import { readFileSync } from "fs";
 
 const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";
 
+const sandboxRateLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100, // limit each IP to 100 /sandbox requests per windowMs
+});
+
 const defaultEnvironment = {
   ...getDefaultEnvironment(),
   ...(process.env.MCP_ENV_VARS ? JSON.parse(process.env.MCP_ENV_VARS) : {}),
@@ -790,7 +796,7 @@ app.get("/config", originValidationMiddleware, authMiddleware, (req, res) => {
   }
 });
 
-app.get("/sandbox", (req, res) => {
+app.get("/sandbox", sandboxRateLimiter, (req, res) => {
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = dirname(__filename);
   const filePath = join(__dirname, "..", "static", "sandbox_proxy.html");

From 9fd260b31f786b438ec39f39c06f1632c30f0786 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 30 Jan 2026 17:28:33 -0500
Subject: [PATCH 27/33] In AppRenderer.tsx   - add open link handler that
 handles link requests from the UI. Makes sure that the URL starts with http
 or https

---
 client/src/components/AppRenderer.tsx | 10 ++++++++++
 package-lock.json                     | 28 +++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/client/src/components/AppRenderer.tsx b/client/src/components/AppRenderer.tsx
index a23b9d679..fb39cbad4 100644
--- a/client/src/components/AppRenderer.tsx
+++ b/client/src/components/AppRenderer.tsx
@@ -36,6 +36,15 @@ const AppRenderer = ({
     [],
   );
 
+  const handleOpenLink = async ({ url }: { url: string }) => {
+    let isError = true;
+    if (url.startsWith("https://") || url.startsWith("http://")) {
+      window.open(url, "_blank");
+      isError = false;
+    }
+    return { isError };
+  };
+
   if (!resourceUri) {
     return (
       <Alert variant="destructive">
@@ -71,6 +80,7 @@ const AppRenderer = ({
       >
         <McpUiAppRenderer
           client={mcpClient}
+          onOpenLink={handleOpenLink}
           toolName={tool.name}
           hostContext={hostContext}
           toolInput={toolInput}
diff --git a/package-lock.json b/package-lock.json
index 251bbef09..784bed129 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7829,6 +7829,15 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/ip-address": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz",
+      "integrity": "sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -14015,6 +14024,7 @@
         "@modelcontextprotocol/sdk": "^1.25.2",
         "cors": "^2.8.5",
         "express": "^5.1.0",
+        "express-rate-limit": "^8.2.1",
         "shell-quote": "^1.8.3",
         "shx": "^0.3.4",
         "spawn-rx": "^5.1.2",
@@ -14032,6 +14042,24 @@
         "tsx": "^4.19.0",
         "typescript": "^5.6.2"
       }
+    },
+    "server/node_modules/express-rate-limit": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.2.1.tgz",
+      "integrity": "sha512-PCZEIEIxqwhzw4KF0n7QF4QqruVTcF73O5kFKUnGOyjbCCgizBBiFaYpd/fnBLUMPw/BWw9OsiN7GgrNYr7j6g==",
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "10.0.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": ">= 4.11"
+      }
     }
   }
 }

From cde819078ef6dbef9f5b351defb05e84ea2a335b Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 30 Jan 2026 18:51:50 -0500
Subject: [PATCH 28/33] In sandbox_proxy.html   - refactor to match
 [basic-host](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host)
 example   - creates an nested iframe for security.   - in this
 implementation, for simplicity the sandbox.ts is inlined in
 sandbox_proxy.html as javascript

---
 server/static/sandbox_proxy.html | 203 ++++++++++++++++++++++++++-----
 1 file changed, 170 insertions(+), 33 deletions(-)

diff --git a/server/static/sandbox_proxy.html b/server/static/sandbox_proxy.html
index 2e2faf802..407a74ad6 100644
--- a/server/static/sandbox_proxy.html
+++ b/server/static/sandbox_proxy.html
@@ -2,51 +2,188 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>MCP App Sandbox Proxy</title>
+    <meta name="color-scheme" content="light dark" />
+    <!-- CSP is set via HTTP headers by serve.ts (based on ?csp= query param).
+       The inner iframe inherits this CSP since we use document.write(). -->
+    <title>MCP-UI Proxy</title>
     <style>
-      body,
-      html {
+      html,
+      body {
         margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
+        height: 100vh;
+        width: 100vw;
+        /* Transparent background allows parent page to show through */
+        background-color: transparent;
+      }
+      body {
+        display: flex;
+        flex-direction: column;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      iframe {
+        background-color: transparent;
+        border: 0px none transparent;
+        padding: 0px;
         overflow: hidden;
+        flex-grow: 1;
+        /* Inherit color scheme from parent for consistent transparency */
+        color-scheme: inherit;
       }
     </style>
   </head>
   <body>
-    <div id="root"></div>
     <script>
-      (function () {
-        const SANDBOX_PROXY_READY_METHOD =
-          "ui/notifications/sandbox-proxy-ready";
-        const SANDBOX_RESOURCE_READY_METHOD =
-          "ui/notifications/sandbox-resource-ready";
-
-        // Notify host that we are ready to receive the app resource
-        window.parent.postMessage(
-          {
-            jsonrpc: "2.0",
-            method: SANDBOX_PROXY_READY_METHOD,
-            params: {},
-          },
-          "*",
+      function buildAllowAttribute(permissions){
+        if (!permissions) return "";
+
+        const allowList = [];
+        if (permissions['camera']) allowList.push("camera");
+        if (permissions['microphone']) allowList.push("microphone");
+        if (permissions['geolocation']) allowList.push("geolocation");
+        if (permissions['clipboardWrite']) allowList.push("clipboard-write");
+
+        return allowList.join("; ");
+      }
+
+      const ALLOWED_REFERRER_PATTERN = /^http:\/\/(localhost|127\.0\.0\.1)(:|\/|$)/;
+
+      if (window.self === window.top) {
+        throw new Error("This file is only to be used in an iframe sandbox.");
+      }
+
+      if (!document.referrer) {
+        throw new Error("No referrer, cannot validate embedding site.");
+      }
+
+      if (!document.referrer.match(ALLOWED_REFERRER_PATTERN)) {
+        throw new Error(
+          `Embedding domain not allowed in referrer ${document.referrer}. (Consider updating the validation logic to allow your domain.)`,
         );
+      }
+
+      // Extract the expected host origin from the referrer for origin validation.
+      // This is the origin we expect all parent messages to come from.
+      const EXPECTED_HOST_ORIGIN = new URL(document.referrer).origin;
 
-        // Listen for the app resource (HTML) from the host
-        window.addEventListener("message", (event) => {
-          const message = event.data;
-          if (message && message.method === SANDBOX_RESOURCE_READY_METHOD) {
-            const { html } = message.params;
-            if (html) {
-              // Write the HTML to the document
-              document.open();
-              document.write(html);
-              document.close();
+      const OWN_ORIGIN = new URL(window.location.href).origin;
+
+      // Security self-test: verify iframe isolation is working correctly.
+      // This MUST throw a SecurityError -- if `window.top` is accessible, the sandbox
+      // configuration is dangerously broken and untrusted content could escape.
+      try {
+        window.top?.alert("If you see this, the sandbox is not setup securely.");
+        throw "FAIL";
+      } catch (e) {
+        if (e === "FAIL") {
+          throw new Error("The sandbox is not setup securely.");
+        }
+
+        // Expected: SecurityError confirms proper sandboxing.
+      }
+
+      // Double-iframe sandbox architecture: THIS file is the outer sandbox proxy
+      // iframe on a separate origin. It creates an inner iframe for untrusted HTML
+      // content. Per the specification, the Host and the Sandbox MUST have different
+      // origins.
+      const inner = document.createElement("iframe");
+      inner.style = "width:100%; height:100%; border:none;";
+      inner.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
+      // Note: allow attribute is set later when receiving sandbox-resource-ready notification
+      // based on the permissions requested by the app
+      document.body.appendChild(inner);
+
+      const RESOURCE_READY_NOTIFICATION = "ui/notifications/sandbox-resource-ready";
+      const PROXY_READY_NOTIFICATION = "ui/notifications/sandbox-proxy-ready";
+
+      // Message relay: This Sandbox (outer iframe) acts as a bidirectional bridge,
+      // forwarding messages between:
+      //
+      //   Host (parent window) ↔ Sandbox (outer frame) ↔ View (inner iframe)
+      //
+      // Reason: the parent window and inner iframe have different origins and can't
+      // communicate directly, so the outer iframe forwards messages in both
+      // directions to connect them.
+      //
+      // Special case: The "ui/notifications/sandbox-proxy-ready" message is
+      // intercepted here (not relayed) because the Sandbox uses it to configure and
+      // load the inner iframe with the view HTML content.
+      //
+      // Security: CSP is enforced via HTTP headers on sandbox.html (set by serve.ts
+      // based on ?csp= query param). This is tamper-proof unlike meta tags.
+
+      window.addEventListener("message", async (event) => {
+        if (event.source === window.parent) {
+          // Validate that messages from parent come from the expected host origin.
+          // This prevents malicious pages from sending messages to this sandbox.
+          if (event.origin !== EXPECTED_HOST_ORIGIN) {
+            console.error(
+              "[Sandbox] Rejecting message from unexpected origin:",
+              event.origin,
+              "expected:",
+              EXPECTED_HOST_ORIGIN,
+            );
+            return;
+          }
+
+          if (event.data && event.data.method === RESOURCE_READY_NOTIFICATION) {
+            const { html, sandbox, permissions } = event.data.params;
+            if (typeof sandbox === "string") {
+              inner.setAttribute("sandbox", sandbox);
+            }
+            // Set Permission Policy allow attribute if permissions are requested
+            const allowAttribute = buildAllowAttribute(permissions);
+            if (allowAttribute) {
+              console.log("[Sandbox] Setting allow attribute:", allowAttribute);
+              inner.setAttribute("allow", allowAttribute);
+            }
+            if (typeof html === "string") {
+              // Use document.write instead of srcdoc (which the CesiumJS Map won't work with)
+              const doc = inner.contentDocument || inner.contentWindow?.document;
+              if (doc) {
+                doc.open();
+                doc.write(html);
+                doc.close();
+              } else {
+                // Fallback to srcdoc if document is not accessible
+                console.warn(
+                  "[Sandbox] document.write not available, falling back to srcdoc",
+                );
+                inner.srcdoc = html;
+              }
             }
+          } else {
+            if (inner && inner.contentWindow) {
+              inner.contentWindow.postMessage(event.data, "*");
+            }
+          }
+        } else if (event.source === inner.contentWindow) {
+          if (event.origin !== OWN_ORIGIN) {
+            console.error(
+              "[Sandbox] Rejecting message from inner iframe with unexpected origin:",
+              event.origin,
+              "expected:",
+              OWN_ORIGIN,
+            );
+            return;
           }
-        });
-      })();
+          // Relay messages from inner frame to parent window.
+          // Use specific origin instead of "*" to prevent message interception.
+          window.parent.postMessage(event.data, EXPECTED_HOST_ORIGIN);
+        }
+      });
+
+      // Notify the Host that the Sandbox is ready to receive view HTML.
+      // Use specific origin instead of "*" to ensure only the expected host receives this.
+      window.parent.postMessage(
+        {
+          jsonrpc: "2.0",
+          method: PROXY_READY_NOTIFICATION,
+          params: {},
+        },
+        EXPECTED_HOST_ORIGIN,
+      );
     </script>
   </body>
 </html>

From 47ed9e0c5f8add44aea03d818a32ee9109e622dc Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 30 Jan 2026 18:54:28 -0500
Subject: [PATCH 29/33] prettier

---
 server/static/sandbox_proxy.html | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/server/static/sandbox_proxy.html b/server/static/sandbox_proxy.html
index 407a74ad6..da77f0488 100644
--- a/server/static/sandbox_proxy.html
+++ b/server/static/sandbox_proxy.html
@@ -35,19 +35,20 @@
   </head>
   <body>
     <script>
-      function buildAllowAttribute(permissions){
+      function buildAllowAttribute(permissions) {
         if (!permissions) return "";
 
         const allowList = [];
-        if (permissions['camera']) allowList.push("camera");
-        if (permissions['microphone']) allowList.push("microphone");
-        if (permissions['geolocation']) allowList.push("geolocation");
-        if (permissions['clipboardWrite']) allowList.push("clipboard-write");
+        if (permissions["camera"]) allowList.push("camera");
+        if (permissions["microphone"]) allowList.push("microphone");
+        if (permissions["geolocation"]) allowList.push("geolocation");
+        if (permissions["clipboardWrite"]) allowList.push("clipboard-write");
 
         return allowList.join("; ");
       }
 
-      const ALLOWED_REFERRER_PATTERN = /^http:\/\/(localhost|127\.0\.0\.1)(:|\/|$)/;
+      const ALLOWED_REFERRER_PATTERN =
+        /^http:\/\/(localhost|127\.0\.0\.1)(:|\/|$)/;
 
       if (window.self === window.top) {
         throw new Error("This file is only to be used in an iframe sandbox.");
@@ -73,7 +74,9 @@
       // This MUST throw a SecurityError -- if `window.top` is accessible, the sandbox
       // configuration is dangerously broken and untrusted content could escape.
       try {
-        window.top?.alert("If you see this, the sandbox is not setup securely.");
+        window.top?.alert(
+          "If you see this, the sandbox is not setup securely.",
+        );
         throw "FAIL";
       } catch (e) {
         if (e === "FAIL") {
@@ -89,12 +92,16 @@
       // origins.
       const inner = document.createElement("iframe");
       inner.style = "width:100%; height:100%; border:none;";
-      inner.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
+      inner.setAttribute(
+        "sandbox",
+        "allow-scripts allow-same-origin allow-forms",
+      );
       // Note: allow attribute is set later when receiving sandbox-resource-ready notification
       // based on the permissions requested by the app
       document.body.appendChild(inner);
 
-      const RESOURCE_READY_NOTIFICATION = "ui/notifications/sandbox-resource-ready";
+      const RESOURCE_READY_NOTIFICATION =
+        "ui/notifications/sandbox-resource-ready";
       const PROXY_READY_NOTIFICATION = "ui/notifications/sandbox-proxy-ready";
 
       // Message relay: This Sandbox (outer iframe) acts as a bidirectional bridge,
@@ -140,7 +147,8 @@
             }
             if (typeof html === "string") {
               // Use document.write instead of srcdoc (which the CesiumJS Map won't work with)
-              const doc = inner.contentDocument || inner.contentWindow?.document;
+              const doc =
+                inner.contentDocument || inner.contentWindow?.document;
               if (doc) {
                 doc.open();
                 doc.write(html);

From 1204b86e66ee6e3d3fa7cc8ac5dd08fc4e29cc8b Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 30 Jan 2026 19:41:34 -0500
Subject: [PATCH 30/33] In AppRenderer.tsx   - add support for handling
 McpUiMessageRequest messages from the UI   - show message in a toast

---
 client/src/components/AppRenderer.tsx         | 33 +++++++++++++-
 .../components/__tests__/AppRenderer.test.tsx | 45 ++++++++++++++++++-
 2 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/client/src/components/AppRenderer.tsx b/client/src/components/AppRenderer.tsx
index fb39cbad4..ead3bb85f 100644
--- a/client/src/components/AppRenderer.tsx
+++ b/client/src/components/AppRenderer.tsx
@@ -1,13 +1,19 @@
 import { useMemo, useState } from "react";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
-import { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { Tool, ContentBlock } from "@modelcontextprotocol/sdk/types.js";
 import {
   AppRenderer as McpUiAppRenderer,
   type McpUiHostContext,
+  type RequestHandlerExtra,
 } from "@mcp-ui/client";
-import { getToolUiResourceUri } from "@modelcontextprotocol/ext-apps/app-bridge";
+import {
+  getToolUiResourceUri,
+  type McpUiMessageRequest,
+  type McpUiMessageResult,
+} from "@modelcontextprotocol/ext-apps/app-bridge";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { AlertCircle } from "lucide-react";
+import { useToast } from "@/lib/hooks/useToast";
 
 interface AppRendererProps {
   sandboxPath: string;
@@ -23,6 +29,7 @@ const AppRenderer = ({
   toolInput,
 }: AppRendererProps) => {
   const [error, setError] = useState<string | null>(null);
+  const { toast } = useToast();
 
   // Extract UI metadata from tool
   const resourceUri = getToolUiResourceUri(tool);
@@ -45,6 +52,27 @@ const AppRenderer = ({
     return { isError };
   };
 
+  const handleMessage = async (
+    params: McpUiMessageRequest["params"],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _extra: RequestHandlerExtra,
+  ): Promise<McpUiMessageResult> => {
+    const message = params.content
+      .filter((block): block is ContentBlock & { type: "text" } =>
+        Boolean(block.type === "text"),
+      )
+      .map((block) => block.text)
+      .join("\n");
+
+    if (message) {
+      toast({
+        description: message,
+      });
+    }
+
+    return {};
+  };
+
   if (!resourceUri) {
     return (
       <Alert variant="destructive">
@@ -81,6 +109,7 @@ const AppRenderer = ({
         <McpUiAppRenderer
           client={mcpClient}
           onOpenLink={handleOpenLink}
+          onMessage={handleMessage}
           toolName={tool.name}
           hostContext={hostContext}
           toolInput={toolInput}
diff --git a/client/src/components/__tests__/AppRenderer.test.tsx b/client/src/components/__tests__/AppRenderer.test.tsx
index 5482bc5bc..dec7edf62 100644
--- a/client/src/components/__tests__/AppRenderer.test.tsx
+++ b/client/src/components/__tests__/AppRenderer.test.tsx
@@ -1,9 +1,11 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { describe, it, jest, beforeEach } from "@jest/globals";
 import AppRenderer from "../AppRenderer";
 import { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { RequestHandlerExtra } from "@mcp-ui/client";
+import { McpUiMessageResult } from "@modelcontextprotocol/ext-apps";
 
 // Mock the ext-apps module
 jest.mock("@modelcontextprotocol/ext-apps/app-bridge", () => ({
@@ -14,11 +16,39 @@ jest.mock("@modelcontextprotocol/ext-apps/app-bridge", () => ({
   },
 }));
 
+// Mock toast hook
+const mockToast = jest.fn();
+jest.mock("@/lib/hooks/useToast", () => ({
+  useToast: () => ({
+    toast: mockToast,
+  }),
+}));
+
 // Mock @mcp-ui/client
 jest.mock("@mcp-ui/client", () => ({
-  AppRenderer: ({ toolName }: { toolName: string }) => (
+  AppRenderer: ({
+    toolName,
+    onMessage,
+  }: {
+    toolName: string;
+    onMessage?: (
+      params: { role: "user"; content: { type: "text"; text: string }[] },
+      extra: RequestHandlerExtra,
+    ) => Promise<McpUiMessageResult>;
+  }) => (
     <div data-testid="mcp-ui-app-renderer">
       <div data-testid="tool-name">{toolName}</div>
+      <button
+        data-testid="trigger-message"
+        onClick={() =>
+          onMessage?.(
+            { role: "user", content: [{ type: "text", text: "Test message" }] },
+            {} as RequestHandlerExtra,
+          )
+        }
+      >
+        Trigger Message
+      </button>
     </div>
   ),
 }));
@@ -45,6 +75,7 @@ describe("AppRenderer", () => {
   } as unknown as Client;
 
   const defaultProps = {
+    sandboxPath: "/sandbox",
     tool: mockTool,
     mcpClient: mockMcpClient,
   };
@@ -88,4 +119,14 @@ describe("AppRenderer", () => {
     const container = screen.getByTestId("mcp-ui-app-renderer").parentElement;
     expect(container).toHaveStyle({ minHeight: "400px" });
   });
+
+  it("should show toast when onMessage is triggered", () => {
+    render(<AppRenderer {...defaultProps} />);
+
+    fireEvent.click(screen.getByTestId("trigger-message"));
+
+    expect(mockToast).toHaveBeenCalledWith({
+      description: "Test message",
+    });
+  });
 });

From f10a27a3c161227940f8eebb30953095c454db41 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Sat, 31 Jan 2026 11:12:25 -0500
Subject: [PATCH 31/33] Add logging message handler to AppRenderer

In App.tsx
  - pass an onNotification function to the AppsTab that adds a notification to the notification array

In AppsTab.tsx
  - Accept the onNotification function and pass it to the AppRenderer

In AppRenderer.tsx
  - Accept the onNotification function
  - added an handleLoggingMessage function that takes a LoggingMessageNotificationParams object, wraps it with a method and params prop to make it a ServerNotification shape, and pass it to the onNotification function
   - pass handleLoggingMessage to McpUiAppRenderer

* In ResourcesTab.test.tsx
  - fix @ import that wasn't resolving
---
 client/src/App.tsx                            |  3 +++
 client/src/components/AppRenderer.tsx         | 19 ++++++++++++++++++-
 client/src/components/AppsTab.tsx             |  5 ++++-
 .../__tests__/ResourcesTab.test.tsx           |  2 +-
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 75329bc5b..5a69495b6 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1554,6 +1554,9 @@ const App = () => {
                       }}
                       error={errors.tools}
                       mcpClient={mcpClient}
+                      onNotification={(notification) => {
+                        setNotifications((prev) => [...prev, notification]);
+                      }}
                     />
                     <ConsoleTab />
                     <PingTab
diff --git a/client/src/components/AppRenderer.tsx b/client/src/components/AppRenderer.tsx
index ead3bb85f..a6f1f2c4b 100644
--- a/client/src/components/AppRenderer.tsx
+++ b/client/src/components/AppRenderer.tsx
@@ -1,6 +1,11 @@
 import { useMemo, useState } from "react";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
-import { Tool, ContentBlock } from "@modelcontextprotocol/sdk/types.js";
+import {
+  Tool,
+  ContentBlock,
+  ServerNotification,
+  LoggingMessageNotificationParams,
+} from "@modelcontextprotocol/sdk/types.js";
 import {
   AppRenderer as McpUiAppRenderer,
   type McpUiHostContext,
@@ -20,6 +25,7 @@ interface AppRendererProps {
   tool: Tool;
   mcpClient: Client | null;
   toolInput?: Record<string, unknown>;
+  onNotification?: (notification: ServerNotification) => void;
 }
 
 const AppRenderer = ({
@@ -27,6 +33,7 @@ const AppRenderer = ({
   tool,
   mcpClient,
   toolInput,
+  onNotification,
 }: AppRendererProps) => {
   const [error, setError] = useState<string | null>(null);
   const { toast } = useToast();
@@ -73,6 +80,15 @@ const AppRenderer = ({
     return {};
   };
 
+  const handleLoggingMessage = (params: LoggingMessageNotificationParams) => {
+    if (onNotification) {
+      onNotification({
+        method: "notifications/message",
+        params,
+      } as ServerNotification);
+    }
+  };
+
   if (!resourceUri) {
     return (
       <Alert variant="destructive">
@@ -110,6 +126,7 @@ const AppRenderer = ({
           client={mcpClient}
           onOpenLink={handleOpenLink}
           onMessage={handleMessage}
+          onLoggingMessage={handleLoggingMessage}
           toolName={tool.name}
           hostContext={hostContext}
           toolInput={toolInput}
diff --git a/client/src/components/AppsTab.tsx b/client/src/components/AppsTab.tsx
index 6bd9a5092..1943c4396 100644
--- a/client/src/components/AppsTab.tsx
+++ b/client/src/components/AppsTab.tsx
@@ -10,7 +10,7 @@ import {
   Maximize2,
   Minimize2,
 } from "lucide-react";
-import { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { Tool, ServerNotification } from "@modelcontextprotocol/sdk/types.js";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import { getToolUiResourceUri } from "@modelcontextprotocol/ext-apps/app-bridge";
 import AppRenderer from "./AppRenderer";
@@ -42,6 +42,7 @@ interface AppsTabProps {
   listTools: () => void;
   error: string | null;
   mcpClient: Client | null;
+  onNotification?: (notification: ServerNotification) => void;
 }
 
 // Type guard to check if a tool has UI metadata
@@ -55,6 +56,7 @@ const AppsTab = ({
   listTools,
   error,
   mcpClient,
+  onNotification,
 }: AppsTabProps) => {
   const [appTools, setAppTools] = useState<Tool[]>([]);
   const [selectedTool, setSelectedTool] = useState<Tool | null>(null);
@@ -496,6 +498,7 @@ const AppsTab = ({
                             tool={selectedTool}
                             mcpClient={mcpClient}
                             toolInput={params}
+                            onNotification={onNotification}
                           />
                         </div>
                       </div>
diff --git a/client/src/components/__tests__/ResourcesTab.test.tsx b/client/src/components/__tests__/ResourcesTab.test.tsx
index d564b02cb..355fa4d63 100644
--- a/client/src/components/__tests__/ResourcesTab.test.tsx
+++ b/client/src/components/__tests__/ResourcesTab.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import { Tabs } from "@/components/ui/tabs";
+import { Tabs } from "../ui/tabs";
 import ResourcesTab from "../ResourcesTab";
 import { ResourceTemplate, Resource } from "@modelcontextprotocol/sdk/types.js";
 

From 3c076bd9eb56efb21072bb8fab74447f2cc6878a Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Mon, 2 Feb 2026 11:16:34 -0500
Subject: [PATCH 32/33] In AppRenderer.tsx   - remove fetch and evaluation of
 resourceUri, as the mcpClient handles that (review request)

---
 client/src/components/AppRenderer.tsx | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/client/src/components/AppRenderer.tsx b/client/src/components/AppRenderer.tsx
index a6f1f2c4b..e0c259809 100644
--- a/client/src/components/AppRenderer.tsx
+++ b/client/src/components/AppRenderer.tsx
@@ -12,7 +12,6 @@ import {
   type RequestHandlerExtra,
 } from "@mcp-ui/client";
 import {
-  getToolUiResourceUri,
   type McpUiMessageRequest,
   type McpUiMessageResult,
 } from "@modelcontextprotocol/ext-apps/app-bridge";
@@ -38,9 +37,6 @@ const AppRenderer = ({
   const [error, setError] = useState<string | null>(null);
   const { toast } = useToast();
 
-  // Extract UI metadata from tool
-  const resourceUri = getToolUiResourceUri(tool);
-
   const hostContext: McpUiHostContext = useMemo(
     () => ({
       theme: document.documentElement.classList.contains("dark")
@@ -89,17 +85,6 @@ const AppRenderer = ({
     }
   };
 
-  if (!resourceUri) {
-    return (
-      <Alert variant="destructive">
-        <AlertCircle className="h-4 w-4" />
-        <AlertDescription>
-          No UI resource URI found in tool metadata
-        </AlertDescription>
-      </Alert>
-    );
-  }
-
   if (!mcpClient) {
     return (
       <Alert>

From 26775365e98165b8d93cf5b9ba06fc896bc4e3b5 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Mon, 2 Feb 2026 14:32:55 -0500
Subject: [PATCH 33/33] In AppRenderer.test.tsx   - remove test for no
 resourceUri found

---
 .../components/__tests__/AppRenderer.test.tsx   | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/client/src/components/__tests__/AppRenderer.test.tsx b/client/src/components/__tests__/AppRenderer.test.tsx
index dec7edf62..beb57e1ab 100644
--- a/client/src/components/__tests__/AppRenderer.test.tsx
+++ b/client/src/components/__tests__/AppRenderer.test.tsx
@@ -89,23 +89,6 @@ describe("AppRenderer", () => {
     expect(screen.getByText(/Waiting for MCP client/i)).toBeInTheDocument();
   });
 
-  it("should display error when no resource URI is found", () => {
-    const toolWithoutUri: Tool = {
-      name: "noUriTool",
-      description: "Tool without UI",
-      inputSchema: {
-        type: "object" as const,
-        properties: {},
-      },
-    };
-
-    render(<AppRenderer {...defaultProps} tool={toolWithoutUri} />);
-
-    expect(
-      screen.getByText(/No UI resource URI found in tool metadata/i),
-    ).toBeInTheDocument();
-  });
-
   it("should render McpUiAppRenderer when client is ready", () => {
     render(<AppRenderer {...defaultProps} />);