# 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