Fix new Frontend 10

frontend/src/api/hooks/useTraining.ts

@@ -13,7 +13,13 @@ import type {
   SingleProductTrainingRequest,
 } from '../types';
 
-export const useTraining = () => {
+interface UseTrainingOptions {
+  disablePolling?: boolean; // New option to disable HTTP status polling
+}
+
+export const useTraining = (options: UseTrainingOptions = {}) => {
+
+  const { disablePolling = false } = options;
   const [jobs, setJobs] = useState<TrainingJobResponse[]>([]);
   const [currentJob, setCurrentJob] = useState<TrainingJobResponse | null>(null);
   const [models, setModels] = useState<ModelInfo[]>([]);
@@ -186,12 +192,19 @@ export const useTraining = () => {
     }
   }, []);
 
-  // Auto-refresh job status for running jobs
   useEffect(() => {
+    // Skip polling if disabled or no running jobs
+    if (disablePolling) {
+      console.log('🚫 HTTP status polling disabled - using WebSocket instead');
+      return;
+    }
+
     const runningJobs = jobs.filter(job => job.status === 'running' || job.status === 'pending');
     
     if (runningJobs.length === 0) return;
 
+    console.log('🔄 Starting HTTP status polling for', runningJobs.length, 'jobs');
+
     const interval = setInterval(async () => {
       for (const job of runningJobs) {
         try {
@@ -203,8 +216,12 @@ export const useTraining = () => {
       }
     }, 5000); // Refresh every 5 seconds
 
-    return () => clearInterval(interval);
-  }, [jobs, getTrainingJobStatus]);
+    return () => {
+      console.log('🛑 Stopping HTTP status polling');
+      clearInterval(interval);
+    };
+  }, [jobs, getTrainingJobStatus, disablePolling]);
+
 
   return {
     jobs,

frontend/src/api/websocket/hooks.ts

@@ -95,31 +95,85 @@ export const useWebSocket = (config: WebSocketConfig) => {
 };
 
 // Hook for training job updates
-export const useTrainingWebSocket = (jobId: string) => {
+export const useTrainingWebSocket = (jobId: string, tenantId?: string) => {
+  const [jobUpdates, setJobUpdates] = useState<any[]>([]);
+
+  // 🚀 FIX 1: Construct URL with actual tenantId (get from localStorage if not provided)
+  const actualTenantId = tenantId || (() => {
+    const userData = localStorage.getItem('user_data');
+    if (userData) {
+      try {
+        const parsed = JSON.parse(userData);
+        return parsed.current_tenant_id || parsed.tenant_id;
+      } catch (e) {
+        console.error('Failed to parse user data for tenant ID:', e);
+      }
+    }
+    return null;
+  })();
 
   const config: WebSocketConfig = {
-    url: `ws://localhost:8002/api/v1/ws/tenants/{tenant_id}/training/jobs/${jobId}/live`,
+    // 🚀 FIX: Use actual tenant ID instead of placeholder
+    url: actualTenantId 
+      ? `ws://localhost:8002/api/v1/ws/tenants/${actualTenantId}/training/jobs/${jobId}/live`
+      : `ws://localhost:8002/api/v1/ws/tenants/unknown/training/jobs/${jobId}/live`,
     reconnect: true,
   };
 
-  const [jobUpdates, setJobUpdates] = useState<any[]>([]);
-
-  const { status, connect, disconnect, addMessageHandler, isConnected } = useWebSocket(config);
+  const { status, connect, disconnect, addMessageHandler, isConnected, lastMessage } = useWebSocket(config);
 
+  // 🚀 FIX 2: Handle ALL message types, not just specific ones
   useEffect(() => {
     addMessageHandler((message) => {
-      if (message.type === 'training_progress' || message.type === 'training_completed') {
-        setJobUpdates(prev => [message.data, ...prev.slice(0, 99)]); // Keep last 100 updates
+      console.log('🔥 WebSocket message received:', message);
+      
+      // Handle all training-related message types
+      const trainingMessageTypes = [
+        'progress', 'training_progress',
+        'completed', 'training_completed', 
+        'failed', 'training_failed',
+        'error', 'training_error',
+        'started', 'training_started',
+        'heartbeat', 'initial_status'
+      ];
+      
+      if (trainingMessageTypes.includes(message.type)) {
+        console.log('✅ Processing training message:', message.type, message.data);
+        setJobUpdates(prev => [message, ...prev.slice(0, 99)]); // Keep full message object
+      } else {
+        console.log('ℹ️ Unhandled message type:', message.type);
+        // Still add to updates for debugging
+        setJobUpdates(prev => [message, ...prev.slice(0, 99)]);
       }
     });
   }, [addMessageHandler]);
 
+  // 🚀 FIX 3: Log connection attempts and status
+  useEffect(() => {
+    console.log('🔌 WebSocket config:', {
+      url: config.url,
+      jobId,
+      tenantId: actualTenantId,
+      status
+    });
+  }, [config.url, jobId, actualTenantId, status]);
+
+  // 🚀 FIX 4: Debug latest message
+  useEffect(() => {
+    if (lastMessage) {
+      console.log('📨 Latest WebSocket message:', lastMessage);
+    }
+  }, [lastMessage]);
+
   return {
     status,
     jobUpdates,
     connect,
     disconnect,
     isConnected,
+    lastMessage, // Expose for debugging
+    tenantId: actualTenantId, // Expose for debugging
+    wsUrl: config.url, // Expose for debugging
   };
 };