chore: import upstream snapshot with attribution

showcase/integrations/langgraph-python/tests/e2e/mcp-apps.spec.ts

@@ -0,0 +1,93 @@
+import { test, expect } from "@playwright/test";
+
+// QA reference: qa/mcp-apps.md
+// Demo source: src/app/demos/mcp-apps/page.tsx
+// Backend: src/agents/mcp_apps_agent.py
+// Runtime: src/app/api/copilotkit-mcp-apps/route.ts (mcpApps.servers wires
+// the public Excalidraw MCP app at https://mcp.excalidraw.com, pinned
+// serverId: "excalidraw").
+//
+// Pattern: MCP server-driven UI via ACTIVITY RENDERERS. The runtime
+// middleware fetches the UI resource associated with the `create_view`
+// MCP tool call and emits an activity event; CopilotKit's built-in
+// `MCPAppsActivityRenderer` auto-registers for the `mcp-apps` activity
+// type (per `@region[no-frontend-renderer-needed]` comment on page.tsx)
+// and paints a sandboxed <iframe> inline in the chat transcript.
+//
+// The app registers NO custom activity renderer and NO data-testid. Our
+// render-signal is the sandboxed <iframe> element itself — the built-in
+// renderer always sets the `sandbox` attribute. The iframe payload
+// (the actual Excalidraw drawing) is rendered inside a cross-origin
+// frame and is not introspectable from Playwright's page context, so we
+// only assert presence + the sandbox contract.
+//
+// W8-9: the MCP round-trip (agent → create_view → server-side resource
+// fetch → activity event) is the slowest flow in the suite on Railway,
+// regularly sitting above 60s. The end-to-end tool-driven test uses a
+// 90s budget and is kept un-skipped; the deterministic draw-prompt
+// version is covered by the suggestion pill flow.
+
+test.describe("MCP Apps (Excalidraw activity iframe)", () => {
+  test.setTimeout(180_000);
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/demos/mcp-apps");
+  });
+
+  test("page loads with chat input and no activity iframe rendered", async ({
+    page,
+  }) => {
+    await expect(page.getByPlaceholder("Type a message")).toBeVisible();
+    // No sandboxed iframe on first paint.
+    await expect(page.locator("iframe[sandbox]")).toHaveCount(0);
+  });
+
+  test("both suggestion pills render with verbatim titles", async ({
+    page,
+  }) => {
+    const suggestions = page.locator('[data-testid="copilot-suggestion"]');
+    await expect(
+      suggestions.filter({ hasText: "Draw a flowchart" }).first(),
+    ).toBeVisible({ timeout: 15_000 });
+    await expect(
+      suggestions.filter({ hasText: "Sketch a system diagram" }).first(),
+    ).toBeVisible({ timeout: 15_000 });
+  });
+
+  // SKIP: on Railway the MCP round-trip (agent -> create_view ->
+  // server-side resource fetch -> activity event -> iframe render)
+  // regularly sits above 90s and intermittently fails to paint an
+  // iframe at all when the Excalidraw MCP server is slow. See W8-9.
+  // Un-skip when the MCP Apps middleware / Excalidraw upstream
+  // stabilises on Railway.
+  test.skip("Draw-a-flowchart pill renders a sandboxed activity iframe", async ({
+    page,
+  }) => {
+    const suggestions = page.locator('[data-testid="copilot-suggestion"]');
+    await suggestions.filter({ hasText: "Draw a flowchart" }).first().click();
+
+    // The built-in MCPAppsActivityRenderer always sets the `sandbox`
+    // attribute on the UI-resource iframe (that is the load-bearing
+    // renderer contract — no renderer can skip it).
+    const iframe = page.locator("iframe[sandbox]").first();
+    await expect(iframe).toBeVisible({ timeout: 90_000 });
+  });
+
+  // SKIP: same root cause as the flowchart flow — the typed-prompt
+  // variant also depends on the MCP round-trip. See W8-9.
+  test.skip("explicit create_view prompt renders a sandboxed iframe", async ({
+    page,
+  }) => {
+    // Typed prompt (not suggestion pill) — the QA doc calls this out as
+    // the canonical end-to-end MCP interaction: single `create_view`
+    // call with 3 elements.
+    const input = page.getByPlaceholder("Type a message");
+    await input.fill(
+      "Use Excalidraw to draw exactly 2 rectangles labelled 'A' and 'B' connected by one arrow from A to B.",
+    );
+    await page.locator('[data-testid="copilot-send-button"]').first().click();
+
+    const iframe = page.locator("iframe[sandbox]").first();
+    await expect(iframe).toBeVisible({ timeout: 90_000 });
+  });
+});