vibecodingmachine-core 1.0.0 → 1.0.1

package/src/ide-integration/cdp-manager.js

@@ -1,321 +1,321 @@
-import CDP from 'chrome-remote-interface';
-
-// Timeout utility function
-function timeout(ms, promise) {
-  return Promise.race([
-    promise,
-    new Promise((_, reject) =>
-      setTimeout(() => reject(new Error(`Operation timed out after ${ms}ms`)), ms)
-    )
-  ]);
-}
-
-export class CDPManager {
-  constructor() {
-    this.ports = {
-      vscode: 9222,
-      cursor: 9225,
-      windsurf: 9224
-    };
-  }
-
-  /**
-   * Connect to an IDE via CDP
-   * @param {string} ide - The IDE name (vscode, cursor, windsurf)
-   * @param {number} port - The CDP port (optional, will use default if not provided)
-   * @returns {Promise<Object>} CDP client and domains
-   */
-  async connectToIDE(ide, port = null) {
-    const targetPort = port || this.ports[ide];
-
-    if (!targetPort) {
-      throw new Error(`No CDP port configured for IDE: ${ide}`);
-    }
-
-    try {
-      console.log(`🔍 Connecting to ${ide} on port ${targetPort}...`);
-
-      const targets = await timeout(5000, CDP.List({ port: targetPort }));
-
-      if (!targets || targets.length === 0) {
-        throw new Error(`Could not find ${ide}. Make sure ${ide} is running with --remote-debugging-port=${targetPort}`);
-      }
-
-      // Find the appropriate target
-      let target;
-      if (ide === 'vscode') {
-        target = targets.find(t => t.url && t.url.includes('workbench')) || targets[0];
-      } else {
-        target = targets[0];
-      }
-
-      if (!target) {
-        throw new Error(`No suitable target found for ${ide}`);
-      }
-
-      console.log(`Found ${targets.length} targets, using: ${target.title}`);
-
-      const client = await CDP({ port: targetPort, target });
-      const { Runtime, Input, Page, DOM } = client;
-
-      await Runtime.enable();
-      await DOM.enable();
-
-      if (Page && Page.bringToFront) {
-        try {
-          await Page.bringToFront();
-        } catch (error) {
-          console.log('Could not bring page to front:', error.message);
-        }
-      }
-
-      return {
-        client,
-        Runtime,
-        Input,
-        Page,
-        DOM,
-        target
-      };
-    } catch (error) {
-      console.error(`CDP connection error for ${ide}:`, error);
-      throw error;
-    }
-  }
-
-  /**
-   * Send text to an IDE via CDP
-   * @param {string} text - The text to send
-   * @param {string} ide - The IDE name
-   * @returns {Promise<Object>} Result of the operation
-   */
-  async sendText(text, ide) {
-    if (typeof text !== 'string') {
-      return {
-        success: false,
-        error: `Invalid text type: ${typeof text}. Expected string.`
-      };
-    }
-
-    const ideName = ide === 'windsurf' ? 'Windsurf' : ide === 'cursor' ? 'Cursor' : 'VS Code';
-
-    console.log(`🔍 sendText: Starting debug session`);
-    console.log(`📋 IDE: ${ideName} (${ide})`);
-    console.log(`💬 Text: "${text.substring(0, 100)}${text.length > 100 ? '...' : ''}"`);
-
-    try {
-      const { client, Runtime, Input } = await this.connectToIDE(ide);
-
-      // VS Code specific handling
-      if (ide === 'vscode') {
-        return await this.sendTextToVSCode(text, Runtime, Input);
-      }
-
-      // For other IDEs, use basic CDP approach
-      return await this.sendTextBasic(text, Runtime, Input);
-
-    } catch (error) {
-      console.error(`${ideName} CDP error:`, error);
-      return {
-        success: false,
-        error: `${ideName} CDP error: ${error.message}`
-      };
-    }
-  }
-
-  /**
-   * Send text to VS Code using the working approach
-   * @param {string} text - The text to send
-   * @param {Object} Runtime - CDP Runtime domain
-   * @param {Object} Input - CDP Input domain
-   * @returns {Promise<Object>} Result of the operation
-   */
-  async sendTextToVSCode(text, Runtime, Input) {
-    try {
-      try {
-        const isDarwin = process.platform === 'darwin';
-        const modifiers = (isDarwin ? 4 /* Meta */ | 2 /* Ctrl */ : 2 /* Ctrl */);
-        await Input.dispatchKeyEvent({ type: 'keyDown', key: 'I', text: 'I', modifiers });
-        await Input.dispatchKeyEvent({ type: 'keyUp', key: 'I', text: 'I', modifiers });
-      } catch (error) {
-        console.log('Could not activate chat view:', error.message);
-      }
-
-      const textToSend = String(text).slice(0, 4000);
-
-      // Use clipboard approach to avoid focus issues
-      console.log('Copying text to clipboard:', textToSend);
-
-      // Note: In VSCode extension context, we'll need to handle clipboard differently
-      // For now, we'll use character-by-character typing
-
-      // Type the text character by character
-      console.log('Starting character-by-character typing...');
-      for (let i = 0; i < textToSend.length; i++) {
-        const char = textToSend[i];
-        await Input.dispatchKeyEvent({ type: 'keyDown', key: char, text: char });
-        await Input.dispatchKeyEvent({ type: 'keyUp', key: char, text: char });
-        await new Promise(resolve => setTimeout(resolve, 20)); // Small delay between characters
-      }
-      console.log('Finished character-by-character typing');
-
-      // Submit the message
-      await this.submitMessage(Input, Runtime);
-
-      return {
-        success: true,
-        method: 'cdp-character-typing',
-        message: `Message sent to VS Code: ${text}`,
-        note: 'Message sent via CDP with character-by-character typing'
-      };
-
-    } catch (error) {
-      console.error('VS Code CDP error:', error);
-      return { success: false, error: `VS Code CDP error: ${error.message}` };
-    }
-  }
-
-  /**
-   * Send text using basic CDP approach
-   * @param {string} text - The text to send
-   * @param {Object} Runtime - CDP Runtime domain
-   * @param {Object} Input - CDP Input domain
-   * @returns {Promise<Object>} Result of the operation
-   */
-  async sendTextBasic(text, Runtime, Input) {
-    try {
-      const textToSend = String(text).slice(0, 4000);
-
-      // Type the text character by character
-      console.log('Starting character-by-character typing...');
-      for (let i = 0; i < textToSend.length; i++) {
-        const char = textToSend[i];
-        await Input.dispatchKeyEvent({ type: 'keyDown', key: char, text: char });
-        await Input.dispatchKeyEvent({ type: 'keyUp', key: char, text: char });
-        await new Promise(resolve => setTimeout(resolve, 20));
-      }
-      console.log('Finished character-by-character typing');
-
-      // Submit the message
-      await this.submitMessage(Input, Runtime);
-
-      return {
-        success: true,
-        method: 'cdp-basic',
-        message: `Message sent: ${text}`,
-        note: 'Message sent via basic CDP approach'
-      };
-
-    } catch (error) {
-      console.error('Basic CDP error:', error);
-      return { success: false, error: `Basic CDP error: ${error.message}` };
-    }
-  }
-
-  /**
-   * Submit a message using multiple methods
-   * @param {Object} Input - CDP Input domain
-   * @param {Object} Runtime - CDP Runtime domain
-   * @returns {Promise<void>}
-   */
-  async submitMessage(Input, Runtime) {
-    // Wait a moment then try multiple ways to submit the message
-    setTimeout(async () => {
-      try {
-        console.log('Attempting to submit message...');
-
-        // Method 1: Press Enter
-        console.log('Method 1: Pressing Enter...');
-        await Input.dispatchKeyEvent({ type: 'keyDown', key: 'Enter' });
-        await Input.dispatchKeyEvent({ type: 'keyUp', key: 'Enter' });
-        await new Promise(resolve => setTimeout(resolve, 100));
-
-        // Method 2: Try clicking the send button
-        console.log('Method 2: Looking for send button...');
-        const clickSendButton = `(() => {
-          const sendButton = document.querySelector('[aria-label*="Send"]') ||
-                            document.querySelector('[title*="Send"]') ||
-                            document.querySelector('button[aria-label*="submit"]') ||
-                            document.querySelector('button[title*="submit"]') ||
-                            document.querySelector('[aria-label*="Send message"]') ||
-                            document.querySelector('[title*="Send message"]') ||
-                            document.querySelector('button[aria-label*="Send message"]') ||
-                            document.querySelector('button[title*="Send message"]') ||
-                            document.querySelector('button[aria-label*="Submit"]') ||
-                            document.querySelector('button[title*="Submit"]') ||
-                            document.querySelector('button[aria-label*="Send request"]') ||
-                            document.querySelector('button[title*="Send request"]') ||
-                            document.querySelector('button svg[data-icon*="send"]')?.closest('button') ||
-                            document.querySelector('button svg[data-icon*="play"]')?.closest('button') ||
-                            document.querySelector('button svg[data-icon*="arrow"]')?.closest('button') ||
-                            document.querySelector('button.send-button') ||
-                            document.querySelector('button.submit-button') ||
-                            document.querySelector('button[class*="send"]') ||
-                            document.querySelector('button[class*="submit"]');
-
-          if (sendButton) {
-            console.log('Found send button:', sendButton.getAttribute('aria-label') || sendButton.getAttribute('title') || sendButton.className);
-            sendButton.click();
-            return true;
-          } else {
-            console.log('No send button found');
-            return false;
-          }
-        })()`;
-
-        const { result: clickRes } = await Runtime.evaluate({ expression: clickSendButton, returnByValue: true });
-        const clickResult = clickRes && (clickRes.value ?? clickRes.unserializableValue) ? (clickRes.value ?? clickRes.unserializableValue) : false;
-        console.log('Send button click result:', clickResult);
-
-        // Method 3: Try Cmd+Enter as alternative
-        if (!clickResult) {
-          console.log('Method 3: Trying Cmd+Enter...');
-          const isDarwin = process.platform === 'darwin';
-          const enterMods = isDarwin ? 4 /* Meta */ : 2 /* Ctrl */;
-          await Input.dispatchKeyEvent({ type: 'keyDown', key: 'Enter', text: 'Enter', modifiers: enterMods });
-          await Input.dispatchKeyEvent({ type: 'keyUp', key: 'Enter', text: 'Enter', modifiers: enterMods });
-        }
-
-        console.log('All submission methods attempted');
-      } catch (error) {
-        console.log('Submission failed:', error.message);
-      }
-    }, 300);
-  }
-
-  /**
-   * Read chat text from an IDE
-   * @param {string} ide - The IDE name
-   * @returns {Promise<string>} The chat text
-   */
-  async readChatText(ide) {
-    try {
-      const { Runtime } = await this.connectToIDE(ide);
-
-      const expression = `(() => {
-        try {
-          // Look for chat messages in various possible locations
-          const chatMessages = document.querySelectorAll('[class*="message"], [class*="chat"], [class*="conversation"]');
-          const messages = [];
-
-          chatMessages.forEach(msg => {
-            const text = msg.textContent || msg.innerText;
-            if (text && text.trim()) {
-              messages.push(text.trim());
-            }
-          });
-
-          return messages.join('\\n\\n');
-        } catch (error) {
-          return 'Error reading chat: ' + error.message;
-        }
-      })()`;
-
-      const { result } = await Runtime.evaluate({ expression, returnByValue: true });
-      return result.value || '[]';
-    } catch (error) {
-      console.error(`Error reading chat from ${ide}:`, error);
-      return `Error: ${error.message}`;
-    }
-  }
-}
+import CDP from 'chrome-remote-interface';
+
+// Timeout utility function
+function timeout(ms, promise) {
+  return Promise.race([
+    promise,
+    new Promise((_, reject) =>
+      setTimeout(() => reject(new Error(`Operation timed out after ${ms}ms`)), ms)
+    )
+  ]);
+}
+
+export class CDPManager {
+  constructor() {
+    this.ports = {
+      vscode: 9222,
+      cursor: 9225,
+      windsurf: 9224
+    };
+  }
+
+  /**
+   * Connect to an IDE via CDP
+   * @param {string} ide - The IDE name (vscode, cursor, windsurf)
+   * @param {number} port - The CDP port (optional, will use default if not provided)
+   * @returns {Promise<Object>} CDP client and domains
+   */
+  async connectToIDE(ide, port = null) {
+    const targetPort = port || this.ports[ide];
+
+    if (!targetPort) {
+      throw new Error(`No CDP port configured for IDE: ${ide}`);
+    }
+
+    try {
+      console.log(`🔍 Connecting to ${ide} on port ${targetPort}...`);
+
+      const targets = await timeout(5000, CDP.List({ port: targetPort }));
+
+      if (!targets || targets.length === 0) {
+        throw new Error(`Could not find ${ide}. Make sure ${ide} is running with --remote-debugging-port=${targetPort}`);
+      }
+
+      // Find the appropriate target
+      let target;
+      if (ide === 'vscode') {
+        target = targets.find(t => t.url && t.url.includes('workbench')) || targets[0];
+      } else {
+        target = targets[0];
+      }
+
+      if (!target) {
+        throw new Error(`No suitable target found for ${ide}`);
+      }
+
+      console.log(`Found ${targets.length} targets, using: ${target.title}`);
+
+      const client = await CDP({ port: targetPort, target });
+      const { Runtime, Input, Page, DOM } = client;
+
+      await Runtime.enable();
+      await DOM.enable();
+
+      if (Page && Page.bringToFront) {
+        try {
+          await Page.bringToFront();
+        } catch (error) {
+          console.log('Could not bring page to front:', error.message);
+        }
+      }
+
+      return {
+        client,
+        Runtime,
+        Input,
+        Page,
+        DOM,
+        target
+      };
+    } catch (error) {
+      console.error(`CDP connection error for ${ide}:`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Send text to an IDE via CDP
+   * @param {string} text - The text to send
+   * @param {string} ide - The IDE name
+   * @returns {Promise<Object>} Result of the operation
+   */
+  async sendText(text, ide) {
+    if (typeof text !== 'string') {
+      return {
+        success: false,
+        error: `Invalid text type: ${typeof text}. Expected string.`
+      };
+    }
+
+    const ideName = ide === 'windsurf' ? 'Windsurf' : ide === 'cursor' ? 'Cursor' : 'VS Code';
+
+    console.log(`🔍 sendText: Starting debug session`);
+    console.log(`📋 IDE: ${ideName} (${ide})`);
+    console.log(`💬 Text: "${text.substring(0, 100)}${text.length > 100 ? '...' : ''}"`);
+
+    try {
+      const { client, Runtime, Input } = await this.connectToIDE(ide);
+
+      // VS Code specific handling
+      if (ide === 'vscode') {
+        return await this.sendTextToVSCode(text, Runtime, Input);
+      }
+
+      // For other IDEs, use basic CDP approach
+      return await this.sendTextBasic(text, Runtime, Input);
+
+    } catch (error) {
+      console.error(`${ideName} CDP error:`, error);
+      return {
+        success: false,
+        error: `${ideName} CDP error: ${error.message}`
+      };
+    }
+  }
+
+  /**
+   * Send text to VS Code using the working approach
+   * @param {string} text - The text to send
+   * @param {Object} Runtime - CDP Runtime domain
+   * @param {Object} Input - CDP Input domain
+   * @returns {Promise<Object>} Result of the operation
+   */
+  async sendTextToVSCode(text, Runtime, Input) {
+    try {
+      try {
+        const isDarwin = process.platform === 'darwin';
+        const modifiers = (isDarwin ? 4 /* Meta */ | 2 /* Ctrl */ : 2 /* Ctrl */);
+        await Input.dispatchKeyEvent({ type: 'keyDown', key: 'I', text: 'I', modifiers });
+        await Input.dispatchKeyEvent({ type: 'keyUp', key: 'I', text: 'I', modifiers });
+      } catch (error) {
+        console.log('Could not activate chat view:', error.message);
+      }
+
+      const textToSend = String(text).slice(0, 4000);
+
+      // Use clipboard approach to avoid focus issues
+      console.log('Copying text to clipboard:', textToSend);
+
+      // Note: In VSCode extension context, we'll need to handle clipboard differently
+      // For now, we'll use character-by-character typing
+
+      // Type the text character by character
+      console.log('Starting character-by-character typing...');
+      for (let i = 0; i < textToSend.length; i++) {
+        const char = textToSend[i];
+        await Input.dispatchKeyEvent({ type: 'keyDown', key: char, text: char });
+        await Input.dispatchKeyEvent({ type: 'keyUp', key: char, text: char });
+        await new Promise(resolve => setTimeout(resolve, 20)); // Small delay between characters
+      }
+      console.log('Finished character-by-character typing');
+
+      // Submit the message
+      await this.submitMessage(Input, Runtime);
+
+      return {
+        success: true,
+        method: 'cdp-character-typing',
+        message: `Message sent to VS Code: ${text}`,
+        note: 'Message sent via CDP with character-by-character typing'
+      };
+
+    } catch (error) {
+      console.error('VS Code CDP error:', error);
+      return { success: false, error: `VS Code CDP error: ${error.message}` };
+    }
+  }
+
+  /**
+   * Send text using basic CDP approach
+   * @param {string} text - The text to send
+   * @param {Object} Runtime - CDP Runtime domain
+   * @param {Object} Input - CDP Input domain
+   * @returns {Promise<Object>} Result of the operation
+   */
+  async sendTextBasic(text, Runtime, Input) {
+    try {
+      const textToSend = String(text).slice(0, 4000);
+
+      // Type the text character by character
+      console.log('Starting character-by-character typing...');
+      for (let i = 0; i < textToSend.length; i++) {
+        const char = textToSend[i];
+        await Input.dispatchKeyEvent({ type: 'keyDown', key: char, text: char });
+        await Input.dispatchKeyEvent({ type: 'keyUp', key: char, text: char });
+        await new Promise(resolve => setTimeout(resolve, 20));
+      }
+      console.log('Finished character-by-character typing');
+
+      // Submit the message
+      await this.submitMessage(Input, Runtime);
+
+      return {
+        success: true,
+        method: 'cdp-basic',
+        message: `Message sent: ${text}`,
+        note: 'Message sent via basic CDP approach'
+      };
+
+    } catch (error) {
+      console.error('Basic CDP error:', error);
+      return { success: false, error: `Basic CDP error: ${error.message}` };
+    }
+  }
+
+  /**
+   * Submit a message using multiple methods
+   * @param {Object} Input - CDP Input domain
+   * @param {Object} Runtime - CDP Runtime domain
+   * @returns {Promise<void>}
+   */
+  async submitMessage(Input, Runtime) {
+    // Wait a moment then try multiple ways to submit the message
+    setTimeout(async () => {
+      try {
+        console.log('Attempting to submit message...');
+
+        // Method 1: Press Enter
+        console.log('Method 1: Pressing Enter...');
+        await Input.dispatchKeyEvent({ type: 'keyDown', key: 'Enter' });
+        await Input.dispatchKeyEvent({ type: 'keyUp', key: 'Enter' });
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        // Method 2: Try clicking the send button
+        console.log('Method 2: Looking for send button...');
+        const clickSendButton = `(() => {
+          const sendButton = document.querySelector('[aria-label*="Send"]') ||
+                            document.querySelector('[title*="Send"]') ||
+                            document.querySelector('button[aria-label*="submit"]') ||
+                            document.querySelector('button[title*="submit"]') ||
+                            document.querySelector('[aria-label*="Send message"]') ||
+                            document.querySelector('[title*="Send message"]') ||
+                            document.querySelector('button[aria-label*="Send message"]') ||
+                            document.querySelector('button[title*="Send message"]') ||
+                            document.querySelector('button[aria-label*="Submit"]') ||
+                            document.querySelector('button[title*="Submit"]') ||
+                            document.querySelector('button[aria-label*="Send request"]') ||
+                            document.querySelector('button[title*="Send request"]') ||
+                            document.querySelector('button svg[data-icon*="send"]')?.closest('button') ||
+                            document.querySelector('button svg[data-icon*="play"]')?.closest('button') ||
+                            document.querySelector('button svg[data-icon*="arrow"]')?.closest('button') ||
+                            document.querySelector('button.send-button') ||
+                            document.querySelector('button.submit-button') ||
+                            document.querySelector('button[class*="send"]') ||
+                            document.querySelector('button[class*="submit"]');
+
+          if (sendButton) {
+            console.log('Found send button:', sendButton.getAttribute('aria-label') || sendButton.getAttribute('title') || sendButton.className);
+            sendButton.click();
+            return true;
+          } else {
+            console.log('No send button found');
+            return false;
+          }
+        })()`;
+
+        const { result: clickRes } = await Runtime.evaluate({ expression: clickSendButton, returnByValue: true });
+        const clickResult = clickRes && (clickRes.value ?? clickRes.unserializableValue) ? (clickRes.value ?? clickRes.unserializableValue) : false;
+        console.log('Send button click result:', clickResult);
+
+        // Method 3: Try Cmd+Enter as alternative
+        if (!clickResult) {
+          console.log('Method 3: Trying Cmd+Enter...');
+          const isDarwin = process.platform === 'darwin';
+          const enterMods = isDarwin ? 4 /* Meta */ : 2 /* Ctrl */;
+          await Input.dispatchKeyEvent({ type: 'keyDown', key: 'Enter', text: 'Enter', modifiers: enterMods });
+          await Input.dispatchKeyEvent({ type: 'keyUp', key: 'Enter', text: 'Enter', modifiers: enterMods });
+        }
+
+        console.log('All submission methods attempted');
+      } catch (error) {
+        console.log('Submission failed:', error.message);
+      }
+    }, 300);
+  }
+
+  /**
+   * Read chat text from an IDE
+   * @param {string} ide - The IDE name
+   * @returns {Promise<string>} The chat text
+   */
+  async readChatText(ide) {
+    try {
+      const { Runtime } = await this.connectToIDE(ide);
+
+      const expression = `(() => {
+        try {
+          // Look for chat messages in various possible locations
+          const chatMessages = document.querySelectorAll('[class*="message"], [class*="chat"], [class*="conversation"]');
+          const messages = [];
+
+          chatMessages.forEach(msg => {
+            const text = msg.textContent || msg.innerText;
+            if (text && text.trim()) {
+              messages.push(text.trim());
+            }
+          });
+
+          return messages.join('\\n\\n');
+        } catch (error) {
+          return 'Error reading chat: ' + error.message;
+        }
+      })()`;
+
+      const { result } = await Runtime.evaluate({ expression, returnByValue: true });
+      return result.value || '[]';
+    } catch (error) {
+      console.error(`Error reading chat from ${ide}:`, error);
+      return `Error: ${error.message}`;
+    }
+  }
+}