Sync changes - automated commit

DEBUG-README.md

@@ -0,0 +1,131 @@
+# AutoSite Application Debug Guide
+
+## Overview
+
+This document provides a comprehensive guide for debugging and testing the AutoSite application, with a particular focus on the AskAI component and its integration with the backend server.
+
+## Application Structure
+
+### Frontend Components
+
+- **App.tsx**: Main application container that manages the HTML content state and layout
+- **AskAI Component**: Handles AI interactions with streaming response processing
+- **Preview Component**: Renders HTML content in an iframe with refresh capability
+
+### Backend Services
+
+- **/api/ask-ai**: Processes prompts and streams AI responses (full HTML or diff mode)
+- **/api/apply-diffs**: Applies diff blocks to original HTML content
+
+## Key Features to Test
+
+### AskAI Component
+
+1. **Response Handling**
+   - Full HTML mode for initial requests
+   - Diff mode for follow-up requests
+   - Streaming implementation with real-time preview updates
+
+2. **Progress Indicators**
+   - Progress bar with percentage
+   - Response mode indicator (diff/full)
+   - Loading animations
+   - Success animation and sound
+
+3. **Error Handling**
+   - Network error handling
+   - Authentication error handling with login modal
+   - Malformed response handling
+
+## Testing Resources
+
+The following files have been created to assist with testing:
+
+1. **test-plan.md**: Comprehensive test plan outlining test cases and approaches
+2. **test-html.html**: Sample HTML file for testing the application
+3. **visual-test-script.js**: Browser-based script for testing UI components
+4. **api-test-script.js**: Node.js script for testing backend API endpoints
+5. **debug-report.md**: Detailed analysis of the application architecture and potential issues
+
+## Running the Application
+
+### Prerequisites
+
+1. Create a `.env` file based on `.env.example` with the following variables:
+   - `OAUTH_CLIENT_ID`: HuggingFace OAuth client ID
+   - `OAUTH_CLIENT_SECRET`: HuggingFace OAuth client secret
+   - `APP_PORT`: Port for the backend server (default: 3000)
+   - `REDIRECT_URI`: OAuth redirect URI
+   - `DEFAULT_HF_TOKEN`: HuggingFace API token for anonymous users
+
+### Starting the Application
+
+1. Start the frontend development server:
+   ```
+   npm run dev
+   ```
+
+2. Start the backend server in a separate terminal:
+   ```
+   node server.js
+   ```
+
+3. Access the application at:
+   - Frontend: http://localhost:5173
+   - Backend API: http://localhost:3000
+
+## Testing Procedures
+
+### Visual Testing
+
+1. Open the application in a browser
+2. Open the browser console
+3. Load the visual test script:
+   ```javascript
+   const script = document.createElement('script');
+   script.src = '/visual-test-script.js';
+   document.head.appendChild(script);
+   ```
+4. Run the tests:
+   ```javascript
+   runAllTests();
+   ```
+
+### API Testing
+
+1. Ensure the backend server is running
+2. Run the API test script using Node.js:
+   ```
+   node api-test-script.js
+   ```
+
+## Common Issues and Solutions
+
+### Environment Configuration
+
+- **Missing HuggingFace Token**: The application requires a valid HuggingFace API token in the `DEFAULT_HF_TOKEN` environment variable
+- **Port Conflicts**: Ensure ports 3000 (backend) and 5173 (frontend) are available
+
+### Network Issues
+
+- **CORS Errors**: If testing the frontend and backend on different ports, CORS issues may occur
+- **Rate Limiting**: HuggingFace API has rate limits that may affect testing
+
+### UI Issues
+
+- **Responsive Layout**: Test on different screen sizes to verify responsive behavior
+- **Progress Indicator**: Verify progress updates correctly during streaming
+- **Preview Updates**: Check that preview updates in real-time during streaming
+
+## Debugging Tips
+
+1. **Console Logging**: The application includes extensive console logging for debugging
+2. **Network Monitoring**: Use browser DevTools to monitor API requests and responses
+3. **State Inspection**: Monitor React state changes during AI processing
+4. **Visual Verification**: Check progress indicators and animations during processing
+
+## Conclusion
+
+The AutoSite application demonstrates a well-structured approach to integrating AI assistance into a web development tool. The streaming response handling, progress indicators, and dual-mode response processing provide a solid foundation for an interactive AI-assisted development experience.
+
+Refer to the detailed test plan and debug report for more comprehensive information on testing and potential improvements.

api-test-script.js

@@ -0,0 +1,434 @@
+/**
+ * API Test Script for AutoSite Application
+ * 
+ * This script provides functions to test the backend API endpoints
+ * that support the AskAI component functionality.
+ */
+
+// Configuration
+const API_BASE_URL = 'http://localhost:3000';
+const TEST_HTML = `<!DOCTYPE html>
+<html>
+<head>
+  <title>Test Page</title>
+</head>
+<body>
+  <h1>Hello World</h1>
+  <p>This is a test page.</p>
+</body>
+</html>`;
+
+// Test prompts for different scenarios
+const TEST_PROMPTS = {
+  initial: "Create a simple landing page with a header and footer",
+  followUp: "Add a contact form to the page",
+  complex: "Create a responsive portfolio page with navigation, hero section, project gallery, and contact form"
+};
+
+// Helper function for making API requests
+async function makeRequest(endpoint, method = 'GET', body = null) {
+  const options = {
+    method,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  };
+
+  if (body) {
+    options.body = JSON.stringify(body);
+  }
+
+  try {
+    const response = await fetch(`${API_BASE_URL}${endpoint}`, options);
+    const contentType = response.headers.get('Content-Type');
+    
+    // Log response headers for debugging
+    console.log('Response headers:', {
+      'Content-Type': contentType,
+      'X-Response-Type': response.headers.get('X-Response-Type')
+    });
+    
+    // Handle different response types
+    if (contentType && contentType.includes('application/json')) {
+      return {
+        status: response.status,
+        headers: response.headers,
+        body: await response.json()
+      };
+    } else {
+      return {
+        status: response.status,
+        headers: response.headers,
+        body: await response.text()
+      };
+    }
+  } catch (error) {
+    console.error('API request failed:', error);
+    return {
+      error: error.message
+    };
+  }
+}
+
+// Test the /api/ask-ai endpoint with initial prompt (full HTML mode)
+async function testAskAiInitial() {
+  console.log('\n--- Testing /api/ask-ai with initial prompt ---');
+  
+  const requestBody = {
+    prompt: TEST_PROMPTS.initial
+  };
+  
+  console.log('Request:', requestBody);
+  
+  // For streaming endpoints, we need to handle the response differently
+  try {
+    const response = await fetch(`${API_BASE_URL}/api/ask-ai`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(requestBody)
+    });
+    
+    console.log('Response status:', response.status);
+    console.log('Response headers:', {
+      'Content-Type': response.headers.get('Content-Type'),
+      'X-Response-Type': response.headers.get('X-Response-Type')
+    });
+    
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Error response:', errorText);
+      return false;
+    }
+    
+    // Handle streaming response
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder('utf-8');
+    let receivedChunks = 0;
+    let receivedContent = '';
+    
+    while (true) {
+      const { done, value } = await reader.read();
+      
+      if (done) {
+        console.log('Stream complete after', receivedChunks, 'chunks');
+        break;
+      }
+      
+      const chunk = decoder.decode(value, { stream: true });
+      receivedContent += chunk;
+      receivedChunks++;
+      
+      // Log progress
+      if (receivedChunks % 5 === 0) {
+        console.log(`Received ${receivedChunks} chunks, total length: ${receivedContent.length}`);
+      }
+    }
+    
+    // Validate response content
+    const hasHtmlStructure = receivedContent.includes('<!DOCTYPE html>') || 
+                            (receivedContent.includes('<html') && receivedContent.includes('</html>'));
+    
+    if (hasHtmlStructure) {
+      console.log('Response contains valid HTML structure');
+      // Log a sample of the response
+      console.log('Sample of response:', receivedContent.substring(0, 200) + '...');
+      return true;
+    } else {
+      console.error('Response does not contain valid HTML structure');
+      console.log('Response content:', receivedContent);
+      return false;
+    }
+    
+  } catch (error) {
+    console.error('Test failed:', error);
+    return false;
+  }
+}
+
+// Test the /api/ask-ai endpoint with follow-up prompt (diff mode)
+async function testAskAiFollowUp() {
+  console.log('\n--- Testing /api/ask-ai with follow-up prompt (diff mode) ---');
+  
+  const requestBody = {
+    prompt: TEST_PROMPTS.followUp,
+    html: TEST_HTML,
+    previousPrompt: TEST_PROMPTS.initial
+  };
+  
+  console.log('Request:', requestBody);
+  
+  try {
+    const response = await fetch(`${API_BASE_URL}/api/ask-ai`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(requestBody)
+    });
+    
+    console.log('Response status:', response.status);
+    console.log('Response headers:', {
+      'Content-Type': response.headers.get('Content-Type'),
+      'X-Response-Type': response.headers.get('X-Response-Type')
+    });
+    
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Error response:', errorText);
+      return false;
+    }
+    
+    // Verify response type header indicates diff mode
+    const responseType = response.headers.get('X-Response-Type');
+    if (responseType !== 'diff') {
+      console.warn(`Expected response type 'diff', but got '${responseType}'`);
+    }
+    
+    // Handle streaming response
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder('utf-8');
+    let receivedChunks = 0;
+    let receivedContent = '';
+    
+    while (true) {
+      const { done, value } = await reader.read();
+      
+      if (done) {
+        console.log('Stream complete after', receivedChunks, 'chunks');
+        break;
+      }
+      
+      const chunk = decoder.decode(value, { stream: true });
+      receivedContent += chunk;
+      receivedChunks++;
+      
+      // Log progress
+      if (receivedChunks % 5 === 0) {
+        console.log(`Received ${receivedChunks} chunks, total length: ${receivedContent.length}`);
+      }
+    }
+    
+    // For diff mode, check if response contains search/replace blocks
+    const hasDiffBlocks = receivedContent.includes('<<<<<<< SEARCH') && 
+                         receivedContent.includes('======= REPLACE') && 
+                         receivedContent.includes('>>>>>>> END');
+    
+    if (hasDiffBlocks) {
+      console.log('Response contains valid diff blocks');
+      // Log a sample of the response
+      console.log('Sample of response:', receivedContent.substring(0, 200) + '...');
+      return true;
+    } else {
+      console.warn('Response may not contain valid diff blocks');
+      console.log('Response content:', receivedContent);
+      return false;
+    }
+    
+  } catch (error) {
+    console.error('Test failed:', error);
+    return false;
+  }
+}
+
+// Test the /api/apply-diffs endpoint
+async function testApplyDiffs() {
+  console.log('\n--- Testing /api/apply-diffs endpoint ---');
+  
+  // Create a sample diff response
+  const sampleDiff = `Here are the changes to add a contact form:
+
+<<<<<<< SEARCH
+  <p>This is a test page.</p>
+</body>
+======= REPLACE
+  <p>This is a test page.</p>
+  
+  <h2>Contact Us</h2>
+  <form>
+    <div>
+      <label for="name">Name:</label>
+      <input type="text" id="name" name="name" required>
+    </div>
+    <div>
+      <label for="email">Email:</label>
+      <input type="email" id="email" name="email" required>
+    </div>
+    <div>
+      <label for="message">Message:</label>
+      <textarea id="message" name="message" rows="4" required></textarea>
+    </div>
+    <button type="submit">Send</button>
+  </form>
+</body>
+>>>>>>> END`;
+  
+  const requestBody = {
+    originalHtml: TEST_HTML,
+    aiResponseContent: sampleDiff
+  };
+  
+  console.log('Request:', requestBody);
+  
+  try {
+    const response = await fetch(`${API_BASE_URL}/api/apply-diffs`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(requestBody)
+    });
+    
+    console.log('Response status:', response.status);
+    
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Error response:', errorText);
+      return false;
+    }
+    
+    const responseText = await response.text();
+    
+    // Verify the response contains the applied changes
+    const hasContactForm = responseText.includes('<h2>Contact Us</h2>') && 
+                          responseText.includes('<form>') &&
+                          responseText.includes('</form>');
+    
+    if (hasContactForm) {
+      console.log('Diff was successfully applied');
+      console.log('Modified HTML:', responseText);
+      return true;
+    } else {
+      console.error('Diff was not applied correctly');
+      console.log('Response:', responseText);
+      return false;
+    }
+    
+  } catch (error) {
+    console.error('Test failed:', error);
+    return false;
+  }
+}
+
+// Test error handling for /api/ask-ai endpoint
+async function testAskAiErrorHandling() {
+  console.log('\n--- Testing /api/ask-ai error handling ---');
+  
+  // Test with empty prompt (should return 400)
+  const requestBody = {
+    prompt: ""
+  };
+  
+  console.log('Request with empty prompt:', requestBody);
+  
+  try {
+    const response = await fetch(`${API_BASE_URL}/api/ask-ai`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(requestBody)
+    });
+    
+    console.log('Response status:', response.status);
+    
+    if (response.status === 400) {
+      console.log('Server correctly returned 400 for empty prompt');
+      const errorJson = await response.json();
+      console.log('Error response:', errorJson);
+      return true;
+    } else {
+      console.error('Expected 400 status, but got', response.status);
+      return false;
+    }
+    
+  } catch (error) {
+    console.error('Test failed:', error);
+    return false;
+  }
+}
+
+// Test error handling for /api/apply-diffs endpoint
+async function testApplyDiffsErrorHandling() {
+  console.log('\n--- Testing /api/apply-diffs error handling ---');
+  
+  // Test with malformed diff (should return 400)
+  const requestBody = {
+    originalHtml: TEST_HTML,
+    aiResponseContent: "This is not a valid diff format"
+  };
+  
+  console.log('Request with invalid diff format:', requestBody);
+  
+  try {
+    const response = await fetch(`${API_BASE_URL}/api/apply-diffs`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(requestBody)
+    });
+    
+    console.log('Response status:', response.status);
+    
+    // The server should either return 400 or successfully process with no changes
+    if (response.status === 400) {
+      console.log('Server correctly returned 400 for invalid diff format');
+      const errorJson = await response.json();
+      console.log('Error response:', errorJson);
+      return true;
+    } else if (response.ok) {
+      const responseText = await response.text();
+      // If server didn't error, it should return the original HTML unchanged
+      if (responseText === TEST_HTML) {
+        console.log('Server returned original HTML unchanged (acceptable fallback)');
+        return true;
+      } else {
+        console.warn('Server did not error but returned modified HTML');
+        console.log('Response:', responseText);
+        return false;
+      }
+    } else {
+      console.error('Unexpected response status:', response.status);
+      return false;
+    }
+    
+  } catch (error) {
+    console.error('Test failed:', error);
+    return false;
+  }
+}
+
+// Run all tests
+async function runAllTests() {
+  console.log('Starting API tests for AutoSite application...');
+  
+  const results = {
+    askAiInitial: await testAskAiInitial(),
+    askAiFollowUp: await testAskAiFollowUp(),
+    applyDiffs: await testApplyDiffs(),
+    askAiErrorHandling: await testAskAiErrorHandling(),
+    applyDiffsErrorHandling: await testApplyDiffsErrorHandling()
+  };
+  
+  console.log('\n--- Test Results Summary ---');
+  Object.entries(results).forEach(([test, passed]) => {
+    console.log(`${test}: ${passed ? '✅ PASSED' : '❌ FAILED'}`);
+  });
+  
+  const passedCount = Object.values(results).filter(Boolean).length;
+  const totalCount = Object.values(results).length;
+  console.log(`\nTests passed: ${passedCount}/${totalCount} (${Math.round(passedCount/totalCount*100)}%)`);
+  
+  return results;
+}
+
+// Execute tests when run in Node.js
+if (typeof window === 'undefined') {
+  console.log('AutoSite API Test Script running in Node.js');
+  runAllTests().catch(console.error);
+} else {
+  console.log('AutoSite API Test Script loaded in browser');
+  console.log('Run tests by calling: runAllTests()');
+}

debug-report.md

@@ -0,0 +1,161 @@
+# AutoSite Application Debug Report
+
+## Overview
+
+This report documents the analysis and debugging of the AutoSite application, with a particular focus on the AskAI component and its integration with the backend server. The application allows users to create and edit HTML content with AI assistance.
+
+## Architecture Analysis
+
+### Frontend Components
+
+1. **App.tsx**
+   - Main application container
+   - Manages state for HTML content, AI working status
+   - Handles layout and resizing between editor and preview panels
+   - Integrates the AskAI component
+
+2. **AskAI Component**
+   - Handles user prompts and AI interactions
+   - Manages streaming responses from the AI
+   - Processes both full HTML and diff-based responses
+   - Provides visual feedback through progress indicators
+
+3. **Preview Component**
+   - Renders HTML content in an iframe
+   - Provides refresh functionality
+   - Handles resizing and AI working states
+
+### Backend Services
+
+1. **/api/ask-ai Endpoint**
+   - Processes user prompts
+   - Determines response type (full HTML or diff)
+   - Streams AI responses to the client
+   - Handles rate limiting and authentication
+
+2. **/api/apply-diffs Endpoint**
+   - Processes diff blocks from AI responses
+   - Applies changes to the original HTML
+   - Handles error cases for malformed diffs
+
+## Key Findings
+
+### AskAI Component Analysis
+
+1. **Response Handling**
+   - The component handles two types of responses:
+     - **Full HTML**: Complete HTML document for initial requests
+     - **Diff Mode**: Targeted changes for follow-up requests
+   - Streaming implementation provides real-time feedback
+   - Progress indicator updates based on chunks received
+
+2. **Error Handling**
+   - Comprehensive error handling for network issues
+   - Authentication errors trigger login modal
+   - Type-safe error processing with appropriate user feedback
+
+3. **UI/UX Features**
+   - Progress bar with percentage indicator
+   - Response mode indicator (diff/full)
+   - Success animation and sound
+   - Disabled state during processing
+
+### Server-Side Processing
+
+1. **Diff Processing**
+   - Server uses a structured format for diffs (SEARCH/REPLACE blocks)
+   - Fuzzy matching for more robust diff application
+   - Fallback mechanisms for handling malformed responses
+
+2. **AI Integration**
+   - Uses HuggingFace inference API
+   - Different system prompts for initial vs. follow-up requests
+   - Handles both streaming and non-streaming responses
+
+3. **Authentication**
+   - OAuth integration with HuggingFace
+   - Rate limiting for unauthenticated users
+   - Token management for API requests
+
+## Potential Issues
+
+1. **Environment Configuration**
+   - Application requires several environment variables
+   - Missing `DEFAULT_HF_TOKEN` would prevent AI functionality
+   - Server and client ports must be correctly configured
+
+2. **Error States**
+   - Malformed AI responses could lead to rendering issues
+   - Network interruptions during streaming need careful handling
+   - Rate limiting could surprise users without clear feedback
+
+3. **Performance Considerations**
+   - Large HTML documents might cause performance issues
+   - Frequent preview updates could cause flickering
+   - Diff application for complex documents might be unreliable
+
+## Testing Recommendations
+
+### Functional Testing
+
+1. **AI Response Modes**
+   - Test initial requests (full HTML mode)
+   - Test follow-up requests (diff mode)
+   - Verify correct mode selection based on context
+
+2. **UI State Management**
+   - Verify disabled states during processing
+   - Test progress indicator accuracy
+   - Confirm response mode indicator displays correctly
+
+3. **Error Scenarios**
+   - Test network failures during streaming
+   - Verify authentication error handling
+   - Test malformed response handling
+
+### Visual Testing
+
+1. **Responsive Design**
+   - Test on various screen sizes
+   - Verify resizer functionality
+   - Check mobile vs. desktop layouts
+
+2. **Visual Feedback**
+   - Verify progress bar animation
+   - Test success animation
+   - Check loading indicators
+
+### Performance Testing
+
+1. **Streaming Performance**
+   - Test with large responses
+   - Measure time to first meaningful content
+   - Verify memory usage during streaming
+
+2. **Diff Application**
+   - Test with complex HTML structures
+   - Measure time to apply diffs
+   - Verify accuracy of applied changes
+
+## Improvement Suggestions
+
+1. **Developer Experience**
+   - Create a more comprehensive setup guide
+   - Add better error messages for missing environment variables
+   - Implement development mocks for AI responses
+
+2. **User Experience**
+   - Add estimated time remaining to progress indicator
+   - Provide more detailed feedback during diff application
+   - Implement undo functionality for AI changes
+
+3. **Robustness**
+   - Enhance diff application algorithm for better matching
+   - Implement client-side fallbacks for server failures
+   - Add more comprehensive logging for debugging
+
+## Conclusion
+
+The AutoSite application, particularly the AskAI component, demonstrates a well-structured approach to integrating AI assistance into a web development tool. The streaming response handling, progress indicators, and dual-mode response processing (full HTML vs. diffs) provide a solid foundation for an interactive AI-assisted development experience.
+
+The main challenges revolve around environment configuration, handling edge cases in AI responses, and ensuring robust performance across different usage scenarios. With the testing recommendations and improvement suggestions outlined in this report, the application can be further enhanced to provide an even more reliable and user-friendly experience.

test-html.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AutoSite Test Page</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 20px;
+      line-height: 1.6;
+    }
+    h1 {
+      color: #333;
+      border-bottom: 2px solid #eee;
+      padding-bottom: 10px;
+    }
+    .container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20px;
+      margin-top: 20px;
+    }
+    .card {
+      flex: 1 1 300px;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      padding: 15px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    button {
+      background-color: #4CAF50;
+      color: white;
+      border: none;
+      padding: 10px 15px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 16px;
+      margin-top: 10px;
+    }
+    button:hover {
+      background-color: #45a049;
+    }
+    img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+    }
+  </style>
+</head>
+<body>
+  <h1>AutoSite Test Page</h1>
+  <p>This is a test page to verify the functionality of the AutoSite application. It includes various HTML elements to test the rendering and editing capabilities.</p>
+  
+  <div class="container">
+    <div class="card">
+      <h2>Feature 1</h2>
+      <p>This card demonstrates a basic content block with a heading and paragraph.</p>
+      <button id="btn1">Click Me</button>
+    </div>
+    
+    <div class="card">
+      <h2>Feature 2</h2>
+      <p>This card includes an image element to test media handling.</p>
+      <img src="https://via.placeholder.com/300x200" alt="Placeholder Image">
+    </div>
+    
+    <div class="card">
+      <h2>Feature 3</h2>
+      <p>This card includes a form element to test input handling.</p>
+      <form>
+        <input type="text" placeholder="Enter your name" style="width: 100%; padding: 8px; margin-bottom: 10px;">
+        <button type="button">Submit</button>
+      </form>
+    </div>
+  </div>
+  
+  <script>
+    // Simple script to test JavaScript functionality
+    document.getElementById('btn1').addEventListener('click', function() {
+      alert('Button clicked!');
+    });
+    
+    // Log to console to test console output
+    console.log('Test page loaded successfully');
+  </script>
+</body>
+</html>

test-plan.md

@@ -0,0 +1,131 @@
+# AutoSite Application Test Plan
+
+## Overview
+This test plan outlines a comprehensive approach to debug and verify the functionality of the AutoSite application, with particular focus on the AskAI component and its integration with the backend.
+
+## Prerequisites
+1. Environment setup
+   - Create a `.env` file based on `.env.example`
+   - Ensure `DEFAULT_HF_TOKEN` is set with a valid Hugging Face API token
+   - Verify `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` if testing authentication
+
+## Test Cases
+
+### 1. Basic Application Functionality
+- **Verify UI Components**
+  - Editor panel renders correctly
+  - Preview panel displays HTML content
+  - Resizer works for adjusting panel sizes
+  - Responsive design works on different screen sizes
+
+- **Code Editor**
+  - HTML editing works correctly
+  - Syntax highlighting functions
+  - Error validation works
+
+### 2. AskAI Component Testing
+
+#### 2.1 UI Elements
+- **Input Field**
+  - Placeholder text changes after first query
+  - Disabled state works during AI processing
+  - Enter key triggers AI request
+
+- **Progress Indicators**
+  - Progress bar appears and updates during streaming
+  - Response mode indicator shows correct mode (diff/full)
+  - Loading animation displays correctly
+  - Success animation plays after completion
+
+#### 2.2 API Integration
+
+- **Full HTML Mode**
+  - Initial requests generate complete HTML
+  - Streaming updates preview in real-time
+  - Final HTML is properly formatted
+  - Success sound plays on completion
+
+- **Diff Mode**
+  - Follow-up requests use diff mode
+  - Diffs are correctly sent to server
+  - Server applies diffs correctly
+  - Original HTML is preserved if diff application fails
+
+#### 2.3 Error Handling
+
+- **Authentication Errors**
+  - Login modal appears when rate limit exceeded
+  - Error messages display correctly
+
+- **Network Errors**
+  - Appropriate error handling for failed requests
+  - UI recovers gracefully from errors
+
+- **Malformed Responses**
+  - Application handles incomplete HTML
+  - Application handles malformed diffs
+
+### 3. Backend Testing
+
+#### 3.1 API Endpoints
+
+- **/api/ask-ai**
+  - Correctly processes different prompt types
+  - Rate limiting works as expected
+  - Streaming response works correctly
+  - Sets appropriate response headers
+
+- **/api/apply-diffs**
+  - Correctly parses diff blocks
+  - Applies changes accurately
+  - Handles edge cases (empty blocks, malformed blocks)
+  - Returns appropriate error messages
+
+#### 3.2 Authentication
+
+- **HuggingFace OAuth**
+  - Login flow works correctly
+  - Token storage and retrieval works
+  - User information is correctly fetched
+
+## Visual Testing
+
+### UI Components
+- Verify all UI elements render correctly across different screen sizes
+- Check animations and transitions
+- Verify loading states and progress indicators
+
+### Accessibility
+- Verify keyboard navigation
+- Check color contrast
+- Verify screen reader compatibility
+
+## Performance Testing
+
+- Measure response time for AI requests
+- Verify memory usage during streaming
+- Check for UI freezing during intensive operations
+
+## Security Testing
+
+- Verify token handling
+- Check for exposed secrets
+- Verify rate limiting effectiveness
+
+## Recommendations
+
+1. **Environment Setup**
+   - Create a comprehensive setup guide for developers
+   - Document all required environment variables
+
+2. **Error Handling**
+   - Enhance error messages for common setup issues
+   - Add more detailed logging for debugging
+
+3. **Testing Tools**
+   - Implement automated tests for critical paths
+   - Create a test harness for simulating AI responses
+
+4. **Documentation**
+   - Document the different response modes
+   - Create troubleshooting guides for common issues

visual-test-script.js

@@ -0,0 +1,206 @@
+/**
+ * Visual Test Script for AutoSite Application
+ * 
+ * This script provides functions to visually test the AutoSite application,
+ * particularly focusing on the AskAI component and its integration with the UI.
+ */
+
+// Test data for AI prompts
+const TEST_PROMPTS = [
+  "Create a simple landing page with a header, hero section, and footer",
+  "Add a contact form to the page",
+  "Change the background color to light blue",
+  "Add a navigation menu with Home, About, and Contact links"
+];
+
+// Helper function to wait for a specified time
+function wait(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+// Test the AskAI component's UI elements
+async function testAskAIUI() {
+  console.log('Testing AskAI UI elements...');
+  
+  // Test input field
+  const inputField = document.querySelector('.group input[type="text"]');
+  if (!inputField) {
+    console.error('Input field not found');
+    return false;
+  }
+  
+  // Test send button
+  const sendButton = document.querySelector('.group button');
+  if (!sendButton) {
+    console.error('Send button not found');
+    return false;
+  }
+  
+  // Test placeholder text
+  console.log('Initial placeholder:', inputField.placeholder);
+  
+  console.log('AskAI UI elements test passed');
+  return true;
+}
+
+// Test the progress indicator
+async function testProgressIndicator() {
+  console.log('Testing progress indicator...');
+  
+  // Submit a prompt to trigger the progress indicator
+  const inputField = document.querySelector('.group input[type="text"]');
+  const sendButton = document.querySelector('.group button');
+  
+  if (!inputField || !sendButton) {
+    console.error('Input field or send button not found');
+    return false;
+  }
+  
+  // Enter a test prompt
+  inputField.value = TEST_PROMPTS[0];
+  
+  // Click the send button
+  sendButton.click();
+  
+  // Wait for the progress indicator to appear
+  await wait(1000);
+  
+  // Check if progress indicator is visible
+  const progressBar = document.querySelector('.bg-gradient-to-r');
+  if (!progressBar) {
+    console.error('Progress indicator not found after submitting prompt');
+    return false;
+  }
+  
+  console.log('Progress indicator test passed');
+  return true;
+}
+
+// Test the response mode indicator
+async function testResponseModeIndicator() {
+  console.log('Testing response mode indicator...');
+  
+  // Wait for the response mode indicator to appear
+  await wait(2000);
+  
+  // Check if response mode indicator is visible
+  const modeIndicator = document.querySelector('.bg-gray-800\/90');
+  if (!modeIndicator) {
+    console.warn('Response mode indicator not found - this may be normal for first request');
+    return true;
+  }
+  
+  // Check the text content to verify mode
+  const modeText = modeIndicator.textContent.trim();
+  console.log('Response mode:', modeText);
+  
+  console.log('Response mode indicator test passed');
+  return true;
+}
+
+// Test the preview panel updates
+async function testPreviewUpdates() {
+  console.log('Testing preview panel updates...');
+  
+  // Get the preview iframe
+  const previewFrame = document.querySelector('iframe');
+  if (!previewFrame) {
+    console.error('Preview iframe not found');
+    return false;
+  }
+  
+  // Store initial content for comparison
+  const initialContent = previewFrame.srcdoc;
+  
+  // Wait for content to update (this may take some time depending on AI response)
+  await wait(10000);
+  
+  // Check if content has changed
+  const updatedContent = previewFrame.srcdoc;
+  if (initialContent === updatedContent) {
+    console.warn('Preview content did not update - this may indicate an issue');
+    return false;
+  }
+  
+  console.log('Preview updates test passed');
+  return true;
+}
+
+// Test the success animation
+async function testSuccessAnimation() {
+  console.log('Testing success animation...');
+  
+  // Wait for AI processing to complete
+  await wait(15000);
+  
+  // Check if success class was added to body
+  if (document.body.classList.contains('ai-success')) {
+    console.log('Success animation detected');
+    return true;
+  }
+  
+  // It's possible the animation already completed and class was removed
+  console.warn('Success animation not detected - may have already completed');
+  return true;
+}
+
+// Test responsive design
+async function testResponsiveDesign() {
+  console.log('Testing responsive design...');
+  
+  // Store original window dimensions
+  const originalWidth = window.innerWidth;
+  const originalHeight = window.innerHeight;
+  
+  // Test mobile layout
+  console.log('Testing mobile layout...');
+  window.resizeTo(375, 667); // iPhone 8 dimensions
+  await wait(1000);
+  
+  // Check if layout has adjusted
+  const editorMobile = document.querySelector('.w-full.h-\\[30dvh\\]');
+  if (!editorMobile) {
+    console.warn('Mobile layout may not be applied correctly');
+  }
+  
+  // Test tablet layout
+  console.log('Testing tablet layout...');
+  window.resizeTo(768, 1024); // iPad dimensions
+  await wait(1000);
+  
+  // Test desktop layout
+  console.log('Testing desktop layout...');
+  window.resizeTo(1440, 900); // Common desktop dimensions
+  await wait(1000);
+  
+  // Restore original dimensions
+  window.resizeTo(originalWidth, originalHeight);
+  
+  console.log('Responsive design test completed');
+  return true;
+}
+
+// Run all tests
+async function runAllTests() {
+  console.log('Starting visual tests for AutoSite application...');
+  
+  const results = {
+    uiElements: await testAskAIUI(),
+    progressIndicator: await testProgressIndicator(),
+    responseModeIndicator: await testResponseModeIndicator(),
+    previewUpdates: await testPreviewUpdates(),
+    successAnimation: await testSuccessAnimation(),
+    responsiveDesign: await testResponsiveDesign()
+  };
+  
+  console.log('Test results:', results);
+  console.log('Tests completed:', Object.values(results).filter(Boolean).length, 'of', Object.values(results).length, 'passed');
+  
+  return results;
+}
+
+// Execute tests when run in browser console
+if (typeof window !== 'undefined') {
+  console.log('AutoSite Visual Test Script loaded');
+  console.log('Run tests by calling: runAllTests()');
+}