# Quick Fix: React Hooks & WebSocket Errors

## ✅ Fixed: React Hooks Error

**Problem**: Hooks were called after conditional returns, violating React's Rules of Hooks.

**Solution**: Moved `dragX` and `dragOpacity` hooks to line ~218, before any `if` statements or early returns.

**File**: [client/src/pages/os.tsx](client/src/pages/os.tsx#L218-L219)

---

## 🟡 Expected Warnings (Safe to Ignore)

### 1. WebSocket Errors
```
WebSocket connection to 'wss://...' failed
[vite] failed to connect to websocket
```

**Why**: GitHub Codespaces tunneling doesn't support WebSockets perfectly  
**Impact**: None - app works fine without HMR WebSocket  
**Fix**: Refresh page manually after code changes

### 2. Supabase Credentials Missing
```
[Supabase] URL env var: ✗ Missing
[Supabase] Key env var: ✗ Missing
Supabase credentials not found. Using fallback credentials.
```

**Why**: No `.env` file with Supabase keys  
**Impact**: None - app uses fallback database  
**Fix**: Add `.env` with your Supabase credentials (optional)

### 3. CORS Manifest Error
```
Access to fetch at 'https://github.dev/pf-signin...' blocked by CORS
```

**Why**: PWA manifest trying to load through GitHub auth  
**Impact**: None - only affects PWA install prompt  
**Fix**: Ignore or disable PWA in vite.config.ts

---

## 🚀 Refresh the App

1. **Save all files** (hooks fix is now applied)
2. **Reload browser**: `Ctrl+R` or `Cmd+R`
3. **Clear console**: Click 🚫 in DevTools

The app should load without errors now! 🎉

---

## 🔧 Optional: Add Supabase Credentials

Create `.env` file:

```bash
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key
```

Then restart dev server:

```bash
# Stop current server (Ctrl+C)
# Restart
npm run dev:client
```

---

## ✨ What to Expect After Reload

You should see:
- ✅ AeThex OS desktop interface
- ✅ Boot sequence (skip with "Continue as Guest")
- ✅ Desktop with windows, taskbar, Start menu
- ✅ No React errors in console
- 🟡 WebSocket warnings (ignorable)
- 🟡 Supabase warnings (ignorable)

---

## 🎯 Test the Mobile Views

1. Open DevTools (F12)
2. Click device icon (📱)
3. Select "iPhone 14 Pro"
4. Navigate to:
   - `/mobile/studio` - AeThex Studio
   - `/mobile/appstore` - App Store
   - `/` - Mobile dashboard

---

## 📝 Summary

**Fixed**: React Hooks order violation (critical)  
**Ignored**: WebSocket/Supabase warnings (non-critical)  
**Result**: App should work perfectly now! 🚀