@copilotkit/react-core 1.57.3 → 1.58.0

package/src/v2/components/chat/__tests__/MCPAppsActivityRenderer.e2e.test.tsx

@@ -1,1068 +0,0 @@
-/**
- * End-to-end tests for MCP Apps Activity Renderer
- *
- * Tests the complete flow of rendering MCP Apps UI:
- * 1. Activity snapshot received with resourceUri
- * 2. Resource fetched via proxied MCP request
- * 3. Sandboxed iframe created and communicates via JSON-RPC
- * 4. Tool calls proxied back through the agent
- */
-import { fireEvent, screen, waitFor, act } from "@testing-library/react";
-import { z } from "zod";
-import { vi } from "vitest";
-import {
-  activitySnapshotEvent,
-  renderWithCopilotKit,
-  runFinishedEvent,
-  runStartedEvent,
-  testId,
-} from "../../../__tests__/utils/test-helpers";
-import {
-  MCPAppsActivityType,
-  MCPAppsActivityContentSchema,
-} from "../../../components/MCPAppsActivityRenderer";
-import { ReactActivityMessageRenderer } from "../../../types";
-import {
-  AbstractAgent,
-  RunAgentInput,
-  RunAgentResult,
-  BaseEvent,
-  EventType,
-} from "@ag-ui/client";
-import { Observable, Subject } from "rxjs";
-
-/**
- * Mock agent that intercepts runAgent calls for proxied MCP requests
- * while preserving normal streaming behavior for regular runs.
- */
-class MockMCPProxyAgent extends AbstractAgent {
-  private subject = new Subject<BaseEvent>();
-
-  // Track runAgent calls for verification
-  public runAgentCalls: Array<{ input: Partial<RunAgentInput> }> = [];
-
-  // Configurable responses for proxied MCP requests
-  private runAgentResponses: Map<string, unknown> = new Map();
-
-  /**
-   * Set the response for a specific MCP method
-   */
-  setRunAgentResponse(method: string, response: unknown) {
-    this.runAgentResponses.set(method, response);
-  }
-
-  /**
-   * Emit a single agent event
-   */
-  emit(event: BaseEvent) {
-    if (event.type === EventType.RUN_STARTED) {
-      this.isRunning = true;
-    } else if (
-      event.type === EventType.RUN_FINISHED ||
-      event.type === EventType.RUN_ERROR
-    ) {
-      this.isRunning = false;
-    }
-    act(() => {
-      this.subject.next(event);
-    });
-  }
-
-  /**
-   * Complete the agent stream
-   */
-  complete() {
-    this.isRunning = false;
-    act(() => {
-      this.subject.complete();
-    });
-  }
-
-  clone(): MockMCPProxyAgent {
-    const cloned = new MockMCPProxyAgent();
-    cloned.agentId = this.agentId;
-    type Internal = {
-      subject: Subject<BaseEvent>;
-      runAgentCalls: Array<{ input: Partial<RunAgentInput> }>;
-      runAgentResponses: Map<string, unknown>;
-    };
-    (cloned as unknown as Internal).subject = (
-      this as unknown as Internal
-    ).subject;
-    (cloned as unknown as Internal).runAgentCalls = (
-      this as unknown as Internal
-    ).runAgentCalls;
-    (cloned as unknown as Internal).runAgentResponses = (
-      this as unknown as Internal
-    ).runAgentResponses;
-    // Share isRunning with the original so that emit(runFinishedEvent()) on the
-    // registry is visible to waitForAgentIdle() which now receives the clone.
-    //
-    // Also proxy runAgent dynamically so tests that monkey-patch agent.runAgent
-    // after renderWithCopilotKit (which creates the clone) still take effect.
-    // The clone is created and cached before tests can override runAgent, so a
-    // static copy would always see the pre-patch prototype method.
-    const registry = this;
-    Object.defineProperty(cloned, "isRunning", {
-      get() {
-        return registry.isRunning;
-      },
-      set(v: boolean) {
-        registry.isRunning = v;
-      },
-      configurable: true,
-      enumerable: true,
-    });
-    // Override runAgent so that:
-    // - Proxied MCP requests delegate to registry.runAgent (picking up any
-    //   monkey-patches the test installed after renderWithCopilotKit).
-    // - User-message runs call the prototype method with `this = clone` so
-    //   that clone.messages is updated (CopilotKit renders clone.messages).
-    const proto = MockMCPProxyAgent.prototype;
-    cloned.runAgent = async function (
-      input?: Partial<RunAgentInput>,
-    ): Promise<RunAgentResult> {
-      const proxiedRequest = input?.forwardedProps?.__proxiedMCPRequest;
-      if (proxiedRequest) {
-        // Delegate to the registry so that monkey-patches applied by tests
-        // (e.g. "throws an error", "uses a controlled promise") take effect.
-        return registry.runAgent(input);
-      }
-      // For user-message runs: call the prototype method bound to the clone
-      // so AbstractAgent.runAgent processes events on clone and updates
-      // clone.messages (which is what CopilotKit reads to render messages).
-      return proto.runAgent.call(cloned, input);
-    };
-    return cloned;
-  }
-
-  async detachActiveRun(): Promise<void> {}
-
-  run(_input: RunAgentInput): Observable<BaseEvent> {
-    return this.subject.asObservable();
-  }
-
-  /**
-   * Override runAgent to intercept proxied MCP requests only.
-   * For normal message flows, delegate to the parent class.
-   */
-  async runAgent(input?: Partial<RunAgentInput>): Promise<RunAgentResult> {
-    const proxiedRequest = input?.forwardedProps?.__proxiedMCPRequest as
-      | {
-          serverHash?: string;
-          serverId?: string;
-          method: string;
-          params?: Record<string, unknown>;
-        }
-      | undefined;
-
-    // Only intercept proxied MCP requests
-    if (proxiedRequest) {
-      if (input) {
-        this.runAgentCalls.push({ input });
-      }
-
-      const method = proxiedRequest.method;
-      const response = this.runAgentResponses.get(method);
-
-      if (response !== undefined) {
-        return { result: response, newMessages: [] };
-      }
-
-      // Default responses
-      if (method === "resources/read") {
-        return {
-          result: {
-            contents: [
-              {
-                uri: proxiedRequest.params?.uri,
-                mimeType: "text/html",
-                text: "<html><body>Test content</body></html>",
-              },
-            ],
-          },
-          newMessages: [],
-        };
-      }
-
-      if (method === "tools/call") {
-        return {
-          result: {
-            content: [{ type: "text", text: "Tool call result" }],
-            isError: false,
-          },
-          newMessages: [],
-        };
-      }
-
-      return { result: {}, newMessages: [] };
-    }
-
-    // For normal runs (user messages), use the parent's runAgent which
-    // properly subscribes to run() and processes streaming events
-    return super.runAgent(input);
-  }
-}
-
-/**
- * Helper to create MCP Apps activity content matching the 0.0.2 schema
- */
-function mcpAppsActivityContent(overrides: {
-  resourceUri?: string;
-  serverHash?: string;
-  serverId?: string;
-  toolInput?: Record<string, unknown>;
-  result?: {
-    content?: unknown[];
-    structuredContent?: unknown;
-    isError?: boolean;
-  };
-}) {
-  return {
-    resourceUri: overrides.resourceUri ?? "ui://test-server/test-resource",
-    serverHash: overrides.serverHash ?? "abc123hash",
-    serverId: overrides.serverId,
-    toolInput: overrides.toolInput ?? {},
-    result: overrides.result ?? {
-      content: [{ type: "text", text: "Tool output" }],
-      isError: false,
-    },
-  };
-}
-
-describe("MCP Apps Activity Renderer E2E", () => {
-  beforeEach(() => {
-    // Reset any global state
-    vi.clearAllMocks();
-  });
-
-  describe("Resource Fetching", () => {
-    it("fetches resource content via proxied MCP request on mount", async () => {
-      const agent = new MockMCPProxyAgent();
-      const agentId = "mcp-test-agent";
-      agent.agentId = agentId;
-
-      // Set up response for resources/read
-      agent.setRunAgentResponse("resources/read", {
-        contents: [
-          {
-            uri: "ui://test-server/dashboard",
-            mimeType: "text/html",
-            text: "<html><body>Dashboard content</body></html>",
-          },
-        ],
-      });
-
-      renderWithCopilotKit({
-        agents: { [agentId]: agent },
-        agentId,
-      });
-
-      const input = await screen.findByRole("textbox");
-      fireEvent.change(input, { target: { value: "Show dashboard" } });
-      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
-
-      await waitFor(() => {
-        expect(screen.getByText("Show dashboard")).toBeDefined();
-      });
-
-      const activityMessageId = testId("mcp-activity");
-      agent.emit(runStartedEvent());
-      agent.emit(
-        activitySnapshotEvent({
-          messageId: activityMessageId,
-          activityType: MCPAppsActivityType,
-          content: mcpAppsActivityContent({
-            resourceUri: "ui://test-server/dashboard",
-            serverHash: "dashboard-hash-123",
-          }),
-        }),
-      );
-      agent.emit(runFinishedEvent());
-
-      // Wait for the activity renderer to mount and show loading
-      await waitFor(
-        () => {
-          expect(screen.getByText("Loading...")).toBeDefined();
-        },
-        { timeout: 2000 },
-      );
-
-      // Wait for resource fetch to be called
-      await waitFor(
-        () => {
-          expect(agent.runAgentCalls.length).toBeGreaterThan(0);
-        },
-        { timeout: 2000 },
-      );
-
-      // Verify the proxied MCP request was made correctly
-      const resourceCall = agent.runAgentCalls.find(
-        (call) =>
-          call.input.forwardedProps?.__proxiedMCPRequest?.method ===
-          "resources/read",
-      );
-      expect(resourceCall).toBeDefined();
-      expect(
-        resourceCall?.input.forwardedProps?.__proxiedMCPRequest,
-      ).toMatchObject({
-        serverHash: "dashboard-hash-123",
-        method: "resources/read",
-        params: { uri: "ui://test-server/dashboard" },
-      });
-    });
-
-    it("uses serverId when provided (takes precedence over serverHash)", async () => {
-      const agent = new MockMCPProxyAgent();
-      const agentId = "mcp-test-agent";
-      agent.agentId = agentId;
-
-      agent.setRunAgentResponse("resources/read", {
-        contents: [
-          {
-            uri: "ui://my-app/settings",
-            mimeType: "text/html",
-            text: "<html><body>Settings</body></html>",
-          },
-        ],
-      });
-
-      renderWithCopilotKit({
-        agents: { [agentId]: agent },
-        agentId,
-      });
-
-      const input = await screen.findByRole("textbox");
-      fireEvent.change(input, { target: { value: "Show settings" } });
-      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
-
-      await waitFor(() => {
-        expect(screen.getByText("Show settings")).toBeDefined();
-      });
-
-      agent.emit(runStartedEvent());
-      agent.emit(
-        activitySnapshotEvent({
-          messageId: testId("mcp-activity"),
-          activityType: MCPAppsActivityType,
-          content: mcpAppsActivityContent({
-            resourceUri: "ui://my-app/settings",
-            serverHash: "fallback-hash",
-            serverId: "my-app-stable-id", // Should take precedence
-          }),
-        }),
-      );
-      agent.emit(runFinishedEvent());
-
-      await waitFor(() => {
-        const resourceCall = agent.runAgentCalls.find(
-          (call) =>
-            call.input.forwardedProps?.__proxiedMCPRequest?.method ===
-            "resources/read",
-        );
-        expect(resourceCall).toBeDefined();
-        expect(
-          resourceCall?.input.forwardedProps?.__proxiedMCPRequest?.serverId,
-        ).toBe("my-app-stable-id");
-        expect(
-          resourceCall?.input.forwardedProps?.__proxiedMCPRequest?.serverHash,
-        ).toBe("fallback-hash");
-      });
-    });
-
-    it("shows loading state while fetching resource", async () => {
-      const agent = new MockMCPProxyAgent();
-      const agentId = "mcp-test-agent";
-      agent.agentId = agentId;
-
-      // Create a promise that we can control
-      let resolveResource: (value: unknown) => void;
-      const resourcePromise = new Promise((resolve) => {
-        resolveResource = resolve;
-      });
-
-      // Override runAgent to use our controlled promise
-      const originalRunAgent = agent.runAgent.bind(agent);
-      agent.runAgent = async (
-        input?: Partial<RunAgentInput>,
-      ): Promise<RunAgentResult> => {
-        const proxiedRequest = input?.forwardedProps?.__proxiedMCPRequest as
-          | { method: string }
-          | undefined;
-        if (proxiedRequest?.method === "resources/read") {
-          await resourcePromise;
-          return originalRunAgent(input);
-        }
-        return originalRunAgent(input);
-      };
-
-      renderWithCopilotKit({
-        agents: { [agentId]: agent },
-        agentId,
-      });
-
-      const input = await screen.findByRole("textbox");
-      fireEvent.change(input, { target: { value: "Load app" } });
-      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
-
-      await waitFor(() => {
-        expect(screen.getByText("Load app")).toBeDefined();
-      });
-
-      agent.emit(runStartedEvent());
-      agent.emit(
-        activitySnapshotEvent({
-          messageId: testId("mcp-activity"),
-          activityType: MCPAppsActivityType,
-          content: mcpAppsActivityContent({
-            resourceUri: "ui://test/app",
-            serverHash: "test-hash",
-          }),
-        }),
-      );
-      agent.emit(runFinishedEvent());
-
-      // Should show loading state
-      await waitFor(() => {
-        expect(screen.getByText("Loading...")).toBeDefined();
-      });
-
-      // Resolve the resource fetch
-      act(() => {
-        resolveResource!(true);
-      });
-
-      // Loading should eventually disappear (iframe created)
-      await waitFor(
-        () => {
-          expect(screen.queryByText("Loading...")).toBeNull();
-        },
-        { timeout: 3000 },
-      );
-    });
-
-    it("shows error state when resource fetch fails", async () => {
-      const agent = new MockMCPProxyAgent();
-      const agentId = "mcp-test-agent";
-      agent.agentId = agentId;
-
-      // Make proxied MCP requests throw an error
-      const originalRunAgent = agent.runAgent.bind(agent);
-      agent.runAgent = async (
-        input?: Partial<RunAgentInput>,
-      ): Promise<RunAgentResult> => {
-        const proxiedRequest = input?.forwardedProps?.__proxiedMCPRequest as
-          | { method: string }
-          | undefined;
-        if (proxiedRequest) {
-          throw new Error("Network error: Failed to fetch resource");
-        }
-        return originalRunAgent(input);
-      };
-
-      renderWithCopilotKit({
-        agents: { [agentId]: agent },
-        agentId,
-      });
-
-      const input = await screen.findByRole("textbox");
-      fireEvent.change(input, { target: { value: "Fetch broken" } });
-      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
-
-      await waitFor(() => {
-        expect(screen.getByText("Fetch broken")).toBeDefined();
-      });
-
-      agent.emit(runStartedEvent());
-      agent.emit(
-        activitySnapshotEvent({
-          messageId: testId("mcp-activity"),
-          activityType: MCPAppsActivityType,
-          content: mcpAppsActivityContent({
-            resourceUri: "ui://broken/resource",
-            serverHash: "broken-hash",
-          }),
-        }),
-      );
-      agent.emit(runFinishedEvent());
-
-      // Should show error state
-      await waitFor(() => {
-        expect(
-          screen.getByText(/Error:.*Failed to fetch resource/i),
-        ).toBeDefined();
-      });
-    });
-
-    it("handles resource with no content gracefully", async () => {
-      const agent = new MockMCPProxyAgent();
-      const agentId = "mcp-test-agent";
-      agent.agentId = agentId;
-
-      // Return empty contents
-      agent.setRunAgentResponse("resources/read", {
-        contents: [],
-      });
-
-      renderWithCopilotKit({
-        agents: { [agentId]: agent },
-        agentId,
-      });
-
-      const input = await screen.findByRole("textbox");
-      fireEvent.change(input, { target: { value: "Empty resource" } });
-      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
-
-      await waitFor(() => {
-        expect(screen.getByText("Empty resource")).toBeDefined();
-      });
-
-      agent.emit(runStartedEvent());
-      agent.emit(
-        activitySnapshotEvent({
-          messageId: testId("mcp-activity"),
-          activityType: MCPAppsActivityType,
-          content: mcpAppsActivityContent({
-            resourceUri: "ui://empty/resource",
-            serverHash: "empty-hash",
-          }),
-        }),
-      );
-      agent.emit(runFinishedEvent());
-
-      // Should show error about no content
-      await waitFor(() => {
-        expect(screen.getByText(/Error:.*No resource content/i)).toBeDefined();
-      });
-    });
-  });
-
-  describe("Schema Validation", () => {
-    it("validates activity content with the correct schema", () => {
-      // Valid content
-      const validContent = {
-        resourceUri: "ui://server/resource",
-        serverHash: "hash123",
-        result: {
-          content: [{ type: "text", text: "output" }],
-          isError: false,
-        },
-      };
-
-      const validResult = MCPAppsActivityContentSchema.safeParse(validContent);
-      expect(validResult.success).toBe(true);
-
-      // With optional serverId
-      const withServerId = {
-        ...validContent,
-        serverId: "stable-server-id",
-      };
-      const serverIdResult =
-        MCPAppsActivityContentSchema.safeParse(withServerId);
-      expect(serverIdResult.success).toBe(true);
-
-      // With toolInput
-      const withToolInput = {
-        ...validContent,
-        toolInput: { param1: "value1", param2: 42 },
-      };
-      const toolInputResult =
-        MCPAppsActivityContentSchema.safeParse(withToolInput);
-      expect(toolInputResult.success).toBe(true);
-    });
-
-    it("rejects invalid activity content", () => {
-      // Missing required fields
-      const missingResourceUri = {
-        serverHash: "hash123",
-        result: { isError: false },
-      };
-      expect(
-        MCPAppsActivityContentSchema.safeParse(missingResourceUri).success,
-      ).toBe(false);
-
-      const missingServerHash = {
-        resourceUri: "ui://server/resource",
-        result: { isError: false },
-      };
-      expect(
-        MCPAppsActivityContentSchema.safeParse(missingServerHash).success,
-      ).toBe(false);
-
-      const missingResult = {
-        resourceUri: "ui://server/resource",
-        serverHash: "hash123",
-      };
-      expect(
-        MCPAppsActivityContentSchema.safeParse(missingResult).success,
-      ).toBe(false);
-    });
-  });
-
-  describe("Activity Type Integration", () => {
-    it("built-in MCP Apps renderer is registered with correct activity type", async () => {
-      const agent = new MockMCPProxyAgent();
-      const agentId = "mcp-test-agent";
-      agent.agentId = agentId;
-
-      renderWithCopilotKit({
-        agents: { [agentId]: agent },
-        agentId,
-        // Don't pass any custom renderers - built-in should be used
-      });
-
-      const input = await screen.findByRole("textbox");
-      fireEvent.change(input, { target: { value: "Test MCP" } });
-      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
-
-      await waitFor(() => {
-        expect(screen.getByText("Test MCP")).toBeDefined();
-      });
-
-      agent.emit(runStartedEvent());
-      agent.emit(
-        activitySnapshotEvent({
-          messageId: testId("mcp-activity"),
-          activityType: "mcp-apps", // Should match MCPAppsActivityType
-          content: mcpAppsActivityContent({
-            resourceUri: "ui://builtin/test",
-            serverHash: "builtin-hash",
-          }),
-        }),
-      );
-      agent.emit(runFinishedEvent());
-
-      // Should show loading (meaning the renderer was matched)
-      await waitFor(() => {
-        expect(screen.getByText("Loading...")).toBeDefined();
-      });
-    });
-
-    it("user-provided renderer takes precedence over built-in", async () => {
-      const agent = new MockMCPProxyAgent();
-      const agentId = "mcp-test-agent";
-      agent.agentId = agentId;
-
-      // Custom renderer that overrides the built-in
-      const customRenderer: ReactActivityMessageRenderer<
-        z.infer<typeof MCPAppsActivityContentSchema>
-      > = {
-        activityType: MCPAppsActivityType,
-        content: MCPAppsActivityContentSchema,
-        render: ({ content }) => (
-          <div data-testid="custom-mcp-renderer">
-            Custom MCP Renderer: {content.resourceUri}
-          </div>
-        ),
-      };
-
-      renderWithCopilotKit({
-        agents: { [agentId]: agent },
-        agentId,
-        renderActivityMessages: [customRenderer],
-      });
-
-      const input = await screen.findByRole("textbox");
-      fireEvent.change(input, { target: { value: "Custom renderer" } });
-      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
-
-      await waitFor(() => {
-        expect(screen.getByText("Custom renderer")).toBeDefined();
-      });
-
-      agent.emit(runStartedEvent());
-      agent.emit(
-        activitySnapshotEvent({
-          messageId: testId("mcp-activity"),
-          activityType: MCPAppsActivityType,
-          content: mcpAppsActivityContent({
-            resourceUri: "ui://custom/resource",
-            serverHash: "custom-hash",
-          }),
-        }),
-      );
-      agent.emit(runFinishedEvent());
-
-      // Should render custom component, not loading
-      await waitFor(() => {
-        expect(screen.getByTestId("custom-mcp-renderer")).toBeDefined();
-        expect(
-          screen.getByText(/Custom MCP Renderer:.*ui:\/\/custom\/resource/),
-        ).toBeDefined();
-      });
-    });
-  });
-
-  describe("Multiple Activity Messages", () => {
-    it("renders multiple MCP Apps activities independently", async () => {
-      const agent = new MockMCPProxyAgent();
-      const agentId = "mcp-test-agent";
-      agent.agentId = agentId;
-
-      // Set up different responses for different URIs
-      const originalRunAgent = agent.runAgent.bind(agent);
-      agent.runAgent = async (
-        input?: Partial<RunAgentInput>,
-      ): Promise<RunAgentResult> => {
-        const proxiedRequest = input?.forwardedProps?.__proxiedMCPRequest as {
-          method: string;
-          params?: { uri?: string };
-        };
-        if (proxiedRequest?.method === "resources/read") {
-          const uri = proxiedRequest.params?.uri;
-          if (uri === "ui://first/app") {
-            return {
-              result: {
-                contents: [
-                  { uri, mimeType: "text/html", text: "<div>First App</div>" },
-                ],
-              },
-              newMessages: [],
-            };
-          }
-          if (uri === "ui://second/app") {
-            return {
-              result: {
-                contents: [
-                  { uri, mimeType: "text/html", text: "<div>Second App</div>" },
-                ],
-              },
-              newMessages: [],
-            };
-          }
-        }
-        // For non-proxied requests, use original behavior
-        return originalRunAgent(input);
-      };
-
-      renderWithCopilotKit({
-        agents: { [agentId]: agent },
-        agentId,
-      });
-
-      const input = await screen.findByRole("textbox");
-      fireEvent.change(input, { target: { value: "Multiple apps" } });
-      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
-
-      await waitFor(() => {
-        expect(screen.getByText("Multiple apps")).toBeDefined();
-      });
-
-      agent.emit(runStartedEvent());
-
-      // Emit two activity messages
-      agent.emit(
-        activitySnapshotEvent({
-          messageId: testId("mcp-first"),
-          activityType: MCPAppsActivityType,
-          content: mcpAppsActivityContent({
-            resourceUri: "ui://first/app",
-            serverHash: "first-hash",
-          }),
-        }),
-      );
-
-      agent.emit(
-        activitySnapshotEvent({
-          messageId: testId("mcp-second"),
-          activityType: MCPAppsActivityType,
-          content: mcpAppsActivityContent({
-            resourceUri: "ui://second/app",
-            serverHash: "second-hash",
-          }),
-        }),
-      );
-
-      agent.emit(runFinishedEvent());
-
-      // Both activities should trigger resource fetches and create iframes.
-      // Due to async timing, the loading states might clear quickly,
-      // so we verify both iframes are eventually created.
-      await waitFor(
-        () => {
-          const iframes = document.querySelectorAll("iframe[srcdoc]");
-          expect(iframes.length).toBe(2);
-        },
-        { timeout: 2000 },
-      );
-    });
-  });
-
-  describe("Content Types", () => {
-    it("handles text content from resource", async () => {
-      const agent = new MockMCPProxyAgent();
-      const agentId = "mcp-test-agent";
-      agent.agentId = agentId;
-
-      agent.setRunAgentResponse("resources/read", {
-        contents: [
-          {
-            uri: "ui://test/text",
-            mimeType: "text/html",
-            text: "<html><body><h1>Text Content</h1></body></html>",
-          },
-        ],
-      });
-
-      renderWithCopilotKit({
-        agents: { [agentId]: agent },
-        agentId,
-      });
-
-      const input = await screen.findByRole("textbox");
-      fireEvent.change(input, { target: { value: "Text content" } });
-      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
-
-      await waitFor(() => {
-        expect(screen.getByText("Text content")).toBeDefined();
-      });
-
-      agent.emit(runStartedEvent());
-      agent.emit(
-        activitySnapshotEvent({
-          messageId: testId("mcp-activity"),
-          activityType: MCPAppsActivityType,
-          content: mcpAppsActivityContent({
-            resourceUri: "ui://test/text",
-            serverHash: "text-hash",
-          }),
-        }),
-      );
-      agent.emit(runFinishedEvent());
-
-      // Should transition from loading to rendered
-      await waitFor(() => {
-        expect(screen.getByText("Loading...")).toBeDefined();
-      });
-    });
-
-    it("handles blob (base64) content from resource", async () => {
-      const agent = new MockMCPProxyAgent();
-      const agentId = "mcp-test-agent";
-      agent.agentId = agentId;
-
-      // Base64 encoded "<html><body>Blob Content</body></html>"
-      const base64Html = btoa("<html><body>Blob Content</body></html>");
-
-      agent.setRunAgentResponse("resources/read", {
-        contents: [
-          {
-            uri: "ui://test/blob",
-            mimeType: "text/html",
-            blob: base64Html,
-          },
-        ],
-      });
-
-      renderWithCopilotKit({
-        agents: { [agentId]: agent },
-        agentId,
-      });
-
-      const input = await screen.findByRole("textbox");
-      fireEvent.change(input, { target: { value: "Blob content" } });
-      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
-
-      await waitFor(() => {
-        expect(screen.getByText("Blob content")).toBeDefined();
-      });
-
-      agent.emit(runStartedEvent());
-      agent.emit(
-        activitySnapshotEvent({
-          messageId: testId("mcp-activity"),
-          activityType: MCPAppsActivityType,
-          content: mcpAppsActivityContent({
-            resourceUri: "ui://test/blob",
-            serverHash: "blob-hash",
-          }),
-        }),
-      );
-      agent.emit(runFinishedEvent());
-
-      // Should show loading initially
-      await waitFor(() => {
-        expect(screen.getByText("Loading...")).toBeDefined();
-      });
-    });
-
-    it("handles resource with no text or blob - iframe created but stuck waiting for sandbox", async () => {
-      // NOTE: In jsdom, the sandbox iframe (using srcdoc) can't fully execute, so the
-      // component will create an iframe and wait for the sandbox proxy to be ready.
-      // The actual error for missing text/blob happens inside the sandbox communication
-      // flow which can't complete in jsdom. This test verifies that:
-      // 1. The component fetches the resource successfully
-      // 2. The iframe is created (showing the component progressed past loading)
-
-      const agent = new MockMCPProxyAgent();
-      const agentId = "mcp-test-agent";
-      agent.agentId = agentId;
-
-      // Resource with neither text nor blob
-      agent.setRunAgentResponse("resources/read", {
-        contents: [
-          {
-            uri: "ui://test/empty",
-            mimeType: "text/html",
-            // No text or blob field - in real environment this would cause an error
-            // after sandbox proxy is ready, but in jsdom the proxy never responds
-          },
-        ],
-      });
-
-      renderWithCopilotKit({
-        agents: { [agentId]: agent },
-        agentId,
-      });
-
-      const input = await screen.findByRole("textbox");
-      fireEvent.change(input, { target: { value: "No content" } });
-      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
-
-      await waitFor(() => {
-        expect(screen.getByText("No content")).toBeDefined();
-      });
-
-      agent.emit(runStartedEvent());
-      agent.emit(
-        activitySnapshotEvent({
-          messageId: testId("mcp-activity"),
-          activityType: MCPAppsActivityType,
-          content: mcpAppsActivityContent({
-            resourceUri: "ui://test/empty",
-            serverHash: "empty-hash",
-          }),
-        }),
-      );
-      agent.emit(runFinishedEvent());
-
-      // Verify the iframe is created (component progressed past loading)
-      // In jsdom, the sandbox proxy never responds, so the error for missing text/blob
-      // is never reached. This is a limitation of jsdom testing.
-      await waitFor(
-        () => {
-          const iframe = document.querySelector("iframe[srcdoc]");
-          expect(iframe).not.toBeNull();
-        },
-        { timeout: 2000 },
-      );
-    });
-  });
-
-  describe("Metadata Handling", () => {
-    it("applies border styling when prefersBorder is true", async () => {
-      const agent = new MockMCPProxyAgent();
-      const agentId = "mcp-test-agent";
-      agent.agentId = agentId;
-
-      agent.setRunAgentResponse("resources/read", {
-        contents: [
-          {
-            uri: "ui://test/bordered",
-            mimeType: "text/html",
-            text: "<html><body>Bordered Content</body></html>",
-            _meta: {
-              ui: {
-                prefersBorder: true,
-              },
-            },
-          },
-        ],
-      });
-
-      renderWithCopilotKit({
-        agents: { [agentId]: agent },
-        agentId,
-      });
-
-      const input = await screen.findByRole("textbox");
-      fireEvent.change(input, { target: { value: "Bordered app" } });
-      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
-
-      await waitFor(() => {
-        expect(screen.getByText("Bordered app")).toBeDefined();
-      });
-
-      agent.emit(runStartedEvent());
-      agent.emit(
-        activitySnapshotEvent({
-          messageId: testId("mcp-activity"),
-          activityType: MCPAppsActivityType,
-          content: mcpAppsActivityContent({
-            resourceUri: "ui://test/bordered",
-            serverHash: "bordered-hash",
-          }),
-        }),
-      );
-      agent.emit(runFinishedEvent());
-
-      // Wait for resource to be fetched and iframe to be created
-      await waitFor(
-        () => {
-          // Loading should disappear
-          expect(screen.queryByText("Loading...")).toBeNull();
-          // Iframe should be created
-          const iframe = document.querySelector("iframe[srcdoc]");
-          expect(iframe).not.toBeNull();
-        },
-        { timeout: 3000 },
-      );
-
-      // Note: Border styling is applied via inline styles based on prefersBorder metadata.
-      // In jsdom, verifying inline styles is not reliable, but we've verified the component
-      // renders successfully with the metadata that includes prefersBorder: true.
-    });
-
-    it("does not apply border styling when prefersBorder is false", async () => {
-      const agent = new MockMCPProxyAgent();
-      const agentId = "mcp-test-agent";
-      agent.agentId = agentId;
-
-      agent.setRunAgentResponse("resources/read", {
-        contents: [
-          {
-            uri: "ui://test/borderless",
-            mimeType: "text/html",
-            text: "<html><body>Borderless Content</body></html>",
-            _meta: {
-              ui: {
-                prefersBorder: false,
-              },
-            },
-          },
-        ],
-      });
-
-      renderWithCopilotKit({
-        agents: { [agentId]: agent },
-        agentId,
-      });
-
-      const input = await screen.findByRole("textbox");
-      fireEvent.change(input, { target: { value: "Borderless app" } });
-      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
-
-      await waitFor(() => {
-        expect(screen.getByText("Borderless app")).toBeDefined();
-      });
-
-      agent.emit(runStartedEvent());
-      agent.emit(
-        activitySnapshotEvent({
-          messageId: testId("mcp-activity"),
-          activityType: MCPAppsActivityType,
-          content: mcpAppsActivityContent({
-            resourceUri: "ui://test/borderless",
-            serverHash: "borderless-hash",
-          }),
-        }),
-      );
-      agent.emit(runFinishedEvent());
-
-      // Verify component renders without error
-      await waitFor(() => {
-        expect(screen.getByText("Loading...")).toBeDefined();
-      });
-    });
-  });
-});