kiro-mobile-bridge 1.0.7 → 1.0.8

package/src/services/cdp.js

@@ -0,0 +1,156 @@
+/**
+ * Chrome DevTools Protocol (CDP) connection service
+ */
+import http from 'http';
+import { WebSocket } from 'ws';
+
+/**
+ * Fetch JSON from a CDP endpoint
+ * @param {number} port - The port to fetch from
+ * @param {string} path - The path to fetch (default: /json/list)
+ * @returns {Promise<any>} - Parsed JSON response
+ */
+export function fetchCDPTargets(port, path = '/json/list') {
+  return new Promise((resolve, reject) => {
+    const url = `http://127.0.0.1:${port}${path}`;
+    
+    const req = http.get(url, { timeout: 2000 }, (res) => {
+      let data = '';
+      res.on('data', chunk => data += chunk);
+      res.on('end', () => {
+        try {
+          resolve(JSON.parse(data));
+        } catch (e) {
+          reject(new Error(`Failed to parse JSON from ${url}: ${e.message}`));
+        }
+      });
+    });
+    
+    req.on('error', (err) => reject(new Error(`Failed to fetch ${url}: ${err.message}`)));
+    req.on('timeout', () => {
+      req.destroy();
+      reject(new Error(`Timeout fetching ${url}`));
+    });
+  });
+}
+
+/**
+ * Create a CDP connection to a target
+ * @param {string} wsUrl - WebSocket debugger URL
+ * @returns {Promise<CDPConnection>} - CDP connection object
+ */
+export function connectToCDP(wsUrl) {
+  return new Promise((resolve, reject) => {
+    const ws = new WebSocket(wsUrl);
+    let idCounter = 1;
+    const pendingCalls = new Map();
+    const contexts = [];
+    let rootContextId = null;
+    let isConnected = false;
+    
+    ws.on('message', (rawMsg) => {
+      try {
+        const msg = JSON.parse(rawMsg.toString());
+        
+        if (msg.method === 'Runtime.executionContextCreated') {
+          const ctx = msg.params.context;
+          contexts.push(ctx);
+          if (rootContextId === null || ctx.auxData?.isDefault) {
+            rootContextId = ctx.id;
+          }
+        }
+        
+        if (msg.method === 'Runtime.executionContextDestroyed') {
+          const ctxId = msg.params.executionContextId;
+          const idx = contexts.findIndex(c => c.id === ctxId);
+          if (idx !== -1) contexts.splice(idx, 1);
+          if (rootContextId === ctxId) {
+            rootContextId = contexts.length > 0 ? contexts[0].id : null;
+          }
+        }
+        
+        if (msg.method === 'Runtime.executionContextsCleared') {
+          contexts.length = 0;
+          rootContextId = null;
+        }
+        
+        if (msg.id !== undefined && pendingCalls.has(msg.id)) {
+          const { resolve: res, reject: rej } = pendingCalls.get(msg.id);
+          pendingCalls.delete(msg.id);
+          if (msg.error) {
+            rej(new Error(`CDP Error: ${msg.error.message} (code: ${msg.error.code})`));
+          } else {
+            res(msg.result);
+          }
+        }
+      } catch (e) {
+        console.error('[CDP] Failed to parse message:', e.message);
+      }
+    });
+    
+    ws.on('open', async () => {
+      isConnected = true;
+      console.log(`[CDP] Connected to ${wsUrl}`);
+      
+      const cdp = {
+        ws,
+        contexts,
+        get rootContextId() { return rootContextId; },
+        
+        call(method, params = {}) {
+          return new Promise((res, rej) => {
+            if (!isConnected) {
+              rej(new Error('CDP connection is closed'));
+              return;
+            }
+            
+            const id = idCounter++;
+            pendingCalls.set(id, { resolve: res, reject: rej });
+            ws.send(JSON.stringify({ id, method, params }));
+            
+            setTimeout(() => {
+              if (pendingCalls.has(id)) {
+                pendingCalls.delete(id);
+                rej(new Error(`CDP call timeout: ${method}`));
+              }
+            }, 10000);
+          });
+        },
+        
+        close() {
+          isConnected = false;
+          for (const [, { reject }] of pendingCalls) {
+            reject(new Error('CDP connection closed'));
+          }
+          pendingCalls.clear();
+          ws.terminate();
+        }
+      };
+      
+      try {
+        await cdp.call('Runtime.enable', {});
+        await new Promise(r => setTimeout(r, 300));
+        console.log(`[CDP] Runtime enabled, found ${contexts.length} context(s)`);
+        resolve(cdp);
+      } catch (err) {
+        cdp.close();
+        reject(err);
+      }
+    });
+    
+    ws.on('error', (err) => {
+      console.error(`[CDP] WebSocket error: ${err.message}`);
+      isConnected = false;
+      reject(err);
+    });
+    
+    ws.on('close', () => {
+      console.log('[CDP] Connection closed');
+      isConnected = false;
+      for (const [, { reject }] of pendingCalls) {
+        reject(new Error('CDP connection closed'));
+      }
+      pendingCalls.clear();
+    });
+  });
+}

package/src/services/click.js

@@ -0,0 +1,282 @@
+/**
+ * Click service - handles UI element clicks via CDP
+ */
+
+/**
+ * Click an element in the Kiro UI via CDP
+ * @param {CDPConnection} cdp - CDP connection
+ * @param {object} clickInfo - Element identification info
+ * @returns {Promise<{success: boolean, matchMethod?: string, error?: string}>}
+ */
+export async function clickElement(cdp, clickInfo) {
+  const script = `(function() {
+    let targetDoc = document;
+    const activeFrame = document.getElementById('active-frame');
+    if (activeFrame && activeFrame.contentDocument) targetDoc = activeFrame.contentDocument;
+    
+    const info = ${JSON.stringify(clickInfo)};
+    let element = null;
+    let matchMethod = '';
+    const isTabClick = info.isTab || info.role === 'tab';
+    const isCloseButton = info.isCloseButton || (info.ariaLabel && info.ariaLabel.toLowerCase() === 'close');
+    const isToggle = info.isToggle || info.role === 'switch';
+    
+    // Handle send button
+    if (info.isSendButton && !element) {
+      const sendSelectors = ['button[data-variant="submit"]', 'svg.lucide-arrow-right', 'button[type="submit"]', 'button[aria-label*="send" i]'];
+      for (const sel of sendSelectors) {
+        try {
+          const el = targetDoc.querySelector(sel);
+          if (el) {
+            element = el.closest('button') || el;
+            if (element && !element.disabled) { matchMethod = 'send-button'; break; }
+          }
+        } catch(e) {}
+      }
+    }
+    
+    // Handle toggle/switch
+    if (isToggle && !element) {
+      if (info.toggleId) {
+        element = targetDoc.getElementById(info.toggleId);
+        if (element) matchMethod = 'toggle-id';
+      }
+      if (!element && info.text) {
+        const toggles = targetDoc.querySelectorAll('.kiro-toggle-switch, [role="switch"]');
+        for (const t of toggles) {
+          const label = t.querySelector('label');
+          if (label && label.textContent.trim().toLowerCase().includes(info.text.toLowerCase())) {
+            element = t.querySelector('input') || t;
+            matchMethod = 'toggle-label';
+            break;
+          }
+        }
+      }
+    }
+    
+    // Handle close button
+    if (isCloseButton && !element) {
+      const closeButtons = targetDoc.querySelectorAll('[aria-label="close"], .kiro-tabs-item-close, [class*="close"]');
+      if (info.parentTabLabel) {
+        const searchLabel = info.parentTabLabel.trim().toLowerCase();
+        for (const btn of closeButtons) {
+          const parentTab = btn.closest('[role="tab"]');
+          if (parentTab) {
+            const labelEl = parentTab.querySelector('.kiro-tabs-item-label, [class*="label"]');
+            const tabLabel = labelEl ? labelEl.textContent.trim().toLowerCase() : '';
+            if (tabLabel.includes(searchLabel) || searchLabel.includes(tabLabel)) {
+              element = btn;
+              matchMethod = 'close-button-by-tab';
+              break;
+            }
+          }
+        }
+      }
+      if (!element && closeButtons.length > 0) {
+        for (const btn of closeButtons) {
+          const parentTab = btn.closest('[role="tab"]');
+          if (parentTab && parentTab.getAttribute('aria-selected') === 'true') {
+            element = btn;
+            matchMethod = 'close-button-selected';
+            break;
+          }
+        }
+      }
+    }
+    
+    // Handle tab click
+    if (isTabClick && !element) {
+      const allTabs = targetDoc.querySelectorAll('[role="tab"]');
+      const searchText = (info.tabLabel || info.text || '').trim().toLowerCase();
+      for (const tab of allTabs) {
+        const labelEl = tab.querySelector('.kiro-tabs-item-label, [class*="label"]');
+        const tabText = labelEl ? labelEl.textContent.trim().toLowerCase() : tab.textContent.trim().toLowerCase();
+        if (searchText && (tabText.includes(searchText) || searchText.includes(tabText))) {
+          element = tab;
+          matchMethod = 'tab-label';
+          break;
+        }
+      }
+    }
+    
+    // Handle file link
+    if (info.isFileLink && info.filePath && !element) {
+      const fileName = info.filePath.split('/').pop().split('\\\\').pop();
+      const fileSelectors = ['a[href*="' + fileName + '"]', '[data-path*="' + fileName + '"]', 'code', 'span', '[class*="file"]'];
+      for (const selector of fileSelectors) {
+        const candidates = targetDoc.querySelectorAll(selector);
+        for (const el of candidates) {
+          const text = (el.textContent || '').trim();
+          if (text.includes(info.filePath) || text.includes(fileName)) {
+            element = el;
+            matchMethod = 'file-link';
+            break;
+          }
+        }
+        if (element) break;
+      }
+    }
+    
+    // Try by aria-label
+    if (info.ariaLabel && !element && !isCloseButton) {
+      try {
+        const candidates = targetDoc.querySelectorAll('[aria-label="' + info.ariaLabel.replace(/"/g, '\\\\"') + '"]');
+        for (const c of candidates) {
+          const label = (c.getAttribute('aria-label') || '').toLowerCase();
+          if (!label.includes('close')) { element = c; matchMethod = 'aria-label'; break; }
+        }
+      } catch(e) {}
+    }
+    
+    // Handle history/session list items
+    if (info.isHistoryItem && !element) {
+      const searchText = (info.text || '').trim().toLowerCase();
+      
+      // Strategy 1: Find all items that look like history entries (contain dates)
+      const datePattern = /\\d{1,2}\\/\\d{1,2}\\/\\d{4}|\\d{1,2}:\\d{2}:\\d{2}/;
+      const allDivs = targetDoc.querySelectorAll('div, li, article');
+      const historyItems = [];
+      
+      for (const item of allDivs) {
+        if (item.children.length > 15) continue; // Skip large containers
+        const text = item.textContent || '';
+        if (datePattern.test(text) && text.length > 20 && text.length < 500) {
+          historyItems.push(item);
+        }
+      }
+      
+      // Find the one matching our search text
+      for (const item of historyItems) {
+        const itemText = (item.textContent || '').trim().toLowerCase();
+        if (searchText && (itemText.includes(searchText) || searchText.includes(itemText.substring(0, 50)))) {
+          element = item;
+          matchMethod = 'history-item-date';
+          break;
+        }
+      }
+      
+      // Strategy 2: If not found by text, try standard selectors
+      if (!element) {
+        const historySelectors = [
+          '[role="listitem"]',
+          '[role="option"]',
+          '[class*="history"] > *',
+          '[class*="session"] > *',
+          '[class*="conversation"] > *',
+          '[class*="list-item"]'
+        ];
+        
+        for (const selector of historySelectors) {
+          try {
+            const items = targetDoc.querySelectorAll(selector);
+            for (const item of items) {
+              const itemText = (item.textContent || '').trim().toLowerCase();
+              if (searchText && (itemText.includes(searchText) || searchText.includes(itemText.substring(0, 50)))) {
+                element = item;
+                matchMethod = 'history-item-selector';
+                break;
+              }
+            }
+            if (element) break;
+          } catch(e) {}
+        }
+      }
+      
+      // Strategy 3: Find ANY element with matching text that has cursor:pointer
+      if (!element && searchText) {
+        const allElements = targetDoc.querySelectorAll('*');
+        for (const item of allElements) {
+          if (item.children.length > 10) continue;
+          const itemText = (item.textContent || '').trim().toLowerCase();
+          const firstLine = itemText.split('\\n')[0];
+          if (firstLine.includes(searchText) || searchText.includes(firstLine.substring(0, 30))) {
+            const style = window.getComputedStyle(item);
+            if (style.cursor === 'pointer') {
+              element = item;
+              matchMethod = 'history-item-pointer';
+              break;
+            }
+          }
+        }
+      }
+    }
+    
+    // Try by text content
+    if (info.text && info.text.trim() && !element) {
+      const searchText = info.text.trim();
+      const allElements = targetDoc.querySelectorAll('button, [role="button"], [role="tab"], [role="menuitem"], [role="option"], [role="listitem"], a, [tabindex="0"], [class*="cursor-pointer"]');
+      for (const el of allElements) {
+        if (!isCloseButton) {
+          const ariaLabel = (el.getAttribute('aria-label') || '').toLowerCase();
+          if (ariaLabel.includes('close')) continue;
+        }
+        const elText = (el.textContent || '').trim();
+        if (elText === searchText || elText.includes(searchText) || (elText.length >= 10 && searchText.includes(elText))) {
+          element = el;
+          matchMethod = 'text-content';
+          break;
+        }
+      }
+    }
+    
+    if (!element) return { found: false, error: 'Element not found' };
+    
+    // For history items, click the item itself - NOT child buttons (which might be delete buttons!)
+    let clickTarget = element;
+    
+    // DO NOT click child buttons for history items - they are likely delete/close buttons
+    // Just click the main item element directly
+    
+    try {
+      // Try standard click first
+      clickTarget.click();
+      return { found: true, clicked: true, matchMethod };
+    } catch (e) {
+      try {
+        // Try full mouse event sequence
+        const rect = clickTarget.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        
+        const mouseOpts = { 
+          bubbles: true, 
+          cancelable: true, 
+          view: window,
+          clientX: centerX,
+          clientY: centerY
+        };
+        
+        clickTarget.dispatchEvent(new MouseEvent('mousedown', mouseOpts));
+        clickTarget.dispatchEvent(new MouseEvent('mouseup', mouseOpts));
+        clickTarget.dispatchEvent(new MouseEvent('click', mouseOpts));
+        
+        return { found: true, clicked: true, matchMethod: matchMethod + '-dispatch' };
+      } catch (e2) {
+        return { found: true, clicked: false, error: 'Click failed: ' + e2.message };
+      }
+    }
+  })()`;
+  
+  try {
+    const result = await cdp.call('Runtime.evaluate', {
+      expression: script,
+      contextId: cdp.rootContextId,
+      returnByValue: true
+    });
+    
+    const elementInfo = result.result?.value;
+    if (!elementInfo?.found) {
+      console.log('[Click] Element not found:', clickInfo.ariaLabel || clickInfo.text);
+      return { success: false, error: 'Element not found' };
+    }
+    
+    if (elementInfo.clicked) {
+      console.log('[Click] Clicked via', elementInfo.matchMethod);
+      return { success: true, matchMethod: elementInfo.matchMethod };
+    }
+    return { success: false, error: elementInfo.error || 'Click failed' };
+  } catch (err) {
+    console.error('[Click] CDP error:', err.message);
+    return { success: false, error: err.message };
+  }
+}

package/src/services/message.js

@@ -0,0 +1,206 @@
+/**
+ * Message injection service - sends messages to Kiro chat via CDP
+ */
+
+/**
+ * Create script to inject message into chat input
+ * @param {string} messageText - Message to inject
+ * @returns {string} - JavaScript expression
+ */
+function createInjectScript(messageText) {
+  const escaped = messageText.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/\n/g, '\\n').replace(/\r/g, '\\r');
+  
+  return `(async () => {
+    const text = '${escaped}';
+    let targetDoc = document;
+    const activeFrame = document.getElementById('active-frame');
+    if (activeFrame && activeFrame.contentDocument) targetDoc = activeFrame.contentDocument;
+    
+    // Find the CHAT INPUT editor specifically (not any contenteditable in the page)
+    // Look for the input area at the bottom of the chat, not message bubbles
+    let editor = null;
+    
+    // Strategy 1: Find by common chat input container patterns
+    const inputContainerSelectors = [
+      '[class*="chat-input"]',
+      '[class*="message-input"]', 
+      '[class*="composer"]',
+      '[class*="input-area"]',
+      '[class*="InputArea"]',
+      'form[class*="chat"]',
+      '[data-testid*="input"]'
+    ];
+    
+    for (const containerSel of inputContainerSelectors) {
+      const container = targetDoc.querySelector(containerSel);
+      if (container) {
+        const editorInContainer = container.querySelector('.tiptap.ProseMirror[contenteditable="true"], [data-lexical-editor="true"][contenteditable="true"], [contenteditable="true"], textarea');
+        if (editorInContainer && editorInContainer.offsetParent !== null) {
+          editor = editorInContainer;
+          break;
+        }
+      }
+    }
+    
+    // Strategy 2: Find TipTap/ProseMirror editors that are visible and near a submit button
+    if (!editor) {
+      const allEditors = [...targetDoc.querySelectorAll('.tiptap.ProseMirror[contenteditable="true"]')].filter(el => el.offsetParent !== null);
+      for (const ed of allEditors) {
+        // Check if there's a submit button nearby (sibling or in same parent form)
+        const parent = ed.closest('form') || ed.parentElement?.parentElement?.parentElement;
+        if (parent) {
+          const hasSubmit = parent.querySelector('button[data-variant="submit"], button[type="submit"], svg.lucide-arrow-right');
+          if (hasSubmit) { editor = ed; break; }
+        }
+      }
+      // Fallback to last visible TipTap editor
+      if (!editor && allEditors.length > 0) editor = allEditors.at(-1);
+    }
+    
+    // Strategy 3: Find Lexical editors
+    if (!editor) {
+      const lexicalEditors = [...targetDoc.querySelectorAll('[data-lexical-editor="true"][contenteditable="true"]')].filter(el => el.offsetParent !== null);
+      for (const ed of lexicalEditors) {
+        const parent = ed.closest('form') || ed.parentElement?.parentElement?.parentElement;
+        if (parent) {
+          const hasSubmit = parent.querySelector('button[data-variant="submit"], button[type="submit"]');
+          if (hasSubmit) { editor = ed; break; }
+        }
+      }
+      if (!editor && lexicalEditors.length > 0) editor = lexicalEditors.at(-1);
+    }
+    
+    // Strategy 4: Generic contenteditable (last resort)
+    if (!editor) {
+      const editables = [...targetDoc.querySelectorAll('[contenteditable="true"]')].filter(el => el.offsetParent !== null);
+      editor = editables.at(-1);
+    }
+    
+    // Strategy 5: Textarea fallback
+    if (!editor) {
+      const textareas = [...targetDoc.querySelectorAll('textarea')].filter(el => el.offsetParent !== null);
+      editor = textareas.at(-1);
+    }
+    
+    if (!editor) return { ok: false, error: 'editor_not_found' };
+    
+    const isTextarea = editor.tagName.toLowerCase() === 'textarea';
+    const isProseMirror = editor.classList.contains('ProseMirror') || editor.classList.contains('tiptap');
+    const isLexical = editor.hasAttribute('data-lexical-editor');
+    
+    // Focus the editor first
+    editor.focus();
+    await new Promise(r => setTimeout(r, 50));
+    
+    if (isTextarea) {
+      // Textarea: simple value assignment
+      editor.value = text;
+      editor.dispatchEvent(new Event('input', { bubbles: true }));
+    } else if (isProseMirror) {
+      // ProseMirror/TipTap: Clear and insert via DOM manipulation
+      // This works because TipTap syncs DOM changes to its state
+      editor.innerHTML = '';
+      const p = targetDoc.createElement('p');
+      p.textContent = text;
+      editor.appendChild(p);
+      editor.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertText', data: text }));
+    } else if (isLexical) {
+      // Lexical: Must use execCommand to properly update internal state
+      // Lexical listens to beforeinput/input events from execCommand
+      
+      // First, select all content
+      const selection = targetDoc.getSelection();
+      const range = targetDoc.createRange();
+      range.selectNodeContents(editor);
+      selection.removeAllRanges();
+      selection.addRange(range);
+      
+      // Delete existing content
+      targetDoc.execCommand('delete', false, null);
+      
+      // Wait for Lexical to process the deletion
+      await new Promise(r => setTimeout(r, 30));
+      
+      // Insert new text using execCommand (Lexical intercepts this)
+      const inserted = targetDoc.execCommand('insertText', false, text);
+      
+      if (!inserted) {
+        // Fallback: Try setting textContent and dispatching events
+        editor.textContent = text;
+        editor.dispatchEvent(new InputEvent('beforeinput', { bubbles: true, cancelable: true, inputType: 'insertText', data: text }));
+        editor.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertText', data: text }));
+      }
+    } else {
+      // Generic contenteditable
+      const selection = targetDoc.getSelection();
+      const range = targetDoc.createRange();
+      range.selectNodeContents(editor);
+      selection.removeAllRanges();
+      selection.addRange(range);
+      
+      targetDoc.execCommand('delete', false, null);
+      
+      let inserted = false;
+      try { inserted = !!targetDoc.execCommand('insertText', false, text); } catch (e) {}
+      
+      if (!inserted) {
+        editor.textContent = text;
+        editor.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertText', data: text }));
+      }
+    }
+    
+    // Wait for editor state to sync
+    await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+    await new Promise(r => setTimeout(r, 100));
+    
+    // Find and click submit button
+    const submitButton = targetDoc.querySelector('button[data-variant="submit"]:not([disabled])') ||
+                         targetDoc.querySelector('svg.lucide-arrow-right')?.closest('button:not([disabled])') ||
+                         targetDoc.querySelector('button[type="submit"]:not([disabled])') ||
+                         targetDoc.querySelector('button[aria-label*="send" i]:not([disabled])');
+    
+    if (submitButton) {
+      submitButton.click();
+      return { ok: true, method: 'click_submit' };
+    }
+    
+    // Fallback: Enter key
+    editor.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'Enter', code: 'Enter', keyCode: 13 }));
+    return { ok: true, method: 'enter_key' };
+  })()`;
+}
+
+/**
+ * Inject a message into the chat via CDP
+ * @param {CDPConnection} cdp - CDP connection
+ * @param {string} message - Message text
+ * @returns {Promise<{success: boolean, method?: string, error?: string}>}
+ */
+export async function injectMessage(cdp, message) {
+  if (!cdp.rootContextId) {
+    return { success: false, error: 'No execution context available' };
+  }
+  
+  try {
+    const result = await cdp.call('Runtime.evaluate', {
+      expression: createInjectScript(message),
+      contextId: cdp.rootContextId,
+      returnByValue: true,
+      awaitPromise: true
+    });
+    
+    if (result.exceptionDetails) {
+      return { success: false, error: result.exceptionDetails.exception?.description || 'Unknown error' };
+    }
+    
+    const value = result.result?.value;
+    if (value?.ok) {
+      console.log(`[Inject] Message sent via ${value.method}`);
+      return { success: true, method: value.method };
+    }
+    return { success: false, error: value?.error || 'Injection failed' };
+  } catch (err) {
+    console.error('[Inject] CDP call failed:', err.message);
+    return { success: false, error: err.message };
+  }
+}