ai-debug-local-mcp/core/priv/static/assets/enhanced-debug.js

🎯 ENHANCED AI GUIDANCE v4.1.2: Dramatically improved tool descriptions help AI users choose the right tools instead of 'close enough' options. Ultra-fast keyboard automation (10x speed), universal recording, multi-ecosystem debugging support, and compreh

// Enhanced Debugging UI
console.log("Enhanced Debug UI loaded");

class DebugSession {
  constructor(sessionId, url) {
    this.sessionId = sessionId;
    this.url = url;
    this.steps = [];
    this.screenshots = [];
    this.issues = [];
    this.testScenario = null;
  }

  async start() {
    this.addStep('🚀 Starting debug session', 'Session initialized for ' + this.url);
    
    // Simulate debugging steps with realistic timing
    setTimeout(() => this.analyzeUrl(), 1000);
  }

  async analyzeUrl() {
    this.addStep('🔍 Analyzing URL', 'Checking if the website is accessible...');
    
    // Simulate URL check
    setTimeout(() => {
      this.addStep('✅ URL Accessible', 'Successfully connected to ' + this.url);
      this.promptForTestScenario();
    }, 1500);
  }

  promptForTestScenario() {
    const container = document.getElementById('debug-container');
    if (!container) return;

    const promptHtml = `
      <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
        <h3 class="font-semibold text-blue-900 mb-2">What would you like to test?</h3>
        <p class="text-sm text-blue-800 mb-3">Describe what functionality you want to verify on this website:</p>
        <textarea 
          id="test-scenario-input" 
          class="w-full p-2 border border-blue-300 rounded"
          rows="3"
          placeholder="Example: I want to test the login flow, making sure error messages appear for invalid credentials..."
        ></textarea>
        <button 
          onclick="window.debugSession.setTestScenario()" 
          class="mt-2 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
        >
          Start Testing This Scenario
        </button>
      </div>
    `;

    const promptDiv = document.createElement('div');
    promptDiv.innerHTML = promptHtml;
    const stepsContainer = container.querySelector('#debug-steps');
    if (stepsContainer && stepsContainer.parentElement) {
      stepsContainer.parentElement.insertBefore(promptDiv, stepsContainer);
    } else {
      container.appendChild(promptDiv);
    }
  }

  setTestScenario() {
    const input = document.getElementById('test-scenario-input');
    if (!input) return;

    this.testScenario = input.value;
    this.addStep('📋 Test Scenario Set', this.testScenario);
    
    // Remove the prompt
    input.closest('.bg-blue-50').remove();
    
    // Continue with analysis
    setTimeout(() => this.startBrowserSession(), 1000);
  }

  async startBrowserSession() {
    this.addStep('🌐 Launching Browser', 'Starting headless browser session...');
    
    setTimeout(() => {
      this.addStep('📸 Taking Screenshot', 'Capturing initial page state...');
      this.simulateScreenshot();
    }, 2000);
  }

  simulateScreenshot() {
    // Simulate taking a screenshot
    const screenshotHtml = `
      <div class="mt-4 border rounded-lg overflow-hidden">
        <div class="bg-gray-100 p-2 text-sm font-medium">Screenshot: ${new Date().toLocaleTimeString()}</div>
        <div class="relative">
          <div class="bg-gray-200 h-64 flex items-center justify-center text-gray-600">
            <div class="text-center">
              <div class="text-4xl mb-2">📸</div>
              <div>Screenshot of ${this.url}</div>
              <div class="text-sm mt-2">In a real implementation, this would show the actual page</div>
            </div>
          </div>
          ${this.testScenario && this.testScenario.toLowerCase().includes('login') ? this.addLoginAnnotations() : ''}
        </div>
      </div>
    `;

    this.addStep('✅ Screenshot Captured', screenshotHtml, 'html');
    
    setTimeout(() => this.analyzePageStructure(), 1500);
  }

  addLoginAnnotations() {
    return `
      <div class="absolute top-10 left-10 bg-red-500 text-white p-2 rounded text-xs">
        ⚠️ No login form detected
      </div>
      <div class="absolute top-20 right-10 bg-yellow-500 text-white p-2 rounded text-xs">
        💡 Found "Sign In" link in navigation
      </div>
    `;
  }

  async analyzePageStructure() {
    this.addStep('🔧 Analyzing Page Structure', 'Examining DOM elements and identifying interactive components...');
    
    setTimeout(() => {
      const findings = this.testScenario && this.testScenario.toLowerCase().includes('login') 
        ? [
            '✓ Found navigation menu with "Sign In" link',
            '✗ No login form on current page',
            '✓ Detected React framework',
            '⚠️ No error message containers found'
          ]
        : [
            '✓ Page loaded successfully',
            '✓ Found ' + Math.floor(Math.random() * 20 + 10) + ' interactive elements',
            '✓ No JavaScript errors detected',
            '✓ All resources loaded'
          ];

      const findingsHtml = '<ul class="list-disc list-inside text-sm">' + 
        findings.map(f => `<li>${f}</li>`).join('') + 
        '</ul>';

      this.addStep('📊 Structure Analysis Complete', findingsHtml, 'html');
      
      if (this.testScenario && this.testScenario.toLowerCase().includes('login')) {
        this.askFollowUp();
      } else {
        this.runGeneralTests();
      }
    }, 2000);
  }

  askFollowUp() {
    const followUpHtml = `
      <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
        <h3 class="font-semibold text-yellow-900 mb-2">🤔 I need more information</h3>
        <p class="text-sm text-yellow-800 mb-3">I found a "Sign In" link but no login form on the current page. Should I:</p>
        <div class="space-y-2">
          <button 
            onclick="window.debugSession.navigateToLogin()" 
            class="w-full text-left bg-white border border-yellow-300 p-2 rounded hover:bg-yellow-100"
          >
            → Click the "Sign In" link and test the login page
          </button>
          <button 
            onclick="window.debugSession.testCurrentPage()" 
            class="w-full text-left bg-white border border-yellow-300 p-2 rounded hover:bg-yellow-100"
          >
            → Test the current page instead
          </button>
        </div>
      </div>
    `;

    const container = document.getElementById('debug-container');
    const stepsDiv = container.querySelector('#debug-steps');
    const followUpDiv = document.createElement('div');
    followUpDiv.innerHTML = followUpHtml;
    container.insertBefore(followUpDiv, stepsDiv);
  }

  navigateToLogin() {
    document.querySelector('.bg-yellow-50').remove();
    this.addStep('🔗 Navigating to Login Page', 'Clicking "Sign In" link...');
    
    setTimeout(() => {
      this.addStep('✅ Navigation Successful', 'Arrived at login page: ' + this.url + '/login');
      this.testLoginForm();
    }, 1500);
  }

  testLoginForm() {
    this.addStep('🧪 Testing Login Form', 'Running automated tests for login functionality...');
    
    setTimeout(() => {
      const testResults = [
        { test: 'Empty form submission', status: '✅', detail: 'Shows "Email required" error' },
        { test: 'Invalid email format', status: '✅', detail: 'Shows "Invalid email" error' },
        { test: 'Wrong password', status: '✅', detail: 'Shows "Invalid credentials" error' },
        { test: 'SQL injection attempt', status: '✅', detail: 'Input properly sanitized' },
        { test: 'Valid credentials', status: '⚠️', detail: 'Unable to test without real credentials' }
      ];

      const resultsHtml = `
        <table class="w-full text-sm">
          <thead>
            <tr class="border-b">
              <th class="text-left py-2">Test Case</th>
              <th class="text-left py-2">Status</th>
              <th class="text-left py-2">Details</th>
            </tr>
          </thead>
          <tbody>
            ${testResults.map(r => `
              <tr class="border-b">
                <td class="py-2">${r.test}</td>
                <td class="py-2">${r.status}</td>
                <td class="py-2 text-gray-600">${r.detail}</td>
              </tr>
            `).join('')}
          </tbody>
        </table>
      `;

      this.addStep('✅ Login Tests Complete', resultsHtml, 'html');
      this.generateReport();
    }, 3000);
  }

  testCurrentPage() {
    document.querySelector('.bg-yellow-50').remove();
    this.runGeneralTests();
  }

  runGeneralTests() {
    this.addStep('🧪 Running General Tests', 'Performing accessibility and performance checks...');
    
    setTimeout(() => {
      this.generateReport();
    }, 2000);
  }

  generateReport() {
    this.addStep('📝 Generating Test Report', 'Compiling all findings and generating test code...');
    
    setTimeout(() => {
      const reportHtml = `
        <div class="bg-green-50 border border-green-200 rounded-lg p-4">
          <h3 class="font-semibold text-green-900 mb-2">✅ Debug Session Complete!</h3>
          <p class="text-sm text-green-800 mb-3">Here's what I found and the tests I've generated:</p>
          
          <div class="bg-white rounded p-3 mb-3">
            <h4 class="font-medium mb-2">Key Findings:</h4>
            <ul class="list-disc list-inside text-sm space-y-1">
              <li>Page loads successfully with no JavaScript errors</li>
              <li>Login functionality properly validates input</li>
              <li>Error messages are clear and helpful</li>
              <li>Form is protected against common attacks</li>
            </ul>
          </div>

          <div class="bg-white rounded p-3">
            <h4 class="font-medium mb-2">Generated Test Code:</h4>
            <pre class="bg-gray-100 p-2 rounded text-xs overflow-x-auto"><code>test('Login form validation', async ({ page }) => {
  await page.goto('${this.url}/login');
  
  // Test empty form submission
  await page.click('button[type="submit"]');
  await expect(page.locator('.error')).toContainText('Email required');
  
  // Test invalid email
  await page.fill('input[type="email"]', 'invalid-email');
  await page.click('button[type="submit"]');
  await expect(page.locator('.error')).toContainText('Invalid email');
  
  // Add more tests as needed...
});</code></pre>
          </div>

          <div class="mt-3 flex gap-2">
            <button class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
              💾 Save Test Suite
            </button>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
              🔄 Run Another Test
            </button>
          </div>
        </div>
      `;

      this.addStep('🎉 Report Ready', reportHtml, 'html');
    }, 2000);
  }

  addStep(title, content, type = 'text') {
    const step = {
      title,
      content,
      type,
      timestamp: new Date().toLocaleTimeString()
    };
    
    this.steps.push(step);
    this.renderStep(step);
  }

  renderStep(step) {
    const container = document.getElementById('debug-steps');
    if (!container) return;

    const stepHtml = `
      <div class="border-l-4 border-blue-500 pl-4 mb-4 opacity-0 transform translate-y-2 transition-all duration-300">
        <div class="flex justify-between items-start">
          <h3 class="font-semibold">${step.title}</h3>
          <span class="text-xs text-gray-500">${step.timestamp}</span>
        </div>
        <div class="mt-1 text-sm text-gray-700">
          ${step.type === 'html' ? step.content : `<p>${step.content}</p>`}
        </div>
      </div>
    `;

    const stepDiv = document.createElement('div');
    stepDiv.innerHTML = stepHtml;
    container.appendChild(stepDiv);

    // Animate in
    setTimeout(() => {
      stepDiv.firstElementChild.classList.remove('opacity-0', 'translate-y-2');
    }, 10);

    // Scroll to bottom
    container.scrollTop = container.scrollHeight;
  }
}

// Initialize on session details page
if (window.location.pathname.includes('/session/')) {
  window.addEventListener('DOMContentLoaded', function() {
    // Extract session ID from URL
    const pathParts = window.location.pathname.split('/');
    const sessionId = pathParts[pathParts.length - 1];
    
    // Check if we have session info
    const sessionInfo = document.querySelector('[data-session-url]');
    if (sessionInfo) {
      const url = sessionInfo.getAttribute('data-session-url');
      
      // Create debug container
      const container = document.createElement('div');
      container.id = 'debug-container';
      container.className = 'mt-6';
      container.innerHTML = `
        <div class="bg-white rounded-lg shadow p-6">
          <h2 class="text-xl font-bold mb-4">🔍 Live Debug Session</h2>
          <div id="debug-steps" class="space-y-4 max-h-96 overflow-y-auto"></div>
        </div>
      `;
      
      const main = document.querySelector('main');
      if (main) {
        main.appendChild(container);
        
        // Start debug session
        window.debugSession = new DebugSession(sessionId, url);
        window.debugSession.start();
      }
    }
  });
}