Add test gallery for debugging screenshot functionality

- Add fallback test gallery when no screenshots provided
- Use known working screenshot URLs for testing
- Test click-to-enlarge and modal functionality
- Help isolate if issue is data flow or component rendering

components/ScreenshotGallery.tsx

@@ -43,7 +43,114 @@ export default function ScreenshotGallery({
 
   if (screenshots.length === 0) {
     console.log('ScreenshotGallery: No screenshots to display')
-    return null
+    
+    // TEMPORARY: Show a test gallery with known screenshots for debugging
+    const testScreenshots = [
+      '/screenshots/SOLUSD_240_ai_1752447978639.png',
+      '/screenshots/SOLUSD_15_ai_1752441315672.png'
+    ]
+    
+    console.log('ScreenshotGallery: Using test screenshots for debugging:', testScreenshots)
+    
+    return (
+      <>
+        {/* Test Gallery Grid */}
+        <div className="mt-6 p-4 bg-gradient-to-br from-red-500/10 to-orange-500/10 border border-red-500/30 rounded-lg">
+          <div className="flex items-center justify-between mb-4">
+            <h4 className="text-lg font-bold text-white flex items-center">
+              <span className="w-6 h-6 bg-gradient-to-br from-red-400 to-red-600 rounded-lg flex items-center justify-center mr-2 text-sm">
+                🧪
+              </span>
+              Test Screenshots (Debug Mode)
+            </h4>
+            <div className="text-xs text-gray-400">
+              {testScreenshots.length} test images • Click to enlarge
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {testScreenshots.map((screenshot, index) => {
+              const filename = screenshot.split('/').pop() || ''
+              const timeframe = index === 0 ? '4h' : '15m'
+              
+              return (
+                <div 
+                  key={index}
+                  className="group relative bg-gray-800/30 rounded-lg overflow-hidden border border-gray-700 hover:border-red-500/50 transition-all cursor-pointer transform hover:scale-[1.02]"
+                  onClick={() => {
+                    console.log('Test image clicked:', screenshot)
+                    onImageClick(screenshot)
+                  }}
+                >
+                  <div className="aspect-video bg-gray-800 flex items-center justify-center relative">
+                    <img
+                      src={screenshot}
+                      alt={`${symbol} - ${timeframe} chart`}
+                      className="w-full h-full object-cover"
+                      onLoad={() => console.log(`Test image loaded successfully: ${screenshot}`)}
+                      onError={(e: any) => {
+                        console.error(`Test image failed to load: ${screenshot}`, e)
+                        const target = e.target as HTMLImageElement
+                        target.style.display = 'none'
+                      }}
+                    />
+                  </div>
+                  <div className="p-3">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <div className="text-sm font-medium text-white">{symbol}</div>
+                        <div className="text-xs text-red-300">{timeframe} Timeframe (Test)</div>
+                      </div>
+                      <div className="text-xs text-gray-400">
+                        Click to view
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+        
+        {/* Test Enlarged Image Modal */}
+        {enlargedImage && (
+          <div 
+            className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50"
+            onClick={onClose}
+          >
+            <div className="relative max-w-6xl max-h-[90vh] w-full" onClick={(e: any) => e.stopPropagation()}>
+              <button
+                onClick={onClose}
+                className="absolute top-4 right-4 w-10 h-10 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center text-white z-10 transition-colors"
+              >
+                ✕
+              </button>
+              <img
+                src={enlargedImage}
+                alt="Enlarged chart"
+                className="w-full h-full object-contain rounded-lg border border-gray-600"
+                onError={(e: any) => {
+                  console.error('Failed to load enlarged image:', enlargedImage)
+                  const target = e.target as HTMLImageElement
+                  target.alt = 'Failed to load image'
+                }}
+              />
+              <div className="absolute bottom-4 left-4 right-4 bg-black/70 backdrop-blur-sm rounded-lg p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <div className="text-white font-medium">{symbol} Chart Analysis (Test Mode)</div>
+                    <div className="text-gray-300 text-sm">Debug screenshot • High resolution view</div>
+                  </div>
+                  <div className="text-xs text-gray-400">
+                    ESC to close • Click outside to close
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </>
+    )
   }
 
   // Helper function to format screenshot URL