feat: Add trade execution and screenshot gallery to AI analysis

- Create TradeModal component for executing trades with entry, TP, SL
- Add ScreenshotGallery component with click-to-enlarge functionality
- Integrate trade buttons in both single and multi-timeframe analysis results
- Add screenshot gallery that displays captured TradingView charts
- Parse analysis data to pre-fill trade modal with AI recommendations
- Support trade execution via /api/trading endpoint
- Add visual indicators and smooth transitions for better UX

Trade button features:
- Pre-filled entry, take profit, and stop loss from AI analysis
- Configurable position size and leverage
- Real-time validation and error handling

Screenshot gallery features:
- Grid layout with hover effects
- Click to enlarge in full-screen modal
- Support for both single and multi-timeframe results
- Chart information overlay with timeframe labels

components/AIAnalysisPanel.tsx

@@ -1,5 +1,8 @@
 "use client"
 import React, { useState } from 'react'
+import Modal from './Modal'
+import TradeModal from './TradeModal'
+import ScreenshotGallery from './ScreenshotGallery'
 
 const layouts = (process.env.NEXT_PUBLIC_TRADINGVIEW_LAYOUTS || 'ai,Diy module').split(',').map(l => l.trim())
 const timeframes = [
@@ -54,6 +57,11 @@ export default function AIAnalysisPanel() {
   const [result, setResult] = useState<any>(null)
   const [error, setError] = useState<string | null>(null)
   const [progress, setProgress] = useState<AnalysisProgress | null>(null)
+  const [modalOpen, setModalOpen] = useState(false)
+  const [modalData, setModalData] = useState<any>(null)
+  const [enlargedScreenshot, setEnlargedScreenshot] = useState<string | null>(null)
+  const [tradeModalOpen, setTradeModalOpen] = useState(false)
+  const [tradeModalData, setTradeModalData] = useState<any>(null)
 
   // Helper function to safely render any value
   const safeRender = (value: any): string => {
@@ -390,6 +398,59 @@ export default function AIAnalysisPanel() {
     await performAnalysis()
   }
 
+  // Trade initiation handler
+  const handleTradeClick = (tfResult: any) => {
+    const analysis = tfResult?.result?.analysis || tfResult?.analysis || {}
+    
+    setTradeModalData({
+      entry: analysis.entry?.price || analysis.entry || '',
+      tp: analysis.takeProfits?.tp1?.price || analysis.takeProfits?.tp1 || analysis.takeProfits || '',
+      sl: analysis.stopLoss?.price || analysis.stopLoss || '',
+      symbol: symbol,
+      timeframe: tfResult?.timeframeLabel || tfResult?.timeframe || '',
+    })
+    setTradeModalOpen(true)
+  }
+
+  // Trade execution API call
+  const executeTrade = async (tradeData: any) => {
+    try {
+      const response = await fetch('/api/trading', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          symbol: tradeData.symbol,
+          side: 'buy', // Could be derived from analysis
+          size: parseFloat(tradeData.size),
+          price: parseFloat(tradeData.entry),
+          stopLoss: parseFloat(tradeData.sl),
+          takeProfit: parseFloat(tradeData.tp),
+          leverage: parseInt(tradeData.leverage),
+          timeframe: tradeData.timeframe
+        })
+      })
+      
+      const result = await response.json()
+      
+      if (response.ok) {
+        // Show success message
+        alert(`Trade executed successfully! Order ID: ${result.orderId || 'N/A'}`)
+      } else {
+        alert(`Trade failed: ${result.error || 'Unknown error'}`)
+      }
+    } catch (error) {
+      console.error('Trade execution failed:', error)
+      alert('Trade execution failed. Please check your connection.')
+    }
+    
+    setTradeModalOpen(false)
+  }
+
+  // Screenshot gallery modal
+  const handleScreenshotClick = (src: string) => {
+    setEnlargedScreenshot(src)
+  }
+
   return (
     <div className="card card-gradient">
       <div className="flex items-center justify-between mb-6">
@@ -452,34 +513,31 @@ export default function AIAnalysisPanel() {
             <button
               key={coin.symbol}
               onClick={() => quickAnalyze(coin.symbol)}
-              disabled={loading || selectedTimeframes.length === 0}
+              disabled={loading || selectedLayouts.length === 0}
-              className={`group relative p-4 rounded-xl border transition-all duration-300 ${
+              className={`group relative p-3 rounded-lg border transition-all ${
-                symbol === coin.symbol
+                loading || selectedLayouts.length === 0
-                  ? 'border-cyan-500 bg-cyan-500/10 shadow-lg shadow-cyan-500/20'
+                  ? 'border-gray-700 bg-gray-800/30 cursor-not-allowed opacity-50'
-                  : 'border-gray-700 bg-gray-800/50 hover:border-gray-600 hover:bg-gray-800'
+                  : symbol === coin.symbol
-              } ${loading || selectedTimeframes.length === 0 ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105 hover:shadow-lg'}`}
+                  ? 'border-cyan-500 bg-cyan-500/10 text-cyan-300'
+                  : 'border-gray-700 bg-gray-800/30 text-gray-300 hover:border-gray-600 hover:bg-gray-800/50 hover:text-white transform hover:scale-105'
+              }`}
             >
-              <div className={`w-10 h-10 bg-gradient-to-br ${coin.color} rounded-lg flex items-center justify-center mb-3 mx-auto text-white font-bold`}>
+              <div className={`w-8 h-8 bg-gradient-to-br ${coin.color} rounded-lg flex items-center justify-center mx-auto mb-2`}>
-                {coin.icon}
+                <span className="text-white font-bold text-sm">{coin.icon}</span>
               </div>
-              <div className="text-xs font-semibold text-white">{coin.name}</div>
+              <div className="text-xs font-medium">{coin.name}</div>
-              <div className="text-xs text-gray-400 mt-1">{coin.symbol}</div>
+              <div className="text-xs text-gray-500">{coin.symbol}</div>
-              {selectedTimeframes.length > 0 && (
-                <div className="text-xs text-cyan-400 mt-1 font-medium">
-                  {selectedTimeframes.length} TF{selectedTimeframes.length > 1 ? 's' : ''}
-                </div>
-              )}
               {symbol === coin.symbol && (
-                <div className="absolute top-2 right-2 w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
+                <div className="absolute top-1 right-1 w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
               )}
             </button>
           ))}
         </div>
       </div>
 
-      {/* Advanced Controls */}
+      {/* Advanced Analysis Section */}
-      <div className="border-t border-gray-700 pt-6">
+      <div className="mb-8">
-        <h3 className="text-sm font-semibold text-gray-300 mb-4 flex items-center">
+        <h3 className="text-sm font-semibold text-gray-300 flex items-center mb-4">
           <span className="w-4 h-4 bg-purple-500 rounded-full mr-2"></span>
           Advanced Analysis
         </h3>
@@ -834,9 +892,19 @@ export default function AIAnalysisPanel() {
                   }`}>
                     {timeframeResult.success ? '✅' : '❌'} {timeframeResult.timeframeLabel} Timeframe
                   </h5>
-                  <span className="text-xs text-gray-400">
+                  <div className="flex items-center space-x-2">
-                    {timeframeResult.success ? 'Analysis Complete' : 'Failed'}
+                    {timeframeResult.success && timeframeResult.result.analysis && (
-                  </span>
+                      <button
+                        onClick={() => handleTradeClick(timeframeResult)}
+                        className="px-3 py-1 bg-gradient-to-r from-green-500 to-green-600 text-white text-xs font-medium rounded hover:from-green-600 hover:to-green-700 transition-all transform hover:scale-105"
+                      >
+                        💰 Trade
+                      </button>
+                    )}
+                    <span className="text-xs text-gray-400">
+                      {timeframeResult.success ? 'Analysis Complete' : 'Failed'}
+                    </span>
+                  </div>
                 </div>
                 
                 {timeframeResult.success && timeframeResult.result.analysis && (
@@ -927,11 +995,21 @@ export default function AIAnalysisPanel() {
               </span>
               Analysis Complete
             </h3>
-            {result.screenshots && (
+            <div className="flex items-center space-x-3">
-              <div className="text-xs text-gray-400">
+              {result.analysis && (
-                Screenshots: {result.screenshots.length} captured
+                <button
-              </div>
+                  onClick={() => handleTradeClick({ result, timeframeLabel: selectedTimeframes.map(tf => timeframes.find(t => t.value === tf)?.label).join(', ') })}
-            )}
+                  className="px-4 py-2 bg-gradient-to-r from-green-500 to-green-600 text-white text-sm font-medium rounded-lg hover:from-green-600 hover:to-green-700 transition-all transform hover:scale-105"
+                >
+                  💰 Execute Trade
+                </button>
+              )}
+              {result.screenshots && (
+                <div className="text-xs text-gray-400">
+                  Screenshots: {result.screenshots.length} captured
+                </div>
+              )}
+            </div>
           </div>
 
           <div className="grid gap-4">
@@ -1267,6 +1345,38 @@ export default function AIAnalysisPanel() {
           </div>
         </div>
       )}
+
+      {/* Screenshot Gallery */}
+      {result && result.screenshots && (
+        <ScreenshotGallery
+          screenshots={result.screenshots}
+          symbol={symbol}
+          timeframes={selectedTimeframes.map(tf => timeframes.find(t => t.value === tf)?.label || tf)}
+          enlargedImage={enlargedScreenshot}
+          onImageClick={handleScreenshotClick}
+          onClose={() => setEnlargedScreenshot(null)}
+        />
+      )}
+
+      {/* Multi-timeframe Screenshot Gallery */}
+      {result && result.type === 'multi_timeframe' && result.results && (
+        <ScreenshotGallery
+          screenshots={result.results.filter((r: any) => r.success && r.result.screenshots).flatMap((r: any) => r.result.screenshots)}
+          symbol={symbol}
+          timeframes={result.results.filter((r: any) => r.success).map((r: any) => r.timeframeLabel)}
+          enlargedImage={enlargedScreenshot}
+          onImageClick={handleScreenshotClick}
+          onClose={() => setEnlargedScreenshot(null)}
+        />
+      )}
+
+      {/* Trade Modal */}
+      <TradeModal
+        isOpen={tradeModalOpen}
+        onClose={() => setTradeModalOpen(false)}
+        tradeData={tradeModalData}
+        onExecute={executeTrade}
+      />
     </div>
   )
 }

components/ScreenshotGallery.tsx

@@ -0,0 +1,134 @@
+"use client"
+import React from 'react'
+
+interface ScreenshotGalleryProps {
+  screenshots: string[]
+  symbol: string
+  timeframes: string[]
+  enlargedImage: string | null
+  onImageClick: (src: string) => void
+  onClose: () => void
+}
+
+export default function ScreenshotGallery({ 
+  screenshots, 
+  symbol, 
+  timeframes, 
+  enlargedImage, 
+  onImageClick, 
+  onClose 
+}: ScreenshotGalleryProps) {
+  if (screenshots.length === 0) return null
+
+  return (
+    <>
+      {/* Gallery Grid */}
+      <div className="mt-6 p-4 bg-gradient-to-br from-purple-500/10 to-indigo-500/10 border border-purple-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-purple-400 to-purple-600 rounded-lg flex items-center justify-center mr-2 text-sm">
+              📸
+            </span>
+            Chart Screenshots
+          </h4>
+          <div className="text-xs text-gray-400">
+            {screenshots.length} captured • Click to enlarge
+          </div>
+        </div>
+
+        <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'
+            
+            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)}
+              >
+                {/* Preview Image */}
+                <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"
+                    onError={(e) => {
+                      const target = e.target as HTMLImageElement
+                      target.style.display = 'none'
+                      target.nextElementSibling?.classList.remove('hidden')
+                    }}
+                  />
+                  <div className="hidden absolute inset-0 flex items-center justify-center text-gray-400">
+                    <div className="text-center">
+                      <div className="text-3xl mb-2">📊</div>
+                      <div className="text-sm">Chart Preview</div>
+                      <div className="text-xs text-gray-500">{filename}</div>
+                    </div>
+                  </div>
+                  
+                  {/* Overlay */}
+                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all flex items-center justify-center">
+                    <div className="opacity-0 group-hover:opacity-100 transition-opacity">
+                      <div className="w-12 h-12 bg-purple-500/80 rounded-full flex items-center justify-center">
+                        <span className="text-white text-xl">🔍</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Image Info */}
+                <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-purple-300">{timeframe} Timeframe</div>
+                    </div>
+                    <div className="text-xs text-gray-400">
+                      Click to view
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* 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">
+            {/* Close Button */}
+            <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>
+
+            {/* Image */}
+            <img
+              src={enlargedImage}
+              alt="Enlarged chart"
+              className="w-full h-full object-contain rounded-lg border border-gray-600"
+            />
+
+            {/* Image Info Overlay */}
+            <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</div>
+                  <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
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

components/TradeModal.tsx

@@ -0,0 +1,183 @@
+"use client"
+import React, { useState } from 'react'
+
+interface TradeModalProps {
+  isOpen: boolean
+  onClose: () => void
+  tradeData: {
+    symbol: string
+    timeframe: string
+    entry: string
+    tp: string
+    sl: string
+  } | null
+  onExecute: (data: any) => void
+}
+
+export default function TradeModal({ isOpen, onClose, tradeData, onExecute }: TradeModalProps) {
+  const [loading, setLoading] = useState(false)
+  const [formData, setFormData] = useState({
+    entry: tradeData?.entry || '',
+    tp: tradeData?.tp || '',
+    sl: tradeData?.sl || '',
+    size: '0.1',
+    leverage: '1'
+  })
+
+  React.useEffect(() => {
+    if (tradeData) {
+      setFormData(prev => ({
+        ...prev,
+        entry: tradeData.entry || '',
+        tp: tradeData.tp || '',
+        sl: tradeData.sl || ''
+      }))
+    }
+  }, [tradeData])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    
+    try {
+      await onExecute({
+        symbol: tradeData?.symbol,
+        timeframe: tradeData?.timeframe,
+        ...formData
+      })
+    } catch (error) {
+      console.error('Trade execution failed:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (!isOpen || !tradeData) return null
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+      <div className="bg-gray-900 border border-gray-700 rounded-xl p-6 max-w-md w-full">
+        <div className="flex items-center justify-between mb-6">
+          <h3 className="text-xl font-bold text-white flex items-center">
+            <span className="w-8 h-8 bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center mr-3">
+              💰
+            </span>
+            Execute Trade
+          </h3>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-white transition-colors"
+          >
+            ✕
+          </button>
+        </div>
+
+        <div className="mb-4 p-3 bg-blue-500/10 border border-blue-500/30 rounded-lg">
+          <div className="text-sm text-blue-300">
+            <div><strong>Symbol:</strong> {tradeData.symbol}</div>
+            <div><strong>Timeframe:</strong> {tradeData.timeframe}</div>
+          </div>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-xs font-medium text-gray-400 mb-2">Entry Price</label>
+            <input
+              type="number"
+              step="0.01"
+              value={formData.entry}
+              onChange={(e) => setFormData(prev => ({ ...prev, entry: e.target.value }))}
+              className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-green-500 focus:outline-none"
+              placeholder="0.00"
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-gray-400 mb-2">Take Profit</label>
+            <input
+              type="number"
+              step="0.01"
+              value={formData.tp}
+              onChange={(e) => setFormData(prev => ({ ...prev, tp: e.target.value }))}
+              className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-green-500 focus:outline-none"
+              placeholder="0.00"
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-gray-400 mb-2">Stop Loss</label>
+            <input
+              type="number"
+              step="0.01"
+              value={formData.sl}
+              onChange={(e) => setFormData(prev => ({ ...prev, sl: e.target.value }))}
+              className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-red-500 focus:outline-none"
+              placeholder="0.00"
+              required
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs font-medium text-gray-400 mb-2">Position Size</label>
+              <input
+                type="number"
+                step="0.01"
+                value={formData.size}
+                onChange={(e) => setFormData(prev => ({ ...prev, size: e.target.value }))}
+                className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-cyan-500 focus:outline-none"
+                placeholder="0.1"
+                required
+              />
+            </div>
+
+            <div>
+              <label className="block text-xs font-medium text-gray-400 mb-2">Leverage</label>
+              <select
+                value={formData.leverage}
+                onChange={(e) => setFormData(prev => ({ ...prev, leverage: e.target.value }))}
+                className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:border-cyan-500 focus:outline-none"
+              >
+                <option value="1">1x</option>
+                <option value="2">2x</option>
+                <option value="3">3x</option>
+                <option value="5">5x</option>
+                <option value="10">10x</option>
+              </select>
+            </div>
+          </div>
+
+          <div className="flex space-x-3 mt-6">
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 py-2 px-4 bg-gray-700 text-gray-300 rounded-lg hover:bg-gray-600 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading}
+              className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all ${
+                loading
+                  ? 'bg-gray-700 text-gray-400 cursor-not-allowed'
+                  : 'bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transform hover:scale-[1.02]'
+              }`}
+            >
+              {loading ? (
+                <div className="flex items-center justify-center space-x-2">
+                  <div className="w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin"></div>
+                  <span>Executing...</span>
+                </div>
+              ) : (
+                'Execute Trade'
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}