Fix progress tracking synchronization issues

- Pre-generate sessionId on client side before API call to avoid race conditions
- Add small delays in progress tracker to ensure EventSource connection is established
- Improve logging and error handling in progress streaming
- Add connection confirmation messages in EventSource stream
- Fix TypeScript interface to include sessionId in AnalysisProgress

This should resolve the lag between actual analysis progress and progress bar display.

components/AIAnalysisPanel.tsx

@@ -40,6 +40,7 @@ interface ProgressStep {
 }
 
 interface AnalysisProgress {
+  sessionId: string
   currentStep: number
   totalSteps: number
   steps: ProgressStep[]
@@ -82,6 +83,8 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
 
   // Real-time progress tracking
   const startProgressTracking = (sessionId: string) => {
+    console.log(`🔍 Starting progress tracking for session: ${sessionId}`)
+    
     // Close existing connection
     if (eventSource) {
       eventSource.close()
@@ -89,13 +92,23 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
 
     const es = new EventSource(`/api/progress/${sessionId}/stream`)
     
+    es.onopen = () => {
+      console.log(`🔍 EventSource connection opened for ${sessionId}`)
+    }
+    
     es.onmessage = (event) => {
       try {
         const progressData = JSON.parse(event.data)
+        console.log(`🔍 Received progress update for ${sessionId}:`, progressData)
+        
         if (progressData.type === 'complete') {
+          console.log(`🔍 Analysis complete for ${sessionId}`)
           es.close()
           setEventSource(null)
+        } else if (progressData.type === 'connected') {
+          console.log(`🔍 EventSource connected for ${sessionId}`)
         } else {
+          // Update progress state immediately
           setProgress(progressData)
         }
       } catch (error) {
@@ -203,6 +216,11 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
     try {
       if (analysisTimeframes.length === 1) {
         // Single timeframe analysis with real-time progress
+        
+        // Pre-generate sessionId and start progress tracking BEFORE making the API call
+        const sessionId = `analysis_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
+        startProgressTracking(sessionId)
+        
         const response = await fetch('/api/enhanced-screenshot', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
@@ -210,7 +228,8 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
             symbol: analysisSymbol,
             timeframe: analysisTimeframes[0],
             layouts: selectedLayouts,
-            analyze: true
+            analyze: true,
+            sessionId: sessionId // Pass pre-generated sessionId
           })
         })
 
@@ -220,11 +239,6 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
           throw new Error(data.error || 'Analysis failed')
         }
 
-        // Start real-time progress tracking if sessionId is provided
-        if (data.sessionId) {
-          startProgressTracking(data.sessionId)
-        }
-
         setResult(data)
         
         // Call the callback with analysis result if provided