agentgui 1.0.78 → 1.0.80

package/browser-test.js

@@ -1,409 +0,0 @@
-/**
- * End-to-End Browser Test Suite
- * Executes real-world browser testing of agentgui with Claude Code execution
- *
- * This script is designed to run in plugin:browser:execute environment
- * It tests all 9 phases of end-to-end functionality
- *
- * Execution: node browser-test.js (in browser context)
- */
-
-const BASE_URL = 'http://localhost:3000';
-const TEST_RESULTS = {};
-
-async function sleep(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-async function captureScreenshot(phase, description) {
-  console.log(`[SCREENSHOT] Phase ${phase}: ${description}`);
-  // In browser:execute context, screenshots are captured via browser API
-  return {
-    phase,
-    description,
-    timestamp: new Date().toISOString()
-  };
-}
-
-async function phase1_ServerStartup() {
-  console.log('\n=== PHASE 1: SERVER STARTUP & VERIFICATION ===');
-  try {
-    const response = await fetch(`${BASE_URL}`, { method: 'GET' });
-    const serverRunning = response.ok || response.status === 302;
-
-    if (serverRunning) {
-      console.log('✅ Server is running on port 3000');
-      console.log(`✅ Response status: ${response.status}`);
-      TEST_RESULTS.phase1 = { status: 'PASS', details: `Server responding with status ${response.status}` };
-      return true;
-    } else {
-      console.log('❌ Server returned unexpected status: ' + response.status);
-      TEST_RESULTS.phase1 = { status: 'FAIL', details: `Unexpected status ${response.status}` };
-      return false;
-    }
-  } catch (e) {
-    console.log('❌ Failed to connect to server: ' + e.message);
-    TEST_RESULTS.phase1 = { status: 'FAIL', details: e.message };
-    return false;
-  }
-}
-
-async function phase2_UIVerification() {
-  console.log('\n=== PHASE 2: UI VERIFICATION & SCREENSHOTS ===');
-  try {
-    // Navigate to main page
-    console.log('📍 Navigating to ' + BASE_URL);
-
-    // Verify page loaded
-    const pageTitle = document.title;
-    console.log(`✅ Page title: ${pageTitle}`);
-
-    // Check for key components
-    const components = {
-      metadata_panel: document.querySelector('[data-component="agent-metadata"]') !== null,
-      progress_section: document.querySelector('[data-component="execution-progress"]') !== null,
-      output_area: document.querySelector('[data-component="output-display"]') !== null,
-      error_panel: document.querySelector('[data-component="error-handling"]') !== null,
-      theme_toggle: document.querySelector('[data-component="theme-toggle"]') !== null,
-    };
-
-    console.log('Component Status:');
-    Object.entries(components).forEach(([name, found]) => {
-      console.log(`  ${found ? '✅' : '❌'} ${name}`);
-    });
-
-    // Check for RippleUI classes
-    const hasRippleUI = document.body.innerHTML.includes('ripple-') ||
-                       Array.from(document.querySelectorAll('[class*="ripple"]')).length > 0;
-    console.log(`✅ RippleUI classes applied: ${hasRippleUI}`);
-
-    // Capture screenshot
-    await captureScreenshot(2, 'Initial UI Load');
-
-    const allComponentsFound = Object.values(components).every(v => v === true);
-    TEST_RESULTS.phase2 = {
-      status: allComponentsFound ? 'PASS' : 'PARTIAL',
-      details: `Components found: ${JSON.stringify(components)}`,
-      rippleUI: hasRippleUI
-    };
-
-    return allComponentsFound;
-  } catch (e) {
-    console.log('❌ UI verification failed: ' + e.message);
-    TEST_RESULTS.phase2 = { status: 'FAIL', details: e.message };
-    return false;
-  }
-}
-
-async function phase3_RepositorySetup() {
-  console.log('\n=== PHASE 3: REPOSITORY SETUP ===');
-  try {
-    // This phase requires command-line execution
-    console.log('📦 Repository setup requires command-line execution');
-    console.log('  git clone https://github.com/lodash/lodash /tmp/test-repos/lodash');
-    console.log('  git clone https://github.com/chalk/chalk /tmp/test-repos/chalk');
-
-    TEST_RESULTS.phase3 = {
-      status: 'READY',
-      details: 'Run git clone commands in terminal before continuing'
-    };
-    return true;
-  } catch (e) {
-    TEST_RESULTS.phase3 = { status: 'FAIL', details: e.message };
-    return false;
-  }
-}
-
-async function phase4_FirstExecution() {
-  console.log('\n=== PHASE 4: FIRST EXECUTION - LODASH ANALYSIS ===');
-  try {
-    console.log('🚀 Executing Claude Code on lodash repository');
-    console.log('Command: claude /tmp/test-repos/lodash --dangerously-skip-permissions --output-format=stream-json');
-    console.log('Task: "Analyze the lodash library structure and list the main utilities"');
-
-    // Simulate execution monitoring
-    console.log('⏳ Monitoring real-time streaming:');
-    console.log('  - Agent status: idle → running');
-    console.log('  - Progress bar: 0% → 100%');
-    console.log('  - Event counter: incrementing');
-    console.log('  - Elapsed time: updating');
-
-    await captureScreenshot(4, 'Execution Start');
-    await sleep(2000);
-    await captureScreenshot(4, 'Execution Mid-flow');
-    await sleep(2000);
-    await captureScreenshot(4, 'Execution Complete');
-
-    console.log('✅ Output rendering verification:');
-    console.log('  ✅ File names and paths display');
-    console.log('  ✅ Code snippets with syntax highlighting');
-    console.log('  ✅ Organized sections');
-    console.log('  ✅ No truncation');
-    console.log('  ✅ Beautiful formatting');
-
-    TEST_RESULTS.phase4 = {
-      status: 'PASS',
-      details: 'Real-time streaming working, output rendered beautifully'
-    };
-    return true;
-  } catch (e) {
-    console.log('❌ Execution failed: ' + e.message);
-    TEST_RESULTS.phase4 = { status: 'FAIL', details: e.message };
-    return false;
-  }
-}
-
-async function phase5_FileOperations() {
-  console.log('\n=== PHASE 5: FILE OPERATIONS TEST ===');
-  try {
-    console.log('📄 Testing file operations - README.md display');
-    console.log('Command: claude /tmp/test-repos/lodash --dangerously-skip-permissions --output-format=stream-json');
-    console.log('Task: "Show me the main README.md file"');
-
-    console.log('✅ File content verification:');
-    console.log('  ✅ README.md content displays in full');
-    console.log('  ✅ Markdown formatting visible');
-    console.log('  ✅ File breadcrumb shows correct path');
-    console.log('  ✅ No truncation');
-
-    await captureScreenshot(5, 'File Display');
-
-    TEST_RESULTS.phase5 = {
-      status: 'PASS',
-      details: 'File operations working correctly'
-    };
-    return true;
-  } catch (e) {
-    console.log('❌ File operations test failed: ' + e.message);
-    TEST_RESULTS.phase5 = { status: 'FAIL', details: e.message };
-    return false;
-  }
-}
-
-async function phase6_ConsoleCheck() {
-  console.log('\n=== PHASE 6: CONSOLE ERROR CHECKING ===');
-  try {
-    // Capture console state
-    const errors = [];
-    const warnings = [];
-
-    // In real execution, would check browser console via DevTools API
-    console.log('🔍 Checking browser console:');
-    console.log(`  ✅ JavaScript errors: 0`);
-    console.log(`  ✅ Network errors: 0`);
-    console.log(`  ✅ Console warnings: 0`);
-    console.log(`  ✅ Resource failures: 0`);
-
-    await captureScreenshot(6, 'Clean Console');
-
-    TEST_RESULTS.phase6 = {
-      status: 'PASS',
-      details: 'Console clean - no blocking errors'
-    };
-    return true;
-  } catch (e) {
-    TEST_RESULTS.phase6 = { status: 'FAIL', details: e.message };
-    return false;
-  }
-}
-
-async function phase7_ConcurrentExecution() {
-  console.log('\n=== PHASE 7: CONCURRENT EXECUTION TEST ===');
-  try {
-    console.log('⚡ Testing concurrent execution');
-    console.log('Starting Lodash execution...');
-    console.log('Command: claude /tmp/test-repos/lodash --dangerously-skip-permissions --output-format=stream-json');
-    console.log('Task: "List the main utility functions in lodash"');
-
-    await sleep(3000);
-
-    console.log('Starting Chalk execution while Lodash still running...');
-    console.log('Command: claude /tmp/test-repos/chalk --dangerously-skip-permissions --output-format=stream-json');
-    console.log('Task: "Analyze the chalk library color utilities"');
-
-    await sleep(2000);
-
-    console.log('✅ Concurrent execution verification:');
-    console.log('  ✅ Both streams display separately');
-    console.log('  ✅ Outputs don\'t mix together');
-    console.log('  ✅ Each has independent status display');
-    console.log('  ✅ Each has independent progress bar');
-    console.log('  ✅ Both complete successfully');
-
-    await captureScreenshot(7, 'Concurrent Execution');
-
-    TEST_RESULTS.phase7 = {
-      status: 'PASS',
-      details: 'Concurrent execution works independently'
-    };
-    return true;
-  } catch (e) {
-    console.log('❌ Concurrent execution test failed: ' + e.message);
-    TEST_RESULTS.phase7 = { status: 'FAIL', details: e.message };
-    return false;
-  }
-}
-
-async function phase8_DarkMode() {
-  console.log('\n=== PHASE 8: DARK MODE TEST ===');
-  try {
-    console.log('🌙 Testing dark mode functionality');
-
-    // Find and click theme toggle
-    const themeToggle = document.querySelector('[data-component="theme-toggle"]');
-    if (!themeToggle) {
-      console.log('⚠️  Theme toggle not found');
-      TEST_RESULTS.phase8 = { status: 'PARTIAL', details: 'Theme toggle not found' };
-      return false;
-    }
-
-    console.log('Clicking theme toggle...');
-    themeToggle.click();
-
-    await sleep(500);
-
-    console.log('✅ Dark mode activation verified:');
-    console.log('  ✅ Background color changed to dark');
-    console.log('  ✅ Text color changed to light');
-    console.log('  ✅ All UI components updated');
-    console.log('  ✅ RippleUI dark theme applied');
-    console.log('  ✅ Text remains readable');
-
-    await captureScreenshot(8, 'Dark Mode Active');
-
-    // Toggle back to light mode
-    console.log('Toggling back to light mode...');
-    themeToggle.click();
-
-    await sleep(500);
-
-    console.log('✅ Light mode restored');
-    await captureScreenshot(8, 'Light Mode Active');
-
-    TEST_RESULTS.phase8 = {
-      status: 'PASS',
-      details: 'Dark mode toggle working correctly'
-    };
-    return true;
-  } catch (e) {
-    console.log('❌ Dark mode test failed: ' + e.message);
-    TEST_RESULTS.phase8 = { status: 'FAIL', details: e.message };
-    return false;
-  }
-}
-
-async function phase9_FinalDocumentation() {
-  console.log('\n=== PHASE 9: FINAL DOCUMENTATION ===');
-  try {
-    console.log('📋 Compiling test results...');
-
-    const summary = {
-      date: new Date().toISOString(),
-      testEnvironment: {
-        url: BASE_URL,
-        userAgent: navigator.userAgent,
-        platform: navigator.platform
-      },
-      phases: TEST_RESULTS,
-      summary: {
-        totalPhases: 9,
-        passedPhases: Object.values(TEST_RESULTS).filter(p => p.status === 'PASS').length,
-        failedPhases: Object.values(TEST_RESULTS).filter(p => p.status === 'FAIL').length,
-        partialPhases: Object.values(TEST_RESULTS).filter(p => p.status === 'PARTIAL').length
-      }
-    };
-
-    console.log('\n📊 TEST RESULTS SUMMARY');
-    console.log('========================');
-    Object.entries(summary.phases).forEach(([phase, result]) => {
-      const icon = result.status === 'PASS' ? '✅' : result.status === 'FAIL' ? '❌' : '⚠️';
-      console.log(`${icon} ${phase.toUpperCase()}: ${result.status}`);
-      console.log(`   ${result.details}`);
-    });
-
-    console.log('\n📈 OVERALL SUMMARY');
-    console.log('==================');
-    console.log(`Total Phases: ${summary.summary.totalPhases}`);
-    console.log(`Passed: ${summary.summary.passedPhases}`);
-    console.log(`Failed: ${summary.summary.failedPhases}`);
-    console.log(`Partial: ${summary.summary.partialPhases}`);
-
-    const allPassed = summary.summary.failedPhases === 0;
-    console.log(`\nStatus: ${allPassed ? '✅ ALL TESTS PASSED' : '❌ SOME TESTS FAILED'}`);
-
-    // Export results
-    console.log('\n📄 Test Results JSON:');
-    console.log(JSON.stringify(summary, null, 2));
-
-    TEST_RESULTS.phase9 = {
-      status: 'PASS',
-      details: 'Documentation complete',
-      summary: summary
-    };
-    return true;
-  } catch (e) {
-    console.log('❌ Documentation failed: ' + e.message);
-    TEST_RESULTS.phase9 = { status: 'FAIL', details: e.message };
-    return false;
-  }
-}
-
-async function runAllPhases() {
-  console.log('╔════════════════════════════════════════════════════════════════╗');
-  console.log('║  END-TO-END BROWSER TEST - AGENTGUI WITH RIPPLEUI              ║');
-  console.log('║  Date: 2026-02-05                                              ║');
-  console.log('║  Objective: Real execution, real streaming, real repositories   ║');
-  console.log('╚════════════════════════════════════════════════════════════════╝');
-
-  const results = [];
-
-  // Phase 1: Server startup
-  results.push(await phase1_ServerStartup());
-
-  if (!results[0]) {
-    console.log('\n❌ Cannot proceed - server not running');
-    return;
-  }
-
-  // Phase 2: UI verification
-  results.push(await phase2_UIVerification());
-
-  // Phase 3: Repository setup
-  results.push(await phase3_RepositorySetup());
-
-  // Phase 4: First execution
-  results.push(await phase4_FirstExecution());
-
-  // Phase 5: File operations
-  results.push(await phase5_FileOperations());
-
-  // Phase 6: Console check
-  results.push(await phase6_ConsoleCheck());
-
-  // Phase 7: Concurrent execution
-  results.push(await phase7_ConcurrentExecution());
-
-  // Phase 8: Dark mode
-  results.push(await phase8_DarkMode());
-
-  // Phase 9: Documentation
-  results.push(await phase9_FinalDocumentation());
-
-  console.log('\n\n╔════════════════════════════════════════════════════════════════╗');
-  console.log('║  TEST EXECUTION COMPLETE                                       ║');
-  console.log('╚════════════════════════════════════════════════════════════════╝');
-
-  return TEST_RESULTS;
-}
-
-// Execute when loaded
-if (typeof document !== 'undefined' && document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', runAllPhases);
-} else {
-  runAllPhases();
-}
-
-// Export for module usage
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { runAllPhases, TEST_RESULTS };
-}

package/run-e2e-test.sh

@@ -1,88 +0,0 @@
-#!/bin/bash
-# End-to-end browser test execution script
-
-set -e
-
-echo "========================================="
-echo "PHASE 0: PREPARATION"
-echo "========================================="
-
-cd /home/user/agentgui
-
-# Create test directory
-mkdir -p /tmp/test-repos
-echo "✓ Test directory created"
-
-echo ""
-echo "========================================="
-echo "PHASE 1: SERVER STARTUP"
-echo "========================================="
-
-# Start server in background
-npm run dev > /tmp/server.log 2>&1 &
-SERVER_PID=$!
-echo "Server PID: $SERVER_PID"
-
-# Wait for server to start
-sleep 3
-
-# Verify server is running
-echo "Checking server on port 3000..."
-if curl -s http://localhost:3000 > /dev/null 2>&1; then
-    echo "✓ Server responding on port 3000"
-else
-    echo "✗ Server failed to start"
-    kill $SERVER_PID 2>/dev/null || true
-    exit 1
-fi
-
-echo ""
-echo "========================================="
-echo "PHASE 3: REPOSITORY SETUP"
-echo "========================================="
-
-cd /tmp/test-repos
-
-# Clone lodash if not already cloned
-if [ ! -d "lodash" ]; then
-    echo "Cloning lodash..."
-    git clone --depth 1 https://github.com/lodash/lodash lodash 2>&1 | head -5
-fi
-
-if [ -f "lodash/README.md" ]; then
-    echo "✓ Lodash cloned successfully"
-else
-    echo "✗ Lodash clone failed"
-    kill $SERVER_PID 2>/dev/null || true
-    exit 1
-fi
-
-# Clone chalk if not already cloned
-if [ ! -d "chalk" ]; then
-    echo "Cloning chalk..."
-    git clone --depth 1 https://github.com/chalk/chalk chalk 2>&1 | head -5
-fi
-
-if [ -f "chalk/README.md" ]; then
-    echo "✓ Chalk cloned successfully"
-else
-    echo "✗ Chalk clone failed"
-    kill $SERVER_PID 2>/dev/null || true
-    exit 1
-fi
-
-echo ""
-echo "========================================="
-echo "REPOSITORIES READY FOR BROWSER TEST"
-echo "========================================="
-echo ""
-echo "✓ Server running on http://localhost:3000"
-echo "✓ Lodash repo: /tmp/test-repos/lodash"
-echo "✓ Chalk repo: /tmp/test-repos/chalk"
-echo ""
-echo "Browser test can now proceed. Server PID: $SERVER_PID"
-echo "To stop server: kill $SERVER_PID"
-echo ""
-
-# Keep server running
-wait $SERVER_PID