TESTING_GUIDE.md

# 🚀 Website Testing Guide - OpenRouter UI Fixes

## 🌐 **Website Access**
The development server should be running at: **http://localhost:3000**

If it's not running, open your terminal and run:
```bash
cd /Users/data/deepsite-1
npm run dev
```

## ✅ **Testing the OpenRouter UI Fixes**

### **Step 1: Access the Settings Panel**
1. Navigate to the website at `http://localhost:3000`
2. Look for the **AI chat interface** 
3. Find and click the **"Settings"** button (gear icon)

### **Step 2: Test OpenRouter Toggle (Should Work Now!)**
1. In the settings panel, look for **"Use Custom OpenRouter Models"**
2. **Toggle it ON** - the UI should appear immediately ✅
3. You should now see:
   - ✅ **API Key input field** with placeholder: "sk-or-v1-... (optional for model browsing)"
   - ✅ **"Select Model" button**
   - ✅ **Provider selection options**

### **Step 3: Test Model Browsing (No API Key Required)**
1. **WITHOUT entering an API key**, click **"Select Model"**
2. A modal should open showing:
   - ✅ **Loading indicator** while fetching models
   - ✅ **Search bar** for filtering models
   - ✅ **Category dropdown** for filtering
   - ✅ **List of 200+ OpenRouter models** with pricing info
3. **Test the search**: Type "gpt" or "claude" to filter models
4. **Select a model** - it should save and close the modal

### **Step 4: Test Chat (API Key Required)**
1. Try to **send a chat message** with the selected OpenRouter model
2. You should get an **error asking for an API key** ✅
3. **Enter a valid OpenRouter API key** (format: sk-or-v1-...)
4. Try chatting again - it should work ✅

## 🐛 **If Issues Occur**

### **Settings Panel Not Showing OpenRouter UI:**
- Check browser console for errors
- Refresh the page
- Verify the toggle is actually turned ON

### **Model Selector Not Loading:**
- Check browser network tab for API call to `/api/openrouter/models`
- Ensure internet connection is working
- Check browser console for JavaScript errors

### **Models Not Displaying:**
- Verify the API call is successful (200 status)
- Check if models array is populated in network response
- Look for any filtering issues in search/category

## 📝 **Expected Behavior Summary**

| Action | Expected Result |
|--------|----------------|
| Toggle OpenRouter ON | UI appears immediately (no API key needed) |
| Click "Select Model" | Modal opens, models load from API |
| Search models | Real-time filtering works |
| Select model | Model saves, modal closes |
| Chat without API key | Error message requesting API key |
| Chat with API key | Message sends successfully |

## 🎯 **Key Improvements Made**

1. **🆓 Free Model Browsing**: No API key required to browse models
2. **🎨 Always Visible UI**: Settings show immediately when toggled
3. **📱 Better UX**: Clear messaging about when API key is needed
4. **🔧 Flexible Validation**: API key only validated for actual chat usage

The website should now provide a smooth experience for exploring OpenRouter models! 🌟