Fix progress tracking synchronization issues

- Enhanced EventSource message handling to properly reset UI state on completion
- Added completion detection based on all steps being finished
- Extended session deletion timeout from 1s to 3s for better UI updates
- Separated loading state management for single vs multi-timeframe analysis
- Ensured loading state is only reset by progress tracking for single timeframe
- Added immediate UI reset on errors to prevent stuck loading states
- Improved completion logging and state management

components/AIAnalysisPanel.tsx

@@ -121,11 +121,29 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
           console.log(`🔍 Analysis complete for ${sessionId}`)
           es.close()
           setEventSource(null)
+          // Reset UI state when analysis completes
+          setLoading(false)
+          setProgress(null)
         } else if (progressData.type === 'connected') {
           console.log(`🔍 EventSource connected for ${sessionId}`)
         } else {
           // Update progress state immediately
           setProgress(progressData)
+          // Check if analysis is complete based on steps
+          if (progressData.steps && progressData.steps.length > 0) {
+            const allCompleted = progressData.steps.every((step: any) => 
+              step.status === 'completed' || step.status === 'error'
+            )
+            if (allCompleted) {
+              console.log(`🔍 All steps completed for ${sessionId}, resetting UI state`)
+              setTimeout(() => {
+                setLoading(false)
+                setProgress(null)
+                es.close()
+                setEventSource(null)
+              }, 2000) // Give 2 seconds to show final state
+            }
+          }
         }
       } catch (error) {
         console.error('Error parsing progress data:', error)
@@ -271,6 +289,10 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
 
         setResult(data)
         
+        // For single timeframe analysis, don't set loading to false yet
+        // Let the progress tracking handle UI state reset
+        console.log(`🔍 API call completed for ${sessionId}, progress tracking will handle UI reset`)
+        
         // Call the callback with analysis result if provided
         if (onAnalysisComplete && data.analysis) {
           onAnalysisComplete(data.analysis, analysisSymbol)
@@ -344,6 +366,10 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
       const errorMessage = err instanceof Error ? err.message : 'Failed to perform analysis'
       setError(errorMessage)
       
+      // Reset loading state immediately on error
+      setLoading(false)
+      setProgress(null)
+      
       // Mark current active step as error
       setProgress(prev => {
         if (!prev) return null
@@ -361,7 +387,11 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
         return prev
       })
     } finally {
-      setLoading(false)
+      // Only reset loading for multi-timeframe analysis
+      // Single timeframe analysis loading state is managed by progress tracking
+      if (analysisTimeframes.length > 1) {
+        setLoading(false)
+      }
     }
   }
 

lib/ai-analysis.ts

@@ -645,8 +645,8 @@ Analyze all provided screenshots comprehensively and return only the JSON respon
       
       if (sessionId) {
         progressTracker.updateStep(sessionId, 'analysis', 'completed', 'AI analysis completed successfully!')
-        // Mark session as complete
+        // Mark session as complete with longer delay to ensure UI receives updates
-        setTimeout(() => progressTracker.deleteSession(sessionId), 1000)
+        setTimeout(() => progressTracker.deleteSession(sessionId), 3000)
       }
       
       return {