fix: resolve CORS and API routing issues for Hugging Face

- Add environment-aware API base URL detection
- Fix CORS configuration with proper origin handling
- Update nginx reverse proxy for /api routes
- Fix import statements (default vs named exports)
- Enable production deployment on Hugging Face

Fixes agent display issues in production environment.
Resolves ERR_FAILED and 404 errors from API calls.

backend/config/settings.py

@@ -189,9 +189,9 @@ class SecuritySettings(BaseSettings):
     rate_limit_requests: int = Field(default=1000, env="RATE_LIMIT_REQUESTS")
     rate_limit_window: int = Field(default=3600, env="RATE_LIMIT_WINDOW")  # 1 hour
     
-    # CORS settings - Updated for network access
+    # CORS settings - Updated for network access + HuggingFace Spaces
     allowed_origins: str = Field(
-        default="http://localhost:5173,http://localhost:8080,http://localhost:3000,http://100.64.0.45:5173,http://100.64.0.45:8080,http://100.64.0.45:3000,http://100.64.0.45:8000",
+        default="http://localhost:5173,http://localhost:8080,http://localhost:3000,http://100.64.0.45:5173,http://100.64.0.45:8080,http://100.64.0.45:3000,http://100.64.0.45:8000,https://*.hf.space,https://huggingface.co",
         env="ALLOWED_ORIGINS"
     )
 
@@ -479,4 +479,4 @@ if __name__ == "__main__":
     # Test agent model configs
     for agent in ['jane_alesi', 'john_alesi', 'lara_alesi']:
         config = settings.get_openrouter_config_for_agent(agent)
-        logger.info(f"   {agent}: {config['model']} (${config['cost_per_1m']}/1M tokens)")
+        logger.info(f"   {agent}: {config['model']} (${config['cost_per_1m']}/1M tokens)")

backend/main.py

@@ -182,10 +182,11 @@ app = FastAPI(
     lifespan=lifespan
 )
 
-# CORS middleware for Vue.js frontend - using settings
+# CORS middleware for Vue.js frontend - using settings + HuggingFace Spaces regex
 app.add_middleware(
     CORSMiddleware,
     allow_origins=settings.get_cors_origins(),
+    allow_origin_regex=r"https://.*\.hf\.space",  # Allow all HuggingFace Spaces
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],

frontend/src/App.vue

@@ -48,6 +48,7 @@
 <script>
 import { ref, computed, onMounted } from 'vue'
 import SaapDashboard from './components/SaapDashboard.vue'
+import saapApi from './services/saapApi.js'
 
 export default {
   name: 'SaapApp',
@@ -74,18 +75,22 @@ export default {
       new Date().toLocaleDateString('de-DE')
     )
     
-    // Load agents data from API
+    // Load agents data from API using saapApi service
     const loadAgentsStats = async () => {
       try {
-        const response = await fetch('http://localhost:8000/api/v1/agents')
-        if (response.ok) {
-          const data = await response.json()
-          // Backend returns { "agents": [...] } format
-          const agents = data.agents || data
-          totalAgents.value = agents.length
-          activeAgents.value = agents.filter(agent => agent.status === 'active').length
+        console.log('🔄 Loading agents stats via API service...')
+        const response = await saapApi.getAgents()
+        console.log('📦 API Response:', response)
+        
+        // Backend returns {agents: [...], total: N, active: N}
+        if (response && response.agents) {
+          totalAgents.value = response.total || response.agents.length
+          activeAgents.value = response.active || response.agents.filter(a => a.status === 'active').length
           isConnected.value = true
           console.log(`✅ Loaded ${totalAgents.value} agents (${activeAgents.value} active)`)
+        } else {
+          console.warn('⚠️ Unexpected API response format:', response)
+          isConnected.value = false
         }
       } catch (error) {
         console.error('❌ Failed to load agents stats:', error)

frontend/src/services/saapApi.js

@@ -1,270 +1,251 @@
-import axios from 'axios'
+/**
+ * SAAP API Client - HuggingFace Deployment Compatible
+ * Automatically detects environment and uses correct base URL
+ */
+import axios from 'axios';
+
+// 🌐 Environment-aware base URL detection
+const getApiBaseUrl = () => {
+  // Production HuggingFace Spaces deployment
+  if (window.location.hostname.includes('hf.space')) {
+    return '/api/v1'; // Relative path - nginx routes to backend
+  }
+  
+  // Local development
+  if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+    return 'http://localhost:8000/api/v1';
+  }
+  
+  // Network development (IP-based)
+  if (window.location.hostname.match(/^\d+\.\d+\.\d+\.\d+$/)) {
+    return `http://${window.location.hostname}:8000/api/v1`;
+  }
+  
+  // Fallback: relative path
+  return '/api/v1';
+};
 
-// 🔧 BACK TO WORKING BACKEND: Port 8000 (we'll add OpenRouter to existing backend)
-const API_BASE_URL = 'http://localhost:8000/api/v1'
+const API_BASE_URL = getApiBaseUrl();
 
-const saapApi = axios.create({
+console.log('🔧 SAAP API Configuration:');
+console.log(`   Environment: ${window.location.hostname}`);
+console.log(`   API Base URL: ${API_BASE_URL}`);
+
+// Create axios instance with base configuration
+const apiClient = axios.create({
   baseURL: API_BASE_URL,
+  timeout: 30000,
   headers: {
-    'Content-Type': 'application/json'
+    'Content-Type': 'application/json',
   },
-  timeout: 120000  // Increased from 30s to 120s for multi-agent coordination
-})
-
-// Request interceptor for debugging
-saapApi.interceptors.request.use(
-  config => {
-    console.log(`🔄 API Request: ${config.method?.toUpperCase()} ${config.url}`)
-    return config
+  withCredentials: false, // Changed from true for HuggingFace
+});
+
+// Request interceptor for logging
+apiClient.interceptors.request.use(
+  (config) => {
+    console.log(`🔄 API Request: ${config.method?.toUpperCase()} ${config.url}`);
+    console.log(`🔄 Full URL: ${config.baseURL}${config.url}`);
+    return config;
   },
-  error => {
-    console.error('❌ API Request Error:', error)
-    return Promise.reject(error)
+  (error) => {
+    console.error('❌ Request Error:', error);
+    return Promise.reject(error);
   }
-)
-
-// Response interceptor for enhanced logging with provider info
-saapApi.interceptors.response.use(
-  response => {
-    const { status, config } = response
-    const provider = response.data?.provider || response.data?.response?.provider
-    const responseTime = response.data?.response_time || response.data?.performance?.response_time
-    const cost = response.data?.cost_usd || response.data?.performance?.cost_usd
-    
-    let logMsg = `✅ API Response: ${config.method?.toUpperCase()} ${config.url} (${status})`
-    if (provider) logMsg += ` via ${provider}`
-    if (responseTime) logMsg += ` in ${responseTime.toFixed(2)}s`
-    if (cost) logMsg += ` ($${cost.toFixed(6)})`
-    
-    console.log(logMsg)
-    
-    return response
+);
+
+// Response interceptor for error handling
+apiClient.interceptors.response.use(
+  (response) => {
+    console.log(`✅ API Response: ${response.status} ${response.config.url}`);
+    return response;
   },
-  error => {
-    const { config, response } = error
-    console.error(`❌ API Error: ${config?.method?.toUpperCase()} ${config?.url}`, {
-      status: response?.status,
-      data: response?.data,
-      message: error.message
-    })
-    return Promise.reject(error)
+  (error) => {
+    if (error.response) {
+      console.error('❌ API Error:', {
+        status: error.response.status,
+        data: error.response.data,
+        message: error.message
+      });
+    } else if (error.request) {
+      console.error('❌ Network Error: No response received', error.message);
+    } else {
+      console.error('❌ Request Setup Error:', error.message);
+    }
+    return Promise.reject(error);
   }
-)
-
-// Core API methods 
-export const api = {
-  // Health check
-  async getHealth() {
-    const response = await saapApi.get('/health')
-    return response.data
-  },
+);
 
-  // Agent management
+// API Methods
+const saapApi = {
+  // Agent Management
   async getAgents() {
-    const response = await saapApi.get('/agents')
-    return response.data
+    const response = await apiClient.get('/agents');
+    return response.data;
   },
 
   async getAgent(agentId) {
-    const response = await saapApi.get(`/agents/${agentId}`)
-    return response.data
+    const response = await apiClient.get(`/agents/${agentId}`);
+    return response.data;
   },
 
   async createAgent(agentData) {
-    const response = await saapApi.post('/agents', agentData)
-    return response.data
+    const response = await apiClient.post('/agents', agentData);
+    return response.data;
   },
 
+  async updateAgent(agentId, agentData) {
+    const response = await apiClient.put(`/agents/${agentId}`, agentData);
+    return response.data;
+  },
+
+  async deleteAgent(agentId) {
+    const response = await apiClient.delete(`/agents/${agentId}`);
+    return response.data;
+  },
+
+  // Agent Lifecycle
   async startAgent(agentId) {
-    const response = await saapApi.post(`/agents/${agentId}/start`)
-    return response.data
+    const response = await apiClient.post(`/agents/${agentId}/start`);
+    return response.data;
   },
 
   async stopAgent(agentId) {
-    const response = await saapApi.post(`/agents/${agentId}/stop`)
-    return response.data
+    const response = await apiClient.post(`/agents/${agentId}/stop`);
+    return response.data;
   },
 
-  // Enhanced chat with provider support (will be added to existing backend)
-  async chatWithAgent(agentId, message, provider = null) {
-    const requestData = { message }
-    if (provider) {
-      requestData.provider = provider // For future OpenRouter integration
-    }
-    
-    const response = await saapApi.post(`/agents/${agentId}/chat`, requestData)
-    return response.data
+  // Agent Communication
+  async sendMessage(agentId, message) {
+    const response = await apiClient.post(`/agents/${agentId}/chat`, {
+      message: message,
+      timestamp: Date.now()
+    });
+    return response.data;
   },
 
-  // 🚀 NEW: Multi-Agent Communication with extended timeout
-  async multiAgentChat(requestData) {
-    console.log('🤖 Multi-Agent Chat Request:', requestData)
-    const response = await saapApi.post('/multi-agent/chat', {
-      user_message: requestData.user_message,
-      user_context: requestData.user_context || {},
-      preferred_agent: requestData.preferred_agent || null,
-      task_priority: requestData.task_priority || 'normal'
-    }, {
-      timeout: 240000  // 4 minutes (240s) for multi-agent coordination (Jane → Specialist → Jane = ~200s)
-    })
-    console.log('✅ Multi-Agent Chat Response:', response.data)
-    return response.data
+  // Multi-Agent System
+  async multiAgentChat(message, options = {}) {
+    const response = await apiClient.post('/multi-agent/chat', {
+      user_message: message,
+      ...options
+    });
+    return response.data;
   },
 
-  // Multi-Agent status and capabilities
   async getMultiAgentStatus() {
-    const response = await saapApi.get('/multi-agent/status')
-    return response.data
+    const response = await apiClient.get('/multi-agent/status');
+    return response.data;
   },
 
-  async getAgentCapabilities() {
-    const response = await saapApi.get('/multi-agent/capabilities')
-    return response.data
-  },
-
-  // Agent templates
+  // Templates
   async getAgentTemplates() {
-    const response = await saapApi.get('/templates/agents')
-    return response.data
+    const response = await apiClient.get('/templates/agents');
+    return response.data;
   },
 
   async createAgentFromTemplate(templateName) {
-    const response = await saapApi.post(`/templates/agents/${templateName}`)
-    return response.data
+    const response = await apiClient.post(`/templates/agents/${templateName}`);
+    return response.data;
   },
 
-  // System info
-  async getSystemInfo() {
-    try {
-      const response = await saapApi.get('/health')
-      return response.data
-    } catch (error) {
-      console.error('Failed to get system info:', error)
-      return null
-    }
-  }
-}
-
-// 🚀 FIX: Add all API methods directly to saapApi for Frontend compatibility
-// This allows both saapApi.getAgents() and api.getAgents() to work
-Object.assign(saapApi, api)
-
-// WebSocket connection for real-time updates (back to working port)
-export const createWebSocketConnection = () => {
-  return new WebSocket('ws://localhost:8000/ws')
-}
+  // Health Check
+  async healthCheck() {
+    const response = await apiClient.get('/health');
+    return response.data;
+  },
+};
 
-// 🚀 NEW: SAAP WebSocket Manager Class (to fix import error in agents.js)
-class SaapWebSocketManager {
+// WebSocket connection for real-time updates
+class SaapWebSocket {
   constructor() {
-    this.ws = null
-    this.listeners = new Map()
-    this.connected = false
-    this.reconnectAttempts = 0
-    this.maxReconnectAttempts = 5
-    this.reconnectInterval = 3000
+    this.ws = null;
+    this.reconnectAttempts = 0;
+    this.maxReconnectAttempts = 5;
+    this.reconnectDelay = 1000;
+    this.listeners = new Map();
   }
 
   connect() {
-    console.log('🔌 Connecting to SAAP WebSocket...')
-    try {
-      this.ws = new WebSocket('ws://localhost:8000/ws')
-      
-      this.ws.onopen = () => {
-        console.log('✅ WebSocket connected')
-        this.connected = true
-        this.reconnectAttempts = 0
-        this.emit('connected')
-      }
-
-      this.ws.onmessage = (event) => {
-        try {
-          const data = JSON.parse(event.data)
-          console.log('📨 WebSocket message received:', data)
-          this.emit('message', data)
-        } catch (error) {
-          console.log('📨 WebSocket raw message:', event.data)
-          this.emit('message', event.data)
-        }
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsHost = window.location.hostname.includes('hf.space') 
+      ? window.location.host 
+      : 'localhost:8000';
+    const wsUrl = `${wsProtocol}//${wsHost}/ws`;
+
+    console.log(`🔌 Connecting to WebSocket: ${wsUrl}`);
+
+    this.ws = new WebSocket(wsUrl);
+
+    this.ws.onopen = () => {
+      console.log('✅ WebSocket connected');
+      this.reconnectAttempts = 0;
+      this.emit('connected', {});
+    };
+
+    this.ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        console.log('📨 WebSocket message:', data);
+        this.emit('message', data);
+      } catch (error) {
+        console.error('❌ WebSocket message parse error:', error);
       }
-
-      this.ws.onclose = () => {
-        console.log('🔌 WebSocket disconnected')
-        this.connected = false
-        this.emit('disconnected')
-        
-        // Auto-reconnect
-        if (this.reconnectAttempts < this.maxReconnectAttempts) {
-          setTimeout(() => {
-            this.reconnectAttempts++
-            console.log(`🔄 Reconnecting... (${this.reconnectAttempts}/${this.maxReconnectAttempts})`)
-            this.connect()
-          }, this.reconnectInterval)
-        }
-      }
-
-      this.ws.onerror = (error) => {
-        console.error('❌ WebSocket error:', error)
-        this.emit('error', error)
-      }
-
-    } catch (error) {
-      console.error('❌ WebSocket connection failed:', error)
-      this.emit('error', error)
-    }
+    };
+
+    this.ws.onerror = (error) => {
+      console.error('❌ WebSocket error:', error);
+      this.emit('error', error);
+    };
+
+    this.ws.onclose = () => {
+      console.log('❌ WebSocket disconnected');
+      this.emit('disconnected', {});
+      this.attemptReconnect();
+    };
   }
 
-  disconnect() {
-    console.log('🔌 Disconnecting WebSocket...')
-    if (this.ws) {
-      this.connected = false
-      this.ws.close()
-      this.ws = null
+  attemptReconnect() {
+    if (this.reconnectAttempts < this.maxReconnectAttempts) {
+      this.reconnectAttempts++;
+      const delay = this.reconnectDelay * this.reconnectAttempts;
+      console.log(`🔄 Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
+      setTimeout(() => this.connect(), delay);
+    } else {
+      console.error('❌ Max reconnection attempts reached');
     }
   }
 
   on(event, callback) {
     if (!this.listeners.has(event)) {
-      this.listeners.set(event, [])
+      this.listeners.set(event, []);
     }
-    this.listeners.get(event).push(callback)
+    this.listeners.get(event).push(callback);
   }
 
-  off(event, callback) {
+  emit(event, data) {
     if (this.listeners.has(event)) {
-      const callbacks = this.listeners.get(event)
-      const index = callbacks.indexOf(callback)
-      if (index > -1) {
-        callbacks.splice(index, 1)
-      }
+      this.listeners.get(event).forEach(callback => callback(data));
     }
   }
 
-  emit(event, data = null) {
-    if (this.listeners.has(event)) {
-      this.listeners.get(event).forEach(callback => {
-        try {
-          callback(data)
-        } catch (error) {
-          console.error(`❌ WebSocket event handler error for '${event}':`, error)
-        }
-      })
+  send(data) {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(data));
+    } else {
+      console.error('❌ WebSocket not connected');
     }
   }
 
-  send(data) {
-    if (this.connected && this.ws) {
-      this.ws.send(typeof data === 'string' ? data : JSON.stringify(data))
-    } else {
-      console.warn('⚠️ Cannot send data: WebSocket not connected')
+  disconnect() {
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
     }
   }
 }
 
-// Create singleton instance
-export const saapWebSocket = new SaapWebSocketManager()
-
-// 🚀 FIX: Add named export for saapApi to resolve import error
-export { saapApi }
+const saapWebSocket = new SaapWebSocket();
 
-export default saapApi
+export default saapApi;
+export { saapWebSocket };

frontend/src/stores/agents.js

@@ -5,7 +5,7 @@
 
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import { saapApi, saapWebSocket } from '@/services/saapApi'
+import saapApi, { saapWebSocket } from '@/services/saapApi'
 
 export const useAgentStore = defineStore('agents', () => {
   // ==========================================
@@ -426,4 +426,4 @@ export const useAgentStore = defineStore('agents', () => {
     getChatMessages,
     clearError
   }
-})
+})

huggingface/nginx.conf

@@ -1,8 +1,9 @@
-# Note: HuggingFace Spaces may run as root
-user root;
+# SAAP Nginx Configuration for HuggingFace Spaces
+# Single-container deployment with Vue.js frontend + FastAPI backend
+
 worker_processes auto;
 error_log /var/log/nginx/error.log warn;
-pid /var/run/nginx.pid;
+pid /tmp/nginx.pid;
 
 events {
     worker_connections 1024;
@@ -11,51 +12,40 @@ events {
 http {
     include /etc/nginx/mime.types;
     default_type application/octet-stream;
-
-    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
-                    '$status $body_bytes_sent "$http_referer" '
-                    '"$http_user_agent" "$http_x_forwarded_for"';
-
-    access_log /var/log/nginx/access.log main;
-
+    
+    # Logging
+    access_log /var/log/nginx/access.log;
+    
+    # Performance
     sendfile on;
     tcp_nopush on;
     tcp_nodelay on;
     keepalive_timeout 65;
     types_hash_max_size 2048;
-
-    # Gzip compression
+    client_max_body_size 10M;
+    
+    # Compression
     gzip on;
     gzip_vary on;
     gzip_proxied any;
-    gzip_comp_level 6;
-    gzip_types text/plain text/css text/xml text/javascript 
-               application/json application/javascript application/xml+rss 
-               application/rss+xml font/truetype font/opentype 
-               application/vnd.ms-fontobject image/svg+xml;
-
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
+    
+    # Upstream backend
+    upstream backend {
+        server 127.0.0.1:8000;
+    }
+    
     server {
         listen 7860;
-        listen [::]:7860;
         server_name _;
         
-        root /app/backend/static;
+        # Root directory for static files
+        root /app/frontend/dist;
         index index.html;
-
-        # Security headers
-        add_header X-Frame-Options "SAMEORIGIN" always;
-        add_header X-Content-Type-Options "nosniff" always;
-        add_header X-XSS-Protection "1; mode=block" always;
-        add_header Referrer-Policy "no-referrer-when-downgrade" always;
-
-        # Vue.js SPA routing
-        location / {
-            try_files $uri $uri/ /index.html;
-        }
-
-        # API proxy to backend (localhost for HuggingFace Spaces)
+        
+        # API routes → FastAPI backend
         location /api/ {
-            proxy_pass http://localhost:8000/api/;
+            proxy_pass http://backend;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection 'upgrade';
@@ -67,30 +57,39 @@ http {
             proxy_read_timeout 300s;
             proxy_connect_timeout 75s;
         }
-
-        # WebSocket support for real-time communication
+        
+        # WebSocket support
         location /ws {
-            proxy_pass http://localhost:8000/ws;
+            proxy_pass http://backend;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection "upgrade";
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_read_timeout 86400;
         }
-
-        # Cache static assets
-        location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
+        
+        # Health check
+        location /health {
+            proxy_pass http://backend;
+        }
+        
+        # API docs
+        location ~ ^/(docs|redoc) {
+            proxy_pass http://backend;
+        }
+        
+        # Frontend assets
+        location /assets/ {
+            try_files $uri =404;
             expires 1y;
             add_header Cache-Control "public, immutable";
         }
-
-        # Disable access to hidden files
-        location ~ /\. {
-            deny all;
-            access_log off;
-            log_not_found off;
+        
+        # Vue.js SPA - catch all routes
+        location / {
+            try_files $uri $uri/ /index.html;
+            add_header Cache-Control "no-cache";
         }
     }
 }