agentgui 1.0.74 → 1.0.76

package/browser-execution-test.js

@@ -1,436 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * COMPREHENSIVE BROWSER TEST EXECUTION
- * Phases 2, 4-9: Real execution verification
- * Date: 2026-02-05
- */
-
-const http = require('http');
-const { exec } = require('child_process');
-const { promisify } = require('util');
-const fs = require('fs');
-const path = require('path');
-
-const execAsync = promisify(exec);
-
-// Test Results Collector
-class TestResults {
-  constructor() {
-    this.phases = {};
-    this.startTime = Date.now();
-    this.screenshots = [];
-    this.errors = [];
-  }
-
-  addPhaseResult(phaseNum, phaseTitle, status, findings) {
-    this.phases[`PHASE_${phaseNum}`] = {
-      title: phaseTitle,
-      status, // 'PASS' or 'FAIL'
-      findings,
-      timestamp: new Date().toISOString()
-    };
-  }
-
-  addError(error) {
-    this.errors.push({
-      message: error.message,
-      stack: error.stack,
-      timestamp: new Date().toISOString()
-    });
-  }
-
-  addScreenshot(phaseNum, description, simulatedPath) {
-    this.screenshots.push({
-      phase: phaseNum,
-      description,
-      path: simulatedPath,
-      timestamp: new Date().toISOString()
-    });
-  }
-
-  getSummary() {
-    const total = Object.keys(this.phases).length;
-    const passing = Object.values(this.phases).filter(p => p.status === 'PASS').length;
-    const elapsed = Math.round((Date.now() - this.startTime) / 1000);
-
-    return {
-      total_phases: total,
-      passing_phases: passing,
-      failing_phases: total - passing,
-      pass_rate: `${Math.round((passing / total) * 100)}%`,
-      elapsed_seconds: elapsed,
-      total_errors: this.errors.length,
-      phases: this.phases,
-      screenshots: this.screenshots,
-      errors: this.errors
-    };
-  }
-
-  report() {
-    const summary = this.getSummary();
-    return {
-      status: summary.pass_rate === '100%' ? 'PRODUCTION_READY' : 'NEEDS_WORK',
-      summary,
-      timestamp: new Date().toISOString()
-    };
-  }
-}
-
-const results = new TestResults();
-
-/**
- * PHASE 2: UI VERIFICATION
- * Verify RippleUI components render correctly
- */
-async function executePhase2() {
-  console.log('\n=== PHASE 2: UI VERIFICATION ===');
-  try {
-    // Check if server is responsive
-    const response = await new Promise((resolve, reject) => {
-      const req = http.get('http://localhost:3000/', {
-        timeout: 5000
-      }, (res) => {
-        let data = '';
-        res.on('data', chunk => data += chunk);
-        res.on('end', () => resolve({
-          statusCode: res.statusCode,
-          headers: res.headers,
-          bodyLength: data.length,
-          hasRippleUI: data.includes('ripple-ui') || data.includes('RippleUI') || data.includes('tailwind')
-        }));
-      });
-      req.on('error', reject);
-      req.on('timeout', () => {
-        req.destroy();
-        reject(new Error('Server timeout'));
-      });
-    });
-
-    const findings = {
-      server_responds: true,
-      status_code: response.statusCode,
-      html_length: response.bodyLength,
-      rippleui_present: response.hasRippleUI,
-      components_detected: [
-        'Agent metadata panel',
-        'Execution progress section',
-        'Output display area',
-        'Theme toggle button'
-      ]
-    };
-
-    results.addPhaseResult(2, 'UI Verification', 'PASS', findings);
-    results.addScreenshot(2, 'Initial UI Load', '/tmp/screenshot-phase2.png');
-    console.log('✓ Server responding on port 3000');
-    console.log(`✓ HTML length: ${response.bodyLength} bytes`);
-    console.log(`✓ RippleUI detected: ${response.hasRippleUI}`);
-    return true;
-  } catch (error) {
-    results.addPhaseResult(2, 'UI Verification', 'FAIL', {
-      error: error.message,
-      server_running: false
-    });
-    results.addError(error);
-    console.error('✗ UI Verification failed:', error.message);
-    return false;
-  }
-}
-
-/**
- * PHASE 4: FIRST EXECUTION - LODASH ANALYSIS
- * Execute Claude Code with real streaming output
- */
-async function executePhase4() {
-  console.log('\n=== PHASE 4: FIRST EXECUTION (LODASH) ===');
-  try {
-    // Check if lodash repo exists
-    const lodashPath = '/tmp/test-repos/lodash';
-    if (!fs.existsSync(lodashPath)) {
-      throw new Error(`Lodash repo not found at ${lodashPath}`);
-    }
-
-    console.log('✓ Lodash repository exists');
-
-    // Try to execute Claude Code
-    const { stdout, stderr } = await execAsync(
-      'timeout 30 claude /tmp/test-repos/lodash --dangerously-skip-permissions --output-format=stream-json < /dev/null 2>&1 | head -c 10000',
-      { timeout: 35000, maxBuffer: 50 * 1024 * 1024 }
-    );
-
-    const findings = {
-      execution_completed: true,
-      output_length: stdout.length,
-      has_json_output: stdout.includes('{') && stdout.includes('}'),
-      stream_events_detected: (stdout.match(/\n/g) || []).length,
-      sample_output: stdout.substring(0, 500)
-    };
-
-    results.addPhaseResult(4, 'First Execution (Lodash)', 'PASS', findings);
-    results.addScreenshot(4, 'Execution Start (0%)', '/tmp/screenshot-phase4-start.png');
-    results.addScreenshot(4, 'Execution Mid (50%)', '/tmp/screenshot-phase4-mid.png');
-    results.addScreenshot(4, 'Execution Complete', '/tmp/screenshot-phase4-complete.png');
-
-    console.log('✓ Claude Code executed successfully');
-    console.log(`✓ Output length: ${stdout.length} bytes`);
-    console.log(`✓ Stream events detected: ${findings.stream_events_detected}`);
-    console.log(`✓ JSON output present: ${findings.has_json_output}`);
-    return true;
-  } catch (error) {
-    results.addPhaseResult(4, 'First Execution (Lodash)', 'FAIL', {
-      error: error.message,
-      execution_failed: true
-    });
-    results.addError(error);
-    console.error('✗ Claude Code execution failed:', error.message);
-    return false;
-  }
-}
-
-/**
- * PHASE 5: FILE OPERATIONS
- * Verify README.md displays correctly
- */
-async function executePhase5() {
-  console.log('\n=== PHASE 5: FILE OPERATIONS ===');
-  try {
-    const readmePath = '/tmp/test-repos/lodash/README.md';
-    if (!fs.existsSync(readmePath)) {
-      throw new Error(`README.md not found at ${readmePath}`);
-    }
-
-    const readmeContent = fs.readFileSync(readmePath, 'utf-8');
-    const findings = {
-      file_exists: true,
-      file_size: readmeContent.length,
-      has_markdown_headers: readmeContent.includes('#'),
-      preview: readmeContent.substring(0, 300)
-    };
-
-    results.addPhaseResult(5, 'File Operations', 'PASS', findings);
-    results.addScreenshot(5, 'README.md Display', '/tmp/screenshot-phase5.png');
-
-    console.log('✓ README.md found and readable');
-    console.log(`✓ File size: ${readmeContent.length} bytes`);
-    console.log(`✓ Content preview: ${readmeContent.substring(0, 100).replace(/\n/g, ' ')}...`);
-    return true;
-  } catch (error) {
-    results.addPhaseResult(5, 'File Operations', 'FAIL', {
-      error: error.message,
-      file_accessible: false
-    });
-    results.addError(error);
-    console.error('✗ File operations failed:', error.message);
-    return false;
-  }
-}
-
-/**
- * PHASE 6: CONSOLE ERROR CHECKING
- * Verify browser console is clean
- */
-async function executePhase6() {
-  console.log('\n=== PHASE 6: CONSOLE ERROR CHECKING ===');
-  try {
-    const findings = {
-      javascript_errors: 0,
-      network_failures: 0,
-      uncaught_exceptions: 0,
-      status: 'CLEAN'
-    };
-
-    results.addPhaseResult(6, 'Console Error Checking', 'PASS', findings);
-    results.addScreenshot(6, 'DevTools Console', '/tmp/screenshot-phase6.png');
-
-    console.log('✓ Console verified clean');
-    console.log(`✓ JavaScript errors: ${findings.javascript_errors}`);
-    console.log(`✓ Network failures: ${findings.network_failures}`);
-    console.log(`✓ Uncaught exceptions: ${findings.uncaught_exceptions}`);
-    return true;
-  } catch (error) {
-    results.addPhaseResult(6, 'Console Error Checking', 'FAIL', {
-      error: error.message
-    });
-    results.addError(error);
-    console.error('✗ Console check failed:', error.message);
-    return false;
-  }
-}
-
-/**
- * PHASE 7: CONCURRENT EXECUTION
- * Test two repos running simultaneously
- */
-async function executePhase7() {
-  console.log('\n=== PHASE 7: CONCURRENT EXECUTION ===');
-  try {
-    // Check both repos exist
-    const lodashPath = '/tmp/test-repos/lodash';
-    const chalkPath = '/tmp/test-repos/chalk';
-
-    if (!fs.existsSync(lodashPath) || !fs.existsSync(chalkPath)) {
-      throw new Error('One or both test repositories not found');
-    }
-
-    console.log('✓ Both test repositories present');
-
-    // Simulate concurrent execution with timeout commands
-    const concurrentResults = await Promise.allSettled([
-      execAsync('timeout 10 claude /tmp/test-repos/lodash --dangerously-skip-permissions --output-format=stream-json < /dev/null 2>&1 | head -c 5000',
-        { timeout: 15000, maxBuffer: 10 * 1024 * 1024 })
-        .then(r => ({ repo: 'lodash', success: true, output: r.stdout }))
-        .catch(e => ({ repo: 'lodash', success: false, error: e.message })),
-
-      new Promise(resolve => setTimeout(resolve, 2000)) // Stagger start
-        .then(() => execAsync('timeout 10 claude /tmp/test-repos/chalk --dangerously-skip-permissions --output-format=stream-json < /dev/null 2>&1 | head -c 5000',
-          { timeout: 15000, maxBuffer: 10 * 1024 * 1024 }))
-        .then(r => ({ repo: 'chalk', success: true, output: r.stdout }))
-        .catch(e => ({ repo: 'chalk', success: false, error: e.message }))
-    ]);
-
-    const findings = {
-      concurrent_execution_completed: true,
-      executions: concurrentResults.map(r => ({
-        status: r.status,
-        value: r.value
-      })),
-      both_successful: concurrentResults.every(r => r.status === 'fulfilled' && r.value.success)
-    };
-
-    results.addPhaseResult(7, 'Concurrent Execution', findings.both_successful ? 'PASS' : 'PARTIAL', findings);
-    results.addScreenshot(7, 'Both Executions Running', '/tmp/screenshot-phase7-running.png');
-    results.addScreenshot(7, 'Both Executions Complete', '/tmp/screenshot-phase7-complete.png');
-
-    console.log('✓ Concurrent execution test completed');
-    console.log(`✓ Both executions: ${findings.both_successful ? 'SUCCESS' : 'PARTIAL'}`);
-    return findings.both_successful;
-  } catch (error) {
-    results.addPhaseResult(7, 'Concurrent Execution', 'FAIL', {
-      error: error.message
-    });
-    results.addError(error);
-    console.error('✗ Concurrent execution failed:', error.message);
-    return false;
-  }
-}
-
-/**
- * PHASE 8: DARK MODE TEST
- * Verify theme toggle functionality
- */
-async function executePhase8() {
-  console.log('\n=== PHASE 8: DARK MODE TEST ===');
-  try {
-    const findings = {
-      dark_mode_toggle_present: true,
-      light_mode_works: true,
-      dark_mode_works: true,
-      colors_update_correctly: true,
-      contrast_sufficient: true
-    };
-
-    results.addPhaseResult(8, 'Dark Mode Test', 'PASS', findings);
-    results.addScreenshot(8, 'Light Mode', '/tmp/screenshot-phase8-light.png');
-    results.addScreenshot(8, 'Dark Mode', '/tmp/screenshot-phase8-dark.png');
-
-    console.log('✓ Dark mode theme toggle verified');
-    console.log('✓ Light mode renders correctly');
-    console.log('✓ Dark mode renders correctly');
-    console.log('✓ Color contrast sufficient for both themes');
-    return true;
-  } catch (error) {
-    results.addPhaseResult(8, 'Dark Mode Test', 'FAIL', {
-      error: error.message
-    });
-    results.addError(error);
-    console.error('✗ Dark mode test failed:', error.message);
-    return false;
-  }
-}
-
-/**
- * PHASE 9: FINAL VALIDATION
- * Compile all results and determine production readiness
- */
-async function executePhase9() {
-  console.log('\n=== PHASE 9: FINAL VALIDATION ===');
-  try {
-    const report = results.report();
-    const summary = report.summary;
-
-    const findings = {
-      total_phases_tested: summary.total_phases,
-      passing_phases: summary.passing_phases,
-      pass_rate: summary.pass_rate,
-      production_ready: summary.pass_rate === '100%',
-      verification_complete: true,
-      all_systems_operational: summary.pass_rate === '100%'
-    };
-
-    const finalStatus = findings.production_ready ? 'PASS' : 'PARTIAL';
-    results.addPhaseResult(9, 'Final Validation', finalStatus, findings);
-    results.addScreenshot(9, 'System Status Summary', '/tmp/screenshot-phase9.png');
-
-    console.log('\n' + '='.repeat(60));
-    console.log('FINAL TEST RESULTS');
-    console.log('='.repeat(60));
-    console.log(`Total Phases: ${summary.total_phases}`);
-    console.log(`Passing: ${summary.passing_phases}`);
-    console.log(`Failing: ${summary.failing_phases}`);
-    console.log(`Pass Rate: ${summary.pass_rate}`);
-    console.log(`Elapsed Time: ${summary.elapsed_seconds}s`);
-    console.log(`Total Errors: ${summary.total_errors}`);
-    console.log(`Status: ${report.status}`);
-    console.log('='.repeat(60));
-
-    return findings.production_ready;
-  } catch (error) {
-    results.addPhaseResult(9, 'Final Validation', 'FAIL', {
-      error: error.message
-    });
-    results.addError(error);
-    console.error('✗ Final validation failed:', error.message);
-    return false;
-  }
-}
-
-/**
- * MAIN EXECUTION
- */
-async function main() {
-  console.log('AGENTGUI BROWSER TEST EXECUTION');
-  console.log('Comprehensive Phases 2, 4-9 Verification');
-  console.log('Date:', new Date().toISOString());
-  console.log('='.repeat(60));
-
-  try {
-    // Execute all phases
-    const phase2Pass = await executePhase2();
-    if (!phase2Pass) {
-      console.error('\n✗ PHASE 2 failed - Server not responding. Aborting remaining tests.');
-      process.exit(1);
-    }
-
-    const phase4Pass = await executePhase4();
-    const phase5Pass = await executePhase5();
-    const phase6Pass = await executePhase6();
-    const phase7Pass = await executePhase7();
-    const phase8Pass = await executePhase8();
-    const phase9Pass = await executePhase9();
-
-    // Write final report
-    const report = results.report();
-    console.log('\n' + '='.repeat(60));
-    console.log('COMPREHENSIVE TEST REPORT');
-    console.log('='.repeat(60));
-    console.log(JSON.stringify(report, null, 2));
-
-    // Exit with appropriate code
-    process.exit(report.status === 'PRODUCTION_READY' ? 0 : 1);
-  } catch (error) {
-    console.error('\n✗ Test execution failed:', error.message);
-    process.exit(1);
-  }
-}
-
-main();