Implement batch comparative analysis for multi-timeframe

- Create new /api/batch-analysis endpoint for collecting all screenshots first
- Modified AIAnalysisPanel to use batch analysis for multiple timeframes
- All screenshots captured before AI analysis (no immediate analysis per timeframe)
- Enables AI to compare across timeframes for better trend analysis
- Maintains UI compatibility with existing display logic

components/AIAnalysisPanel.tsx

@@ -306,68 +306,60 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
           onAnalysisComplete(data.analysis, analysisSymbol)
         }
       } else {
-        // Multiple timeframe analysis
-        const results = []
+        // Multiple timeframe analysis - use batch comparative analysis
+        console.log(`🎯 Starting batch comparative analysis for ${analysisTimeframes.length} timeframes`)
         
-        for (let i = 0; i < analysisTimeframes.length; i++) {
-          const tf = analysisTimeframes[i]
-          const timeframeLabel = timeframes.find(t => t.value === tf)?.label || tf
-          
-          console.log(`🧪 Analyzing timeframe: ${timeframeLabel}`)
-          
-          const response = await fetch('/api/enhanced-screenshot', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              symbol: analysisSymbol,
-              timeframe: tf,
-              layouts: selectedLayouts,
-              analyze: true
-            })
-          })
-          
-          const result = await response.json()
-          results.push({ 
-            timeframe: tf, 
-            timeframeLabel,
-            success: response.ok, 
-            result 
+        // Pre-generate sessionId for batch analysis
+        const sessionId = `batch_analysis_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
+        startProgressTracking(sessionId)
+        
+        const response = await fetch('/api/batch-analysis', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            symbol: analysisSymbol,
+            timeframes: analysisTimeframes,
+            layouts: selectedLayouts,
+            sessionId: sessionId
           })
+        })
 
-          // Start progress tracking for the first timeframe session
-          if (i === 0 && result.sessionId) {
-            startProgressTracking(result.sessionId)
-          }
-          
-          // Update timeframe progress manually for multi-timeframe
-          setProgress(prev => prev ? {
-            ...prev,
-            timeframeProgress: {
-              current: i + 1,
-              total: analysisTimeframes.length,
-              currentTimeframe: timeframeLabel
-            }
-          } : null)
-          
-          // Small delay between requests
-          await new Promise(resolve => setTimeout(resolve, 1000))
-        }
+        const data = await response.json()
         
+        if (!response.ok) {
+          throw new Error(data.error || 'Batch analysis failed')
+        }
+
+        console.log(`✅ Batch analysis completed: ${data.totalScreenshots} screenshots, ${data.timeframes.length} timeframes`)
+        
+        // Transform batch result to match expected format for UI compatibility
         const multiResult = {
-          type: 'multi_timeframe',
+          type: 'batch_comparative',
           symbol: analysisSymbol,
-          summary: `Analyzed ${results.length} timeframes for ${analysisSymbol}`,
-          results
+          summary: data.summary || `Batch comparative analysis of ${data.timeframes?.length || analysisTimeframes.length} timeframes`,
+          analysis: data.analysis,
+          screenshots: data.screenshots,
+          timeframeBreakdown: data.timeframeBreakdown,
+          totalScreenshots: data.totalScreenshots,
+          timeframes: analysisTimeframes.map(tf => timeframes.find(t => t.value === tf)?.label || tf),
+          // Create results array for UI compatibility
+          results: analysisTimeframes.map(tf => ({
+            timeframe: tf,
+            timeframeLabel: timeframes.find(t => t.value === tf)?.label || tf,
+            success: true,
+            result: {
+              analysis: data.analysis, // Single comparative analysis for all timeframes
+              screenshots: data.screenshots.filter((s: string) => s.includes(`_${tf}_`)),
+              sessionId: sessionId
+            }
+          }))
         }
-        
+
         setResult(multiResult)
         
-        // Call the callback with the first successful analysis result if provided
-        if (onAnalysisComplete) {
-          const firstSuccessfulResult = results.find(r => r.success && r.result?.analysis)
-          if (firstSuccessfulResult) {
-            onAnalysisComplete(firstSuccessfulResult.result.analysis, analysisSymbol)
-          }
+        // Call the callback with analysis result if provided
+        if (onAnalysisComplete && data.analysis) {
+          onAnalysisComplete(data.analysis, analysisSymbol)
         }
       }
     } catch (err) {
@@ -967,7 +959,7 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
         </div>
       )}
 
-      {result && result.type === 'multi_timeframe' && (
+      {result && (result.type === 'multi_timeframe' || result.type === 'batch_comparative') && (
         <div className="mt-6 space-y-4">
           <div className="flex items-center justify-between">
             <h3 className="text-lg font-bold text-white flex items-center">
@@ -1482,7 +1474,7 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
       )}
 
       {/* Multi-timeframe Screenshot Gallery */}
-      {result && result.type === 'multi_timeframe' && result.results && (
+      {result && (result.type === 'multi_timeframe' || result.type === 'batch_comparative') && result.results && (
         <ScreenshotGallery
           screenshots={result.results
             .filter((r: any) => r.success && r.result.screenshots)