dev3000 0.0.26 → 0.0.32

package/mcp-server/app/api/mcp/[transport]/route.ts

@@ -2,8 +2,28 @@ import { createMcpHandler } from "mcp-handler";
 import { z } from "zod";
 import { readFileSync, existsSync } from "fs";
 import { join } from "path";
+import { WebSocket } from "ws";
 
 const handler = createMcpHandler((server) => {
+    // Healthcheck tool
+    server.tool(
+      "healthcheck",
+      "Simple healthcheck to verify MCP server is working",
+      {
+        message: z.string().optional().describe("Optional message to echo back")
+      },
+      async ({ message = "MCP server is healthy!" }) => {
+        return {
+          content: [
+            {
+              type: "text",
+              text: `✅ ${message} - Timestamp: ${new Date().toISOString()}`
+            }
+          ]
+        };
+      }
+    );
+
     // Tool to read consolidated logs
     server.tool(
       "read_consolidated_logs",
@@ -183,6 +203,207 @@ const handler = createMcpHandler((server) => {
         }
       }
     );
+
+    // Tool to execute browser actions via CDP
+    server.tool(
+      "execute_browser_action",
+      "Execute safe browser actions via Chrome DevTools Protocol",
+      {
+        action: z.enum(["click", "navigate", "screenshot", "evaluate", "scroll", "type"]).describe("Action to perform"),
+        params: z.object({
+          x: z.number().optional().describe("X coordinate for click/scroll"),
+          y: z.number().optional().describe("Y coordinate for click/scroll"),
+          url: z.string().optional().describe("URL for navigation"),
+          selector: z.string().optional().describe("CSS selector for element targeting"),
+          text: z.string().optional().describe("Text to type"),
+          expression: z.string().optional().describe("JavaScript expression to evaluate (safe expressions only)"),
+          deltaX: z.number().optional().describe("Horizontal scroll amount"),
+          deltaY: z.number().optional().describe("Vertical scroll amount")
+        }).describe("Parameters for the action")
+      },
+      async ({ action, params }) => {
+        try {
+          // Connect to CDP on port 9222
+          const targetsResponse = await fetch('http://localhost:9222/json');
+          const targets = await targetsResponse.json();
+          
+          const pageTarget = targets.find((target: any) => target.type === 'page');
+          if (!pageTarget) {
+            throw new Error('No browser tab found. Make sure dev3000 is running with CDP monitoring.');
+          }
+
+          const wsUrl = pageTarget.webSocketDebuggerUrl;
+          
+          const result = await new Promise((resolve, reject) => {
+            // WebSocket imported at top of file
+            const ws = new WebSocket(wsUrl);
+            let messageId = 1;
+            
+            ws.on('open', async () => {
+              try {
+                let cdpResult;
+                
+                switch (action) {
+                  case 'click':
+                    if (!params.x || !params.y) {
+                      throw new Error('Click action requires x and y coordinates');
+                    }
+                    // Send mouse down and up events
+                    await sendCDPCommand(ws, messageId++, 'Input.dispatchMouseEvent', {
+                      type: 'mousePressed',
+                      x: params.x,
+                      y: params.y,
+                      button: 'left',
+                      clickCount: 1
+                    });
+                    await sendCDPCommand(ws, messageId++, 'Input.dispatchMouseEvent', {
+                      type: 'mouseReleased',
+                      x: params.x,
+                      y: params.y,
+                      button: 'left',
+                      clickCount: 1
+                    });
+                    cdpResult = { action: 'click', coordinates: { x: params.x, y: params.y } };
+                    break;
+                    
+                  case 'navigate':
+                    if (!params.url) {
+                      throw new Error('Navigate action requires url parameter');
+                    }
+                    // Basic URL validation
+                    if (!params.url.startsWith('http://') && !params.url.startsWith('https://')) {
+                      throw new Error('Only http:// and https:// URLs are allowed');
+                    }
+                    cdpResult = await sendCDPCommand(ws, messageId++, 'Page.navigate', { url: params.url });
+                    break;
+                    
+                  case 'screenshot':
+                    cdpResult = await sendCDPCommand(ws, messageId++, 'Page.captureScreenshot', {
+                      format: 'png',
+                      quality: 80
+                    });
+                    break;
+                    
+                  case 'evaluate':
+                    if (!params.expression) {
+                      throw new Error('Evaluate action requires expression parameter');
+                    }
+                    // Whitelist safe expressions only
+                    const safeExpressions = [
+                      /^document\.title$/,
+                      /^window\.location\.href$/,
+                      /^document\.querySelector\(['"][^'"]*['"]\)\.textContent$/,
+                      /^document\.body\.scrollHeight$/,
+                      /^window\.scrollY$/,
+                      /^window\.scrollX$/
+                    ];
+                    
+                    if (!safeExpressions.some(regex => regex.test(params.expression!))) {
+                      throw new Error('Expression not in whitelist. Only safe read-only expressions allowed.');
+                    }
+                    
+                    cdpResult = await sendCDPCommand(ws, messageId++, 'Runtime.evaluate', {
+                      expression: params.expression,
+                      returnByValue: true
+                    });
+                    break;
+                    
+                  case 'scroll':
+                    const scrollX = params.deltaX || 0;
+                    const scrollY = params.deltaY || 0;
+                    cdpResult = await sendCDPCommand(ws, messageId++, 'Input.dispatchMouseEvent', {
+                      type: 'mouseWheel',
+                      x: params.x || 500,
+                      y: params.y || 500,
+                      deltaX: scrollX,
+                      deltaY: scrollY
+                    });
+                    break;
+                    
+                  case 'type':
+                    if (!params.text) {
+                      throw new Error('Type action requires text parameter');
+                    }
+                    // Type each character
+                    for (const char of params.text) {
+                      await sendCDPCommand(ws, messageId++, 'Input.dispatchKeyEvent', {
+                        type: 'char',
+                        text: char
+                      });
+                    }
+                    cdpResult = { action: 'type', text: params.text };
+                    break;
+                    
+                  default:
+                    throw new Error(`Unsupported action: ${action}`);
+                }
+                
+                ws.close();
+                resolve(cdpResult);
+              } catch (error) {
+                ws.close();
+                reject(error);
+              }
+            });
+            
+            ws.on('error', reject);
+            
+            // Helper function to send CDP commands
+            async function sendCDPCommand(ws: any, id: number, method: string, params: any): Promise<any> {
+              return new Promise((cmdResolve, cmdReject) => {
+                const command = { id, method, params };
+                
+                const messageHandler = (data: any) => {
+                  const message = JSON.parse(data.toString());
+                  if (message.id === id) {
+                    ws.removeListener('message', messageHandler);
+                    if (message.error) {
+                      cmdReject(new Error(message.error.message));
+                    } else {
+                      cmdResolve(message.result);
+                    }
+                  }
+                };
+                
+                ws.on('message', messageHandler);
+                ws.send(JSON.stringify(command));
+                
+                // Command timeout
+                setTimeout(() => {
+                  ws.removeListener('message', messageHandler);
+                  cmdReject(new Error(`CDP command timeout: ${method}`));
+                }, 5000);
+              });
+            }
+          });
+          
+          return {
+            content: [
+              {
+                type: "text",
+                text: `Browser action '${action}' executed successfully. Result: ${JSON.stringify(result, null, 2)}`
+              }
+            ]
+          };
+          
+        } catch (error) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: `Browser action failed: ${error instanceof Error ? error.message : String(error)}`
+              }
+            ]
+          };
+        }
+      }
+    );
+}, {
+  // Server options
+}, {
+  basePath: "/api/mcp",
+  maxDuration: 60,
+  verboseLogs: true
 });
 
 export { handler as GET, handler as POST };

package/mcp-server/app/api/replay/route.ts

@@ -273,7 +273,7 @@ function generateCDPCommands(replayData: ReplayData, speed: number): CDPCommand[
         description: `Navigate to ${event.url}`
       });
     } else if (event.eventType === 'interaction') {
-      if (event.type === 'CLICK' && event.x !== undefined && event.y !== undefined) {
+      if ('type' in event && event.type === 'CLICK' && event.x !== undefined && event.y !== undefined) {
         // Mouse down
         commands.push({
           method: 'Input.dispatchMouseEvent',
@@ -301,7 +301,7 @@ function generateCDPCommands(replayData: ReplayData, speed: number): CDPCommand[
           delay: 50, // 50ms between down and up
           description: `Release click at (${event.x}, ${event.y})`
         });
-      } else if (event.type === 'SCROLL' && event.x !== undefined && event.y !== undefined) {
+      } else if ('type' in event && event.type === 'SCROLL' && event.x !== undefined && event.y !== undefined) {
         commands.push({
           method: 'Runtime.evaluate',
           params: {
@@ -310,7 +310,7 @@ function generateCDPCommands(replayData: ReplayData, speed: number): CDPCommand[
           delay: delay,
           description: `Scroll to (${event.x}, ${event.y})`
         });
-      } else if (event.type === 'KEY' && event.key) {
+      } else if ('type' in event && event.type === 'KEY' && event.key) {
         // Key down
         commands.push({
           method: 'Input.dispatchKeyEvent',
@@ -382,7 +382,7 @@ async function executeCDPCommands(commands: CDPCommand[]): Promise<any> {
         executeNext();
       });
       
-      ws.on('message', (data) => {
+      ws.on('message', (data: any) => {
         try {
           const response = JSON.parse(data.toString());
           if (response.id) {

package/mcp-server/app/logs/LogsClient.tsx

@@ -164,6 +164,7 @@ export default function LogsClient({ version }: LogsClientProps) {
   const [showFilters, setShowFilters] = useState(false);
   const [showReplayPreview, setShowReplayPreview] = useState(false);
   const [replayEvents, setReplayEvents] = useState<any[]>([]);
+  const [isRotatingLog, setIsRotatingLog] = useState(false);
   const [filters, setFilters] = useState({
     browser: true,
     server: true,
@@ -381,6 +382,43 @@ export default function LogsClient({ version }: LogsClientProps) {
     }
   };
 
+  const handleRotateLog = async () => {
+    if (!currentLogFile || isRotatingLog) return;
+    
+    setIsRotatingLog(true);
+    try {
+      const response = await fetch('/api/logs/rotate', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ currentLogPath: currentLogFile }),
+      });
+
+      if (response.ok) {
+        // Clear current logs from UI
+        setLogs([]);
+        setLastLogCount(0);
+        setLastFetched(null);
+        
+        // Reload available logs to show the new archived file
+        await loadAvailableLogs();
+        
+        // Start fresh polling
+        await loadInitialLogs();
+      } else {
+        const error = await response.json();
+        console.error('Failed to rotate log:', error);
+        alert('Failed to rotate log: ' + error.error);
+      }
+    } catch (error) {
+      console.error('Error rotating log:', error);
+      alert('Error rotating log');
+    } finally {
+      setIsRotatingLog(false);
+    }
+  };
+
   const filteredLogs = useMemo(() => {
     return logs.filter(entry => {
       // Check specific message types first (these override source filtering)
@@ -470,13 +508,25 @@ export default function LogsClient({ version }: LogsClientProps) {
                 )}
                 </div>
               ) : (
-                <span className="font-mono text-xs text-gray-600 px-3 py-1 whitespace-nowrap">
-                  {isInitialLoading && !currentLogFile ? (
-                    <div className="h-4 bg-gray-200 rounded animate-pulse" style={{width: '220px'}} />
-                  ) : (
-                    currentLogFile ? currentLogFile.split('/').pop() : 'dev3000.log'
+                <div className="flex items-center gap-2">
+                  <span className="font-mono text-xs text-gray-600 px-3 py-1 whitespace-nowrap">
+                    {isInitialLoading && !currentLogFile ? (
+                      <div className="h-4 bg-gray-200 rounded animate-pulse" style={{width: '220px'}} />
+                    ) : (
+                      currentLogFile ? currentLogFile.split('/').pop() : 'dev3000.log'
+                    )}
+                  </span>
+                  {currentLogFile && !isInitialLoading && (
+                    <button
+                      onClick={handleRotateLog}
+                      disabled={isRotatingLog}
+                      className="px-2 py-1 text-xs bg-orange-100 text-orange-700 hover:bg-orange-200 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                      title="Clear logs (rotate current log to archive and start fresh)"
+                    >
+                      {isRotatingLog ? '...' : 'Clear'}
+                    </button>
                   )}
-                </span>
+                </div>
               )}
               
               {logs.length > 0 && (

package/mcp-server/app/page.tsx

@@ -28,7 +28,7 @@ export default function HomePage() {
           </a>
           
           <a 
-            href="/api/mcp/http"
+            href="/api/mcp/mcp"
             className="block w-full bg-green-500 text-white text-center py-3 px-4 rounded hover:bg-green-600 transition-colors"
           >
             🤖 MCP Endpoint

package/mcp-server/package.json

@@ -8,16 +8,18 @@
     "start": "next start"
   },
   "dependencies": {
+    "mcp-handler": "^1.0.2",
     "next": "^15.5.1-canary.13",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "mcp-handler": "^1.0.2",
+    "ws": "^8.18.3",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "@types/ws": "^8.5.12",
     "typescript": "^5.0.0"
   }
 }