fix: E2E test fixes and host resilience improvements

1. video-resource-server: Add missing server-utils.ts and fix import path
   - Was importing from non-existent ../shared/server-utils.js
   - Now correctly imports from ./src/server-utils.js

2. basic-host: Be resilient to individual server connection failures
   - Use Promise.allSettled instead of Promise.all
   - Failed connections are logged as warnings but don't crash the UI
   - Only throws if ALL servers fail to connect

3. threejs-server: Add id to canvas for reliable screenshot masking
   - Added id="threejs-canvas" to the canvas element
   - Updated e2e test masks to use #threejs-canvas and .threejs-container
   - Fixes flaky Three.js screenshot comparisons in CI

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ochafik

examples/basic-host/src/index.tsx

@@ -350,7 +350,27 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 async function connectToAllServers(): Promise<ServerInfo[]> {
   const serverUrlsResponse = await fetch("/api/servers");
   const serverUrls = (await serverUrlsResponse.json()) as string[];
-  return Promise.all(serverUrls.map((url) => connectToServer(new URL(url))));
+
+  // Use allSettled to be resilient to individual server failures
+  const results = await Promise.allSettled(
+    serverUrls.map((url) => connectToServer(new URL(url)))
+  );
+
+  const servers: ServerInfo[] = [];
+  for (let i = 0; i < results.length; i++) {
+    const result = results[i];
+    if (result.status === "fulfilled") {
+      servers.push(result.value);
+    } else {
+      console.warn(`[HOST] Failed to connect to ${serverUrls[i]}:`, result.reason);
+    }
+  }
+
+  if (servers.length === 0 && serverUrls.length > 0) {
+    throw new Error(`Failed to connect to any servers (${serverUrls.length} attempted)`);
+  }
+
+  return servers;
 }
 
 createRoot(document.getElementById("root")!).render(

examples/threejs-server/src/threejs-app.tsx

@@ -172,6 +172,7 @@ export default function ThreeJSApp({
   return (
     <div ref={containerRef} className="threejs-container">
       <canvas
+        id="threejs-canvas"
         ref={canvasRef}
         style={{
           width: "100%",

examples/video-resource-server/server.ts

@@ -22,7 +22,7 @@ import {
   RESOURCE_MIME_TYPE,
   RESOURCE_URI_META_KEY,
 } from "@modelcontextprotocol/ext-apps/server";
-import { startServer } from "../shared/server-utils.js";
+import { startServer } from "./src/server-utils.js";
 
 const DIST_DIR = path.join(import.meta.dirname, "dist");
 const RESOURCE_URI = "ui://video-player/mcp-app.html";

examples/video-resource-server/src/server-utils.ts

@@ -0,0 +1,110 @@
+/**
+ * Shared utilities for running MCP servers with various transports.
+ */
+
+import { createMcpExpressApp } from "@modelcontextprotocol/sdk/server/express.js";
+import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import cors from "cors";
+import type { Request, Response } from "express";
+
+/**
+ * Starts an MCP server using the appropriate transport based on command-line arguments.
+ *
+ * If `--stdio` is passed, uses stdio transport. Otherwise, uses Streamable HTTP transport.
+ *
+ * @param createServer - Factory function that creates a new McpServer instance.
+ */
+export async function startServer(
+  createServer: () => McpServer,
+): Promise<void> {
+  try {
+    if (process.argv.includes("--stdio")) {
+      await startStdioServer(createServer);
+    } else {
+      await startStreamableHttpServer(createServer);
+    }
+  } catch (e) {
+    console.error(e);
+    process.exit(1);
+  }
+}
+
+/**
+ * Starts an MCP server with stdio transport.
+ *
+ * @param createServer - Factory function that creates a new McpServer instance.
+ */
+export async function startStdioServer(
+  createServer: () => McpServer,
+): Promise<void> {
+  await createServer().connect(new StdioServerTransport());
+}
+
+/**
+ * Starts an MCP server with Streamable HTTP transport in stateless mode.
+ *
+ * Each request creates a fresh server and transport instance, which are
+ * closed when the response ends (no session tracking).
+ *
+ * The server listens on the port specified by the PORT environment variable,
+ * defaulting to 3001 if not set.
+ *
+ * @param createServer - Factory function that creates a new McpServer instance per request.
+ */
+export async function startStreamableHttpServer(
+  createServer: () => McpServer,
+): Promise<void> {
+  const port = parseInt(process.env.PORT ?? "3001", 10);
+
+  // Express app - bind to all interfaces for development/testing
+  const expressApp = createMcpExpressApp({ host: "0.0.0.0" });
+  expressApp.use(cors());
+
+  expressApp.all("/mcp", async (req: Request, res: Response) => {
+    // Create fresh server and transport for each request (stateless mode)
+    const server = createServer();
+    const transport = new StreamableHTTPServerTransport({
+      sessionIdGenerator: undefined,
+    });
+
+    // Clean up when response ends
+    res.on("close", () => {
+      transport.close().catch(() => {});
+      server.close().catch(() => {});
+    });
+
+    try {
+      await server.connect(transport);
+      await transport.handleRequest(req, res, req.body);
+    } catch (error) {
+      console.error("MCP error:", error);
+      if (!res.headersSent) {
+        res.status(500).json({
+          jsonrpc: "2.0",
+          error: { code: -32603, message: "Internal server error" },
+          id: null,
+        });
+      }
+    }
+  });
+
+  const { promise, resolve, reject } = Promise.withResolvers<void>();
+
+  const httpServer = expressApp.listen(port, (err?: Error) => {
+    if (err) return reject(err);
+    console.log(`Server listening on http://localhost:${port}/mcp`);
+    resolve();
+  });
+
+  const shutdown = () => {
+    console.log("\nShutting down...");
+    httpServer.close(() => process.exit(0));
+  };
+
+  process.on("SIGINT", shutdown);
+  process.on("SIGTERM", shutdown);
+
+  return promise;
+}

tests/e2e/servers.spec.ts

@@ -17,7 +17,7 @@ const DYNAMIC_MASKS: Record<string, string[]> = {
     "#memory-bar-fill", // Memory bar fill level
     "#info-uptime", // System uptime
   ],
-  threejs: ["canvas"], // 3D render canvas (dynamic animation)
+  threejs: ["#threejs-canvas", ".threejs-container"], // 3D render canvas (dynamic animation)
   "wiki-explorer": ["#graph"], // Force-directed graph (dynamic layout)
 };