kiro-mobile-bridge 1.0.8 → 1.0.11

package/src/services/snapshot.js

@@ -1,6 +1,7 @@
 /**
  * Snapshot capture service - captures DOM snapshots from Kiro via CDP
  */
+import { getLanguageFromExtension } from '../utils/constants.js';
 
 /**
  * Capture chat metadata (title, active state)
@@ -60,7 +61,9 @@ export async function captureCSS(cdp) {
     const allProps = [];
     for (let i = 0; i < rootStyles.length; i++) allProps.push(rootStyles[i]);
     
-    for (const sheet of targetDoc.styleSheets) {
+    // Safely iterate stylesheets with null check
+    const styleSheets = targetDoc.styleSheets || [];
+    for (const sheet of styleSheets) {
       try {
         if (sheet.cssRules) {
           for (const rule of sheet.cssRules) {
@@ -72,7 +75,9 @@ export async function captureCSS(cdp) {
             }
           }
         }
-      } catch (e) {}
+      } catch (e) {
+        // CORS restriction on external stylesheets, skip
+      }
     }
     
     let cssVars = ':root {\\n';
@@ -85,12 +90,14 @@ export async function captureCSS(cdp) {
     cssVars += '}\\n\\n';
     css += cssVars;
     
-    for (const sheet of targetDoc.styleSheets) {
+    for (const sheet of styleSheets) {
       try {
         if (sheet.cssRules) {
           for (const rule of sheet.cssRules) css += rule.cssText + '\\n';
         }
-      } catch (e) {}
+      } catch (e) {
+        // CORS restriction, skip
+      }
     }
     
     const styleTags = targetDoc.querySelectorAll('style');
@@ -144,45 +151,68 @@ export async function captureSnapshot(cdp) {
     
     for (const container of scrollContainers) {
       if (container.scrollHeight > container.clientHeight) {
-        // Only check class names for history detection - NOT date patterns
         const isHistoryPanel = container.matches('[class*="history"], [class*="History"], [class*="session-list"], [class*="SessionList"]') ||
           container.closest('[class*="history"], [class*="History"], [class*="session-list"], [class*="SessionList"]');
         
         if (isHistoryPanel) {
-          container.scrollTop = 0; // Scroll to TOP for history panels
+          container.scrollTop = 0;
         } else {
-          container.scrollTop = container.scrollHeight; // Scroll to BOTTOM for chat messages
+          container.scrollTop = container.scrollHeight;
         }
       }
     }
     
     const clone = targetBody.cloneNode(true);
     
-    // Remove tooltips, popovers, overlays from clone
-    const elementsToRemove = [
-      '[role="tooltip"]', '[data-tooltip]', '[class*="tooltip"]:not(button)', '[class*="Tooltip"]:not(button)',
-      '[class*="popover"]:not(button)', '[class*="Popover"]:not(button)', '[class*="dropdown-menu"]',
-      '[class*="dropdownMenu"]', '[class*="modal"]', '[class*="Modal"]',
-      '[style*="position: fixed"]:not(button):not([class*="input"]):not([class*="chat"])'
+    // Capture any portal/overlay content that might be outside the body
+    // Radix UI and similar libraries render dropdowns in portals at document root
+    const portals = targetDoc.querySelectorAll('[data-radix-portal], [data-radix-popper-content-wrapper], [class*="portal"], [class*="Portal"]');
+    portals.forEach(portal => {
+      try {
+        const portalClone = portal.cloneNode(true);
+        clone.appendChild(portalClone);
+      } catch(e) {
+        // Clone failed, skip
+      }
+    });
+    
+    // Also check for any floating/overlay elements at document level
+    const floatingSelectors = [
+      'body > [role="listbox"]', 
+      'body > [role="menu"]', 
+      'body > [data-state="open"]', 
+      'body > [class*="dropdown"]',
+      'body > div[style*="position: absolute"]',
+      'body > div[style*="position: fixed"]'
     ];
     
-    elementsToRemove.forEach(selector => {
+    floatingSelectors.forEach(sel => {
       try {
-        clone.querySelectorAll(selector).forEach(el => {
-          const isTooltip = el.matches('[role="tooltip"], [class*="tooltip"], [class*="Tooltip"]');
-          const isImportantUI = el.matches('[class*="model"], [class*="context"], [class*="input"], button, [role="button"]');
-          if (isTooltip || !isImportantUI) el.remove();
+        targetDoc.querySelectorAll(sel).forEach(el => {
+          const elClone = el.cloneNode(true);
+          clone.appendChild(elClone);
         });
-      } catch(e) {}
+      } catch(e) {
+        // Selector failed, skip
+      }
     });
     
+    // Remove ONLY tooltips from clone - preserve everything else
+    try {
+      clone.querySelectorAll('[role="tooltip"]').forEach(el => el.remove());
+    } catch(e) {
+      // Removal failed, continue
+    }
+    
     // Fix SVG currentColor
     clone.querySelectorAll('svg').forEach(svg => {
       try {
         const computedColor = '#cccccc';
         svg.querySelectorAll('[fill="currentColor"]').forEach(el => el.setAttribute('fill', computedColor));
         svg.querySelectorAll('[stroke="currentColor"]').forEach(el => el.setAttribute('stroke', computedColor));
-      } catch(e) {}
+      } catch(e) {
+        // SVG fix failed, continue
+      }
     });
     
     // Remove placeholder text
@@ -205,7 +235,9 @@ export async function captureSnapshot(cdp) {
           if (!el.querySelector('[contenteditable], [data-lexical-editor], textarea, input')) el.remove();
         }
       });
-    } catch(e) {}
+    } catch(e) {
+      // Placeholder removal failed, continue
+    }
     
     return { html: clone.outerHTML, bodyBg, bodyColor };
   })()`;
@@ -216,6 +248,7 @@ export async function captureSnapshot(cdp) {
       contextId: cdp.rootContextId,
       returnByValue: true
     });
+    
     return result.result?.value || null;
   } catch (err) {
     console.error('[Snapshot] Failed to capture HTML:', err.message);
@@ -247,7 +280,9 @@ export async function captureEditor(cdp) {
           result.fileName = tab.textContent.trim().split('\\n')[0].trim();
           if (result.fileName) break;
         }
-      } catch(e) {}
+      } catch(e) {
+        // Selector failed, continue
+      }
     }
     
     // Try Monaco API
@@ -255,7 +290,7 @@ export async function captureEditor(cdp) {
       const monacoEditors = targetDoc.querySelectorAll('.monaco-editor');
       for (const editorEl of monacoEditors) {
         const editorInstance = editorEl.__vscode_editor__ || editorEl._editor ||
-          (window.monaco && window.monaco.editor.getEditors && window.monaco.editor.getEditors()[0]);
+          (window.monaco && window.monaco.editor && window.monaco.editor.getEditors && window.monaco.editor.getEditors()[0]);
         if (editorInstance && editorInstance.getModel) {
           const model = editorInstance.getModel();
           if (model) {
@@ -267,7 +302,9 @@ export async function captureEditor(cdp) {
           }
         }
       }
-    } catch(e) {}
+    } catch(e) {
+      // Monaco API not available, continue
+    }
     
     // Fallback: Extract from view-lines
     if (!result.content) {
@@ -309,7 +346,9 @@ export async function captureEditor(cdp) {
       const extMap = {
         'ts': 'typescript', 'tsx': 'typescript', 'js': 'javascript', 'jsx': 'javascript',
         'py': 'python', 'java': 'java', 'html': 'html', 'css': 'css', 'json': 'json',
-        'md': 'markdown', 'yaml': 'yaml', 'yml': 'yaml', 'go': 'go', 'rs': 'rust'
+        'md': 'markdown', 'yaml': 'yaml', 'yml': 'yaml', 'go': 'go', 'rs': 'rust',
+        'c': 'c', 'cpp': 'cpp', 'h': 'c', 'cs': 'csharp', 'rb': 'ruby', 'php': 'php',
+        'sql': 'sql', 'sh': 'bash', 'vue': 'vue', 'svelte': 'svelte'
       };
       result.language = extMap[ext] || ext || '';
     }

package/src/utils/constants.js

@@ -0,0 +1,116 @@
+/**
+ * Shared constants used across the application
+ * Centralizes configuration to eliminate duplication and improve maintainability
+ */
+
+/**
+ * CDP ports to scan for Kiro instances
+ * @type {number[]}
+ */
+export const CDP_PORTS = [9000, 9001, 9002, 9003, 9222, 9229];
+
+/**
+ * Model names for AI model detection and matching
+ * Order matters: check specific names (opus, sonnet, haiku) BEFORE generic (claude)
+ * @type {string[]}
+ */
+export const MODEL_NAMES = ['auto', 'opus', 'sonnet', 'haiku', 'gpt', 'claude', 'gemini', 'llama'];
+
+/**
+ * Code file extensions for workspace file filtering
+ * @type {Set<string>}
+ */
+export const CODE_EXTENSIONS = new Set([
+  '.ts', '.tsx', '.js', '.jsx', '.py', '.java', '.go', '.rs',
+  '.html', '.css', '.scss', '.json', '.yaml', '.yml', '.md',
+  '.sql', '.sh', '.c', '.cpp', '.h', '.cs', '.vue', '.svelte', '.rb', '.php'
+]);
+
+/**
+ * File extension to language mapping for syntax highlighting
+ * @type {Object<string, string>}
+ */
+export const EXTENSION_TO_LANGUAGE = {
+  '.ts': 'typescript',
+  '.tsx': 'typescript',
+  '.js': 'javascript',
+  '.jsx': 'javascript',
+  '.py': 'python',
+  '.html': 'html',
+  '.css': 'css',
+  '.scss': 'scss',
+  '.json': 'json',
+  '.md': 'markdown',
+  '.yaml': 'yaml',
+  '.yml': 'yaml',
+  '.go': 'go',
+  '.rs': 'rust',
+  '.java': 'java',
+  '.c': 'c',
+  '.cpp': 'cpp',
+  '.h': 'c',
+  '.cs': 'csharp',
+  '.rb': 'ruby',
+  '.php': 'php',
+  '.sql': 'sql',
+  '.sh': 'bash',
+  '.vue': 'vue',
+  '.svelte': 'svelte'
+};
+
+/**
+ * Get language from file extension
+ * @param {string} filename - File name or path
+ * @returns {string} - Language identifier or extension without dot
+ */
+export function getLanguageFromExtension(filename) {
+  const ext = filename.includes('.') ? '.' + filename.split('.').pop().toLowerCase() : '';
+  return EXTENSION_TO_LANGUAGE[ext] || ext.slice(1) || 'text';
+}
+
+/**
+ * Check if a file has a code extension
+ * @param {string} filename - File name or path
+ * @returns {boolean}
+ */
+export function isCodeFile(filename) {
+  const ext = filename.includes('.') ? '.' + filename.split('.').pop().toLowerCase() : '';
+  return CODE_EXTENSIONS.has(ext);
+}
+
+/**
+ * CDP call timeout in milliseconds
+ * @type {number}
+ */
+export const CDP_CALL_TIMEOUT = 10000;
+
+/**
+ * HTTP request timeout in milliseconds
+ * @type {number}
+ */
+export const HTTP_TIMEOUT = 2000;
+
+/**
+ * Discovery polling intervals
+ */
+export const DISCOVERY_INTERVAL_ACTIVE = 10000;  // 10 seconds when changes detected
+export const DISCOVERY_INTERVAL_STABLE = 30000;  // 30 seconds when stable
+
+/**
+ * Snapshot polling intervals
+ */
+export const SNAPSHOT_INTERVAL_ACTIVE = 1000;    // 1 second when active
+export const SNAPSHOT_INTERVAL_IDLE = 3000;      // 3 seconds when idle
+export const SNAPSHOT_IDLE_THRESHOLD = 10000;    // 10 seconds before considered idle
+
+/**
+ * Maximum depth for recursive file search
+ * @type {number}
+ */
+export const MAX_FILE_SEARCH_DEPTH = 4;
+
+/**
+ * Maximum depth for workspace file collection
+ * @type {number}
+ */
+export const MAX_WORKSPACE_DEPTH = 5;

package/src/utils/hash.js

@@ -1,22 +1,34 @@
 /**
  * Hash utilities for content change detection
+ * 
+ * NOTE: MD5 is used here for change detection only, NOT for security purposes.
+ * MD5 is fast and sufficient for detecting content changes in snapshots.
+ * Do NOT use these functions for password hashing, authentication, or any security-sensitive operations.
  */
 import crypto from 'crypto';
 
 /**
  * Generate a unique ID from a string (e.g., WebSocket URL)
+ * Used for cascade identification, not security
  * @param {string} input - String to hash
  * @returns {string} - 8-character hash ID
  */
 export function generateId(input) {
+  if (typeof input !== 'string' || !input) {
+    return crypto.randomBytes(4).toString('hex');
+  }
   return crypto.createHash('md5').update(input).digest('hex').substring(0, 8);
 }
 
 /**
  * Compute MD5 hash for change detection
+ * Used to detect content changes in snapshots, not for security
  * @param {string} content - Content to hash
  * @returns {string} - Full MD5 hash
  */
 export function computeHash(content) {
+  if (typeof content !== 'string') {
+    return '';
+  }
   return crypto.createHash('md5').update(content).digest('hex');
 }

package/src/utils/network.js

@@ -3,18 +3,88 @@
  */
 import { networkInterfaces } from 'os';
 
+/**
+ * Check if interface is IPv4
+ * Handles both string ('IPv4') and number (4) family values
+ * @param {object} iface - Network interface object
+ * @returns {boolean}
+ */
+function isIPv4(iface) {
+  return iface.family === 'IPv4' || iface.family === 4;
+}
+
 /**
  * Get local IP address for LAN access
- * @returns {string} - Local IP or 'localhost'
+ * Returns the first non-internal IPv4 address found.
+ * 
+ * NOTE: On systems with multiple network interfaces, this returns the first one found.
+ * For more control, consider using environment variables or configuration.
+ * 
+ * @returns {string} - Local IP or 'localhost' if no suitable interface found
  */
 export function getLocalIP() {
   const interfaces = networkInterfaces();
+  
+  // Prioritize common interface names (Linux, macOS, Windows)
+  const priorityInterfaces = ['Ethernet', 'Wi-Fi', 'eth0', 'en0', 'wlan0'];
+  
+  // First, try priority interfaces
+  for (const name of priorityInterfaces) {
+    const ifaces = interfaces[name];
+    if (ifaces) {
+      for (const iface of ifaces) {
+        if (isIPv4(iface) && !iface.internal) {
+          return iface.address;
+        }
+      }
+    }
+  }
+  
+  // Fallback: return first non-internal IPv4 (skip virtual/WSL interfaces)
+  for (const name of Object.keys(interfaces)) {
+    // Skip virtual interfaces (WSL, Docker, VPN, etc.)
+    if (name.toLowerCase().includes('vethernet') || 
+        name.toLowerCase().includes('docker') ||
+        name.toLowerCase().includes('vmware') ||
+        name.toLowerCase().includes('virtualbox')) {
+      continue;
+    }
+    for (const iface of interfaces[name]) {
+      if (isIPv4(iface) && !iface.internal) {
+        return iface.address;
+      }
+    }
+  }
+  
+  // Last resort: any non-internal IPv4
   for (const name of Object.keys(interfaces)) {
     for (const iface of interfaces[name]) {
-      if (iface.family === 'IPv4' && !iface.internal) {
+      if (isIPv4(iface) && !iface.internal) {
         return iface.address;
       }
     }
   }
+  
   return 'localhost';
 }
+
+/**
+ * Get all available local IP addresses
+ * Useful for debugging or when user needs to choose interface
+ * 
+ * @returns {Array<{name: string, address: string}>} - Array of interface names and addresses
+ */
+export function getAllLocalIPs() {
+  const interfaces = networkInterfaces();
+  const results = [];
+  
+  for (const name of Object.keys(interfaces)) {
+    for (const iface of interfaces[name]) {
+      if (isIPv4(iface) && !iface.internal) {
+        results.push({ name, address: iface.address });
+      }
+    }
+  }
+  
+  return results;
+}

package/src/utils/security.js

@@ -0,0 +1,160 @@
+/**
+ * Security utilities for input validation and sanitization
+ * Prevents path traversal, XSS, and other security vulnerabilities
+ */
+import path from 'path';
+
+/**
+ * Validate that a file path resolves within an allowed root directory
+ * Prevents path traversal attacks (e.g., ../../etc/passwd)
+ * 
+ * @param {string} filePath - The file path to validate (can be relative or absolute)
+ * @param {string} rootDir - The allowed root directory
+ * @returns {{valid: boolean, resolvedPath: string|null, error: string|null}}
+ */
+export function validatePathWithinRoot(filePath, rootDir) {
+  if (!filePath || typeof filePath !== 'string') {
+    return { valid: false, resolvedPath: null, error: 'Invalid file path' };
+  }
+  
+  if (!rootDir || typeof rootDir !== 'string') {
+    return { valid: false, resolvedPath: null, error: 'Invalid root directory' };
+  }
+  
+  try {
+    // Normalize and resolve both paths to absolute paths
+    const normalizedRoot = path.resolve(rootDir);
+    const resolvedPath = path.resolve(rootDir, filePath);
+    
+    // Ensure the resolved path starts with the root directory
+    // Add path.sep to prevent matching partial directory names
+    // e.g., /home/user vs /home/username
+    const rootWithSep = normalizedRoot.endsWith(path.sep) 
+      ? normalizedRoot 
+      : normalizedRoot + path.sep;
+    
+    if (!resolvedPath.startsWith(rootWithSep) && resolvedPath !== normalizedRoot) {
+      return { 
+        valid: false, 
+        resolvedPath: null, 
+        error: 'Path traversal detected: path resolves outside allowed directory' 
+      };
+    }
+    
+    return { valid: true, resolvedPath, error: null };
+  } catch (err) {
+    return { valid: false, resolvedPath: null, error: `Path validation error: ${err.message}` };
+  }
+}
+
+/**
+ * Escape a string for safe inclusion in JavaScript code
+ * Handles all special characters that could break string literals or enable injection
+ * 
+ * @param {string} str - The string to escape
+ * @returns {string} - Escaped string safe for JS inclusion
+ */
+export function escapeForJavaScript(str) {
+  if (typeof str !== 'string') {
+    return '';
+  }
+  
+  return str
+    .replace(/\\/g, '\\\\')     // Backslashes first (must be first!)
+    .replace(/'/g, "\\'")        // Single quotes
+    .replace(/"/g, '\\"')        // Double quotes
+    .replace(/`/g, '\\`')        // Backticks (template literals)
+    .replace(/\$/g, '\\$')       // Dollar signs (template literal interpolation)
+    .replace(/\n/g, '\\n')       // Newlines
+    .replace(/\r/g, '\\r')       // Carriage returns
+    .replace(/\t/g, '\\t')       // Tabs
+    .replace(/\0/g, '\\0')       // Null bytes
+    .replace(/\u2028/g, '\\u2028')  // Line separator
+    .replace(/\u2029/g, '\\u2029'); // Paragraph separator
+}
+
+/**
+ * Validate and sanitize click info object
+ * Ensures all properties are of expected types and within reasonable limits
+ * 
+ * @param {object} clickInfo - The click info object to validate
+ * @returns {{valid: boolean, sanitized: object|null, error: string|null}}
+ */
+export function sanitizeClickInfo(clickInfo) {
+  if (!clickInfo || typeof clickInfo !== 'object') {
+    return { valid: false, sanitized: null, error: 'Click info must be an object' };
+  }
+  
+  const sanitized = {};
+  
+  // String properties with max length
+  const stringProps = [
+    { name: 'tag', maxLength: 50 },
+    { name: 'text', maxLength: 200 },
+    { name: 'ariaLabel', maxLength: 200 },
+    { name: 'role', maxLength: 50 },
+    { name: 'className', maxLength: 500 },
+    { name: 'tabLabel', maxLength: 100 },
+    { name: 'parentTabLabel', maxLength: 100 },
+    { name: 'filePath', maxLength: 500 },
+    { name: 'toggleId', maxLength: 100 }
+  ];
+  
+  for (const { name, maxLength } of stringProps) {
+    if (clickInfo[name] !== undefined) {
+      if (typeof clickInfo[name] !== 'string') {
+        sanitized[name] = String(clickInfo[name]).substring(0, maxLength);
+      } else {
+        sanitized[name] = clickInfo[name].substring(0, maxLength);
+      }
+    }
+  }
+  
+  // Boolean properties
+  const boolProps = [
+    'isTab', 'isCloseButton', 'isToggle', 'isModelSelector', 'isModelOption',
+    'isSendButton', 'isFileLink', 'isNotificationButton', 'isIconButton', 'isHistoryItem'
+  ];
+  
+  for (const name of boolProps) {
+    if (clickInfo[name] !== undefined) {
+      sanitized[name] = Boolean(clickInfo[name]);
+    }
+  }
+  
+  return { valid: true, sanitized, error: null };
+}
+
+/**
+ * Validate message text for injection
+ * 
+ * @param {string} message - The message to validate
+ * @returns {{valid: boolean, error: string|null}}
+ */
+export function validateMessage(message) {
+  if (!message || typeof message !== 'string') {
+    return { valid: false, error: 'Message must be a non-empty string' };
+  }
+  
+  if (message.length > 50000) {
+    return { valid: false, error: 'Message exceeds maximum length (50000 characters)' };
+  }
+  
+  return { valid: true, error: null };
+}
+
+/**
+ * Sanitize a file path by removing null bytes and normalizing
+ * Does NOT validate path traversal - use validatePathWithinRoot for that
+ * 
+ * @param {string} filePath - The file path to sanitize
+ * @returns {string} - Sanitized file path
+ */
+export function sanitizeFilePath(filePath) {
+  if (typeof filePath !== 'string') {
+    return '';
+  }
+  
+  // Remove null bytes which can be used to bypass security checks
+  return filePath.replace(/\0/g, '');
+}