refactor: update core files for async MCP server

browser/handler.ts

@@ -53,9 +53,9 @@ export class CodenamesGameHandler implements ICodenamesGameAPI {
       await nicknameInput.fill('TestPlayer');
       const joinButton = this.page.locator(Selectors.joinRoomButton);
       await joinButton.waitFor({ timeout: 10000 });
+      console.log(`>>> Clicking joinButton`);
       await joinButton.click();
     }
-    await this.page.locator(Selectors.teamBoardBlue).waitFor({ timeout: 15000 });
   }
 
   async leaveRoom(): Promise<void> {
@@ -70,12 +70,39 @@ export class CodenamesGameHandler implements ICodenamesGameAPI {
   }
 
   async joinAsSpymaster(team: Team): Promise<void> {
+    console.log(`>>> Entering joinAsSpymaster for team: ${team === Team.Red ? 'Red' : 'Blue'}`);
     const teamBoardSelector = team === Team.Red ? Selectors.teamBoardRed : Selectors.teamBoardBlue;
-    const teamBoard = this.page.locator(teamBoardSelector);
-    await teamBoard.waitFor({ timeout: 5000 });
-    const joinSpymasterButton = team === Team.Red ? this.page.locator(Selectors.joinRedSpymasterButton) : this.page.locator(Selectors.joinBlueSpymasterButton);
-    await joinSpymasterButton.waitFor({ timeout: 5000 });
-    await joinSpymasterButton.click();
+    const joinSpymasterButtonSelector = team === Team.Red ? Selectors.joinRedSpymasterButton : Selectors.joinBlueSpymasterButton;
+
+    try {
+      // Wait for the team board (redundant if button check passed, but safe)
+      await this.page.waitForSelector(teamBoardSelector, { state: 'visible', timeout: 5000 });
+    } catch (e) {
+      // This specific catch might be less likely now, but keep for safety
+      await this._handleScreenshot('screenshots/joinSpymaster_teamBoard_timeout_alt.png', `[joinAsSpymaster] Team board (${teamBoardSelector}) did not become visible even after button check`);
+      throw e;
+    }
+
+    // First, check if the join button is even visible. If not, assume role is taken/player already joined.
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    const isJoinButtonVisible = await this.page.locator(joinSpymasterButtonSelector).isVisible({ timeout: 20000 }).catch(() => false);
+
+    if (!isJoinButtonVisible) {
+      // console.log(`Join Spymaster button (${joinSpymasterButtonSelector}) is not visible. Assuming already joined or role unavailable.`);
+      await this._handleScreenshot('screenshots/joinSpymaster_no_button.png', `[joinAsSpymaster] Join button (${joinSpymasterButtonSelector}) not visible`);
+      return; // Exit early
+    }
+    
+    console.log(`Join Spymaster button (${joinSpymasterButtonSelector}) is visible. Attempting to join.`);
+    const joinSpymasterButton = this.page.locator(joinSpymasterButtonSelector);
+
+    try {
+      console.log(`>>> Clicking joinSpymasterButton`);
+      await joinSpymasterButton.click();
+    } catch (e) {
+      await this._handleScreenshot('screenshots/joinSpymaster_click_or_hidden_timeout_alt.png', `[joinAsSpymaster] Error clicking button (${joinSpymasterButtonSelector})`);
+      throw e;
+    }
     await joinSpymasterButton.waitFor({ state: 'hidden', timeout: 5000 });
   }
 

package-lock.json

@@ -16,6 +16,7 @@
         "zod": "latest"
       },
       "devDependencies": {
+        "@types/express": "^5.0.1",
         "@types/jest": "^29.5.14",
         "jest": "^29.7.0",
         "playwright": "^1.52.0",
@@ -988,6 +989,52 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.5",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
+      "integrity": "sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
+      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/express": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-5.0.1.tgz",
+      "integrity": "sha512-UZUw8vjpWFXuDnjFTh7/5c2TWDlQqeXHi6hcN7F2XSVT5P+WmUnnbFS3KA6Jnc6IsEqI2qCVu2bK0R0J4A8ZQQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^5.0.0",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.6.tgz",
+      "integrity": "sha512-3xhRnjJPkULekpSzgtoNYYcTWgEZkp4myc+Saevii5JPnHNvHMRlBSHDbs7Bh1iPPoVTERHEZXyhyLbMEsExsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*",
+        "@types/send": "*"
+      }
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
@@ -998,6 +1045,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/http-errors": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
+      "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -1036,6 +1090,13 @@
         "pretty-format": "^29.0.0"
       }
     },
+    "node_modules/@types/mime": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
+      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "22.14.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.1.tgz",
@@ -1046,6 +1107,43 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/qs": {
+      "version": "6.9.18",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.18.tgz",
+      "integrity": "sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
+      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/send": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
+      "integrity": "sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/serve-static": {
+      "version": "1.15.7",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.7.tgz",
+      "integrity": "sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-errors": "*",
+        "@types/node": "*",
+        "@types/send": "*"
+      }
+    },
     "node_modules/@types/stack-utils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",

package.json

@@ -14,6 +14,7 @@
     "zod": "latest"
   },
   "devDependencies": {
+    "@types/express": "^5.0.1",
     "@types/jest": "^29.5.14",
     "jest": "^29.7.0",
     "playwright": "^1.52.0",

server/server.ts

@@ -1,51 +1,185 @@
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
-import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+// import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js"; // Corrected class name casing
 import { z } from "zod";
 import { BoardState, Team } from "../shared/types";
 import { CodenamesGameHandler } from "../browser/handler";
+// import * as http from 'http'; // No longer using raw http server
+// import * as url from 'url'; // No longer using raw url parsing
+import express, { Request, Response } from 'express'; // Import express
+// import { JSONRPCMessageSchema } from "@modelcontextprotocol/sdk/types.js"; // Import schema if needed for debug
 
-async function main() {
-  // Initialize browser handler
-  const browserHandler = await CodenamesGameHandler.create();
-  await browserHandler.joinRoom();
-  await browserHandler.joinAsSpymaster(Team.Red);
-
-  const server = new McpServer(
-    { name: "codenames-mcp-server", version: "1.0.0" },
-    { capabilities: {} }
-  );
-
-  server.tool(
-    "getBoardState",
-    {},
-    async () => {
-      const board: BoardState = await browserHandler.getBoardState();
-      return {
-        content: [
-          { type: "text", text: JSON.stringify(board) }
-        ],
-        board
-      };
-    }
-  );
-
-  server.tool(
-    "submitClue",
-    { word: z.string(), count: z.number() },
-    async ({ word, count }: { word: string; count: number }) => {
-      await browserHandler.submitClue({ word, count });
-      return {
-        content: [
-          { type: "text", text: `Clue submitted: ${word} (${count})` }
-        ],
-        success: true
-      };
+// Keep track of the initialized handler globally or pass it differently
+let browserHandler: CodenamesGameHandler | null = null;
+let mcpServer: McpServer | null = null;
+const transports: { [sessionId: string]: SSEServerTransport } = {};
+
+async function initializeBrowserAndMcp() {
+    try {
+        console.log("Initializing browser handler...");
+        browserHandler = await CodenamesGameHandler.create();
+        await browserHandler.joinRoom();
+        await browserHandler.joinAsSpymaster(Team.Red);
+        console.log("Browser handler initialized and joined room/role.");
+
+        // Now define MCP server and tools *after* async setup is done
+        mcpServer = new McpServer(
+            { name: "codenames-mcp-server", version: "1.0.0" },
+            { capabilities: {} }
+        );
+
+        mcpServer.tool(
+            "getBoardState",
+            {},
+            async () => {
+                if (!browserHandler) throw new Error("Browser handler not initialized");
+                const board: BoardState = await browserHandler.getBoardState();
+                return {
+                    content: [
+                        { type: "text", text: JSON.stringify(board) }
+                    ],
+                };
+            }
+        );
+
+        mcpServer.tool(
+            "submitClue",
+            { word: z.string(), count: z.number() },
+            async ({ word, count }: { word: string; count: number }) => {
+                if (!browserHandler) throw new Error("Browser handler not initialized");
+                await browserHandler.submitClue({ word, count });
+                return {
+                    content: [
+                        { type: "text", text: `Clue submitted: ${word} (${count})` }
+                    ],
+                    success: true
+                };
+            }
+        );
+
+    } catch (initError) {
+        console.error("Error during async browser/MCP initialization:", initError);
+        process.exit(1); // Exit if essential setup fails
     }
-  );
+}
+
+// Main execution flow
+async function main() {
+    try {
+        // Perform async initialization first
+        await initializeBrowserAndMcp();
+
+        // --- Express App Setup ---
+        const app = express();
+        const port = 4000;
 
-  // Start server with stdio transport
-  const transport = new StdioServerTransport();
-  server.connect(transport);
+        // --- SSE Connection Route (GET /sse) ---
+        app.get("/sse", async (req: Request, res: Response): Promise<void> => {
+            const logPrefixBase = `[SSE Connect ${req.ip}]`;
+            console.log(`${logPrefixBase} SSE connection request received`);
+
+            // Check if MCP server is ready
+            if (!mcpServer) {
+                console.error(`${logPrefixBase} Error: MCP Server not ready for SSE connection`);
+                res.status(503).send("Server not ready"); // Send the response
+                return; // Then return void
+            }
+
+            // Check for existing session ID (optional, for potential reconnection logic)
+            const existingSessionId = req.query.sessionId as string;
+            if (existingSessionId && transports[existingSessionId]) {
+                console.log(`${logPrefixBase} Reconnecting session: ${existingSessionId}`);
+                // Potentially handle reconnection logic here if needed
+            }
+
+            // Generate a unique session ID
+            const sessionId = crypto.randomUUID();
+            const logPrefix = `[${sessionId}]`;
+            console.log(`${logPrefix} Generated new session ID`);
+
+            try {
+                // Create a new SSE transport
+                const transport = new SSEServerTransport(`/messages`, res);
+                // Use the transport's own sessionId as the key for our map
+                const transportSessionId = transport.sessionId;
+                transports[transportSessionId] = transport;
+                console.log(`${logPrefix} SSE Transport created. Storing under session ID: ${transportSessionId}`); // Log the key being used
+
+                // Handle client disconnect
+                req.on('close', () => {
+                    console.log(`[${transportSessionId}] Client disconnected`); // Log with the correct ID
+                    transport.close(); // Close the transport on the server side
+                    delete transports[transportSessionId]; // Clean up the transport reference using the correct key
+                    console.log(`[${transportSessionId}] Transport closed and cleaned up.`); // Log with the correct ID
+                });
+
+                // Establish connection with MCP server
+                console.log(`[${transportSessionId}] Connecting transport to MCP server...`); // Log with the correct ID
+                await mcpServer.connect(transport);
+                console.log(`[${transportSessionId}] Transport connected to MCP server.`); // Log with the correct ID
+
+            } catch (error) {
+                // Cannot access transportSessionId here if transport creation failed
+                console.error(`${logPrefix} Error setting up SSE connection:`, error);
+                // We don't know the transportSessionId if creation failed, so cannot clean up transports[transportSessionId]
+                // If creation succeeded but connect failed, the disconnect handler should eventually clean it up.
+                if (!res.headersSent) {
+                    res.status(500).send('Failed to establish SSE connection');
+                }
+            }
+        });
+
+        // --- Message Posting Route (POST /messages) ---
+        app.post(
+            "/messages",
+            express.json({ limit: "5mb" }),
+            async (req: Request, res: Response): Promise<void> => {
+                const sessionId = req.query.sessionId as string;
+                if (!sessionId) {
+                    console.error("POST /messages error: Missing sessionId");
+                    res.status(400).send("Missing sessionId"); return;
+                }
+                const logPrefix = `[${sessionId}]`;
+                console.log(`${logPrefix} POST /messages received`);
+                const transport = transports[sessionId];
+                const messageBody = req.body;
+                if (!transport) {
+                    console.error(`${logPrefix} POST /messages error: No transport`);
+                    res.status(404).send("No session"); return;
+                }
+                if (!messageBody) {
+                    console.error(`${logPrefix} POST /messages error: No body`);
+                    res.status(400).send("No body"); return;
+                }
+                console.log(`${logPrefix} --> Received body:`, JSON.stringify(messageBody, null, 2));
+                try {
+                    console.log(`${logPrefix} DEBUG: Calling transport.handlePostMessage...`);
+                    await transport.handlePostMessage(req, res, messageBody);
+                    console.log(`${logPrefix} DEBUG: transport.handlePostMessage completed.`);
+                } catch (error) {
+                    console.error(`${logPrefix} ERROR in POST /messages handler:`, error);
+                    if (!res.headersSent) {
+                        res.status(500).send("Server Error");
+                    }
+                }
+            }
+        );
+
+        // --- Start Express Server ---
+        app.listen(port, '0.0.0.0', () => {
+            console.log(`Express server listening on port ${port}`);
+            console.log(`MCP SSE endpoint: http://localhost:${port}/sse`);
+            console.log(`MCP Messages endpoint: POST http://localhost:${port}/messages`);
+        });
+
+        // Add an indefinite wait to keep the main function/script alive
+        console.log("Server setup complete. Entering indefinite wait...");
+        await new Promise(() => {}); // This promise never resolves
+    } catch (initError) {
+        console.error("Error during server initialization:", initError);
+        process.exit(1);
+    }
 }
 
-main(); 
+// Call the async main function
+main(); // No catch needed here as errors are handled inside main or by Node