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

app/screenshots/[filename]/route.ts

@@ -1,22 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import fs from 'fs/promises'
-import path from 'path'
-
-export async function GET(
-  request: NextRequest,
-  context: any
-) {
-  try {
-    const screenshotsDir = path.join(process.cwd(), 'screenshots')
-    const filePath = path.join(screenshotsDir, context.params.filename)
-    const file = await fs.readFile(filePath)
-    return new NextResponse(file, {
-      headers: {
-        'Content-Type': 'image/png',
-        'Content-Disposition': `inline; filename="${context.params.filename}"`
-      }
-    })
-  } catch (e: any) {
-    return NextResponse.json({ error: e.message }, { status: 404 })
-  }
-}

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