Add debugging to ScreenshotGallery component

- Add console logging for props, screenshot data, and image loading
- Add onLoad event to track successful image loads
- Add more detailed error logging for failed images
- Debug data flow to identify why gallery preview/enlargement not working

components/ScreenshotGallery.tsx

@@ -18,6 +18,15 @@ export default function ScreenshotGallery({
   onImageClick, 
   onClose 
 }: ScreenshotGalleryProps) {
+  // Debug logging
+  console.log('ScreenshotGallery props:', { 
+    screenshots, 
+    symbol, 
+    timeframes, 
+    enlargedImage,
+    screenshotsLength: screenshots?.length 
+  })
+
   // Handle ESC key to close enlarged image
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -32,7 +41,10 @@ export default function ScreenshotGallery({
     }
   }, [enlargedImage, onClose])
 
-  if (screenshots.length === 0) return null
+  if (screenshots.length === 0) {
+    console.log('ScreenshotGallery: No screenshots to display')
+    return null
+  }
 
   // Helper function to format screenshot URL
   const formatScreenshotUrl = (screenshot: string) => {
@@ -61,9 +73,24 @@ export default function ScreenshotGallery({
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {screenshots.map((screenshot, index) => {
             const filename = screenshot.split('/').pop() || ''
-            const timeframe = timeframes[index] || 'Unknown'
+            // Extract timeframe from filename (e.g., SOLUSD_5_ai_timestamp.png -> "5m")
+            const extractTimeframeFromFilename = (filename: string) => {
+              const match = filename.match(/_(\d+|D)_/)
+              if (!match) return 'Unknown'
+              const tf = match[1]
+              if (tf === 'D') return '1D'
+              if (tf === '5') return '5m'
+              if (tf === '15') return '15m'
+              if (tf === '60') return '1h'
+              if (tf === '240') return '4h'
+              return `${tf}m`
+            }
+            
+            const timeframe = timeframes[index] || extractTimeframeFromFilename(filename)
             const imageUrl = formatScreenshotUrl(screenshot)
             
+            console.log(`Screenshot ${index}:`, { screenshot, filename, timeframe, imageUrl })
+            
             return (
               <div 
                 key={index}
@@ -76,7 +103,9 @@ export default function ScreenshotGallery({
                     src={imageUrl}
                     alt={`${symbol} - ${timeframe} chart`}
                     className="w-full h-full object-cover"
+                    onLoad={() => console.log(`Image loaded successfully: ${imageUrl}`)}
                     onError={(e: any) => {
+                      console.error(`Failed to load image: ${imageUrl}`, e)
                       const target = e.target as HTMLImageElement
                       target.style.display = 'none'
                       const fallback = target.nextElementSibling as HTMLElement