Fix ScreenshotGallery and improve trade execution feedback

- Add keyboard ESC listener for closing enlarged screenshots
- Fix screenshot URL formatting to use /screenshots/[filename] route
- Improve trade execution error handling with detailed messages
- Show specific feedback for insufficient funds, auth issues, etc.
- Remove unused Modal import that was causing build errors
- Add click-outside-to-close functionality for enlarged images

components/ScreenshotGallery.tsx

@@ -1,5 +1,5 @@
 "use client"
-import React from 'react'
+import React, { useEffect } from 'react'
 
 interface ScreenshotGalleryProps {
   screenshots: string[]
@@ -18,8 +18,30 @@ export default function ScreenshotGallery({
   onImageClick, 
   onClose 
 }: ScreenshotGalleryProps) {
+  // Handle ESC key to close enlarged image
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && enlargedImage) {
+        onClose()
+      }
+    }
+
+    if (enlargedImage) {
+      document.addEventListener('keydown', handleKeyDown)
+      return () => document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [enlargedImage, onClose])
+
   if (screenshots.length === 0) return null
 
+  // Helper function to format screenshot URL
+  const formatScreenshotUrl = (screenshot: string) => {
+    // Extract just the filename from the full path
+    const filename = screenshot.split('/').pop() || screenshot
+    // Return the Next.js API route format
+    return `/screenshots/${filename}`
+  }
+
   return (
     <>
       {/* Gallery Grid */}
@@ -40,23 +62,25 @@ export default function ScreenshotGallery({
           {screenshots.map((screenshot, index) => {
             const filename = screenshot.split('/').pop() || ''
             const timeframe = timeframes[index] || 'Unknown'
+            const imageUrl = formatScreenshotUrl(screenshot)
             
             return (
               <div 
                 key={index}
                 className="group relative bg-gray-800/30 rounded-lg overflow-hidden border border-gray-700 hover:border-purple-500/50 transition-all cursor-pointer transform hover:scale-[1.02]"
-                onClick={() => onImageClick(screenshot)}
+                onClick={() => onImageClick(imageUrl)}
               >
                 {/* Preview Image */}
                 <div className="aspect-video bg-gray-800 flex items-center justify-center relative">
                   <img
-                    src={screenshot}
+                    src={imageUrl}
                     alt={`${symbol} - ${timeframe} chart`}
                     className="w-full h-full object-cover"
-                    onError={(e) => {
+                    onError={(e: any) => {
                       const target = e.target as HTMLImageElement
                       target.style.display = 'none'
-                      target.nextElementSibling?.classList.remove('hidden')
+                      const fallback = target.nextElementSibling as HTMLElement
+                      if (fallback) fallback.classList.remove('hidden')
                     }}
                   />
                   <div className="hidden absolute inset-0 flex items-center justify-center text-gray-400">
@@ -97,8 +121,11 @@ export default function ScreenshotGallery({
 
       {/* Enlarged Image Modal */}
       {enlargedImage && (
-        <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
-          <div className="relative max-w-6xl max-h-[90vh] w-full">
+        <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()}>
             {/* Close Button */}
             <button
               onClick={onClose}
@@ -112,6 +139,11 @@ export default function ScreenshotGallery({
               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'
+              }}
             />
 
             {/* Image Info Overlay */}
@@ -122,7 +154,7 @@ export default function ScreenshotGallery({
                   <div className="text-gray-300 text-sm">AI analyzed screenshot • High resolution view</div>
                 </div>
                 <div className="text-xs text-gray-400">
-                  ESC to close
+                  ESC to close • Click outside to close
                 </div>
               </div>
             </div>