real-browser-mcp-server 1.3.3 → 1.4.0

package/src/ai/page-analyzer.js

@@ -1,304 +0,0 @@
-/**
- * AI Page Analyzer - Understand page structure and content
- * 
- * Analyzes page to identify:
- * - Interactive elements (buttons, links, inputs)
- * - Forms and form fields
- * - Navigation structure
- * - Main content areas
- * - Media elements
- */
-
-class PageAnalyzer {
-  constructor() {
-    this.analysisTypes = ['full', 'interactive', 'forms', 'navigation', 'content', 'media'];
-  }
-
-  /**
-   * Analyze page structure
-   */
-  async analyze(page, options = {}) {
-    const {
-      analysisType = 'full',
-      includeSelectors = true,
-      includeScreenshot = false,
-      maxDepth = 10
-    } = options;
-
-    const analysis = await page.evaluate(({ analysisType, includeSelectors, maxDepth }) => {
-      const result = {
-        url: window.location.href,
-        title: document.title,
-        timestamp: new Date().toISOString(),
-        viewport: {
-          width: window.innerWidth,
-          height: window.innerHeight
-        }
-      };
-
-      // Helper to generate selector
-      const getSelector = (el) => {
-        if (!includeSelectors) return null;
-        if (el.id) return `#${el.id}`;
-        if (el.name) return `[name="${el.name}"]`;
-        if (el.className && typeof el.className === 'string') {
-          const cls = el.className.split(' ').filter(c => c)[0];
-          if (cls) return `${el.tagName.toLowerCase()}.${cls}`;
-        }
-        return el.tagName.toLowerCase();
-      };
-
-      // Analyze interactive elements
-      if (analysisType === 'full' || analysisType === 'interactive') {
-        result.interactive = {
-          buttons: [],
-          links: [],
-          inputs: []
-        };
-
-        // Buttons
-        document.querySelectorAll('button, [role="button"], input[type="button"], input[type="submit"]').forEach(el => {
-          const rect = el.getBoundingClientRect();
-          if (rect.width > 0 && rect.height > 0) {
-            result.interactive.buttons.push({
-              selector: getSelector(el),
-              text: el.textContent?.trim().substring(0, 50),
-              type: el.type || 'button',
-              disabled: el.disabled,
-              visible: true
-            });
-          }
-        });
-
-        // Links
-        document.querySelectorAll('a[href]').forEach(el => {
-          const rect = el.getBoundingClientRect();
-          if (rect.width > 0 && rect.height > 0) {
-            result.interactive.links.push({
-              selector: getSelector(el),
-              text: el.textContent?.trim().substring(0, 50),
-              href: el.href,
-              target: el.target || '_self',
-              visible: true
-            });
-          }
-        });
-
-        // Inputs
-        document.querySelectorAll('input, textarea, select').forEach(el => {
-          const rect = el.getBoundingClientRect();
-          if (rect.width > 0 && rect.height > 0) {
-            result.interactive.inputs.push({
-              selector: getSelector(el),
-              type: el.type || 'text',
-              name: el.name,
-              placeholder: el.placeholder,
-              required: el.required,
-              disabled: el.disabled,
-              value: el.type === 'password' ? '***' : el.value?.substring(0, 20),
-              visible: true
-            });
-          }
-        });
-      }
-
-      // Analyze forms
-      if (analysisType === 'full' || analysisType === 'forms') {
-        result.forms = [];
-        
-        document.querySelectorAll('form').forEach(form => {
-          const formData = {
-            selector: getSelector(form),
-            action: form.action,
-            method: form.method,
-            fields: []
-          };
-
-          form.querySelectorAll('input, textarea, select').forEach(field => {
-            formData.fields.push({
-              selector: getSelector(field),
-              type: field.type || field.tagName.toLowerCase(),
-              name: field.name,
-              label: document.querySelector(`label[for="${field.id}"]`)?.textContent?.trim(),
-              required: field.required,
-              placeholder: field.placeholder
-            });
-          });
-
-          // Find submit button
-          const submitBtn = form.querySelector('button[type="submit"], input[type="submit"], button:not([type])');
-          if (submitBtn) {
-            formData.submitButton = {
-              selector: getSelector(submitBtn),
-              text: submitBtn.textContent?.trim() || submitBtn.value
-            };
-          }
-
-          result.forms.push(formData);
-        });
-      }
-
-      // Analyze navigation
-      if (analysisType === 'full' || analysisType === 'navigation') {
-        result.navigation = {
-          menus: [],
-          breadcrumbs: null,
-          pagination: null
-        };
-
-        // Find menus
-        document.querySelectorAll('nav, [role="navigation"], .nav, .menu, header ul').forEach(nav => {
-          const links = [];
-          nav.querySelectorAll('a').forEach(a => {
-            links.push({
-              text: a.textContent?.trim().substring(0, 30),
-              href: a.href,
-              selector: getSelector(a)
-            });
-          });
-
-          if (links.length > 0) {
-            result.navigation.menus.push({
-              selector: getSelector(nav),
-              type: nav.tagName.toLowerCase(),
-              links: links.slice(0, 20)
-            });
-          }
-        });
-
-        // Find breadcrumbs
-        const breadcrumb = document.querySelector('[aria-label*="breadcrumb"], .breadcrumb, .breadcrumbs');
-        if (breadcrumb) {
-          result.navigation.breadcrumbs = {
-            selector: getSelector(breadcrumb),
-            items: Array.from(breadcrumb.querySelectorAll('a, span')).map(el => el.textContent?.trim()).filter(Boolean)
-          };
-        }
-
-        // Find pagination
-        const pagination = document.querySelector('.pagination, [aria-label*="pagination"], nav[role="navigation"] a[href*="page"]');
-        if (pagination) {
-          result.navigation.pagination = {
-            selector: getSelector(pagination.closest('nav, .pagination, div')),
-            found: true
-          };
-        }
-      }
-
-      // Analyze main content
-      if (analysisType === 'full' || analysisType === 'content') {
-        result.content = {
-          headings: [],
-          paragraphs: 0,
-          mainContent: null
-        };
-
-        // Headings
-        document.querySelectorAll('h1, h2, h3').forEach(h => {
-          result.content.headings.push({
-            level: parseInt(h.tagName[1]),
-            text: h.textContent?.trim().substring(0, 100),
-            selector: getSelector(h)
-          });
-        });
-
-        // Count paragraphs
-        result.content.paragraphs = document.querySelectorAll('p').length;
-
-        // Find main content area
-        const main = document.querySelector('main, [role="main"], article, .content, #content');
-        if (main) {
-          result.content.mainContent = {
-            selector: getSelector(main),
-            textLength: main.textContent?.length || 0
-          };
-        }
-      }
-
-      // Analyze media
-      if (analysisType === 'full' || analysisType === 'media') {
-        result.media = {
-          images: [],
-          videos: [],
-          iframes: []
-        };
-
-        // Images
-        document.querySelectorAll('img').forEach(img => {
-          const rect = img.getBoundingClientRect();
-          if (rect.width > 50 && rect.height > 50) {
-            result.media.images.push({
-              selector: getSelector(img),
-              src: img.src?.substring(0, 100),
-              alt: img.alt,
-              width: Math.round(rect.width),
-              height: Math.round(rect.height)
-            });
-          }
-        });
-
-        // Videos
-        document.querySelectorAll('video').forEach(video => {
-          result.media.videos.push({
-            selector: getSelector(video),
-            src: video.src || video.querySelector('source')?.src,
-            duration: video.duration,
-            controls: video.controls
-          });
-        });
-
-        // Iframes (potential embedded content)
-        document.querySelectorAll('iframe').forEach(iframe => {
-          result.media.iframes.push({
-            selector: getSelector(iframe),
-            src: iframe.src?.substring(0, 100),
-            title: iframe.title
-          });
-        });
-      }
-
-      // Summary stats
-      result.summary = {
-        totalButtons: result.interactive?.buttons?.length || 0,
-        totalLinks: result.interactive?.links?.length || 0,
-        totalInputs: result.interactive?.inputs?.length || 0,
-        totalForms: result.forms?.length || 0,
-        totalImages: result.media?.images?.length || 0,
-        hasNavigation: (result.navigation?.menus?.length || 0) > 0,
-        isLoginPage: !!(result.interactive?.inputs?.find(i => i.type === 'password')),
-        isSearchPage: !!(result.interactive?.inputs?.find(i => i.type === 'search' || i.name?.includes('search') || i.placeholder?.toLowerCase().includes('search')))
-      };
-
-      return result;
-    }, { analysisType, includeSelectors, maxDepth });
-
-    // Add screenshot if requested
-    if (includeScreenshot) {
-      const screenshot = await page.screenshot({ encoding: 'base64', type: 'jpeg', quality: 50 });
-      analysis.screenshot = screenshot;
-    }
-
-    return analysis;
-  }
-
-  /**
-   * Get quick summary of page
-   */
-  async quickSummary(page) {
-    return await page.evaluate(() => {
-      return {
-        url: window.location.href,
-        title: document.title,
-        buttons: document.querySelectorAll('button, [role="button"]').length,
-        links: document.querySelectorAll('a[href]').length,
-        inputs: document.querySelectorAll('input, textarea').length,
-        forms: document.querySelectorAll('form').length,
-        images: document.querySelectorAll('img').length,
-        hasLogin: !!document.querySelector('input[type="password"]'),
-        hasSearch: !!document.querySelector('input[type="search"], [name*="search"], [placeholder*="earch"]')
-      };
-    });
-  }
-}
-
-module.exports = PageAnalyzer;

package/src/ai/selector-healer.js

@@ -1,236 +0,0 @@
-/**
- * AI Selector Healer - Auto-fix broken CSS selectors
- * 
- * When a selector stops working (page updated, dynamic content, etc.),
- * this module tries to find alternative selectors that match the same element.
- */
-
-class SelectorHealer {
-  constructor() {
-    this.healingStrategies = [
-      'byId',
-      'byName', 
-      'byAriaLabel',
-      'byText',
-      'byClasses',
-      'byAttributes',
-      'byStructure',
-      'byPosition'
-    ];
-  }
-
-  /**
-   * Heal a broken selector by finding alternatives
-   */
-  async heal(page, brokenSelector, options = {}) {
-    const {
-      lastKnownText = null,
-      lastKnownAttributes = {},
-      elementType = null,
-      maxAlternatives = 5
-    } = options;
-
-    const context = {
-      brokenSelector,
-      lastKnownText,
-      lastKnownAttributes,
-      elementType
-    };
-
-    // Try to extract info from broken selector
-    const selectorInfo = this.parseSelector(brokenSelector);
-    
-    // Find alternatives using multiple strategies
-    const alternatives = await page.evaluate(({ context, selectorInfo }) => {
-      const results = [];
-      
-      // Strategy 1: Find by similar ID
-      if (selectorInfo.id) {
-        const elements = document.querySelectorAll(`[id*="${selectorInfo.id}"]`);
-        for (const el of elements) {
-          results.push({
-            selector: `#${el.id}`,
-            confidence: 0.9,
-            strategy: 'byId',
-            reason: 'Similar ID found'
-          });
-        }
-      }
-      
-      // Strategy 2: Find by name attribute
-      if (selectorInfo.name) {
-        const elements = document.querySelectorAll(`[name*="${selectorInfo.name}"]`);
-        for (const el of elements) {
-          results.push({
-            selector: `[name="${el.name}"]`,
-            confidence: 0.85,
-            strategy: 'byName',
-            reason: 'Similar name attribute found'
-          });
-        }
-      }
-      
-      // Strategy 3: Find by last known text
-      if (context.lastKnownText) {
-        const allElements = document.querySelectorAll('button, a, input, label, span, div, [role]');
-        for (const el of allElements) {
-          const text = el.textContent?.trim();
-          if (text && text.toLowerCase().includes(context.lastKnownText.toLowerCase())) {
-            let selector = '';
-            if (el.id) {
-              selector = `#${el.id}`;
-            } else if (el.className) {
-              selector = `${el.tagName.toLowerCase()}.${el.className.split(' ')[0]}`;
-            } else {
-              selector = `${el.tagName.toLowerCase()}`;
-            }
-            
-            results.push({
-              selector,
-              confidence: 0.8,
-              strategy: 'byText',
-              reason: `Contains text: "${text.substring(0, 30)}"`
-            });
-          }
-        }
-      }
-      
-      // Strategy 4: Find by similar classes
-      if (selectorInfo.classes.length > 0) {
-        for (const cls of selectorInfo.classes) {
-          const elements = document.querySelectorAll(`[class*="${cls}"]`);
-          for (const el of elements) {
-            const rect = el.getBoundingClientRect();
-            if (rect.width > 0 && rect.height > 0) {
-              results.push({
-                selector: `.${cls}`,
-                confidence: 0.7,
-                strategy: 'byClasses',
-                reason: `Similar class: ${cls}`
-              });
-            }
-          }
-        }
-      }
-      
-      // Strategy 5: Find by tag and type
-      if (selectorInfo.tag) {
-        let selector = selectorInfo.tag;
-        if (selectorInfo.type) {
-          selector += `[type="${selectorInfo.type}"]`;
-        }
-        
-        const elements = document.querySelectorAll(selector);
-        for (const el of elements) {
-          const rect = el.getBoundingClientRect();
-          if (rect.width > 0 && rect.height > 0) {
-            let uniqueSelector = selector;
-            if (el.placeholder) {
-              uniqueSelector += `[placeholder="${el.placeholder}"]`;
-            } else if (el.value) {
-              uniqueSelector += `[value="${el.value}"]`;
-            }
-            
-            results.push({
-              selector: uniqueSelector,
-              confidence: 0.6,
-              strategy: 'byAttributes',
-              reason: `Similar element structure`
-            });
-          }
-        }
-      }
-      
-      // Strategy 6: Find by aria-label
-      if (context.lastKnownAttributes?.['aria-label']) {
-        const label = context.lastKnownAttributes['aria-label'];
-        const elements = document.querySelectorAll(`[aria-label*="${label}"]`);
-        for (const el of elements) {
-          results.push({
-            selector: `[aria-label="${el.getAttribute('aria-label')}"]`,
-            confidence: 0.85,
-            strategy: 'byAriaLabel',
-            reason: 'Similar aria-label found'
-          });
-        }
-      }
-      
-      // Deduplicate
-      const seen = new Set();
-      return results.filter(r => {
-        if (seen.has(r.selector)) return false;
-        seen.add(r.selector);
-        return true;
-      });
-      
-    }, { context, selectorInfo });
-
-    // Sort by confidence and return top alternatives
-    return alternatives
-      .sort((a, b) => b.confidence - a.confidence)
-      .slice(0, maxAlternatives);
-  }
-
-  /**
-   * Parse a CSS selector to extract components
-   */
-  parseSelector(selector) {
-    const info = {
-      tag: null,
-      id: null,
-      classes: [],
-      name: null,
-      type: null,
-      attributes: {}
-    };
-
-    // Extract ID
-    const idMatch = selector.match(/#([a-zA-Z0-9_-]+)/);
-    if (idMatch) info.id = idMatch[1];
-
-    // Extract classes
-    const classMatches = selector.matchAll(/\.([a-zA-Z0-9_-]+)/g);
-    for (const match of classMatches) {
-      info.classes.push(match[1]);
-    }
-
-    // Extract tag
-    const tagMatch = selector.match(/^([a-zA-Z]+)/);
-    if (tagMatch) info.tag = tagMatch[1];
-
-    // Extract attributes
-    const attrMatches = selector.matchAll(/\[([a-zA-Z-]+)(?:=["']?([^"'\]]+)["']?)?\]/g);
-    for (const match of attrMatches) {
-      const key = match[1];
-      const value = match[2] || true;
-      info.attributes[key] = value;
-      
-      if (key === 'name') info.name = value;
-      if (key === 'type') info.type = value;
-    }
-
-    return info;
-  }
-
-  /**
-   * Test if a selector works
-   */
-  async testSelector(page, selector) {
-    try {
-      const element = await page.$(selector);
-      if (!element) return { valid: false };
-      
-      const info = await element.evaluate(el => ({
-        visible: el.offsetWidth > 0 && el.offsetHeight > 0,
-        tag: el.tagName.toLowerCase(),
-        text: el.textContent?.substring(0, 50)
-      }));
-      
-      return { valid: true, ...info };
-    } catch {
-      return { valid: false };
-    }
-  }
-}
-
-module.exports = SelectorHealer;

package/src/index.js

@@ -1,121 +0,0 @@
-#!/usr/bin/env node
-/**
- * Real Browser - Unified Entry Point
- * 
- * Usage:
- *   node src/index.js             - Start MCP Server (default)
- *   node src/index.js --help      - Show help
- *   node src/index.js --list      - List all available tools
- */
-
-const { TOOLS, TOOL_DISPLAY, CATEGORIES } = require('./shared/tools.js');
-
-// ANSI colors for terminal
-const colors = {
-  reset: '\x1b[0m',
-  bright: '\x1b[1m',
-  dim: '\x1b[2m',
-  green: '\x1b[32m',
-  yellow: '\x1b[33m',
-  blue: '\x1b[34m',
-  magenta: '\x1b[35m',
-  cyan: '\x1b[36m',
-  red: '\x1b[31m',
-};
-
-/**
- * Display help message
- */
-function showHelp() {
-  console.log(`
-${colors.bright}${colors.cyan}🦁 Real Browser - Unified Server${colors.reset}
-
-${colors.bright}USAGE:${colors.reset}
-  node src/index.js [options]
-
-${colors.bright}OPTIONS:${colors.reset}
-  ${colors.yellow}--help, -h${colors.reset}    Show this help message
-  ${colors.yellow}--verbose, -v${colors.reset} Show detailed tool information
-  ${colors.yellow}--list${colors.reset}        List all available tools
-
-${colors.bright}EXAMPLES:${colors.reset}
-  node src/index.js              # Start MCP server
-  node src/index.js --list       # List all tools
-
-${colors.bright}NPM SCRIPTS:${colors.reset}
-  npm run dev                    # Start MCP server
-  npm run mcp                    # Start MCP server only
-
-${colors.bright}ARCHITECTURE:${colors.reset}
-  ${colors.cyan}MCP Server${colors.reset} → STDIO transport → AI Agents (Claude, Cursor, Copilot)
-
-${colors.bright}TOOL CATEGORIES (${TOOLS.length} tools):${colors.reset}
-${Object.entries(CATEGORIES).map(([key, cat]) => {
-  const count = TOOLS.filter(t => t.category === key).length;
-  return `  ${cat.emoji} ${colors.yellow}${cat.name.padEnd(15)}${colors.reset} ${colors.dim}(${count} tools)${colors.reset}`;
-}).join('\n')}
-  `);
-}
-
-/**
- * List all available tools
- */
-function listTools() {
-  console.log(`\n${colors.bright}${colors.cyan}🦁 Available Tools (${TOOLS.length}):${colors.reset}\n`);
-  
-  for (const [key, cat] of Object.entries(CATEGORIES)) {
-    const tools = TOOLS.filter(t => t.category === key);
-    if (tools.length === 0) continue;
-    
-    console.log(`${colors.bright}${cat.emoji} ${cat.name}${colors.reset} ${colors.dim}(${tools.length})${colors.reset}`);
-    console.log(`${colors.dim}${'─'.repeat(50)}${colors.reset}`);
-    
-    for (const tool of tools) {
-      console.log(`  ${tool.emoji} ${colors.yellow}${tool.name.padEnd(25)}${colors.reset} ${colors.dim}${tool.description.substring(0, 40)}${colors.reset}`);
-    }
-    console.log('');
-  }
-}
-
-/**
- * Main entry point
- */
-async function main() {
-  const args = process.argv.slice(2);
-  
-  // Parse arguments
-  const hasHelp = args.includes('--help') || args.includes('-h');
-  const hasList = args.includes('--list');
-  
-  if (hasHelp) {
-    showHelp();
-    process.exit(0);
-  }
-  
-  if (hasList) {
-    listTools();
-    process.exit(0);
-  }
-  
-  console.error('🚀 Real Browser MCP Server starting...');
-  
-  // Import and run MCP server
-  require('./mcp/index.js');
-}
-
-// Export for programmatic use
-module.exports = {
-  TOOLS,
-  TOOL_DISPLAY,
-  CATEGORIES,
-  startMCP: () => require('./mcp/index.js'),
-  startBoth: () => require('./mcp/index.js'),
-};
-
-// Run if called directly
-if (require.main === module) {
-  main().catch(error => {
-    console.error(`${colors.red}❌ Fatal error:${colors.reset}`, error.message);
-    process.exit(1);
-  });
-}