@dynamicu/chromedebug-mcp 2.2.0

package/src/mcp/handlers/workflow-tool-handler.js

@@ -0,0 +1,636 @@
+/**
+ * Workflow Tool Handler - Handles workflow recording and restore point tools
+ * Extracted from original index.js with preserved functionality
+ * Now uses HTTP client for authenticated access to recordings
+ */
+
+import { httpClient } from '../../services/http-client.js';
+
+export class WorkflowToolHandler {
+  constructor(chromeController) {
+    this.chromeController = chromeController;
+    this.useHttpClient = true; // Flag to use HTTP client instead of direct database access
+  }
+
+  /**
+   * Handles workflow-related tool calls
+   * @param {string} name - Tool name
+   * @param {Object} args - Tool arguments
+   * @returns {Object} Tool execution result
+   */
+  async handle(name, args) {
+    switch (name) {
+      case 'get_workflow_recording':
+        return await this.handleGetWorkflowRecording(args);
+      
+      case 'list_workflow_recordings':
+        return await this.handleListWorkflowRecordings();
+
+      case 'save_restore_point':
+        return await this.handleSaveRestorePoint(args);
+
+      case 'restore_from_point':
+        return await this.handleRestoreFromPoint(args);
+
+      case 'list_restore_points':
+        return await this.handleListRestorePoints(args);
+
+      case 'play_workflow_recording':
+        return await this.handlePlayWorkflowRecording(args);
+
+      case 'play_workflow_by_name':
+        return await this.handlePlayWorkflowByName(args);
+
+      case 'get_workflow_function_traces':
+        return await this.handleGetWorkflowFunctionTraces(args);
+
+      case 'get_workflow_errors':
+        return await this.handleGetWorkflowErrors(args);
+
+      case 'get_workflow_summary':
+        return await this.handleGetWorkflowSummary(args);
+
+      case 'get_workflow_actions_filtered':
+        return await this.handleGetWorkflowActionsFiltered(args);
+
+      default:
+        throw new Error(`Unknown workflow tool: ${name}`);
+    }
+  }
+
+  /**
+   * Handle get workflow recording
+   * @param {Object} args - Arguments with sessionId
+   * @returns {Object} Formatted workflow recording
+   */
+  async handleGetWorkflowRecording(args) {
+    if (!args.sessionId) {
+      throw new Error('Session ID is required');
+    }
+    
+    let recording;
+    
+    try {
+      if (this.useHttpClient) {
+        recording = await httpClient.getWorkflowRecording(args.sessionId);
+      } else {
+        recording = await this.chromeController.getWorkflowRecording(args.sessionId);
+      }
+    } catch (error) {
+      console.warn('[WorkflowToolHandler] HTTP client failed, falling back to direct access:', error.message);
+      recording = await this.chromeController.getWorkflowRecording(args.sessionId);
+    }
+    
+    if (recording.error) {
+      throw new Error(recording.error);
+    }
+    
+    const formattedRecording = {
+      sessionId: recording.sessionId,
+      url: recording.url,
+      title: recording.title,
+      timestamp: new Date(recording.timestamp).toISOString(),
+      totalActions: recording.totalActions,
+      actions: recording.actions || [],
+      logs: recording.logs || []
+    };
+
+    return formattedRecording;
+  }
+
+  /**
+   * Handle list workflow recordings
+   * @returns {Object} List of workflow recordings
+   */
+  async handleListWorkflowRecordings() {
+    let result;
+    
+    try {
+      if (this.useHttpClient) {
+        result = await httpClient.listWorkflowRecordings();
+      } else {
+        result = await this.chromeController.listWorkflowRecordings();
+      }
+    } catch (error) {
+      console.warn('[WorkflowToolHandler] HTTP client failed, falling back to direct access:', error.message);
+      result = await this.chromeController.listWorkflowRecordings();
+    }
+    
+    const recordings = result.recordings || [];
+    
+    if (recordings.length === 0) {
+      return {
+        message: 'No workflow recordings found.',
+        recordings: []
+      };
+    }
+    
+    const formattedRecordings = recordings.map((recording, index) => ({
+      index: index + 1,
+      name: recording.name || recording.session_id,
+      sessionId: recording.session_id,
+      url: recording.url,
+      title: recording.title,
+      totalActions: recording.total_actions,
+      timestamp: new Date(recording.timestamp).toISOString(),
+      hasScreenshots: !!recording.screenshot_settings
+    }));
+
+    return {
+      message: `Found ${recordings.length} workflow recordings`,
+      count: recordings.length,
+      recordings: formattedRecordings
+    };
+  }
+
+  /**
+   * Handle save restore point
+   * @param {Object} args - Arguments with workflowId, actionIndex, description
+   * @returns {Object} Save result
+   */
+  async handleSaveRestorePoint(args) {
+    if (!args.workflowId) {
+      throw new Error('Workflow ID is required');
+    }
+    
+    // Capture current browser state
+    const page = await this.chromeController.getPage();
+    if (!page) {
+      throw new Error('No page available. Please launch Chrome and navigate to a URL first.');
+    }
+    
+    // Execute content script to capture state
+    const captureResult = await page.evaluate(() => {
+      const captureState = () => {
+        const state = {
+          url: window.location.href,
+          title: document.title,
+          domSnapshot: {
+            html: document.documentElement.outerHTML,
+            formData: {},
+            checkboxStates: {},
+            radioStates: {},
+            selectValues: {},
+            textareaValues: {},
+          },
+          scrollX: window.scrollX,
+          scrollY: window.scrollY,
+          localStorage: {},
+          sessionStorage: {},
+        };
+        
+        // Capture form values
+        document.querySelectorAll('input').forEach(input => {
+          const id = input.id || input.name || Math.random().toString(36);
+          if (input.type === 'checkbox') {
+            state.domSnapshot.checkboxStates[id] = input.checked;
+          } else if (input.type === 'radio') {
+            state.domSnapshot.radioStates[id] = {
+              checked: input.checked,
+              value: input.value,
+            };
+          } else if (input.type !== 'file' && input.type !== 'password') {
+            state.domSnapshot.formData[id] = input.value;
+          }
+        });
+        
+        // Capture select values
+        document.querySelectorAll('select').forEach(select => {
+          const id = select.id || select.name || Math.random().toString(36);
+          state.domSnapshot.selectValues[id] = select.value;
+        });
+        
+        // Capture textarea values
+        document.querySelectorAll('textarea').forEach(textarea => {
+          const id = textarea.id || textarea.name || Math.random().toString(36);
+          state.domSnapshot.textareaValues[id] = textarea.value;
+        });
+        
+        // Capture storage
+        try {
+          for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            state.localStorage[key] = localStorage.getItem(key);
+          }
+        } catch (e) {}
+        
+        try {
+          for (let i = 0; i < sessionStorage.length; i++) {
+            const key = sessionStorage.key(i);
+            state.sessionStorage[key] = sessionStorage.getItem(key);
+          }
+        } catch (e) {}
+        
+        return state;
+      };
+      
+      return captureState();
+    });
+    
+    // Get cookies
+    const cookies = await page.cookies();
+    captureResult.cookies = cookies;
+    
+    // Save restore point
+    const restoreData = {
+      workflowId: args.workflowId,
+      actionIndex: args.actionIndex || 0,
+      ...captureResult,
+      description: args.description,
+      timestamp: Date.now(),
+    };
+    
+    const result = await this.chromeController.saveRestorePoint(restoreData);
+    
+    return {
+      message: 'Restore point saved successfully!',
+      restorePointId: result.restorePointId,
+      workflowId: args.workflowId,
+      description: args.description || 'N/A'
+    };
+  }
+
+  /**
+   * Handle restore from point
+   * @param {Object} args - Arguments with restorePointId
+   * @returns {Object} Restore result
+   */
+  async handleRestoreFromPoint(args) {
+    if (!args.restorePointId) {
+      throw new Error('Restore point ID is required');
+    }
+    
+    // Get restore point data
+    const restoreData = await this.chromeController.getRestorePoint(args.restorePointId);
+    if (restoreData.error) {
+      throw new Error(restoreData.error);
+    }
+    
+    const page = await this.chromeController.getPage();
+    if (!page) {
+      throw new Error('No page available. Please launch Chrome first.');
+    }
+    
+    // Navigate if needed
+    const currentUrl = await page.url();
+    if (currentUrl !== restoreData.url) {
+      await page.goto(restoreData.url, { waitUntil: 'networkidle0' });
+    }
+    
+    // Restore state
+    await page.evaluate((data) => {
+      // Restore storage
+      try {
+        localStorage.clear();
+        Object.entries(data.localStorage).forEach(([key, value]) => {
+          localStorage.setItem(key, value);
+        });
+      } catch (e) {}
+      
+      try {
+        sessionStorage.clear();
+        Object.entries(data.sessionStorage).forEach(([key, value]) => {
+          sessionStorage.setItem(key, value);
+        });
+      } catch (e) {}
+      
+      // Restore form values
+      const snapshot = data.domSnapshot;
+      Object.entries(snapshot.formData).forEach(([id, value]) => {
+        const element = document.getElementById(id) || document.querySelector(`[name="${id}"]`);
+        if (element) element.value = value;
+      });
+      
+      Object.entries(snapshot.checkboxStates).forEach(([id, checked]) => {
+        const element = document.getElementById(id) || document.querySelector(`[name="${id}"]`);
+        if (element) element.checked = checked;
+      });
+      
+      Object.entries(snapshot.radioStates).forEach(([id, state]) => {
+        const element = document.getElementById(id) || document.querySelector(`[name="${id}"]`);
+        if (element && state.checked) element.checked = true;
+      });
+      
+      Object.entries(snapshot.selectValues).forEach(([id, value]) => {
+        const element = document.getElementById(id) || document.querySelector(`[name="${id}"]`);
+        if (element) element.value = value;
+      });
+      
+      Object.entries(snapshot.textareaValues).forEach(([id, value]) => {
+        const element = document.getElementById(id) || document.querySelector(`[name="${id}"]`);
+        if (element) element.value = value;
+      });
+      
+      // Restore scroll
+      window.scrollTo(data.scrollX, data.scrollY);
+    }, restoreData);
+    
+    // Restore cookies
+    if (restoreData.cookies && restoreData.cookies.length > 0) {
+      for (const cookie of restoreData.cookies) {
+        await page.setCookie(cookie);
+      }
+    }
+    
+    return {
+      message: 'Successfully restored from restore point!',
+      url: restoreData.url,
+      title: restoreData.title,
+      timestamp: new Date(restoreData.timestamp).toISOString()
+    };
+  }
+
+  /**
+   * Handle list restore points
+   * @param {Object} args - Arguments with workflowId
+   * @returns {Object} List of restore points
+   */
+  async handleListRestorePoints(args) {
+    if (!args.workflowId) {
+      throw new Error('Workflow ID is required');
+    }
+    
+    const restorePoints = await this.chromeController.listRestorePoints(args.workflowId);
+    
+    if (restorePoints.length === 0) {
+      return {
+        message: `No restore points found for workflow: ${args.workflowId}`,
+        workflowId: args.workflowId,
+        restorePoints: []
+      };
+    }
+    
+    const formattedPoints = restorePoints.map((rp, index) => ({
+      index: index + 1,
+      id: rp.id,
+      actionIndex: rp.actionIndex,
+      url: rp.url,
+      title: rp.title || 'N/A',
+      description: rp.description || 'N/A',
+      timestamp: new Date(rp.timestamp).toISOString()
+    }));
+
+    return {
+      message: `Found ${restorePoints.length} restore points for workflow ${args.workflowId}`,
+      workflowId: args.workflowId,
+      count: restorePoints.length,
+      restorePoints: formattedPoints
+    };
+  }
+
+  /**
+   * Handle play workflow recording
+   * @param {Object} args - Arguments with sessionId and speed
+   * @returns {Object} Playback result
+   */
+  async handlePlayWorkflowRecording(args) {
+    if (!args.sessionId) {
+      throw new Error('Session ID is required');
+    }
+    
+    const speed = args.speed || 1;
+    const result = await this.chromeController.playWorkflowRecording(args.sessionId, speed);
+    
+    return {
+      message: 'Workflow playback completed',
+      sessionId: args.sessionId,
+      speed: speed,
+      result: result
+    };
+  }
+
+  /**
+   * Handle play workflow by name
+   * @param {Object} args - Arguments with name and speed
+   * @returns {Object} Playback result
+   */
+  async handlePlayWorkflowByName(args) {
+    if (!args.name) {
+      throw new Error('Workflow name is required');
+    }
+    
+    const speed = args.speed || 1;
+    const result = await this.chromeController.playWorkflowByName(args.name, speed);
+    
+    return {
+      message: 'Workflow playback completed',
+      workflowName: args.name,
+      speed: speed,
+      result: result
+    };
+  }
+
+  /**
+   * Get only function execution traces from a workflow
+   * @param {Object} args - Arguments with sessionId, includeStack, limit
+   * @returns {Object} Function traces
+   */
+  async handleGetWorkflowFunctionTraces(args) {
+    if (!args.sessionId) {
+      throw new Error('Session ID is required');
+    }
+
+    // Get the full recording first
+    const recording = await this.chromeController.getWorkflowRecording(args.sessionId);
+    if (recording.error) {
+      throw new Error(recording.error);
+    }
+
+    // Filter for function traces only
+    let functionTraces = recording.actions.filter(action => action.type === 'function-trace');
+    
+    // Apply limit if specified
+    if (args.limit && args.limit > 0) {
+      functionTraces = functionTraces.slice(0, args.limit);
+    }
+
+    // Remove stack traces if not requested
+    if (!args.includeStack) {
+      functionTraces = functionTraces.map(trace => {
+        const { stack, ...traceWithoutStack } = trace;
+        return traceWithoutStack;
+      });
+    }
+
+    return {
+      sessionId: args.sessionId,
+      totalFunctionTraces: functionTraces.length,
+      url: recording.url,
+      title: recording.title,
+      functionTraces: functionTraces
+    };
+  }
+
+  /**
+   * Get only error logs and error-related actions
+   * @param {Object} args - Arguments with sessionId, includeWarnings
+   * @returns {Object} Error information
+   */
+  async handleGetWorkflowErrors(args) {
+    if (!args.sessionId) {
+      throw new Error('Session ID is required');
+    }
+
+    const recording = await this.chromeController.getWorkflowRecording(args.sessionId);
+    if (recording.error) {
+      throw new Error(recording.error);
+    }
+
+    // Filter logs for errors (and optionally warnings)
+    let errorLogs = recording.logs.filter(log => log.level === 'error');
+    if (args.includeWarnings) {
+      const warningLogs = recording.logs.filter(log => log.level === 'warn');
+      errorLogs = [...errorLogs, ...warningLogs];
+    }
+
+    // Sort by timestamp
+    errorLogs.sort((a, b) => a.timestamp - b.timestamp);
+
+    // Find actions that happened around error times (within 1 second)
+    const errorRelatedActions = [];
+    for (const errorLog of errorLogs) {
+      const nearbyActions = recording.actions.filter(action => 
+        Math.abs(action.timestamp - errorLog.timestamp) < 1000
+      );
+      if (nearbyActions.length > 0) {
+        errorRelatedActions.push({
+          error: errorLog,
+          nearbyActions: nearbyActions
+        });
+      }
+    }
+
+    return {
+      sessionId: args.sessionId,
+      url: recording.url,
+      title: recording.title,
+      totalErrors: errorLogs.length,
+      errorLogs: errorLogs,
+      errorRelatedActions: errorRelatedActions
+    };
+  }
+
+  /**
+   * Get a concise summary of a workflow recording
+   * @param {Object} args - Arguments with sessionId
+   * @returns {Object} Workflow summary
+   */
+  async handleGetWorkflowSummary(args) {
+    if (!args.sessionId) {
+      throw new Error('Session ID is required');
+    }
+
+    const recording = await this.chromeController.getWorkflowRecording(args.sessionId);
+    if (recording.error) {
+      throw new Error(recording.error);
+    }
+
+    // Count action types
+    const actionCounts = {};
+    for (const action of recording.actions) {
+      actionCounts[action.type] = (actionCounts[action.type] || 0) + 1;
+    }
+
+    // Count log levels
+    const logCounts = {};
+    for (const log of recording.logs) {
+      logCounts[log.level] = (logCounts[log.level] || 0) + 1;
+    }
+
+    // Find unique components from function traces
+    const uniqueComponents = new Set();
+    const functionTraces = recording.actions.filter(a => a.type === 'function-trace');
+    functionTraces.forEach(trace => {
+      if (trace.component) {
+        uniqueComponents.add(trace.component);
+      }
+    });
+
+    // Calculate duration
+    const startTime = Math.min(...recording.actions.map(a => a.timestamp));
+    const endTime = Math.max(...recording.actions.map(a => a.timestamp));
+    const durationMs = endTime - startTime;
+
+    return {
+      sessionId: args.sessionId,
+      name: recording.name,
+      url: recording.url,
+      title: recording.title,
+      timestamp: recording.timestamp,
+      duration: {
+        ms: durationMs,
+        seconds: (durationMs / 1000).toFixed(2),
+        readable: `${Math.floor(durationMs / 1000)}s`
+      },
+      totalActions: recording.actions.length,
+      actionBreakdown: actionCounts,
+      totalLogs: recording.logs.length,
+      logBreakdown: logCounts,
+      hasErrors: (logCounts.error || 0) > 0,
+      errorCount: logCounts.error || 0,
+      warningCount: logCounts.warn || 0,
+      functionTraceCount: actionCounts['function-trace'] || 0,
+      uniqueComponentsTraced: Array.from(uniqueComponents),
+      userInteractions: {
+        clicks: actionCounts.click || 0,
+        inputs: actionCounts.input || 0,
+        keypresses: actionCounts.keypress || 0,
+        scrolls: actionCounts.scroll || 0
+      }
+    };
+  }
+
+  /**
+   * Get filtered workflow actions
+   * @param {Object} args - Arguments with sessionId, actionTypes, startIndex, limit, includeDetails
+   * @returns {Object} Filtered actions
+   */
+  async handleGetWorkflowActionsFiltered(args) {
+    if (!args.sessionId) {
+      throw new Error('Session ID is required');
+    }
+
+    const recording = await this.chromeController.getWorkflowRecording(args.sessionId);
+    if (recording.error) {
+      throw new Error(recording.error);
+    }
+
+    let filteredActions = recording.actions;
+
+    // Filter by action types if specified
+    if (args.actionTypes && args.actionTypes.length > 0) {
+      filteredActions = filteredActions.filter(action => 
+        args.actionTypes.includes(action.type)
+      );
+    }
+
+    // Apply pagination
+    const startIndex = args.startIndex || 0;
+    const limit = args.limit || 100;
+    const paginatedActions = filteredActions.slice(startIndex, startIndex + limit);
+
+    // Simplify actions if details not requested
+    let resultActions = paginatedActions;
+    if (!args.includeDetails) {
+      resultActions = paginatedActions.map(action => ({
+        type: action.type,
+        timestamp: action.timestamp,
+        component: action.component,
+        selector: action.selector,
+        value: action.value,
+        text: action.text
+      }));
+    }
+
+    return {
+      sessionId: args.sessionId,
+      url: recording.url,
+      title: recording.title,
+      totalMatchingActions: filteredActions.length,
+      startIndex: startIndex,
+      returnedCount: resultActions.length,
+      hasMore: startIndex + limit < filteredActions.length,
+      actions: resultActions
+    };
+  }
+}

package/src/mcp/server.js

@@ -0,0 +1,68 @@
+import { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { 
+  ListToolsRequestSchema,
+  CallToolRequestSchema
+} from '@modelcontextprotocol/sdk/types.js';
+
+import { ToolRegistry } from './tools/index.js';
+import { RequestHandler } from './handlers/request-handler.js';
+
+/**
+ * MCP Server module responsible for server initialization and configuration
+ * Handles the Model Context Protocol server setup and request routing
+ */
+export class MCPServer {
+  constructor(chromeController) {
+    this.chromeController = chromeController;
+    this.toolRegistry = new ToolRegistry();
+    this.requestHandler = new RequestHandler(chromeController, this.toolRegistry);
+    
+    this.server = new Server(
+      {
+        name: 'chrome-pilot',
+        version: '1.0.0',
+      },
+      {
+        capabilities: {
+          tools: {},
+        },
+      }
+    );
+    
+    this.setupHandlers();
+  }
+
+  /**
+   * Sets up the MCP server request handlers
+   */
+  setupHandlers() {
+    // List tools handler
+    this.server.setRequestHandler(ListToolsRequestSchema, async () => {
+      return {
+        tools: this.toolRegistry.getAllTools(),
+      };
+    });
+
+    // Call tool handler - delegates to RequestHandler
+    this.server.setRequestHandler(CallToolRequestSchema, async (request) => {
+      return await this.requestHandler.handleToolCall(request);
+    });
+  }
+
+  /**
+   * Starts the MCP server with stdio transport
+   */
+  async start() {
+    const transport = new StdioServerTransport();
+    await this.server.connect(transport);
+    console.error('Chrome Debug MCP server running on stdio');
+  }
+
+  /**
+   * Gets the server instance for external use
+   */
+  getServer() {
+    return this.server;
+  }
+}