fix renderer

Author: chelojimenez

mcpjam-inspector/client/src/components/chat-v2/thread/mcp-apps/__tests__/mcp-apps-renderer.test.tsx

@@ -9,12 +9,14 @@ import React from "react";
 // vi.hoisted runs before imports, letting us capture bridge instances.
 const {
   mockBridge,
+  mockAppBridgeCtor,
   mockPostMessageTransport,
   triggerReady,
   stableStoreFns,
   mockSandboxPostMessage,
   sandboxedIframePropsRef,
   sandboxProxyBehaviorRef,
+  appBridgeArgsRef,
 } = vi.hoisted(() => {
   const bridge = {
     sendToolInput: vi.fn(),
@@ -40,6 +42,18 @@ const {
     onrequestdisplaymode: null as any,
     onupdatemodelcontext: null as any,
   };
+  const appBridgeArgsRef = { current: null as any };
+  const mockAppBridgeCtor = vi
+    .fn()
+    .mockImplementation((client, hostInfo, hostCapabilities, options) => {
+      appBridgeArgsRef.current = {
+        client,
+        hostInfo,
+        hostCapabilities,
+        options,
+      };
+      return bridge;
+    });
 
   // Stable function references for store selectors — prevents useEffect deps
   // from changing on every render, which would teardown/reinitialize the bridge.
@@ -56,10 +70,12 @@ const {
 
   return {
     mockBridge: bridge,
+    mockAppBridgeCtor,
     mockPostMessageTransport: vi.fn(),
     mockSandboxPostMessage: vi.fn(),
     sandboxedIframePropsRef: { current: null as any },
     sandboxProxyBehaviorRef: { current: { autoReady: true } },
+    appBridgeArgsRef,
     stableStoreFns: stableFns,
     /** Simulate the widget completing initialization. */
     triggerReady: () => {
@@ -97,7 +113,7 @@ const mockPlaygroundStoreState = {
 
 // ── Module mocks ───────────────────────────────────────────────────────────
 vi.mock("@modelcontextprotocol/ext-apps/app-bridge", () => ({
-  AppBridge: vi.fn().mockImplementation(() => mockBridge),
+  AppBridge: mockAppBridgeCtor,
   PostMessageTransport: mockPostMessageTransport,
 }));
 
@@ -232,10 +248,12 @@ describe("MCPAppsRenderer tool input streaming", () => {
     mockBridge.setHostContext.mockClear();
     mockBridge.close.mockClear().mockResolvedValue(undefined);
     mockBridge.teardownResource.mockClear().mockResolvedValue({});
+    mockAppBridgeCtor.mockClear();
     mockBridge.oninitialized = null;
     mockSandboxPostMessage.mockClear();
     sandboxedIframePropsRef.current = null;
     sandboxProxyBehaviorRef.current.autoReady = true;
+    appBridgeArgsRef.current = null;
 
     vi.mocked(global.fetch).mockResolvedValue({
       ok: true,
@@ -357,6 +375,51 @@ describe("MCPAppsRenderer tool input streaming", () => {
     });
   });
 
+  it("filters non-standard host style variables out of the initialize payload", async () => {
+    mockClientConfigStoreState.draftConfig = {
+      version: 1,
+      clientCapabilities: {},
+      hostContext: {
+        styles: {
+          variables: {
+            "--font-sans": "Custom Sans",
+            "--mcpjam-theme-preset": "soft-pop",
+            "--totally-unknown": "ignore-me",
+          },
+        },
+      },
+    };
+
+    render(<MCPAppsRenderer {...baseProps} />);
+
+    await vi.waitFor(() => {
+      expect(mockBridge.connect).toHaveBeenCalled();
+    });
+
+    expect(
+      appBridgeArgsRef.current?.options?.hostContext?.styles?.variables,
+    ).toEqual({
+      "--font-sans": "Custom Sans",
+    });
+
+    await act(async () => {
+      triggerReady();
+      await Promise.resolve();
+    });
+
+    await vi.waitFor(() => {
+      expect(mockBridge.setHostContext).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          styles: expect.objectContaining({
+            variables: {
+              "--font-sans": "Custom Sans",
+            },
+          }),
+        }),
+      );
+    });
+  });
+
   it("anchors desktop playground PiP to the playground shell instead of the viewport", async () => {
     Object.assign(mockPlaygroundStoreState, {
       isPlaygroundActive: true,

mcpjam-inspector/client/src/components/chat-v2/thread/mcp-apps/mcp-apps-renderer.tsx

@@ -86,8 +86,37 @@ const DEFAULT_INPUT_SCHEMA = { type: "object" } as const;
 
 const SUPPRESSED_UI_LOG_METHODS = new Set(["ui/notifications/size-changed"]);
 const PIP_MAX_HEIGHT = "min(40vh, 600px)";
+const VALID_HOST_STYLE_VARIABLE_KEYS = new Set<string>([
+  ...Object.keys(getClaudeDesktopStyleVariables("light")),
+  ...Object.keys(getChatGPTStyleVariables("light")),
+]);
 
 type DisplayMode = "inline" | "pip" | "fullscreen";
+type HostStyleVariables = NonNullable<
+  NonNullable<McpUiHostContext["styles"]>["variables"]
+>;
+
+function sanitizeHostStyleVariables(
+  variables: unknown,
+): HostStyleVariables | undefined {
+  if (!variables || typeof variables !== "object" || Array.isArray(variables)) {
+    return undefined;
+  }
+
+  const sanitized: Record<string, string | undefined> = {};
+  for (const [key, value] of Object.entries(variables)) {
+    if (!VALID_HOST_STYLE_VARIABLE_KEYS.has(key)) {
+      continue;
+    }
+    if (typeof value === "string" || value === undefined) {
+      sanitized[key] = value;
+    }
+  }
+
+  return Object.keys(sanitized).length > 0
+    ? (sanitized as HostStyleVariables)
+    : undefined;
+}
 
 // CSP and permissions metadata types are now imported from SDK
 
@@ -178,7 +207,6 @@ export function MCPAppsRenderer({
 }: MCPAppsRendererProps) {
   const sandboxRef = useRef<SandboxedIframeHandle>(null);
   const themeMode = usePreferencesStore((s) => s.themeMode);
-  const themePreset = usePreferencesStore((s) => s.themePreset);
   const sharedHostStyle = usePreferencesStore((s) => s.hostStyle);
   const chatboxHostStyle = useChatboxHostStyle();
   const draftHostContext = useClientConfigStore(
@@ -772,21 +800,20 @@ export function MCPAppsRenderer({
     !Array.isArray(baseHostContext.styles)
       ? (baseHostContext.styles as McpUiHostContext["styles"])
       : undefined;
+  // The SDK validates styles.variables against the SEP key enum, so strip
+  // host-specific custom properties before they enter ui/initialize.
+  const configuredStyleVariables = useMemo(
+    () => sanitizeHostStyleVariables(configuredStyles?.variables),
+    [configuredStyles?.variables],
+  );
   const mergedStyleVariables = useMemo(() => {
-    const configuredVariables =
-      configuredStyles?.variables &&
-      typeof configuredStyles.variables === "object" &&
-      !Array.isArray(configuredStyles.variables)
-        ? configuredStyles.variables
-        : undefined;
-
     return {
-      ...(configuredVariables && Object.keys(configuredVariables).length > 0
-        ? configuredVariables
+      ...(configuredStyleVariables &&
+      Object.keys(configuredStyleVariables).length > 0
+        ? configuredStyleVariables
         : styleVariables),
-      "--mcpjam-theme-preset": themePreset,
     };
-  }, [configuredStyles?.variables, styleVariables, themePreset]);
+  }, [configuredStyleVariables, styleVariables]);
   const mergedStyles = useMemo<McpUiHostContext["styles"]>(
     () => ({
       ...configuredStyles,