add testing and logging

backend/fastapi_server.py

@@ -1,7 +1,8 @@
 #!/usr/bin/env python
 """
-FastAPI server for AI Battle Royale Mental Manipulation
+Enhanced FastAPI server for AI Battle Royale Mental Manipulation
 This server provides streaming endpoints for agent interactions and tool executions
+With comprehensive debugging, health checks, and CORS handling for HF Spaces
 """
 import os
 import json
@@ -9,13 +10,17 @@ import random
 import logging
 import asyncio
 import openai
+import time
+import traceback
 from typing import Dict, List, Any, Optional, Union
 from abc import ABC, abstractmethod
-from fastapi import FastAPI, HTTPException
-from fastapi.responses import StreamingResponse, FileResponse
+from fastapi import FastAPI, HTTPException, Request, Response
+from fastapi.responses import StreamingResponse, FileResponse, JSONResponse
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.middleware.trustedhost import TrustedHostMiddleware
 from pydantic import BaseModel
 from dotenv import load_dotenv
+import uvicorn
 
 # Load environment variables for API keys
 load_dotenv()
@@ -68,23 +73,82 @@ MODEL_PROVIDERS = {
     }
 }
 
-# Configure logging
-logging.basicConfig(level=logging.INFO,
-                    format='%(asctime)s [%(levelname)s] %(message)s',
-                    handlers=[logging.StreamHandler()])
+# Configure enhanced logging for debugging
+logging.basicConfig(
+    level=logging.DEBUG,  # Changed to DEBUG for more detailed logs
+    format='%(asctime)s [%(levelname)s] %(name)s: %(message)s',
+    handlers=[
+        logging.StreamHandler(),
+        logging.FileHandler('/home/node/logs/backend_app.log', mode='a')
+    ]
+)
+
+logger = logging.getLogger(__name__)
 
-# FastAPI app instance
-app = FastAPI(title="AI Battle Royale", description="Mental Manipulation Battle System")
+# FastAPI app instance with enhanced configuration
+app = FastAPI(
+    title="AI Battle Royale", 
+    description="Mental Manipulation Battle System - Enhanced for HF Spaces",
+    version="1.0.0",
+    docs_url="/docs",
+    redoc_url="/redoc"
+)
 
-# Add CORS middleware
+# Add comprehensive CORS middleware
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"],
+    allow_origins=["*"],  # Allow all origins for HF Spaces
     allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
+    allow_methods=["GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"],
+    allow_headers=[
+        "*",
+        "Authorization",
+        "Content-Type",
+        "X-Requested-With",
+        "Accept",
+        "Origin",
+        "Access-Control-Request-Method",
+        "Access-Control-Request-Headers",
+    ],
+    expose_headers=["*"]
 )
 
+# Add middleware for request/response logging
+@app.middleware("http")
+async def log_requests(request: Request, call_next):
+    start_time = time.time()
+    
+    # Log incoming request
+    logger.info(f"🔍 Incoming request: {request.method} {request.url}")
+    logger.debug(f"   Headers: {dict(request.headers)}")
+    
+    try:
+        response = await call_next(request)
+        process_time = time.time() - start_time
+        
+        # Log response
+        logger.info(f"✅ Response: {response.status_code} in {process_time:.3f}s")
+        
+        # Add debug headers to response
+        response.headers["X-Process-Time"] = str(process_time)
+        response.headers["X-Server-Status"] = "healthy"
+        
+        return response
+        
+    except Exception as e:
+        process_time = time.time() - start_time
+        logger.error(f"❌ Request failed: {str(e)} in {process_time:.3f}s")
+        logger.error(f"   Traceback: {traceback.format_exc()}")
+        
+        return JSONResponse(
+            status_code=500,
+            content={
+                "detail": f"Internal server error: {str(e)}",
+                "type": "internal_error",
+                "timestamp": time.time()
+            }
+        )
+
 
 class SimpleGameState:
     """Simplified game state for testing mental manipulation mechanics"""
@@ -1092,26 +1156,106 @@ async def delete_game(game_id: str):
 
 
 @app.get("/")
-async def root():
-    """Root endpoint - serves as health check"""
+async def root(request: Request):
+    """Root endpoint - serves as comprehensive health check"""
+    logger.info(f"🏠 Root endpoint accessed from {request.client.host if request.client else 'unknown'}")
+    
     return {
-        "status": "ok", 
+        "status": "healthy",
         "message": "AI Battle Royale server is running",
+        "version": "1.0.0",
+        "timestamp": time.time(),
+        "environment": "huggingface-spaces",
+        "endpoints": {
+            "health": "/health",
+            "models": "/models", 
+            "start_game": "/start-game",
+            "stream_game": "/stream-game/{game_id}",
+            "docs": "/docs"
+        },
         "note": "API keys are provided by frontend, not environment variables"
     }
 
 
 @app.get("/health")
-async def health_check():
-    """Health check endpoint"""
-    return {
-        "status": "ok", 
-        "message": "AI Battle Royale server is running",
-        "note": "API keys are provided by frontend, not environment variables"
+async def health_check(request: Request):
+    """Comprehensive health check endpoint with system status"""
+    logger.info(f"🏥 Health check accessed from {request.client.host if request.client else 'unknown'}")
+    
+    # Perform basic system checks
+    health_status = {
+        "status": "healthy",
+        "message": "AI Battle Royale server is operational",
+        "timestamp": time.time(),
+        "checks": {
+            "server": "healthy",
+            "memory": "ok",
+            "disk": "ok"
+        },
+        "stats": {
+            "active_games": len(active_games),
+            "total_requests": getattr(health_check, 'request_count', 0)
+        },
+        "environment": {
+            "python_version": f"{os.sys.version_info.major}.{os.sys.version_info.minor}.{os.sys.version_info.micro}",
+            "fastapi_available": True,
+            "models_loaded": len(MODEL_PROVIDERS)
+        }
     }
+    
+    # Increment request counter
+    health_check.request_count = getattr(health_check, 'request_count', 0) + 1
+    
+    return health_status
 
 
-if __name__ == "__main__":
-    import uvicorn
+@app.options("/{path:path}")
+async def options_handler(request: Request, path: str):
+    """Handle CORS preflight requests"""
+    logger.debug(f"🔄 CORS preflight request for path: /{path}")
+    
+    return Response(
+        status_code=200,
+        headers={
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS, PATCH",
+            "Access-Control-Allow-Headers": "*",
+            "Access-Control-Max-Age": "86400"
+        }
+    )
+
+
+# Startup event
+@app.on_event("startup")
+async def startup_event():
+    """Log startup information"""
+    logger.info("🚀 AI Battle Royale server starting up...")
+    logger.info(f"📊 Available model providers: {list(MODEL_PROVIDERS.keys())}")
+    logger.info(f"🔧 Debug mode: {os.getenv('DEBUG', 'False')}")
+    logger.info(f"🌐 Server will be available at: http://0.0.0.0:8000")
+    logger.info("✅ Server startup complete!")
+
+
+@app.on_event("shutdown")
+async def shutdown_event():
+    """Clean up on shutdown"""
+    logger.info("🛑 AI Battle Royale server shutting down...")
+    logger.info(f"📈 Final stats: {len(active_games)} active games")
+    logger.info("✅ Server shutdown complete!")
 
-    uvicorn.run(app, host="0.0.0.0", port=8000)
+
+if __name__ == "__main__":
+    logger.info("🎯 Starting FastAPI server directly...")
+    
+    # Enhanced uvicorn configuration for HF Spaces
+    uvicorn.run(
+        app, 
+        host="0.0.0.0", 
+        port=8000,
+        log_level="info",
+        access_log=True,
+        server_header=False,  # Don't expose server version
+        date_header=False,    # Don't add date header
+        reload=False,         # Disable auto-reload in production
+        workers=1             # Single worker for HF Spaces
+    )

frontend/app/page.tsx

@@ -146,22 +146,44 @@ const MentalStateBar = ({ label, value, color }: { label: string; value: number;
 )
 
 const detectServerURL = () => {
-  // In development, check if we're running on port 3000 (Next.js dev server)
-  // In production (Docker/HF Spaces), use nginx proxy route
+  // Enhanced server URL detection with comprehensive debugging
   if (typeof window !== 'undefined') {
-    const isLocalDev = window.location.hostname === 'localhost' && window.location.port === '3000'
-    const isHuggingFaceSpaces = window.location.hostname.includes('.hf.space') || window.location.hostname.includes('huggingface.co')
+    const hostname = window.location.hostname
+    const port = window.location.port
+    const protocol = window.location.protocol
+    const href = window.location.href
+    
+    const isLocalDev = hostname === 'localhost' && port === '3000'
+    const isHuggingFaceSpaces = hostname.includes('.hf.space') || hostname.includes('huggingface.co')
+    const isDockerLocal = hostname === 'localhost' && port === '7860'
+    
+    console.log('🔍 Environment Detection:', {
+      hostname,
+      port,
+      protocol,
+      href,
+      isLocalDev,
+      isHuggingFaceSpaces,
+      isDockerLocal
+    })
     
     if (isLocalDev) {
       // Local development: connect directly to backend
+      console.log('📍 Using local development backend')
       return 'http://localhost:8000'
+    } else if (isDockerLocal) {
+      // Local Docker: use nginx proxy
+      console.log('📍 Using local Docker nginx proxy')
+      return '/api'
     } else {
       // Production (Docker/HF Spaces): always use relative nginx proxy
       // This ensures the request goes through the nginx proxy on port 7860
+      console.log('📍 Using production nginx proxy')
       return '/api'
     }
   }
   // Fallback for SSR - always use relative path in production
+  console.log('📍 Using SSR fallback')
   return '/api'
 }
 
@@ -349,29 +371,51 @@ export default function AgentBattleArena() {
     loadLogos()
   }, [])
 
-  // Fetch available models on component mount
+  // Enhanced model fetching with comprehensive error handling
   useEffect(() => {
     const fetchModels = async () => {
       try {
-        console.log('Fetching models from server...', `${serverURL}/models`)
-        const response = await fetch(`${serverURL}/models`, {
+        const url = `${serverURL}/models`
+        console.log('🔄 Fetching models from server...', url)
+        console.log('🌐 Server URL configuration:', serverURL)
+        
+        const controller = new AbortController()
+        const timeoutId = setTimeout(() => {
+          console.warn('⏰ Request timeout, aborting...')
+          controller.abort()
+        }, 15000) // 15 second timeout
+        
+        const response = await fetch(url, {
           method: 'GET',
           headers: {
             'Accept': 'application/json',
-            'Content-Type': 'application/json'
+            'Content-Type': 'application/json',
+            'Cache-Control': 'no-cache'
           },
-          // Add timeout to prevent hanging
-          signal: AbortSignal.timeout(10000) // 10 second timeout
+          signal: controller.signal
         })
+        
+        clearTimeout(timeoutId)
+        
+        console.log('📡 Response status:', response.status)
+        console.log('📋 Response headers:', Object.fromEntries(response.headers.entries()))
+        
         if (response.ok) {
           const data = await response.json()
-          console.log('Models loaded from server:', data)
+          console.log('✅ Models loaded from server:', data)
           setAvailableModels(data)
         } else {
-          console.warn(`Failed to fetch models from server (${response.status}), using fallback`)
+          const errorText = await response.text().catch(() => 'Unable to read error response')
+          console.warn(`❌ Failed to fetch models from server (${response.status}): ${errorText}`)
+          console.warn('🔄 Using fallback model configuration')
         }
       } catch (error) {
-        console.warn("Failed to fetch available models from server, using fallback:", error)
+        if (error.name === 'AbortError') {
+          console.warn("⏰ Model fetch request timed out")
+        } else {
+          console.warn("❌ Failed to fetch available models from server:", error)
+        }
+        console.warn('🔄 Using fallback model configuration')
       }
     }
     fetchModels()
@@ -1097,29 +1141,73 @@ export default function AgentBattleArena() {
         isHuggingFaceSpaces: window.location.hostname.includes('.hf.space') || window.location.hostname.includes('huggingface.co'),
         resolvedServerURL: serverURL
       }
-      console.log('DEBUG: Environment detection:', environmentInfo)
+      console.log('🔍 DEBUG: Environment detection:', environmentInfo)
       
-      // Step 1: Health check to verify server is reachable and CORS is OK.
-      setBattleState((prev) => ({ ...prev, battleLog: [`> Pinging server at ${serverURL}...`] }))
+      // Step 1: Enhanced health check with comprehensive diagnostics
+      setBattleState((prev) => ({ ...prev, battleLog: [`> 🔍 Testing connectivity to ${serverURL}...`] }))
       
-      // Add timeout and better error handling for health check
-      const healthCheckResponse = await fetch(serverURL, {
-        method: 'GET',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        // Add timeout to prevent hanging
-        signal: AbortSignal.timeout(10000) // 10 second timeout
-      })
+      // Test multiple endpoints to diagnose connectivity issues
+      const healthEndpoints = [
+        { name: 'Root', url: serverURL },
+        { name: 'Health', url: `${serverURL}/health` },
+        { name: 'Models', url: `${serverURL}/models` }
+      ]
+      
+      let healthCheckResponse
+      let workingEndpoint = null
       
-      if (!healthCheckResponse.ok) {
-        const errorText = await healthCheckResponse.text().catch(() => 'Unable to read error response')
-        throw new Error(`Server health check failed with status: ${healthCheckResponse.status} - ${errorText}`)
+      for (const endpoint of healthEndpoints) {
+        try {
+          console.log(`🔍 Testing ${endpoint.name} endpoint: ${endpoint.url}`)
+          setBattleState((prev) => ({ ...prev, battleLog: [...prev.battleLog, `>   Testing ${endpoint.name}: ${endpoint.url}`] }))
+          
+          const controller = new AbortController()
+          const timeoutId = setTimeout(() => controller.abort(), 10000)
+          
+          const response = await fetch(endpoint.url, {
+            method: 'GET',
+            headers: {
+              'Accept': 'application/json',
+              'Content-Type': 'application/json',
+              'Cache-Control': 'no-cache'
+            },
+            signal: controller.signal
+          })
+          
+          clearTimeout(timeoutId)
+          
+          console.log(`📡 ${endpoint.name} response:`, response.status, response.statusText)
+          
+          if (response.ok) {
+            healthCheckResponse = response
+            workingEndpoint = endpoint
+            setBattleState((prev) => ({ ...prev, battleLog: [...prev.battleLog, `>   ✅ ${endpoint.name} endpoint working!`] }))
+            break
+          } else {
+            setBattleState((prev) => ({ ...prev, battleLog: [...prev.battleLog, `>   ❌ ${endpoint.name} failed: ${response.status}`] }))
+          }
+        } catch (error) {
+          console.warn(`❌ ${endpoint.name} endpoint failed:`, error.message)
+          setBattleState((prev) => ({ ...prev, battleLog: [...prev.battleLog, `>   ❌ ${endpoint.name} error: ${error.message}`] }))
+        }
+      }
+      
+      if (!healthCheckResponse || !healthCheckResponse.ok) {
+        throw new Error('All health check endpoints failed - server may be unreachable')
       }
+      
       const serverInfo = await healthCheckResponse.json()
-      console.log("Server info:", serverInfo)
-      setBattleState((prev) => ({ ...prev, battleLog: [...prev.battleLog, `> Server online: ${serverInfo.message}`] }))
+      console.log("✅ Server info:", serverInfo)
+      setBattleState((prev) => ({ 
+        ...prev, 
+        battleLog: [
+          ...prev.battleLog, 
+          `> ✅ Server online: ${serverInfo.message}`,
+          `>   Working endpoint: ${workingEndpoint.name}`,
+          `>   Server version: ${serverInfo.version || 'unknown'}`,
+          `>   Environment: ${serverInfo.environment || 'unknown'}`
+        ] 
+      }))
 
       // Step 2: Start the game.
       setBattleState((prev) => ({ ...prev, battleLog: [...prev.battleLog, `> Starting game ${gameId}...`, `> Player 1: ${selectedPlayer1Model}`, `> Player 2: ${selectedPlayer2Model}`] }))
@@ -1171,20 +1259,29 @@ export default function AgentBattleArena() {
     } catch (error: any) {
       console.error("Failed to start battle:", error)
       
-      // Enhanced error reporting with environment context
+      // Comprehensive error reporting with detailed diagnostics
       const errorDetails = [
         "> ❌ Battle initialization failed.",
-        `> Environment: ${window.location.hostname.includes('.hf.space') ? 'Hugging Face Spaces' : 'Local/Other'}`,
-        `> Request URL: ${serverURL}`,
-        `> Full URL context: ${window.location.href}`,
-        `> Error: ${error.message}`,
-        "> Possible causes:",
-        "> 1. Backend server is down or unreachable",
-        "> 2. Nginx proxy configuration issue", 
-        "> 3. API endpoint path mismatch",
-        "> 4. CORS policy blocking request",
-        "> 5. Network timeout or connectivity issue",
-        "> 6. Invalid API keys or unsupported model"
+        `> 🌍 Environment: ${window.location.hostname.includes('.hf.space') ? 'Hugging Face Spaces' : 'Local/Other'}`,
+        `> 🔗 Request URL: ${serverURL}`,
+        `> 📍 Full URL context: ${window.location.href}`,
+        `> ❌ Error: ${error.message}`,
+        "> ",
+        "> 🔍 Diagnostic Information:",
+        `>   - Protocol: ${window.location.protocol}`,
+        `>   - Hostname: ${window.location.hostname}`,
+        `>   - Port: ${window.location.port || 'default'}`,
+        `>   - User Agent: ${navigator.userAgent.substring(0, 50)}...`,
+        "> ",
+        "> 🛠️ Possible Solutions:",
+        "> 1. Check if backend server is running (port 8000)",
+        "> 2. Verify nginx proxy configuration",
+        "> 3. Confirm API endpoint paths are correct",
+        "> 4. Check CORS policy settings",
+        "> 5. Verify network connectivity",
+        "> 6. Validate API keys and model availability",
+        "> 7. Try refreshing the page",
+        "> 8. Check browser console for additional errors"
       ]
       
       setBattleState((prev) => ({
@@ -1470,48 +1567,90 @@ export default function AgentBattleArena() {
             TEST SOUNDS
           </Button>
 
-          {/* Test Connection Button */}
+          {/* Enhanced Test Connection Button */}
           <Button
               onClick={async () => {
-                console.log('Testing server connectivity...')
+                console.log('🔍 Testing server connectivity comprehensively...')
                 setBattleState(prev => ({
                   ...prev,
-                  battleLog: [`> Testing connection to ${serverURL}...`]
+                  battleLog: [`> 🔍 Starting comprehensive connectivity test...`]
                 }))
                 
-                try {
-                  const response = await fetch(serverURL, {
-                    method: 'GET',
-                    headers: {
-                      'Accept': 'application/json',
-                      'Content-Type': 'application/json'
-                    },
-                    signal: AbortSignal.timeout(5000)
-                  })
-                  
-                  if (response.ok) {
-                    const data = await response.json()
+                const testEndpoints = [
+                  { name: 'Root', path: '' },
+                  { name: 'Health', path: '/health' },
+                  { name: 'Models', path: '/models' }
+                ]
+                
+                for (const endpoint of testEndpoints) {
+                  try {
+                    const url = `${serverURL}${endpoint.path}`
+                    console.log(`🔍 Testing ${endpoint.name}: ${url}`)
+                    
                     setBattleState(prev => ({
                       ...prev,
-                      battleLog: [...prev.battleLog, `> ✅ Connection successful!`, `> Server: ${data.message || 'Connected'}`]
+                      battleLog: [...prev.battleLog, `>   Testing ${endpoint.name}: ${url}`]
                     }))
-                  } else {
+                    
+                    const controller = new AbortController()
+                    const timeoutId = setTimeout(() => controller.abort(), 8000)
+                    
+                    const startTime = performance.now()
+                    const response = await fetch(url, {
+                      method: 'GET',
+                      headers: {
+                        'Accept': 'application/json',
+                        'Content-Type': 'application/json',
+                        'Cache-Control': 'no-cache'
+                      },
+                      signal: controller.signal
+                    })
+                    const responseTime = Math.round(performance.now() - startTime)
+                    
+                    clearTimeout(timeoutId)
+                    
+                    if (response.ok) {
+                      const data = await response.json().catch(() => ({ message: 'Response not JSON' }))
+                      setBattleState(prev => ({
+                        ...prev,
+                        battleLog: [
+                          ...prev.battleLog, 
+                          `>   ✅ ${endpoint.name} OK (${responseTime}ms)`,
+                          `>      Status: ${response.status}`,
+                          `>      Message: ${data.message || 'Connected'}`
+                        ]
+                      }))
+                    } else {
+                      setBattleState(prev => ({
+                        ...prev,
+                        battleLog: [
+                          ...prev.battleLog, 
+                          `>   ❌ ${endpoint.name} Failed (${responseTime}ms)`,
+                          `>      Status: ${response.status} ${response.statusText}`
+                        ]
+                      }))
+                    }
+                  } catch (error: any) {
+                    const errorType = error.name === 'AbortError' ? 'Timeout' : 'Error'
                     setBattleState(prev => ({
                       ...prev,
-                      battleLog: [...prev.battleLog, `> ❌ Connection failed: ${response.status} ${response.statusText}`]
+                      battleLog: [
+                        ...prev.battleLog, 
+                        `>   ❌ ${endpoint.name} ${errorType}: ${error.message}`
+                      ]
                     }))
                   }
-                } catch (error: any) {
-                  setBattleState(prev => ({
-                    ...prev,
-                    battleLog: [...prev.battleLog, `> ❌ Connection error: ${error.message}`]
-                  }))
                 }
+                
+                setBattleState(prev => ({
+                  ...prev,
+                  battleLog: [...prev.battleLog, `> 🏁 Connectivity test complete`]
+                }))
               }}
               variant="outline"
               className="border-gray-600 text-gray-300 hover:bg-gray-700"
           >
-            TEST CONNECTION
+            🔍 TEST CONNECTION
           </Button>
 
           {/* Test Animation Button */}