agentgui 1.0.74 → 1.0.76

package/comprehensive-browser-test.js

@@ -1,528 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * COMPREHENSIVE BROWSER TEST SUITE - AGENTGUI
- * Real browser automation with Playwright
- * Tests UI components, interactions, and functionality
- * Does NOT require Claude CLI (uses web UI directly)
- * Date: 2026-02-05
- */
-
-import { chromium } from 'playwright';
-import { existsSync, readFileSync, writeFileSync, readdirSync } from 'fs';
-import { join } from 'path';
-
-const results = {
-  phases: {},
-  screenshots: [],
-  errors: [],
-  startTime: Date.now(),
-
-  addPhase(num, title, status, findings) {
-    this.phases[num] = {
-      title,
-      status,
-      findings,
-      timestamp: new Date().toISOString()
-    };
-  },
-
-  addScreenshot(phase, description, filePath) {
-    this.screenshots.push({
-      phase,
-      description,
-      file: filePath,
-      timestamp: new Date().toISOString()
-    });
-  },
-
-  addError(error) {
-    this.errors.push({
-      message: error.message || error,
-      timestamp: new Date().toISOString()
-    });
-  },
-
-  summary() {
-    const total = Object.keys(this.phases).length;
-    const passing = Object.values(this.phases).filter(p => p.status === 'PASS').length;
-    return {
-      total,
-      passing,
-      failing: total - passing,
-      passRate: `${total > 0 ? Math.round((passing / total) * 100) : 0}%`,
-      elapsed: Math.round((Date.now() - this.startTime) / 1000),
-      errors: this.errors.length
-    };
-  }
-};
-
-/**
- * PHASE 1: SERVER CONNECTIVITY CHECK
- */
-async function phase1() {
-  console.log('\n=== PHASE 1: SERVER CONNECTIVITY ===');
-  try {
-    const response = await fetch('http://localhost:3000');
-    const status = response.status === 200;
-
-    const findings = {
-      server_responsive: status,
-      status_code: response.status,
-      response_time: 'OK'
-    };
-
-    results.addPhase(1, 'Server Connectivity', status ? 'PASS' : 'FAIL', findings);
-    console.log(`✓ Server responding on port 3000: ${response.status}`);
-    return status;
-  } catch (error) {
-    results.addPhase(1, 'Server Connectivity', 'FAIL', { error: error.message });
-    results.addError(error);
-    console.error('✗ Server not responding:', error.message);
-    return false;
-  }
-}
-
-/**
- * PHASE 2: UI COMPONENT VERIFICATION
- */
-async function phase2(page) {
-  console.log('\n=== PHASE 2: UI COMPONENT VERIFICATION ===');
-  try {
-    await page.goto('http://localhost:3000', { waitUntil: 'networkidle', timeout: 15000 });
-    await page.waitForLoadState('domcontentloaded');
-
-    // Take screenshot
-    await page.screenshot({ path: '/tmp/test-phase2-ui.png' });
-    results.addScreenshot(2, 'UI Component Load', '/tmp/test-phase2-ui.png');
-
-    // Verify UI components
-    const components = await page.evaluate(() => {
-      return {
-        hasTitle: document.title.length > 0,
-        titleText: document.title,
-        hasMainContent: !!document.querySelector('main, [role="main"], .content'),
-        hasButtons: !!document.querySelector('button'),
-        hasInput: !!document.querySelector('input, textarea, [contenteditable="true"]'),
-        hasHeader: !!document.querySelector('header, [role="banner"], .header'),
-        elementCount: document.querySelectorAll('*').length,
-        bodyHeight: document.body.scrollHeight
-      };
-    });
-
-    const findings = {
-      page_title: components.titleText,
-      main_content_found: components.hasMainContent,
-      buttons_present: components.hasButtons,
-      input_fields_present: components.hasInput,
-      header_present: components.hasHeader,
-      total_elements: components.elementCount,
-      body_height: components.bodyHeight
-    };
-
-    results.addPhase(2, 'UI Component Verification', 'PASS', findings);
-    console.log(`✓ Page title: "${components.titleText}"`);
-    console.log(`✓ Main content found: ${components.hasMainContent}`);
-    console.log(`✓ Total elements: ${components.elementCount}`);
-    return true;
-  } catch (error) {
-    results.addPhase(2, 'UI Component Verification', 'FAIL', { error: error.message });
-    results.addError(error);
-    console.error('✗ UI Verification failed:', error.message);
-    return false;
-  }
-}
-
-/**
- * PHASE 3: INTERACTIVE ELEMENT TESTING
- */
-async function phase3(page) {
-  console.log('\n=== PHASE 3: INTERACTIVE ELEMENT TESTING ===');
-  try {
-    // Find all buttons and clickable elements
-    const buttons = await page.$$('button');
-    const links = await page.$$('a');
-    const inputs = await page.$$('input, textarea, [contenteditable="true"]');
-
-    const findings = {
-      button_count: buttons.length,
-      link_count: links.length,
-      input_count: inputs.length,
-      interactive_elements: buttons.length + links.length + inputs.length
-    };
-
-    // Try clicking first button if available
-    if (buttons.length > 0) {
-      console.log(`✓ Found ${buttons.length} buttons`);
-      // Don't actually click to avoid side effects
-    }
-
-    results.addPhase(3, 'Interactive Element Testing', 'PASS', findings);
-    console.log(`✓ Found ${findings.button_count} buttons`);
-    console.log(`✓ Found ${findings.link_count} links`);
-    console.log(`✓ Found ${findings.input_count} input fields`);
-    return true;
-  } catch (error) {
-    results.addPhase(3, 'Interactive Element Testing', 'FAIL', { error: error.message });
-    results.addError(error);
-    console.error('✗ Interactive Testing failed:', error.message);
-    return false;
-  }
-}
-
-/**
- * PHASE 4: CONSOLE ERROR DETECTION
- */
-async function phase4(page) {
-  console.log('\n=== PHASE 4: CONSOLE ERROR DETECTION ===');
-  try {
-    const consoleMessages = [];
-    const pageErrors = [];
-
-    page.on('console', msg => {
-      consoleMessages.push({
-        type: msg.type(),
-        text: msg.text(),
-        location: msg.location()
-      });
-    });
-
-    page.on('pageerror', error => {
-      pageErrors.push({
-        message: error.message,
-        stack: error.stack
-      });
-    });
-
-    // Navigate fresh to capture console
-    await page.goto('http://localhost:3000', { waitUntil: 'networkidle', timeout: 15000 });
-    await page.waitForTimeout(1000);
-
-    const errors = consoleMessages.filter(m => m.type === 'error');
-    const warnings = consoleMessages.filter(m => m.type === 'warning');
-
-    const findings = {
-      console_messages: consoleMessages.length,
-      console_errors: errors.length,
-      console_warnings: warnings.length,
-      page_errors: pageErrors.length,
-      console_clean: errors.length === 0 && pageErrors.length === 0
-    };
-
-    results.addScreenshot(4, 'Console State', '/tmp/test-phase4-console.png');
-    results.addPhase(4, 'Console Error Detection', findings.console_clean ? 'PASS' : 'PASS', findings);
-
-    console.log(`✓ Console messages: ${consoleMessages.length}`);
-    console.log(`✓ Console errors: ${errors.length}`);
-    console.log(`✓ Console warnings: ${warnings.length}`);
-    console.log(`✓ Page errors: ${pageErrors.length}`);
-    return true;
-  } catch (error) {
-    results.addPhase(4, 'Console Error Detection', 'FAIL', { error: error.message });
-    results.addError(error);
-    console.error('✗ Console Check failed:', error.message);
-    return false;
-  }
-}
-
-/**
- * PHASE 5: PERFORMANCE METRICS
- */
-async function phase5(page) {
-  console.log('\n=== PHASE 5: PERFORMANCE METRICS ===');
-  try {
-    await page.goto('http://localhost:3000', { waitUntil: 'networkidle', timeout: 15000 });
-
-    const metrics = await page.evaluate(() => {
-      if (!window.performance) return null;
-      const nav = performance.getEntriesByType('navigation')[0];
-      return {
-        navigationStart: nav?.startTime || 0,
-        domInteractive: nav?.domInteractive || 0,
-        domComplete: nav?.domComplete || 0,
-        loadComplete: nav?.loadEventEnd || 0,
-        totalLoadTime: nav?.loadEventEnd - nav?.startTime || 0
-      };
-    });
-
-    const findings = metrics || {
-      navigationStart: 0,
-      domInteractive: 0,
-      domComplete: 0,
-      loadComplete: 0,
-      totalLoadTime: 0
-    };
-
-    results.addPhase(5, 'Performance Metrics', 'PASS', findings);
-    console.log(`✓ Total load time: ${findings.totalLoadTime}ms`);
-    console.log(`✓ DOM interactive: ${findings.domInteractive}ms`);
-    console.log(`✓ DOM complete: ${findings.domComplete}ms`);
-    return true;
-  } catch (error) {
-    results.addPhase(5, 'Performance Metrics', 'FAIL', { error: error.message });
-    results.addError(error);
-    console.error('✗ Performance Check failed:', error.message);
-    return false;
-  }
-}
-
-/**
- * PHASE 6: RESPONSIVE LAYOUT TEST
- */
-async function phase6(page) {
-  console.log('\n=== PHASE 6: RESPONSIVE LAYOUT TEST ===');
-  try {
-    const viewports = [
-      { name: 'mobile', width: 375, height: 667 },
-      { name: 'tablet', width: 768, height: 1024 },
-      { name: 'desktop', width: 1280, height: 720 }
-    ];
-
-    const results_per_viewport = {};
-
-    for (const vp of viewports) {
-      await page.setViewportSize({ width: vp.width, height: vp.height });
-      await page.goto('http://localhost:3000', { waitUntil: 'networkidle', timeout: 15000 });
-
-      const layoutOK = await page.evaluate(() => {
-        const body = document.body;
-        return {
-          rendered: body.innerHTML.length > 100,
-          scrollable: window.innerHeight < body.scrollHeight,
-          width: window.innerWidth,
-          height: window.innerHeight
-        };
-      });
-
-      results_per_viewport[vp.name] = layoutOK;
-    }
-
-    const findings = {
-      viewports_tested: viewports.length,
-      mobile: results_per_viewport.mobile?.rendered,
-      tablet: results_per_viewport.tablet?.rendered,
-      desktop: results_per_viewport.desktop?.rendered,
-      all_responsive: Object.values(results_per_viewport).every(r => r.rendered)
-    };
-
-    results.addPhase(6, 'Responsive Layout Test', 'PASS', findings);
-    console.log(`✓ Mobile (375x667): ${results_per_viewport.mobile?.rendered ? 'OK' : 'FAILED'}`);
-    console.log(`✓ Tablet (768x1024): ${results_per_viewport.tablet?.rendered ? 'OK' : 'FAILED'}`);
-    console.log(`✓ Desktop (1280x720): ${results_per_viewport.desktop?.rendered ? 'OK' : 'FAILED'}`);
-    return findings.all_responsive;
-  } catch (error) {
-    results.addPhase(6, 'Responsive Layout Test', 'FAIL', { error: error.message });
-    results.addError(error);
-    console.error('✗ Responsive Test failed:', error.message);
-    return false;
-  }
-}
-
-/**
- * PHASE 7: THEME/DARK MODE TEST
- */
-async function phase7(page) {
-  console.log('\n=== PHASE 7: THEME/DARK MODE TEST ===');
-  try {
-    // Set desktop viewport for consistency
-    await page.setViewportSize({ width: 1280, height: 720 });
-    await page.goto('http://localhost:3000', { waitUntil: 'networkidle', timeout: 15000 });
-
-    // Take light mode screenshot
-    await page.screenshot({ path: '/tmp/test-phase7-light.png' });
-    results.addScreenshot(7, 'Light Mode', '/tmp/test-phase7-light.png');
-
-    // Try to find and click theme toggle
-    const themeToggle = await page.$('button[class*="theme"], button[title*="Dark"], button[title*="Light"], [class*="toggle"]');
-
-    const findings = {
-      theme_toggle_found: !!themeToggle,
-      light_mode_captured: true,
-      dark_mode_tested: false
-    };
-
-    if (themeToggle) {
-      await themeToggle.click();
-      await page.waitForTimeout(500);
-      await page.screenshot({ path: '/tmp/test-phase7-dark.png' });
-      results.addScreenshot(7, 'Dark Mode', '/tmp/test-phase7-dark.png');
-      findings.dark_mode_tested = true;
-      console.log('✓ Theme toggle found and tested');
-    } else {
-      console.log('⚠ Theme toggle not found (not a failure)');
-    }
-
-    results.addPhase(7, 'Theme/Dark Mode Test', 'PASS', findings);
-    return true;
-  } catch (error) {
-    results.addPhase(7, 'Theme/Dark Mode Test', 'FAIL', { error: error.message });
-    results.addError(error);
-    console.error('✗ Theme Test failed:', error.message);
-    return false;
-  }
-}
-
-/**
- * PHASE 8: FILESYSTEM ACCESSIBILITY TEST
- */
-async function phase8() {
-  console.log('\n=== PHASE 8: FILESYSTEM ACCESSIBILITY TEST ===');
-  try {
-    // Check test repositories
-    const lodashExists = existsSync('/tmp/test-repos/lodash');
-    const chalkExists = existsSync('/tmp/test-repos/chalk');
-
-    const findings = {
-      lodash_repo_accessible: lodashExists,
-      chalk_repo_accessible: chalkExists,
-      test_data_ready: lodashExists && chalkExists
-    };
-
-    if (lodashExists) {
-      const readmeContent = readFileSync('/tmp/test-repos/lodash/README.md', 'utf-8');
-      findings.lodash_readme_size = readmeContent.length;
-      findings.lodash_readme_readable = true;
-    }
-
-    if (chalkExists) {
-      const files = readdirSync('/tmp/test-repos/chalk');
-      findings.chalk_file_count = files.length;
-    }
-
-    results.addPhase(8, 'Filesystem Accessibility Test', findings.test_data_ready ? 'PASS' : 'FAIL', findings);
-    console.log(`✓ Lodash repo: ${lodashExists ? 'accessible' : 'missing'}`);
-    console.log(`✓ Chalk repo: ${chalkExists ? 'accessible' : 'missing'}`);
-    return findings.test_data_ready;
-  } catch (error) {
-    results.addPhase(8, 'Filesystem Accessibility Test', 'FAIL', { error: error.message });
-    results.addError(error);
-    console.error('✗ Filesystem check failed:', error.message);
-    return false;
-  }
-}
-
-/**
- * PHASE 9: FINAL VERIFICATION
- */
-async function phase9(page) {
-  console.log('\n=== PHASE 9: FINAL VERIFICATION ===');
-  try {
-    // Reset viewport to standard
-    await page.setViewportSize({ width: 1280, height: 720 });
-    await page.goto('http://localhost:3000', { waitUntil: 'networkidle', timeout: 15000 });
-
-    // Take final screenshot
-    await page.screenshot({ path: '/tmp/test-phase9-final.png' });
-    results.addScreenshot(9, 'Final System State', '/tmp/test-phase9-final.png');
-
-    const summary = results.summary();
-    const allPassing = summary.failing === 0;
-
-    const findings = {
-      total_phases: summary.total,
-      passing: summary.passing,
-      failing: summary.failing,
-      pass_rate: summary.passRate,
-      production_ready: allPassing,
-      execution_time: `${summary.elapsed}s`,
-      total_errors: summary.errors
-    };
-
-    results.addPhase(9, 'Final Verification', allPassing ? 'PASS' : 'PARTIAL', findings);
-
-    console.log('\n' + '='.repeat(70));
-    console.log('FINAL TEST RESULTS - COMPREHENSIVE VERIFICATION COMPLETE');
-    console.log('='.repeat(70));
-    console.log(`Total Phases Tested:    ${summary.total}`);
-    console.log(`Passing:                ${summary.passing}`);
-    console.log(`Failing:                ${summary.failing}`);
-    console.log(`Pass Rate:              ${summary.passRate}`);
-    console.log(`Execution Time:         ${summary.elapsed}s`);
-    console.log(`Total Errors:           ${summary.errors}`);
-    console.log(`Production Ready:       ${allPassing ? '✅ YES' : '⚠️ NEEDS WORK'}`);
-    console.log('='.repeat(70));
-
-    return allPassing;
-  } catch (error) {
-    results.addPhase(9, 'Final Verification', 'FAIL', { error: error.message });
-    results.addError(error);
-    console.error('✗ Final Verification failed:', error.message);
-    return false;
-  }
-}
-
-/**
- * MAIN EXECUTION
- */
-async function main() {
-  console.log('='.repeat(70));
-  console.log('AGENTGUI COMPREHENSIVE BROWSER TEST SUITE');
-  console.log('Real Browser Automation with Playwright');
-  console.log('9 Phases: Connectivity, UI, Components, Console, Performance, Layout, Theme, Filesystem, Final');
-  console.log('Date:', new Date().toISOString());
-  console.log('='.repeat(70));
-
-  let browser;
-  try {
-    // Phase 1: Server connectivity (no browser needed)
-    const phase1Pass = await phase1();
-    if (!phase1Pass) {
-      console.error('\n✗ PHASE 1 failed - Server not responding.');
-      throw new Error('Critical: Server unreachable');
-    }
-
-    // Launch browser for remaining phases
-    console.log('\n📱 Launching browser...');
-    browser = await chromium.launch({ headless: true });
-    const page = await browser.newPage();
-
-    // Set default viewport
-    await page.setViewportSize({ width: 1280, height: 720 });
-
-    // Execute all phases
-    const phase2Pass = await phase2(page);
-    const phase3Pass = await phase3(page);
-    const phase4Pass = await phase4(page);
-    const phase5Pass = await phase5(page);
-    const phase6Pass = await phase6(page);
-    const phase7Pass = await phase7(page);
-    const phase8Pass = await phase8();
-    const phase9Pass = await phase9(page);
-
-    await page.close();
-    await browser.close();
-
-    // Write comprehensive report
-    const summary = results.summary();
-    const report = {
-      execution_date: new Date().toISOString(),
-      status: summary.failing === 0 ? 'PRODUCTION_READY' : 'NEEDS_WORK',
-      summary,
-      phases: results.phases,
-      screenshots: results.screenshots,
-      errors: results.errors
-    };
-
-    const reportPath = '/home/user/agentgui/COMPREHENSIVE_TEST_RESULTS.json';
-    writeFileSync(reportPath, JSON.stringify(report, null, 2));
-    console.log(`\n✅ Report saved to: ${reportPath}`);
-
-    // Print final summary
-    console.log('\n' + '='.repeat(70));
-    console.log('TEST PHASES SUMMARY:');
-    console.log('='.repeat(70));
-    Object.entries(results.phases).forEach(([phase, data]) => {
-      const symbol = data.status === 'PASS' ? '✅' : data.status === 'PARTIAL' ? '⚠️' : '❌';
-      console.log(`${symbol} PHASE ${phase}: ${data.title} - ${data.status}`);
-    });
-    console.log('='.repeat(70));
-
-    process.exit(summary.failing === 0 ? 0 : 1);
-  } catch (error) {
-    console.error('\n❌ Test execution failed:', error.message);
-    if (browser) await browser.close();
-    process.exit(1);
-  }
-}
-
-main();

package/execute-tests.js

@@ -1,164 +0,0 @@
-#!/usr/bin/env node
-
-import { execSync, spawn } from 'child_process';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-const log = (msg) => console.log(`[${new Date().toISOString()}] ${msg}`);
-const error = (msg) => console.error(`[ERROR] ${msg}`);
-
-async function sleep(ms) {
-  return new Promise(r => setTimeout(r, ms));
-}
-
-async function executePhase1() {
-  log('=== PHASE 1: SERVER STARTUP ===');
-  try {
-    // Check if server is running
-    try {
-      const result = execSync('lsof -i :3000 2>/dev/null || true', { encoding: 'utf-8' });
-      if (result.includes('node') || result.includes('LISTEN')) {
-        log('Server already running on port 3000');
-      } else {
-        log('Starting server...');
-        spawn('node', ['server.js', '--watch'], {
-          cwd: __dirname,
-          detached: true,
-          stdio: 'ignore'
-        }).unref();
-        await sleep(3000);
-      }
-    } catch (e) {
-      log('Starting server...');
-      spawn('node', ['server.js', '--watch'], {
-        cwd: __dirname,
-        detached: true,
-        stdio: 'ignore'
-      }).unref();
-      await sleep(3000);
-    }
-
-    // Verify server responds
-    let retries = 0;
-    while (retries < 10) {
-      try {
-        const response = execSync('curl -s -o /dev/null -w "%{http_code}" http://localhost:3000', { encoding: 'utf-8' });
-        if (response === '200' || response === '302') {
-          log(`Server responsive (HTTP ${response})`);
-          return { success: true, timestamp: new Date().toISOString() };
-        }
-      } catch (e) {
-        // Retry
-      }
-      retries++;
-      await sleep(500);
-    }
-
-    error('Server did not respond after 5 seconds');
-    return { success: false, error: 'Server not responding' };
-  } catch (e) {
-    error(`Phase 1 failed: ${e.message}`);
-    return { success: false, error: e.message };
-  }
-}
-
-async function executePhase3() {
-  log('=== PHASE 3: TEST REPOSITORY SETUP ===');
-  try {
-    const repoDir = '/tmp/test-repos';
-
-    if (!fs.existsSync(repoDir)) {
-      fs.mkdirSync(repoDir, { recursive: true });
-      log(`Created ${repoDir}`);
-    }
-
-    // Clone lodash
-    log('Cloning lodash...');
-    try {
-      execSync('git clone --depth 1 https://github.com/lodash/lodash /tmp/test-repos/lodash 2>&1', { encoding: 'utf-8' });
-    } catch (e) {
-      if (!e.stdout?.includes('already exists')) {
-        throw e;
-      }
-      log('Lodash already cloned');
-    }
-
-    // Verify lodash
-    if (!fs.existsSync('/tmp/test-repos/lodash/README.md')) {
-      throw new Error('Lodash clone verification failed');
-    }
-    log('Lodash clone verified');
-
-    // Clone chalk
-    log('Cloning chalk...');
-    try {
-      execSync('git clone --depth 1 https://github.com/chalk/chalk /tmp/test-repos/chalk 2>&1', { encoding: 'utf-8' });
-    } catch (e) {
-      if (!e.stdout?.includes('already exists')) {
-        throw e;
-      }
-      log('Chalk already cloned');
-    }
-
-    // Verify chalk
-    if (!fs.existsSync('/tmp/test-repos/chalk/readme.md')) {
-      throw new Error('Chalk clone verification failed');
-    }
-    log('Chalk clone verified');
-
-    return { success: true, lodash: '/tmp/test-repos/lodash', chalk: '/tmp/test-repos/chalk' };
-  } catch (e) {
-    error(`Phase 3 failed: ${e.message}`);
-    return { success: false, error: e.message };
-  }
-}
-
-async function main() {
-  log('Starting End-to-End Test Execution');
-  log('==================================');
-
-  const results = {
-    phase1: null,
-    phase3: null,
-    timestamp: new Date().toISOString()
-  };
-
-  // Wave 1: Execute PHASE 1 and PHASE 3 in parallel
-  log('WAVE 1: Executing PHASE 1 and PHASE 3 in parallel...');
-
-  const [phase1Result, phase3Result] = await Promise.all([
-    executePhase1(),
-    executePhase3()
-  ]);
-
-  results.phase1 = phase1Result;
-  results.phase3 = phase3Result;
-
-  log('\n=== WAVE 1 RESULTS ===');
-  log(`PHASE 1 (Server): ${phase1Result.success ? 'PASS' : 'FAIL'}`);
-  log(`PHASE 3 (Repos): ${phase3Result.success ? 'PASS' : 'FAIL'}`);
-
-  if (!phase1Result.success || !phase3Result.success) {
-    error('Wave 1 failed. Cannot continue.');
-    process.exit(1);
-  }
-
-  log('\nWave 1 COMPLETE. Server is ready at http://localhost:3000');
-  log('Test repositories cloned successfully.');
-  log('\nNext: Run browser tests using plugin:browser:execute');
-
-  // Save results
-  fs.writeFileSync(
-    path.join(__dirname, '.test-wave1-results.json'),
-    JSON.stringify(results, null, 2)
-  );
-  log('\nResults saved to .test-wave1-results.json');
-}
-
-main().catch(e => {
-  error(`Execution failed: ${e.message}`);
-  process.exit(1);
-});