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%",

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)
 };