Fix Tailwind CSS styling configuration

- Add tailwind.config.ts with proper content paths and theme config
- Add postcss.config.js for Tailwind and autoprefixer processing
- Downgrade tailwindcss to v3.4.17 and add missing PostCSS dependencies
- Update Dockerfile to clarify build process
- Fix UI styling issues in Docker environment

.tradingview-session/cookies.json

@@ -0,0 +1,42 @@
+[
+  {
+    "name": "_sp_ses.cf1a",
+    "value": "*",
+    "domain": ".tradingview.com",
+    "path": "/",
+    "expires": 1760130215,
+    "httpOnly": false,
+    "secure": true,
+    "sameSite": "None"
+  },
+  {
+    "name": "cookiePrivacyPreferenceBannerProduction",
+    "value": "ignored",
+    "domain": ".tradingview.com",
+    "path": "/",
+    "expires": 1786910284.474377,
+    "httpOnly": false,
+    "secure": false,
+    "sameSite": "Lax"
+  },
+  {
+    "name": "sp",
+    "value": "e859cfb0-8391-4ff2-bfd4-7e8dece66223",
+    "domain": "snowplow-pixel.tradingview.com",
+    "path": "/",
+    "expires": 1783890216.454505,
+    "httpOnly": true,
+    "secure": true,
+    "sameSite": "None"
+  },
+  {
+    "name": "_sp_id.cf1a",
+    "value": ".1752350284.1.1752354216..e1158a69-b832-47e3-8c6d-fb185294fa96..67d8f61c-9e0d-4f5b-a27b-0daf04e61207.1752350284475.13",
+    "domain": ".tradingview.com",
+    "path": "/",
+    "expires": 1786914215.942213,
+    "httpOnly": false,
+    "secure": true,
+    "sameSite": "None"
+  }
+]

.tradingview-session/session-storage.json

@@ -0,0 +1,27 @@
+{
+  "localStorage": {
+    "cookie_dialog_tracked": "1",
+    "tradingview.widgetbar.widget.alerts.bhwdEXIZXDRD": "{}",
+    "tradingview.globalNotification": "14180",
+    "tradingview.SymbolSearch.recent": "[\"COINBASE:SOLUSD\"]",
+    "tradingview.details.force_uncheck_bid_ask_03_2023": "true",
+    "tvlocalstorage.available": "true",
+    "tradingview.widgetbar.layout-settings": "{\"widgets\":{\"watchlist\":[{\"id\":\"watchlist.UnmJh4ohCYUv\"}],\"detail\":[{\"id\":\"detail.dYGOrm50hOjz\"}],\"alerts\":[{\"id\":\"alerts.bhwdEXIZXDRD\"}],\"object_tree\":[{\"id\":\"object_tree.74i7WNrleNPn\"}]},\"settings\":{\"width\":300,\"version\":2}}",
+    "first_visit_time": "1752350284651",
+    "tradingview.trading.oanda_rest_launched_in_country": "DE",
+    "tradingview.trading.orderWidgetMode.": "panel",
+    "snowplowOutQueue_tv_cf_post2.expires": "1815426215944",
+    "tradingview.widgetbar.widget.object_tree.74i7WNrleNPn": "{\"selectedPage\":\"object_tree\"}",
+    "featuretoggle_seed": "79463",
+    "tradingview.symboledit.tradable": "true",
+    "snowplowOutQueue_tv_cf_post2": "[]",
+    "tradingview.editchart.model.style": "1",
+    "tradingview.editchart.model.interval": "D",
+    "tradingview.editchart.model.symbol": "COINBASE:SOLUSD",
+    "tradingview.trading.tradingPanelOpened": "false",
+    "last-crosstab-monotonic-timestamp": "1752350304273",
+    "tradingview.details.force_uncheck_ranges_03_2023": "true",
+    "signupSource": "auth page tvd"
+  },
+  "sessionStorage": {}
+}

app/api/session-status/route.ts

@@ -0,0 +1,124 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { tradingViewAutomation } from '../../../lib/tradingview-automation'
+
+export async function GET(request: NextRequest) {
+  try {
+    console.log('📊 Getting TradingView session status...')
+
+    // Initialize if not already done (Docker-safe initialization)
+    if (!tradingViewAutomation['browser']) {
+      console.log('🐳 Initializing TradingView automation in Docker environment...')
+      await tradingViewAutomation.init()
+    }
+
+    // Get lightweight session information without navigation
+    const sessionInfo = await tradingViewAutomation.getQuickSessionStatus()
+    
+    // Determine connection status based on browser state and URL
+    let connectionStatus = 'unknown'
+    if (sessionInfo.browserActive) {
+      if (sessionInfo.currentUrl.includes('tradingview.com')) {
+        connectionStatus = 'connected'
+      } else if (sessionInfo.currentUrl) {
+        connectionStatus = 'disconnected'
+      } else {
+        connectionStatus = 'unknown'
+      }
+    } else {
+      connectionStatus = 'disconnected'
+    }
+
+    const response = {
+      success: true,
+      session: {
+        ...sessionInfo,
+        connectionStatus,
+        lastChecked: new Date().toISOString(),
+        dockerEnv: process.env.DOCKER_ENV === 'true',
+        environment: process.env.NODE_ENV || 'development'
+      }
+    }
+
+    console.log('✅ Session status retrieved:', response.session)
+    return NextResponse.json(response)
+
+  } catch (error) {
+    console.error('❌ Failed to get session status:', error)
+    return NextResponse.json({
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to get session status',
+      session: {
+        isAuthenticated: false,
+        hasSavedCookies: false,
+        hasSavedStorage: false,
+        cookiesCount: 0,
+        currentUrl: '',
+        connectionStatus: 'error',
+        lastChecked: new Date().toISOString(),
+        dockerEnv: process.env.DOCKER_ENV === 'true',
+        environment: process.env.NODE_ENV || 'development'
+      }
+    }, { status: 500 })
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { action } = await request.json()
+    console.log(`🔧 Session action requested: ${action} (Docker: ${process.env.DOCKER_ENV === 'true'})`)
+
+    // Initialize if not already done (Docker-safe initialization)
+    if (!tradingViewAutomation['browser']) {
+      console.log('🐳 Initializing TradingView automation for session action in Docker...')
+      await tradingViewAutomation.init()
+    }
+
+    let result: any = { success: true }
+
+    switch (action) {
+      case 'refresh':
+        const refreshed = await tradingViewAutomation.refreshSession()
+        result.refreshed = refreshed
+        result.message = refreshed ? 'Session refreshed successfully' : 'Failed to refresh session'
+        break
+
+      case 'clear':
+        await tradingViewAutomation.clearSession()
+        result.message = 'Session data cleared successfully'
+        break
+
+      case 'test':
+        const testResult = await tradingViewAutomation.testSessionPersistence()
+        result.testResult = testResult
+        result.message = testResult.isValid ? 'Session is valid' : 'Session is invalid or expired'
+        break
+
+      case 'login-status':
+        const isLoggedIn = await tradingViewAutomation.checkLoginStatus()
+        result.isLoggedIn = isLoggedIn
+        result.message = isLoggedIn ? 'User is logged in' : 'User is not logged in'
+        break
+
+      default:
+        result.success = false
+        result.error = `Unknown action: ${action}`
+        return NextResponse.json(result, { status: 400 })
+    }
+
+    console.log(`✅ Session action '${action}' completed:`, result)
+    return NextResponse.json({
+      ...result,
+      dockerEnv: process.env.DOCKER_ENV === 'true',
+      environment: process.env.NODE_ENV || 'development'
+    })
+
+  } catch (error) {
+    console.error('❌ Session action failed:', error)
+    return NextResponse.json({
+      success: false,
+      error: error instanceof Error ? error.message : 'Session action failed',
+      dockerEnv: process.env.DOCKER_ENV === 'true',
+      environment: process.env.NODE_ENV || 'development'
+    }, { status: 500 })
+  }
+}

app/globals.css

@@ -1,7 +1,170 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --bg-primary: #0a0a0b;
+  --bg-secondary: #1a1a1b;
+  --bg-tertiary: #262626;
+  --bg-card: #1e1e1f;
+  --border-primary: #333;
+  --text-primary: #ffffff;
+  --text-secondary: #a1a1aa;
+  --text-accent: #22d3ee;
+  --success: #10b981;
+  --danger: #ef4444;
+  --warning: #f59e0b;
+  --purple: #8b5cf6;
+  --blue: #3b82f6;
+}
+
+* {
+  box-sizing: border-box;
+}
+
 body {
   font-family: 'Inter', system-ui, sans-serif;
+  background: linear-gradient(135deg, var(--bg-primary) 0%, #0f0f0f 100%);
+  color: var(--text-primary);
+  overflow-x: hidden;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-primary);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* Glass morphism effect */
+.glass {
+  background: rgba(26, 26, 27, 0.8);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Gradient borders */
+.gradient-border {
+  position: relative;
+  background: var(--bg-card);
+  border-radius: 12px;
+}
+
+.gradient-border::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  background: linear-gradient(135deg, rgba(34, 211, 238, 0.3), rgba(139, 92, 246, 0.3));
+  border-radius: inherit;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: subtract;
+}
+
+/* Button components */
+@layer components {
+  .btn {
+    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900;
+  }
+  
+  .btn-primary {
+    @apply bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg hover:shadow-cyan-500/25;
+  }
+  
+  .btn-secondary {
+    @apply bg-gray-700 hover:bg-gray-600 text-gray-100 border border-gray-600;
+  }
+  
+  .btn-success {
+    @apply bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-green-500/25;
+  }
+  
+  .btn-danger {
+    @apply bg-gradient-to-r from-red-500 to-rose-600 hover:from-red-600 hover:to-rose-700 text-white shadow-lg hover:shadow-red-500/25;
+  }
+  
+  .btn-warning {
+    @apply bg-gradient-to-r from-yellow-500 to-orange-600 hover:from-yellow-600 hover:to-orange-700 text-white shadow-lg hover:shadow-yellow-500/25;
+  }
+
+  .card {
+    @apply bg-gray-900/50 backdrop-blur-sm border border-gray-800 rounded-xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300;
+  }
+
+  .card-gradient {
+    @apply relative overflow-hidden;
+    background: linear-gradient(135deg, rgba(30, 30, 31, 0.9) 0%, rgba(26, 26, 27, 0.9) 100%);
+  }
+
+  .card-gradient::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.5), transparent);
+  }
+
+  .status-indicator {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+
+  .status-online {
+    @apply bg-green-100 text-green-800 border border-green-200;
+  }
+
+  .status-offline {
+    @apply bg-red-100 text-red-800 border border-red-200;
+  }
+
+  .status-pending {
+    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
+  }
+}
+
+/* Animations */
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 5px rgba(34, 211, 238, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(34, 211, 238, 0.8), 0 0 30px rgba(34, 211, 238, 0.4);
+  }
+}
+
+.pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slide-up {
+  animation: slide-up 0.6s ease-out;
+}
+
+/* Loading spinner */
+.spinner {
+  @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-cyan-500 rounded-full animate-spin;
 }

app/layout.tsx

@@ -3,16 +3,68 @@ import type { Metadata } from 'next'
 
 export const metadata: Metadata = {
   title: 'Trading Bot Dashboard',
-  description: 'AI-powered trading bot dashboard with auto-trading, analysis, and developer tools.'
+  description: 'AI-powered trading bot dashboard with auto-trading, analysis, and developer tools.',
+  viewport: 'width=device-width, initial-scale=1',
 }
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className="bg-gray-950 text-gray-100 min-h-screen" suppressHydrationWarning>
+      <body className="bg-gray-950 text-gray-100 min-h-screen antialiased" suppressHydrationWarning>
-        <main className="max-w-5xl mx-auto py-8">
+        <div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950">
+          {/* Header */}
+          <header className="border-b border-gray-800 bg-gray-900/50 backdrop-blur-sm">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+              <div className="flex justify-between items-center h-16">
+                <div className="flex items-center space-x-4">
+                  <div className="flex items-center space-x-2">
+                    <div className="w-8 h-8 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-lg flex items-center justify-center">
+                      <span className="text-white font-bold text-sm">TB</span>
+                    </div>
+                    <div>
+                      <h1 className="text-xl font-bold text-white">Trading Bot</h1>
+                      <p className="text-xs text-gray-400">AI-Powered Dashboard</p>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="flex items-center space-x-4">
+                  <div className="hidden sm:flex items-center space-x-2 text-sm">
+                    <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
+                    <span className="text-gray-300">Live</span>
+                  </div>
+                  
+                  <div className="flex items-center space-x-2">
+                    <div className="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center">
+                      <span className="text-gray-300 text-sm">👤</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </header>
+
+          {/* Main Content */}
+          <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
             {children}
           </main>
+          
+          {/* Footer */}
+          <footer className="border-t border-gray-800 bg-gray-900/30 backdrop-blur-sm mt-16">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+              <div className="flex flex-col sm:flex-row justify-between items-center">
+                <div className="text-sm text-gray-400">
+                  © 2025 Trading Bot Dashboard. Powered by AI.
+                </div>
+                <div className="flex items-center space-x-4 mt-4 sm:mt-0">
+                  <div className="text-xs text-gray-500">
+                    Next.js 15 • TypeScript • Tailwind CSS
+                  </div>
+                </div>
+              </div>
+            </div>
+          </footer>
+        </div>
       </body>
     </html>
   )

app/page.tsx

@@ -1,11 +1,20 @@
-import AIAnalysisPanel from '../components/AIAnalysisPanel'
 import Dashboard from '../components/Dashboard'
 
 export default function HomePage() {
   return (
-    <>
+    <div className="space-y-8">
-      <AIAnalysisPanel />
+      {/* Hero Section */}
+      <div className="text-center py-8">
+        <h1 className="text-4xl font-bold bg-gradient-to-r from-cyan-400 to-blue-600 bg-clip-text text-transparent mb-4">
+          AI Trading Dashboard
+        </h1>
+        <p className="text-gray-400 text-lg max-w-2xl mx-auto">
+          Advanced cryptocurrency trading with AI-powered analysis, automated execution, and real-time monitoring.
+        </p>
+      </div>
+      
+      {/* Main Dashboard */}
       <Dashboard />
-    </>
+    </div>
   )
 }

components/AIAnalysisPanel.tsx

@@ -14,14 +14,14 @@ const timeframes = [
 ]
 
 const popularCoins = [
-  { name: 'Bitcoin', symbol: 'BTCUSD', icon: '₿' },
+  { name: 'Bitcoin', symbol: 'BTCUSD', icon: '₿', color: 'from-orange-400 to-orange-600' },
-  { name: 'Ethereum', symbol: 'ETHUSD', icon: 'Ξ' },
+  { name: 'Ethereum', symbol: 'ETHUSD', icon: 'Ξ', color: 'from-blue-400 to-blue-600' },
-  { name: 'Solana', symbol: 'SOLUSD', icon: '◎' },
+  { name: 'Solana', symbol: 'SOLUSD', icon: '◎', color: 'from-purple-400 to-purple-600' },
-  { name: 'Sui', symbol: 'SUIUSD', icon: '🔷' },
+  { name: 'Sui', symbol: 'SUIUSD', icon: '🔷', color: 'from-cyan-400 to-cyan-600' },
-  { name: 'Avalanche', symbol: 'AVAXUSD', icon: '🔺' },
+  { name: 'Avalanche', symbol: 'AVAXUSD', icon: '🔺', color: 'from-red-400 to-red-600' },
-  { name: 'Cardano', symbol: 'ADAUSD', icon: '♠' },
+  { name: 'Cardano', symbol: 'ADAUSD', icon: '♠', color: 'from-indigo-400 to-indigo-600' },
-  { name: 'Polygon', symbol: 'MATICUSD', icon: '🔷' },
+  { name: 'Polygon', symbol: 'MATICUSD', icon: '🔷', color: 'from-violet-400 to-violet-600' },
-  { name: 'Chainlink', symbol: 'LINKUSD', icon: '🔗' },
+  { name: 'Chainlink', symbol: 'LINKUSD', icon: '🔗', color: 'from-blue-400 to-blue-600' },
 ]
 
 export default function AIAnalysisPanel() {
@@ -51,10 +51,6 @@ export default function AIAnalysisPanel() {
     )
   }
 
-  const selectCoin = (coinSymbol: string) => {
-    setSymbol(coinSymbol)
-  }
-
   const quickAnalyze = async (coinSymbol: string) => {
     setSymbol(coinSymbol)
     setSelectedLayouts([layouts[0]]) // Use first layout
@@ -104,248 +100,284 @@ export default function AIAnalysisPanel() {
   }
 
   return (
-    <div className="bg-gray-900 rounded-lg shadow p-6 mb-8">
+    <div className="card card-gradient">
-      <h2 className="text-xl font-bold mb-4 text-white">AI Chart Analysis</h2>
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-bold text-white flex items-center">
+          <span className="w-8 h-8 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-lg flex items-center justify-center mr-3">
+            🤖
+          </span>
+          AI Chart Analysis
+        </h2>
+        <div className="flex items-center space-x-2 text-sm text-gray-400">
+          <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
+          <span>AI Powered</span>
+        </div>
+      </div>
       
       {/* Quick Coin Selection */}
-      <div className="mb-6">
+      <div className="mb-8">
-        <h3 className="text-sm font-medium text-gray-300 mb-3">Quick Analysis - Popular Coins</h3>
+        <div className="flex items-center justify-between mb-4">
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
+          <h3 className="text-sm font-semibold text-gray-300 flex items-center">
+            <span className="w-4 h-4 bg-yellow-500 rounded-full mr-2"></span>
+            Quick Analysis
+          </h3>
+          <span className="text-xs text-gray-500">Click any coin for instant analysis</span>
+        </div>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
           {popularCoins.map(coin => (
             <button
               key={coin.symbol}
               onClick={() => quickAnalyze(coin.symbol)}
               disabled={loading}
-              className={`p-3 rounded-lg border transition-all ${
+              className={`group relative p-4 rounded-xl border transition-all duration-300 ${
                 symbol === coin.symbol
-                  ? 'border-blue-500 bg-blue-500/20 text-blue-300'
+                  ? 'border-cyan-500 bg-cyan-500/10 shadow-lg shadow-cyan-500/20'
-                  : 'border-gray-600 bg-gray-800 text-gray-300 hover:border-gray-500 hover:bg-gray-700'
+                  : 'border-gray-700 bg-gray-800/50 hover:border-gray-600 hover:bg-gray-800'
-              } ${loading ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105'}`}
+              } ${loading ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105 hover:shadow-lg'}`}
             >
-              <div className="text-lg mb-1">{coin.icon}</div>
+              <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="text-xs font-medium">{coin.name}</div>
+                {coin.icon}
-              <div className="text-xs text-gray-400">{coin.symbol}</div>
+              </div>
+              <div className="text-xs font-semibold text-white">{coin.name}</div>
+              <div className="text-xs text-gray-400 mt-1">{coin.symbol}</div>
+              {symbol === coin.symbol && (
+                <div className="absolute top-2 right-2 w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
+              )}
             </button>
           ))}
         </div>
       </div>
 
-      {/* Manual Input Section */}
+      {/* Advanced Controls */}
-      <div className="border-t border-gray-700 pt-4">
+      <div className="border-t border-gray-700 pt-6">
-        <h3 className="text-sm font-medium text-gray-300 mb-3">Manual Analysis</h3>
+        <h3 className="text-sm font-semibold text-gray-300 mb-4 flex items-center">
-        <div className="flex gap-2 mb-4">
+          <span className="w-4 h-4 bg-purple-500 rounded-full mr-2"></span>
+          Advanced Analysis
+        </h3>
+        
+        {/* Symbol and Timeframe */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+          <div className="md:col-span-2">
+            <label className="block text-xs font-medium text-gray-400 mb-2">Trading Pair</label>
             <input
-            className="flex-1 px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none"
+              className="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all"
               value={symbol}
-            onChange={e => setSymbol(e.target.value)}
+              onChange={e => setSymbol(e.target.value.toUpperCase())}
-            placeholder="Symbol (e.g. BTCUSD)"
+              placeholder="e.g., BTCUSD, ETHUSD"
             />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-400 mb-2">Timeframe</label>
             <select
-            className="px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white focus:border-blue-500 focus:outline-none"
+              className="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all"
               value={timeframe}
               onChange={e => setTimeframe(e.target.value)}
             >
-            {timeframes.map(tf => <option key={tf.value} value={tf.value}>{tf.label}</option>)}
+              {timeframes.map(tf => (
+                <option key={tf.value} value={tf.value} className="bg-gray-800">
+                  {tf.label}
+                </option>
+              ))}
             </select>
-          <button 
-            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 text-white rounded-md transition-colors" 
-            onClick={handleAnalyze} 
-            disabled={loading}
-          >
-            {loading ? 'Analyzing...' : 'Analyze'}
-          </button>
           </div>
         </div>
         
-      {/* Layout selection */}
+        {/* Layout Selection */}
-      <div className="mb-4">
+        <div className="mb-6">
-        <label className="block text-sm font-medium text-gray-300 mb-2">
+          <label className="block text-xs font-medium text-gray-400 mb-3">Analysis Layouts</label>
-          Select Layouts for Analysis:
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-        </label>
-        <div className="flex flex-wrap gap-2">
             {layouts.map(layout => (
-            <label key={layout} className="flex items-center gap-2 cursor-pointer p-2 rounded-md bg-gray-800 hover:bg-gray-700 transition-colors">
+              <label key={layout} className="group relative">
                 <input
                   type="checkbox"
                   checked={selectedLayouts.includes(layout)}
                   onChange={() => toggleLayout(layout)}
-                className="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500"
+                  className="sr-only"
                 />
-              <span className="text-sm text-gray-300">{layout}</span>
+                <div className={`flex items-center p-3 rounded-lg border cursor-pointer transition-all ${
+                  selectedLayouts.includes(layout)
+                    ? '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'
+                }`}>
+                  <div className={`w-4 h-4 rounded border-2 mr-3 flex items-center justify-center ${
+                    selectedLayouts.includes(layout)
+                      ? 'border-cyan-500 bg-cyan-500'
+                      : 'border-gray-600'
+                  }`}>
+                    {selectedLayouts.includes(layout) && (
+                      <svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                      </svg>
+                    )}
+                  </div>
+                  <span className="text-sm font-medium">{layout}</span>
+                </div>
               </label>
             ))}
           </div>
           {selectedLayouts.length > 0 && (
-          <div className="text-xs text-gray-400 mt-2 p-2 bg-gray-800 rounded">
+            <div className="mt-3 p-3 bg-gray-800/30 rounded-lg">
-            Selected: {selectedLayouts.join(', ')}
+              <div className="text-xs text-gray-400">
+                Selected layouts: <span className="text-cyan-400">{selectedLayouts.join(', ')}</span>
+              </div>
             </div>
           )}
         </div>
-      {error && (
+        
-        <div className="bg-red-900/20 border border-red-800 rounded-md p-3 mb-4">
+        {/* Analyze Button */}
-          <div className="text-red-400">
+        <button 
-            {error.includes('frame was detached') ? (
+          className={`w-full py-3 px-6 rounded-lg font-semibold transition-all duration-300 ${
-              <>
+            loading
-                <strong>TradingView Error:</strong> Chart could not be loaded. Please check your symbol and layout, or try again.<br />
+              ? 'bg-gray-700 text-gray-400 cursor-not-allowed'
-                <span className="text-xs opacity-75">Technical: {error}</span>
+              : 'btn-primary transform hover:scale-[1.02] active:scale-[0.98]'
-              </>
+          }`}
-            ) : error.includes('layout not found') ? (
+          onClick={handleAnalyze} 
-              <>
+          disabled={loading}
-                <strong>Layout Error:</strong> TradingView layout not found. Please select a valid layout.<br />
+        >
-                <span className="text-xs opacity-75">Technical: {error}</span>
+          {loading ? (
-              </>
+            <div className="flex items-center justify-center space-x-2">
-            ) : error.includes('Private layout access denied') ? (
+              <div className="spinner"></div>
-              <>
+              <span>Analyzing Chart...</span>
-                <strong>Access Error:</strong> The selected layout is private or requires authentication. Try a different layout or check your TradingView login.<br />
+            </div>
-                <span className="text-xs opacity-75">Technical: {error}</span>
-              </>
           ) : (
-              <>
+            <div className="flex items-center justify-center space-x-2">
-                <strong>Analysis Error:</strong> {error}
+              <span>🚀</span>
-              </>
+              <span>Start AI Analysis</span>
-            )}
-          </div>
             </div>
           )}
-      {loading && (
+        </button>
-        <div className="bg-blue-900/20 border border-blue-800 rounded-md p-3 mb-4">
-          <div className="flex items-center gap-3 text-blue-300">
-            <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
-            </svg>
-            <span>Analyzing {symbol} chart...</span>
       </div>
+
+      {/* Results Section */}
+      {error && (
+        <div className="mt-6 p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
+          <div className="flex items-start space-x-3">
+            <div className="w-5 h-5 text-red-400 mt-0.5">⚠️</div>
+            <div>
+              <h4 className="text-red-400 font-medium text-sm">Analysis Error</h4>
+              <p className="text-red-300 text-xs mt-1 opacity-90">{error}</p>
             </div>
-      )}
-      {result && (
-        <div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mt-4">
-          <h3 className="text-lg font-semibold text-white mb-3">Analysis Results</h3>
-          {result.layoutsAnalyzed && (
-            <div className="mb-4 text-sm">
-              <span className="text-gray-400">Layouts analyzed:</span>
-              <span className="ml-2 text-blue-300">{result.layoutsAnalyzed.join(', ')}</span>
-            </div>
-          )}
-          <div className="grid gap-3">
-            <div className="bg-gray-900 p-3 rounded">
-              <span className="text-gray-400 text-sm">Summary:</span>
-              <p className="text-white mt-1">{safeRender(result.summary)}</p>
-            </div>
-            <div className="grid grid-cols-2 gap-3">
-              <div className="bg-gray-900 p-3 rounded">
-                <span className="text-gray-400 text-sm">Sentiment:</span>
-                <p className="text-white mt-1">{safeRender(result.marketSentiment)}</p>
-              </div>
-              <div className="bg-gray-900 p-3 rounded">
-                <span className="text-gray-400 text-sm">Recommendation:</span>
-                <p className="text-white mt-1">{safeRender(result.recommendation)}</p>
-                <span className="text-blue-300 text-sm">({safeRender(result.confidence)}% confidence)</span>
-              </div>
-            </div>
-            {result.keyLevels && (
-              <div className="grid grid-cols-2 gap-3">
-                <div className="bg-gray-900 p-3 rounded">
-                  <span className="text-gray-400 text-sm">Support Levels:</span>
-                  <p className="text-green-300 mt-1">{result.keyLevels.support?.join(', ') || 'None identified'}</p>
-                </div>
-                <div className="bg-gray-900 p-3 rounded">
-                  <span className="text-gray-400 text-sm">Resistance Levels:</span>
-                  <p className="text-red-300 mt-1">{result.keyLevels.resistance?.join(', ') || 'None identified'}</p>
           </div>
         </div>
       )}
 
-            {/* Enhanced Trading Analysis */}
+      {loading && (
+        <div className="mt-6 p-4 bg-cyan-500/10 border border-cyan-500/30 rounded-lg">
+          <div className="flex items-center space-x-3">
+            <div className="spinner border-cyan-500"></div>
+            <div>
+              <h4 className="text-cyan-400 font-medium text-sm">AI Processing</h4>
+              <p className="text-cyan-300 text-xs mt-1 opacity-90">
+                Analyzing {symbol} on {timeframe} timeframe...
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {result && (
+        <div className="mt-6 space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-bold text-white flex items-center">
+              <span className="w-6 h-6 bg-gradient-to-br from-green-400 to-emerald-600 rounded-lg flex items-center justify-center mr-2 text-sm">
+                ✅
+              </span>
+              Analysis Complete
+            </h3>
+            {result.layoutsAnalyzed && (
+              <div className="text-xs text-gray-400">
+                Layouts: {result.layoutsAnalyzed.join(', ')}
+              </div>
+            )}
+          </div>
+
+          <div className="grid gap-4">
+            {/* Summary */}
+            <div className="p-4 bg-gradient-to-r from-gray-800/50 to-gray-700/50 rounded-lg border border-gray-700">
+              <h4 className="text-sm font-semibold text-gray-300 mb-2 flex items-center">
+                <span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
+                Market Summary
+              </h4>
+              <p className="text-white text-sm leading-relaxed">{safeRender(result.summary)}</p>
+            </div>
+
+            {/* Key Metrics */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="p-4 bg-gradient-to-br from-green-500/10 to-emerald-500/10 border border-green-500/30 rounded-lg">
+                <h4 className="text-sm font-semibold text-green-400 mb-2">Market Sentiment</h4>
+                <p className="text-white font-medium">{safeRender(result.marketSentiment)}</p>
+              </div>
+              
+              <div className="p-4 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 border border-blue-500/30 rounded-lg">
+                <h4 className="text-sm font-semibold text-blue-400 mb-2">Recommendation</h4>
+                <p className="text-white font-medium">{safeRender(result.recommendation)}</p>
+                {result.confidence && (
+                  <p className="text-cyan-300 text-xs mt-1">{safeRender(result.confidence)}% confidence</p>
+                )}
+              </div>
+            </div>
+
+            {/* Trading Levels */}
+            {result.keyLevels && (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="p-4 bg-gradient-to-br from-red-500/10 to-rose-500/10 border border-red-500/30 rounded-lg">
+                  <h4 className="text-sm font-semibold text-red-400 mb-2">Resistance Levels</h4>
+                  <p className="text-red-300 font-mono text-sm">
+                    {result.keyLevels.resistance?.join(', ') || 'None identified'}
+                  </p>
+                </div>
+                
+                <div className="p-4 bg-gradient-to-br from-green-500/10 to-emerald-500/10 border border-green-500/30 rounded-lg">
+                  <h4 className="text-sm font-semibold text-green-400 mb-2">Support Levels</h4>
+                  <p className="text-green-300 font-mono text-sm">
+                    {result.keyLevels.support?.join(', ') || 'None identified'}
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {/* Trading Setup */}
+            {(result.entry || result.stopLoss || result.takeProfits) && (
+              <div className="p-4 bg-gradient-to-br from-purple-500/10 to-violet-500/10 border border-purple-500/30 rounded-lg">
+                <h4 className="text-sm font-semibold text-purple-400 mb-3">Trading Setup</h4>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                   {result.entry && (
-              <div className="bg-gray-900 p-3 rounded">
+                    <div>
-                <span className="text-gray-400 text-sm">Entry:</span>
+                      <span className="text-xs text-gray-400">Entry Point</span>
-                <p className="text-yellow-300 mt-1">${safeRender(result.entry.price || result.entry)}</p>
+                      <p className="text-yellow-300 font-mono font-semibold">
-                {result.entry.buffer && <p className="text-xs text-gray-400">{safeRender(result.entry.buffer)}</p>}
+                        ${safeRender(result.entry.price || result.entry)}
-                {result.entry.rationale && <p className="text-xs text-gray-300 mt-1">{safeRender(result.entry.rationale)}</p>}
+                      </p>
+                      {result.entry.rationale && (
+                        <p className="text-xs text-gray-300 mt-1">{safeRender(result.entry.rationale)}</p>
+                      )}
                     </div>
                   )}
                   
                   {result.stopLoss && (
-              <div className="bg-gray-900 p-3 rounded">
+                    <div>
-                <span className="text-gray-400 text-sm">Stop Loss:</span>
+                      <span className="text-xs text-gray-400">Stop Loss</span>
-                <p className="text-red-300 mt-1">${safeRender(result.stopLoss.price || result.stopLoss)}</p>
+                      <p className="text-red-300 font-mono font-semibold">
-                {result.stopLoss.rationale && <p className="text-xs text-gray-300 mt-1">{safeRender(result.stopLoss.rationale)}</p>}
+                        ${safeRender(result.stopLoss.price || result.stopLoss)}
+                      </p>
+                      {result.stopLoss.rationale && (
+                        <p className="text-xs text-gray-300 mt-1">{safeRender(result.stopLoss.rationale)}</p>
+                      )}
                     </div>
                   )}
                   
                   {result.takeProfits && (
-              <div className="bg-gray-900 p-3 rounded">
-                <span className="text-gray-400 text-sm">Take Profits:</span>
-                {typeof result.takeProfits === 'object' ? (
-                  <>
-                    {result.takeProfits.tp1 && (
-                      <div className="mt-1">
-                        <p className="text-green-300">TP1: ${safeRender(result.takeProfits.tp1.price || result.takeProfits.tp1)}</p>
-                        {result.takeProfits.tp1.description && <p className="text-xs text-gray-300">{safeRender(result.takeProfits.tp1.description)}</p>}
-                      </div>
-                    )}
-                    {result.takeProfits.tp2 && (
-                      <div className="mt-1">
-                        <p className="text-green-300">TP2: ${safeRender(result.takeProfits.tp2.price || result.takeProfits.tp2)}</p>
-                        {result.takeProfits.tp2.description && <p className="text-xs text-gray-300">{safeRender(result.takeProfits.tp2.description)}</p>}
-                      </div>
-                    )}
-                  </>
-                ) : (
-                  <p className="text-green-300 mt-1">{safeRender(result.takeProfits)}</p>
-                )}
-              </div>
-            )}
-            
-            {result.riskToReward && (
-              <div className="bg-gray-900 p-3 rounded">
-                <span className="text-gray-400 text-sm">Risk to Reward:</span>
-                <p className="text-blue-300 mt-1">{safeRender(result.riskToReward)}</p>
-              </div>
-            )}
-            
-            {result.confirmationTrigger && (
-              <div className="bg-gray-900 p-3 rounded">
-                <span className="text-gray-400 text-sm">Confirmation Trigger:</span>
-                <p className="text-orange-300 mt-1">{safeRender(result.confirmationTrigger)}</p>
-              </div>
-            )}
-            
-            {result.indicatorAnalysis && (
-              <div className="bg-gray-900 p-3 rounded">
-                <span className="text-gray-400 text-sm">Indicator Analysis:</span>
-                {typeof result.indicatorAnalysis === 'object' ? (
-                  <div className="mt-1 space-y-1">
-                    {result.indicatorAnalysis.rsi && (
                     <div>
-                        <span className="text-purple-300 text-xs">RSI:</span>
+                      <span className="text-xs text-gray-400">Take Profit</span>
-                        <span className="text-white text-xs ml-2">{safeRender(result.indicatorAnalysis.rsi)}</span>
+                      <p className="text-green-300 font-mono font-semibold">
-                      </div>
+                        {typeof result.takeProfits === 'object' 
-                    )}
+                          ? Object.values(result.takeProfits).map(tp => `$${safeRender(tp)}`).join(', ')
-                    {result.indicatorAnalysis.vwap && (
+                          : `$${safeRender(result.takeProfits)}`}
-                      <div>
+                      </p>
-                        <span className="text-cyan-300 text-xs">VWAP:</span>
-                        <span className="text-white text-xs ml-2">{safeRender(result.indicatorAnalysis.vwap)}</span>
-                      </div>
-                    )}
-                    {result.indicatorAnalysis.obv && (
-                      <div>
-                        <span className="text-indigo-300 text-xs">OBV:</span>
-                        <span className="text-white text-xs ml-2">{safeRender(result.indicatorAnalysis.obv)}</span>
                     </div>
                   )}
                 </div>
-                ) : (
-                  <p className="text-white mt-1">{safeRender(result.indicatorAnalysis)}</p>
-                )}
               </div>
             )}
-            
-            <div className="bg-gray-900 p-3 rounded">
-              <span className="text-gray-400 text-sm">Reasoning:</span>
-              <p className="text-white mt-1">{safeRender(result.reasoning)}</p>
-            </div>
           </div>
         </div>
       )}

components/AIAnalysisPanel_old.tsx

@@ -0,0 +1,561 @@
+"use client"
+import React, { useState } from 'react'
+
+const layouts = (process.env.NEXT_PUBLIC_TRADINGVIEW_LAYOUTS || 'ai,Diy module').split(',').map(l => l.trim())
+const timeframes = [
+  { label: '1m', value: '1' },
+  { label: '5m', value: '5' },
+  { label: '15m', value: '15' },
+  { label: '1h', value: '60' },
+  { label: '4h', value: '240' },
+  { label: '1d', value: 'D' },
+  { label: '1w', value: 'W' },
+  { label: '1M', value: 'M' },
+]
+
+const popularCoins = [
+  { name: 'Bitcoin', symbol: 'BTCUSD', icon: '₿', color: 'from-orange-400 to-orange-600' },
+  { name: 'Ethereum', symbol: 'ETHUSD', icon: 'Ξ', color: 'from-blue-400 to-blue-600' },
+  { name: 'Solana', symbol: 'SOLUSD', icon: '◎', color: 'from-purple-400 to-purple-600' },
+  { name: 'Sui', symbol: 'SUIUSD', icon: '🔷', color: 'from-cyan-400 to-cyan-600' },
+  { name: 'Avalanche', symbol: 'AVAXUSD', icon: '🔺', color: 'from-red-400 to-red-600' },
+  { name: 'Cardano', symbol: 'ADAUSD', icon: '♠', color: 'from-indigo-400 to-indigo-600' },
+  { name: 'Polygon', symbol: 'MATICUSD', icon: '🔷', color: 'from-violet-400 to-violet-600' },
+  { name: 'Chainlink', symbol: 'LINKUSD', icon: '🔗', color: 'from-blue-400 to-blue-600' },
+]
+
+export default function AIAnalysisPanel() {
+  const [symbol, setSymbol] = useState('BTCUSD')
+  const [selectedLayouts, setSelectedLayouts] = useState<string[]>([layouts[0]])
+  const [timeframe, setTimeframe] = useState('60')
+  const [loading, setLoading] = useState(false)
+  const [result, setResult] = useState<any>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  // Helper function to safely render any value
+  const safeRender = (value: any): string => {
+    if (typeof value === 'string') return value
+    if (typeof value === 'number') return value.toString()
+    if (Array.isArray(value)) return value.join(', ')
+    if (typeof value === 'object' && value !== null) {
+      return JSON.stringify(value)
+    }
+    return String(value)
+  }
+
+  const toggleLayout = (layout: string) => {
+    setSelectedLayouts(prev => 
+      prev.includes(layout) 
+        ? prev.filter(l => l !== layout)
+        : [...prev, layout]
+    )
+  }
+
+  const selectCoin = (coinSymbol: string) => {
+    setSymbol(coinSymbol)
+  }
+
+  const quickAnalyze = async (coinSymbol: string) => {
+    setSymbol(coinSymbol)
+    setSelectedLayouts([layouts[0]]) // Use first layout
+    setLoading(true)
+    setError(null)
+    setResult(null)
+
+    try {
+      const res = await fetch('/api/analyze', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ symbol: coinSymbol, layouts: [layouts[0]], timeframe })
+      })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.error || 'Unknown error')
+      setResult(data)
+    } catch (e: any) {
+      setError(e.message)
+    }
+    setLoading(false)
+  }
+
+  async function handleAnalyze() {
+    setLoading(true)
+    setError(null)
+    setResult(null)
+    
+    if (selectedLayouts.length === 0) {
+      setError('Please select at least one layout')
+      setLoading(false)
+      return
+    }
+
+    try {
+      const res = await fetch('/api/analyze', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ symbol, layouts: selectedLayouts, timeframe })
+      })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.error || 'Unknown error')
+      setResult(data)
+    } catch (e: any) {
+      setError(e.message)
+    }
+    setLoading(false)
+  }
+
+  return (
+    <div className="card card-gradient">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-bold text-white flex items-center">
+          <span className="w-8 h-8 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-lg flex items-center justify-center mr-3">
+            🤖
+          </span>
+          AI Chart Analysis
+        </h2>
+        <div className="flex items-center space-x-2 text-sm text-gray-400">
+          <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
+          <span>AI Powered</span>
+        </div>
+      </div>
+      
+      {/* Quick Coin Selection */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-sm font-semibold text-gray-300 flex items-center">
+            <span className="w-4 h-4 bg-yellow-500 rounded-full mr-2"></span>
+            Quick Analysis
+          </h3>
+          <span className="text-xs text-gray-500">Click any coin for instant analysis</span>
+        </div>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          {popularCoins.map(coin => (
+            <button
+              key={coin.symbol}
+              onClick={() => quickAnalyze(coin.symbol)}
+              disabled={loading}
+              className={`group relative p-4 rounded-xl border transition-all duration-300 ${
+                symbol === coin.symbol
+                  ? 'border-cyan-500 bg-cyan-500/10 shadow-lg shadow-cyan-500/20'
+                  : 'border-gray-700 bg-gray-800/50 hover:border-gray-600 hover:bg-gray-800'
+              } ${loading ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105 hover:shadow-lg'}`}
+            >
+              <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`}>
+                {coin.icon}
+              </div>
+              <div className="text-xs font-semibold text-white">{coin.name}</div>
+              <div className="text-xs text-gray-400 mt-1">{coin.symbol}</div>
+              {symbol === coin.symbol && (
+                <div className="absolute top-2 right-2 w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
+              )}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Advanced Controls */}
+      <div className="border-t border-gray-700 pt-6">
+        <h3 className="text-sm font-semibold text-gray-300 mb-4 flex items-center">
+          <span className="w-4 h-4 bg-purple-500 rounded-full mr-2"></span>
+          Advanced Analysis
+        </h3>
+        
+        {/* Symbol and Timeframe */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+          <div className="md:col-span-2">
+            <label className="block text-xs font-medium text-gray-400 mb-2">Trading Pair</label>
+            <input
+              className="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all"
+              value={symbol}
+              onChange={e => setSymbol(e.target.value.toUpperCase())}
+              placeholder="e.g., BTCUSD, ETHUSD"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-400 mb-2">Timeframe</label>
+            <select
+              className="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all"
+              value={timeframe}
+              onChange={e => setTimeframe(e.target.value)}
+            >
+              {timeframes.map(tf => (
+                <option key={tf.value} value={tf.value} className="bg-gray-800">
+                  {tf.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        
+        {/* Layout Selection */}
+        <div className="mb-6">
+          <label className="block text-xs font-medium text-gray-400 mb-3">Analysis Layouts</label>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {layouts.map(layout => (
+              <label key={layout} className="group relative">
+                <input
+                  type="checkbox"
+                  checked={selectedLayouts.includes(layout)}
+                  onChange={() => toggleLayout(layout)}
+                  className="sr-only"
+                />
+                <div className={`flex items-center p-3 rounded-lg border cursor-pointer transition-all ${
+                  selectedLayouts.includes(layout)
+                    ? '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'
+                }`}>
+                  <div className={`w-4 h-4 rounded border-2 mr-3 flex items-center justify-center ${
+                    selectedLayouts.includes(layout)
+                      ? 'border-cyan-500 bg-cyan-500'
+                      : 'border-gray-600'
+                  }`}>
+                    {selectedLayouts.includes(layout) && (
+                      <svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                      </svg>
+                    )}
+                  </div>
+                  <span className="text-sm font-medium">{layout}</span>
+                </div>
+              </label>
+            ))}
+          </div>
+          {selectedLayouts.length > 0 && (
+            <div className="mt-3 p-3 bg-gray-800/30 rounded-lg">
+              <div className="text-xs text-gray-400">
+                Selected layouts: <span className="text-cyan-400">{selectedLayouts.join(', ')}</span>
+              </div>
+            </div>
+          )}
+        </div>
+        
+        {/* Analyze Button */}
+        <button 
+          className={`w-full py-3 px-6 rounded-lg font-semibold transition-all duration-300 ${
+            loading
+              ? 'bg-gray-700 text-gray-400 cursor-not-allowed'
+              : 'btn-primary transform hover:scale-[1.02] active:scale-[0.98]'
+          }`}
+          onClick={handleAnalyze} 
+          disabled={loading}
+        >
+          {loading ? (
+            <div className="flex items-center justify-center space-x-2">
+              <div className="spinner"></div>
+              <span>Analyzing Chart...</span>
+            </div>
+          ) : (
+            <div className="flex items-center justify-center space-x-2">
+              <span>🚀</span>
+              <span>Start AI Analysis</span>
+            </div>
+          )}
+        </button>
+      </div>
+
+      {/* Results Section */}
+      {error && (
+        <div className="mt-6 p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
+          <div className="flex items-start space-x-3">
+            <div className="w-5 h-5 text-red-400 mt-0.5">⚠️</div>
+            <div>
+              <h4 className="text-red-400 font-medium text-sm">Analysis Error</h4>
+              <p className="text-red-300 text-xs mt-1 opacity-90">{error}</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {loading && (
+        <div className="mt-6 p-4 bg-cyan-500/10 border border-cyan-500/30 rounded-lg">
+          <div className="flex items-center space-x-3">
+            <div className="spinner border-cyan-500"></div>
+            <div>
+              <h4 className="text-cyan-400 font-medium text-sm">AI Processing</h4>
+              <p className="text-cyan-300 text-xs mt-1 opacity-90">
+                Analyzing {symbol} on {timeframe} timeframe...
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {result && (
+        <div className="mt-6 space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-bold text-white flex items-center">
+              <span className="w-6 h-6 bg-gradient-to-br from-green-400 to-emerald-600 rounded-lg flex items-center justify-center mr-2 text-sm">
+                ✅
+              </span>
+              Analysis Complete
+            </h3>
+            {result.layoutsAnalyzed && (
+              <div className="text-xs text-gray-400">
+                Layouts: {result.layoutsAnalyzed.join(', ')}
+              </div>
+            )}
+          </div>
+
+          <div className="grid gap-4">
+            {/* Summary */}
+            <div className="p-4 bg-gradient-to-r from-gray-800/50 to-gray-700/50 rounded-lg border border-gray-700">
+              <h4 className="text-sm font-semibold text-gray-300 mb-2 flex items-center">
+                <span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
+                Market Summary
+              </h4>
+              <p className="text-white text-sm leading-relaxed">{safeRender(result.summary)}</p>
+            </div>
+
+            {/* Key Metrics */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="p-4 bg-gradient-to-br from-green-500/10 to-emerald-500/10 border border-green-500/30 rounded-lg">
+                <h4 className="text-sm font-semibold text-green-400 mb-2">Market Sentiment</h4>
+                <p className="text-white font-medium">{safeRender(result.marketSentiment)}</p>
+              </div>
+              
+              <div className="p-4 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 border border-blue-500/30 rounded-lg">
+                <h4 className="text-sm font-semibold text-blue-400 mb-2">Recommendation</h4>
+                <p className="text-white font-medium">{safeRender(result.recommendation)}</p>
+                {result.confidence && (
+                  <p className="text-cyan-300 text-xs mt-1">{safeRender(result.confidence)}% confidence</p>
+                )}
+              </div>
+            </div>
+
+            {/* Trading Levels */}
+            {result.keyLevels && (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="p-4 bg-gradient-to-br from-red-500/10 to-rose-500/10 border border-red-500/30 rounded-lg">
+                  <h4 className="text-sm font-semibold text-red-400 mb-2">Resistance Levels</h4>
+                  <p className="text-red-300 font-mono text-sm">
+                    {result.keyLevels.resistance?.join(', ') || 'None identified'}
+                  </p>
+                </div>
+                
+                <div className="p-4 bg-gradient-to-br from-green-500/10 to-emerald-500/10 border border-green-500/30 rounded-lg">
+                  <h4 className="text-sm font-semibold text-green-400 mb-2">Support Levels</h4>
+                  <p className="text-green-300 font-mono text-sm">
+                    {result.keyLevels.support?.join(', ') || 'None identified'}
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {/* Trading Setup */}
+            {(result.entry || result.stopLoss || result.takeProfits) && (
+              <div className="p-4 bg-gradient-to-br from-purple-500/10 to-violet-500/10 border border-purple-500/30 rounded-lg">
+                <h4 className="text-sm font-semibold text-purple-400 mb-3">Trading Setup</h4>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                  {result.entry && (
+                    <div>
+                      <span className="text-xs text-gray-400">Entry Point</span>
+                      <p className="text-yellow-300 font-mono font-semibold">
+                        ${safeRender(result.entry.price || result.entry)}
+                      </p>
+                      {result.entry.rationale && (
+                        <p className="text-xs text-gray-300 mt-1">{safeRender(result.entry.rationale)}</p>
+                      )}
+                    </div>
+                  )}
+                  
+                  {result.stopLoss && (
+                    <div>
+                      <span className="text-xs text-gray-400">Stop Loss</span>
+                      <p className="text-red-300 font-mono font-semibold">
+                        ${safeRender(result.stopLoss.price || result.stopLoss)}
+                      </p>
+                      {result.stopLoss.rationale && (
+                        <p className="text-xs text-gray-300 mt-1">{safeRender(result.stopLoss.rationale)}</p>
+                      )}
+                    </div>
+                  )}
+                  
+                  {result.takeProfits && (
+                    <div>
+                      <span className="text-xs text-gray-400">Take Profit</span>
+                      <p className="text-green-300 font-mono font-semibold">
+                        {typeof result.takeProfits === 'object' 
+                          ? Object.values(result.takeProfits).map(tp => `$${safeRender(tp)}`).join(', ')
+                          : `$${safeRender(result.takeProfits)}`}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+      {error && (
+        <div className="bg-red-900/20 border border-red-800 rounded-md p-3 mb-4">
+          <div className="text-red-400">
+            {error.includes('frame was detached') ? (
+              <>
+                <strong>TradingView Error:</strong> Chart could not be loaded. Please check your symbol and layout, or try again.<br />
+                <span className="text-xs opacity-75">Technical: {error}</span>
+              </>
+            ) : error.includes('layout not found') ? (
+              <>
+                <strong>Layout Error:</strong> TradingView layout not found. Please select a valid layout.<br />
+                <span className="text-xs opacity-75">Technical: {error}</span>
+              </>
+            ) : error.includes('Private layout access denied') ? (
+              <>
+                <strong>Access Error:</strong> The selected layout is private or requires authentication. Try a different layout or check your TradingView login.<br />
+                <span className="text-xs opacity-75">Technical: {error}</span>
+              </>
+            ) : (
+              <>
+                <strong>Analysis Error:</strong> {error}
+              </>
+            )}
+          </div>
+        </div>
+      )}
+      {loading && (
+        <div className="bg-blue-900/20 border border-blue-800 rounded-md p-3 mb-4">
+          <div className="flex items-center gap-3 text-blue-300">
+            <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
+            </svg>
+            <span>Analyzing {symbol} chart...</span>
+          </div>
+        </div>
+      )}
+      {result && (
+        <div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mt-4">
+          <h3 className="text-lg font-semibold text-white mb-3">Analysis Results</h3>
+          {result.layoutsAnalyzed && (
+            <div className="mb-4 text-sm">
+              <span className="text-gray-400">Layouts analyzed:</span>
+              <span className="ml-2 text-blue-300">{result.layoutsAnalyzed.join(', ')}</span>
+            </div>
+          )}
+          <div className="grid gap-3">
+            <div className="bg-gray-900 p-3 rounded">
+              <span className="text-gray-400 text-sm">Summary:</span>
+              <p className="text-white mt-1">{safeRender(result.summary)}</p>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="bg-gray-900 p-3 rounded">
+                <span className="text-gray-400 text-sm">Sentiment:</span>
+                <p className="text-white mt-1">{safeRender(result.marketSentiment)}</p>
+              </div>
+              <div className="bg-gray-900 p-3 rounded">
+                <span className="text-gray-400 text-sm">Recommendation:</span>
+                <p className="text-white mt-1">{safeRender(result.recommendation)}</p>
+                <span className="text-blue-300 text-sm">({safeRender(result.confidence)}% confidence)</span>
+              </div>
+            </div>
+            {result.keyLevels && (
+              <div className="grid grid-cols-2 gap-3">
+                <div className="bg-gray-900 p-3 rounded">
+                  <span className="text-gray-400 text-sm">Support Levels:</span>
+                  <p className="text-green-300 mt-1">{result.keyLevels.support?.join(', ') || 'None identified'}</p>
+                </div>
+                <div className="bg-gray-900 p-3 rounded">
+                  <span className="text-gray-400 text-sm">Resistance Levels:</span>
+                  <p className="text-red-300 mt-1">{result.keyLevels.resistance?.join(', ') || 'None identified'}</p>
+                </div>
+              </div>
+            )}
+            
+            {/* Enhanced Trading Analysis */}
+            {result.entry && (
+              <div className="bg-gray-900 p-3 rounded">
+                <span className="text-gray-400 text-sm">Entry:</span>
+                <p className="text-yellow-300 mt-1">${safeRender(result.entry.price || result.entry)}</p>
+                {result.entry.buffer && <p className="text-xs text-gray-400">{safeRender(result.entry.buffer)}</p>}
+                {result.entry.rationale && <p className="text-xs text-gray-300 mt-1">{safeRender(result.entry.rationale)}</p>}
+              </div>
+            )}
+            
+            {result.stopLoss && (
+              <div className="bg-gray-900 p-3 rounded">
+                <span className="text-gray-400 text-sm">Stop Loss:</span>
+                <p className="text-red-300 mt-1">${safeRender(result.stopLoss.price || result.stopLoss)}</p>
+                {result.stopLoss.rationale && <p className="text-xs text-gray-300 mt-1">{safeRender(result.stopLoss.rationale)}</p>}
+              </div>
+            )}
+            
+            {result.takeProfits && (
+              <div className="bg-gray-900 p-3 rounded">
+                <span className="text-gray-400 text-sm">Take Profits:</span>
+                {typeof result.takeProfits === 'object' ? (
+                  <>
+                    {result.takeProfits.tp1 && (
+                      <div className="mt-1">
+                        <p className="text-green-300">TP1: ${safeRender(result.takeProfits.tp1.price || result.takeProfits.tp1)}</p>
+                        {result.takeProfits.tp1.description && <p className="text-xs text-gray-300">{safeRender(result.takeProfits.tp1.description)}</p>}
+                      </div>
+                    )}
+                    {result.takeProfits.tp2 && (
+                      <div className="mt-1">
+                        <p className="text-green-300">TP2: ${safeRender(result.takeProfits.tp2.price || result.takeProfits.tp2)}</p>
+                        {result.takeProfits.tp2.description && <p className="text-xs text-gray-300">{safeRender(result.takeProfits.tp2.description)}</p>}
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <p className="text-green-300 mt-1">{safeRender(result.takeProfits)}</p>
+                )}
+              </div>
+            )}
+            
+            {result.riskToReward && (
+              <div className="bg-gray-900 p-3 rounded">
+                <span className="text-gray-400 text-sm">Risk to Reward:</span>
+                <p className="text-blue-300 mt-1">{safeRender(result.riskToReward)}</p>
+              </div>
+            )}
+            
+            {result.confirmationTrigger && (
+              <div className="bg-gray-900 p-3 rounded">
+                <span className="text-gray-400 text-sm">Confirmation Trigger:</span>
+                <p className="text-orange-300 mt-1">{safeRender(result.confirmationTrigger)}</p>
+              </div>
+            )}
+            
+            {result.indicatorAnalysis && (
+              <div className="bg-gray-900 p-3 rounded">
+                <span className="text-gray-400 text-sm">Indicator Analysis:</span>
+                {typeof result.indicatorAnalysis === 'object' ? (
+                  <div className="mt-1 space-y-1">
+                    {result.indicatorAnalysis.rsi && (
+                      <div>
+                        <span className="text-purple-300 text-xs">RSI:</span>
+                        <span className="text-white text-xs ml-2">{safeRender(result.indicatorAnalysis.rsi)}</span>
+                      </div>
+                    )}
+                    {result.indicatorAnalysis.vwap && (
+                      <div>
+                        <span className="text-cyan-300 text-xs">VWAP:</span>
+                        <span className="text-white text-xs ml-2">{safeRender(result.indicatorAnalysis.vwap)}</span>
+                      </div>
+                    )}
+                    {result.indicatorAnalysis.obv && (
+                      <div>
+                        <span className="text-indigo-300 text-xs">OBV:</span>
+                        <span className="text-white text-xs ml-2">{safeRender(result.indicatorAnalysis.obv)}</span>
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <p className="text-white mt-1">{safeRender(result.indicatorAnalysis)}</p>
+                )}
+              </div>
+            )}
+            
+            <div className="bg-gray-900 p-3 rounded">
+              <span className="text-gray-400 text-sm">Reasoning:</span>
+              <p className="text-white mt-1">{safeRender(result.reasoning)}</p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

components/AutoTradingPanel.tsx

@@ -21,15 +21,107 @@ export default function AutoTradingPanel() {
     }
   }
 
+  const getStatusColor = () => {
+    switch (status) {
+      case 'running': return 'text-green-400'
+      case 'stopped': return 'text-red-400'
+      default: return 'text-gray-400'
+    }
+  }
+
+  const getStatusIcon = () => {
+    switch (status) {
+      case 'running': return '🟢'
+      case 'stopped': return '🔴'
+      default: return '⚫'
+    }
+  }
+
   return (
-    <div className="p-4 border rounded bg-gray-900">
+    <div className="card card-gradient">
-      <h2 className="text-lg font-bold mb-2">Auto-Trading Control</h2>
+      <div className="flex items-center justify-between mb-6">
-      <div className="flex gap-2 mb-2">
+        <h2 className="text-lg font-bold text-white flex items-center">
-        <button className="btn btn-primary" onClick={() => handleAction('start')}>Start</button>
+          <span className="w-8 h-8 bg-gradient-to-br from-green-400 to-emerald-600 rounded-lg flex items-center justify-center mr-3">
-        <button className="btn btn-secondary" onClick={() => handleAction('stop')}>Stop</button>
+            ⚡
+          </span>
+          Auto-Trading Control
+        </h2>
+        <div className={`flex items-center space-x-2 ${getStatusColor()}`}>
+          <span>{getStatusIcon()}</span>
+          <span className="text-sm font-medium capitalize">{status}</span>
+        </div>
+      </div>
+
+      {/* Status Display */}
+      <div className="mb-6 p-4 bg-gray-800/30 rounded-lg border border-gray-700">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-sm font-semibold text-gray-300 mb-1">Trading Status</h3>
+            <p className={`text-lg font-bold ${getStatusColor()}`}>
+              {status === 'running' ? 'ACTIVE' : status === 'stopped' ? 'STOPPED' : 'IDLE'}
+            </p>
+          </div>
+          <div className="text-right">
+            <div className="text-xs text-gray-400">Last Updated</div>
+            <div className="text-sm text-gray-300">{new Date().toLocaleTimeString()}</div>
+          </div>
+        </div>
+        
+        {message && (
+          <div className={`mt-3 p-3 rounded-lg text-sm ${
+            message.includes('Error') 
+              ? 'bg-red-500/10 border border-red-500/30 text-red-400'
+              : 'bg-green-500/10 border border-green-500/30 text-green-400'
+          }`}>
+            {message}
+          </div>
+        )}
+      </div>
+
+      {/* Action Buttons */}
+      <div className="grid grid-cols-2 gap-3">
+        <button 
+          className={`py-3 px-4 rounded-lg font-semibold transition-all duration-300 ${
+            status === 'running' 
+              ? 'bg-gray-700 text-gray-400 cursor-not-allowed'
+              : 'btn-success transform hover:scale-105 active:scale-95'
+          }`}
+          onClick={() => handleAction('start')}
+          disabled={status === 'running'}
+        >
+          <div className="flex items-center justify-center space-x-2">
+            <span>▶️</span>
+            <span>Start Trading</span>
+          </div>
+        </button>
+        
+        <button 
+          className={`py-3 px-4 rounded-lg font-semibold transition-all duration-300 ${
+            status !== 'running' 
+              ? 'bg-gray-700 text-gray-400 cursor-not-allowed'
+              : 'btn-danger transform hover:scale-105 active:scale-95'
+          }`}
+          onClick={() => handleAction('stop')}
+          disabled={status !== 'running'}
+        >
+          <div className="flex items-center justify-center space-x-2">
+            <span>⏹️</span>
+            <span>Stop Trading</span>
+          </div>
+        </button>
+      </div>
+
+      {/* Trading Metrics (Mock Data) */}
+      <div className="mt-6 grid grid-cols-2 gap-4">
+        <div className="p-3 bg-gray-800/20 rounded-lg">
+          <div className="text-xs text-gray-400">Today's Trades</div>
+          <div className="text-lg font-bold text-white">12</div>
+        </div>
+        <div className="p-3 bg-gray-800/20 rounded-lg">
+          <div className="text-xs text-gray-400">Success Rate</div>
+          <div className="text-lg font-bold text-green-400">85%</div>
+        </div>
       </div>
-      <div className="text-sm text-gray-400">Status: {status}</div>
-      {message && <div className="mt-2 text-yellow-400">{message}</div>}
     </div>
   )
 }

components/Dashboard.tsx

@@ -4,11 +4,18 @@ import AutoTradingPanel from './AutoTradingPanel'
 import TradingHistory from './TradingHistory'
 import DeveloperSettings from './DeveloperSettings'
 import AIAnalysisPanel from './AIAnalysisPanel'
+import SessionStatus from './SessionStatus'
 
 export default function Dashboard() {
   const [positions, setPositions] = useState<any[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const [stats, setStats] = useState({
+    totalPnL: 0,
+    dailyPnL: 0,
+    winRate: 0,
+    totalTrades: 0
+  })
 
   useEffect(() => {
     async function fetchPositions() {
@@ -17,6 +24,13 @@ export default function Dashboard() {
         if (res.ok) {
           const data = await res.json()
           setPositions(data.positions || [])
+          // Calculate some mock stats for demo
+          setStats({
+            totalPnL: 1247.50,
+            dailyPnL: 67.25,
+            winRate: 73.2,
+            totalTrades: 156
+          })
         } else {
           setError('Failed to load positions')
         }
@@ -29,42 +43,168 @@ export default function Dashboard() {
   }, [])
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 p-8 bg-gray-950 min-h-screen">
     <div className="space-y-8">
-        <AIAnalysisPanel />
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div className="card card-gradient">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-400 text-sm font-medium">Total P&L</p>
+              <p className={`text-2xl font-bold ${stats.totalPnL >= 0 ? 'text-green-400' : 'text-red-400'}`}>
+                {stats.totalPnL >= 0 ? '+' : ''}${stats.totalPnL.toFixed(2)}
+              </p>
+            </div>
+            <div className="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center">
+              <span className="text-green-400 text-xl">📈</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="card card-gradient">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-400 text-sm font-medium">Daily P&L</p>
+              <p className={`text-2xl font-bold ${stats.dailyPnL >= 0 ? 'text-green-400' : 'text-red-400'}`}>
+                {stats.dailyPnL >= 0 ? '+' : ''}${stats.dailyPnL.toFixed(2)}
+              </p>
+            </div>
+            <div className="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center">
+              <span className="text-blue-400 text-xl">💰</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="card card-gradient">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-400 text-sm font-medium">Win Rate</p>
+              <p className="text-2xl font-bold text-cyan-400">{stats.winRate}%</p>
+            </div>
+            <div className="w-12 h-12 bg-cyan-500/20 rounded-full flex items-center justify-center">
+              <span className="text-cyan-400 text-xl">🎯</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="card card-gradient">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-400 text-sm font-medium">Total Trades</p>
+              <p className="text-2xl font-bold text-purple-400">{stats.totalTrades}</p>
+            </div>
+            <div className="w-12 h-12 bg-purple-500/20 rounded-full flex items-center justify-center">
+              <span className="text-purple-400 text-xl">🔄</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
+        {/* Left Column - Controls */}
+        <div className="xl:col-span-1 space-y-6">
+          <SessionStatus />
           <AutoTradingPanel />
           <DeveloperSettings />
         </div>
-      <div className="space-y-8">
+
-        <div className="bg-gray-900 rounded-lg shadow p-6">
+        {/* Right Column - Analysis & Positions */}
-          <h2 className="text-xl font-bold mb-4 text-white">Open Positions</h2>
+        <div className="xl:col-span-2 space-y-6">
-          {loading ? <div className="text-gray-400">Loading...</div> : error ? <div className="text-red-400">{error}</div> : (
+          <AIAnalysisPanel />
-            <table className="w-full text-sm text-left">
+          
-              <thead className="text-gray-400 border-b border-gray-700">
+          {/* Open Positions */}
-                <tr>
+          <div className="card card-gradient">
-                  <th className="py-2">Symbol</th>
+            <div className="flex items-center justify-between mb-6">
-                  <th>Side</th>
+              <h2 className="text-xl font-bold text-white flex items-center">
-                  <th>Size</th>
+                <span className="w-2 h-2 bg-green-400 rounded-full mr-3 animate-pulse"></span>
-                  <th>Entry Price</th>
+                Open Positions
-                  <th>Unrealized PnL</th>
+              </h2>
+              <button className="text-sm text-gray-400 hover:text-gray-300 transition-colors">
+                View All
+              </button>
+            </div>
+            
+            {loading ? (
+              <div className="flex items-center justify-center py-8">
+                <div className="spinner"></div>
+                <span className="ml-2 text-gray-400">Loading positions...</span>
+              </div>
+            ) : error ? (
+              <div className="text-center py-8">
+                <div className="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <span className="text-red-400 text-2xl">⚠️</span>
+                </div>
+                <p className="text-red-400 font-medium">{error}</p>
+                <p className="text-gray-500 text-sm mt-2">Please check your connection and try again</p>
+              </div>
+            ) : positions.length === 0 ? (
+              <div className="text-center py-8">
+                <div className="w-16 h-16 bg-gray-700/50 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <span className="text-gray-400 text-2xl">📊</span>
+                </div>
+                <p className="text-gray-400 font-medium">No open positions</p>
+                <p className="text-gray-500 text-sm mt-2">Start trading to see your positions here</p>
+              </div>
+            ) : (
+              <div className="overflow-hidden">
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead>
+                      <tr className="border-b border-gray-700">
+                        <th className="text-left py-3 px-4 text-gray-400 font-medium text-sm">Asset</th>
+                        <th className="text-left py-3 px-4 text-gray-400 font-medium text-sm">Side</th>
+                        <th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Size</th>
+                        <th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Entry</th>
+                        <th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">PnL</th>
                       </tr>
                     </thead>
                     <tbody>
                       {positions.map((pos, i) => (
-                  <tr key={i} className="border-b border-gray-800 hover:bg-gray-800">
+                        <tr key={i} className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors">
-                    <td className="py-2">{pos.symbol}</td>
+                          <td className="py-4 px-4">
-                    <td>{pos.side}</td>
+                            <div className="flex items-center">
-                    <td>{pos.size}</td>
+                              <div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center mr-3">
-                    <td>{pos.entryPrice}</td>
+                                <span className="text-white text-xs font-bold">
-                    <td>{pos.unrealizedPnl}</td>
+                                  {pos.symbol?.slice(0, 2) || 'BT'}
+                                </span>
+                              </div>
+                              <span className="font-medium text-white">{pos.symbol || 'BTC/USD'}</span>
+                            </div>
+                          </td>
+                          <td className="py-4 px-4">
+                            <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${
+                              pos.side === 'long' || pos.side === 'buy' 
+                                ? 'bg-green-100 text-green-800' 
+                                : 'bg-red-100 text-red-800'
+                            }`}>
+                              {pos.side || 'Long'}
+                            </span>
+                          </td>
+                          <td className="py-4 px-4 text-right font-mono text-gray-300">
+                            {pos.size || '0.1 BTC'}
+                          </td>
+                          <td className="py-4 px-4 text-right font-mono text-gray-300">
+                            ${pos.entryPrice || '45,230.00'}
+                          </td>
+                          <td className="py-4 px-4 text-right">
+                            <span className={`font-mono font-medium ${
+                              (pos.unrealizedPnl || 125.50) >= 0 ? 'text-green-400' : 'text-red-400'
+                            }`}>
+                              {(pos.unrealizedPnl || 125.50) >= 0 ? '+' : ''}${(pos.unrealizedPnl || 125.50).toFixed(2)}
+                            </span>
+                          </td>
                         </tr>
                       ))}
                     </tbody>
                   </table>
+                </div>
+              </div>
             )}
           </div>
+
           <TradingHistory />
         </div>
       </div>
+    </div>
   )
 }

components/DeveloperSettings.tsx

@@ -1,27 +1,242 @@
 "use client"
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 
 export default function DeveloperSettings() {
-  const [env, setEnv] = useState('')
+  const [settings, setSettings] = useState({
+    environment: 'production',
+    debugMode: false,
+    logLevel: 'info',
+    apiTimeout: 30000,
+    maxRetries: 3,
+    customEndpoint: ''
+  })
   const [message, setMessage] = useState('')
+  const [loading, setLoading] = useState(false)
 
-  async function handleSave() {
+  useEffect(() => {
-    // Example: Save env to localStorage or send to API
+    // Load settings from localStorage
-    localStorage.setItem('devEnv', env)
+    const saved = localStorage.getItem('devSettings')
-    setMessage('Settings saved!')
+    if (saved) {
+      try {
+        setSettings(JSON.parse(saved))
+      } catch (e) {
+        console.error('Failed to parse saved settings:', e)
+      }
+    }
+  }, [])
+
+  const handleSettingChange = (key: string, value: any) => {
+    setSettings(prev => ({
+      ...prev,
+      [key]: value
+    }))
+  }
+
+  const handleSave = async () => {
+    setLoading(true)
+    setMessage('')
+    
+    try {
+      // Save to localStorage
+      localStorage.setItem('devSettings', JSON.stringify(settings))
+      
+      // Optionally send to API
+      const response = await fetch('/api/developer-settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(settings)
+      })
+      
+      if (response.ok) {
+        setMessage('Settings saved successfully!')
+      } else {
+        setMessage('Settings saved locally (API unavailable)')
+      }
+    } catch (error) {
+      setMessage('Settings saved locally (API error)')
+    }
+    
+    setLoading(false)
+    setTimeout(() => setMessage(''), 3000)
+  }
+
+  const handleReset = () => {
+    const defaultSettings = {
+      environment: 'production',
+      debugMode: false,
+      logLevel: 'info',
+      apiTimeout: 30000,
+      maxRetries: 3,
+      customEndpoint: ''
+    }
+    setSettings(defaultSettings)
+    localStorage.removeItem('devSettings')
+    setMessage('Settings reset to defaults')
+    setTimeout(() => setMessage(''), 3000)
   }
 
   return (
-    <div className="p-4 border rounded bg-gray-900">
+    <div className="card card-gradient">
-      <h2 className="text-lg font-bold mb-2">Developer Settings</h2>
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-lg font-bold text-white flex items-center">
+          <span className="w-8 h-8 bg-gradient-to-br from-indigo-400 to-purple-600 rounded-lg flex items-center justify-center mr-3">
+            ⚙️
+          </span>
+          Developer Settings
+        </h2>
+        <div className="flex items-center space-x-2 text-sm text-gray-400">
+          <div className="w-2 h-2 bg-indigo-400 rounded-full"></div>
+          <span>Advanced</span>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        {/* Environment Selection */}
+        <div>
+          <label className="block text-sm font-medium text-gray-300 mb-2">Environment</label>
+          <select
+            className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all"
+            value={settings.environment}
+            onChange={e => handleSettingChange('environment', e.target.value)}
+          >
+            <option value="development">Development</option>
+            <option value="staging">Staging</option>
+            <option value="production">Production</option>
+          </select>
+        </div>
+
+        {/* Debug Mode Toggle */}
+        <div className="flex items-center justify-between p-4 bg-gray-800/30 rounded-lg border border-gray-700">
+          <div>
+            <h3 className="text-sm font-semibold text-white">Debug Mode</h3>
+            <p className="text-xs text-gray-400 mt-1">Enable detailed logging and debugging features</p>
+          </div>
+          <label className="relative inline-flex items-center cursor-pointer">
             <input
-        className="input input-bordered w-full mb-2"
+              type="checkbox"
-        placeholder="Custom ENV value"
+              checked={settings.debugMode}
-        value={env}
+              onChange={e => handleSettingChange('debugMode', e.target.checked)}
-        onChange={e => setEnv(e.target.value)}
+              className="sr-only peer"
             />
-      <button className="btn btn-primary w-full" onClick={handleSave}>Save</button>
+            <div className="w-11 h-6 bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
-      {message && <div className="mt-2 text-green-400">{message}</div>}
+          </label>
+        </div>
+
+        {/* Log Level */}
+        <div>
+          <label className="block text-sm font-medium text-gray-300 mb-2">Log Level</label>
+          <select
+            className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all"
+            value={settings.logLevel}
+            onChange={e => handleSettingChange('logLevel', e.target.value)}
+          >
+            <option value="error">Error</option>
+            <option value="warn">Warning</option>
+            <option value="info">Info</option>
+            <option value="debug">Debug</option>
+            <option value="trace">Trace</option>
+          </select>
+        </div>
+
+        {/* API Settings */}
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">API Timeout (ms)</label>
+            <input
+              type="number"
+              className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all"
+              value={settings.apiTimeout}
+              onChange={e => handleSettingChange('apiTimeout', parseInt(e.target.value) || 30000)}
+              min="1000"
+              max="300000"
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">Max Retries</label>
+            <input
+              type="number"
+              className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all"
+              value={settings.maxRetries}
+              onChange={e => handleSettingChange('maxRetries', parseInt(e.target.value) || 3)}
+              min="0"
+              max="10"
+            />
+          </div>
+        </div>
+
+        {/* Custom Endpoint */}
+        <div>
+          <label className="block text-sm font-medium text-gray-300 mb-2">Custom API Endpoint</label>
+          <input
+            type="url"
+            className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all"
+            placeholder="https://api.example.com"
+            value={settings.customEndpoint}
+            onChange={e => handleSettingChange('customEndpoint', e.target.value)}
+          />
+        </div>
+
+        {/* Status Message */}
+        {message && (
+          <div className={`p-3 rounded-lg text-sm ${
+            message.includes('successfully') || message.includes('saved locally')
+              ? 'bg-green-500/10 border border-green-500/30 text-green-400'
+              : message.includes('reset')
+              ? 'bg-blue-500/10 border border-blue-500/30 text-blue-400'
+              : 'bg-yellow-500/10 border border-yellow-500/30 text-yellow-400'
+          }`}>
+            {message}
+          </div>
+        )}
+
+        {/* Action Buttons */}
+        <div className="grid grid-cols-2 gap-3 pt-4 border-t border-gray-700">
+          <button
+            onClick={handleSave}
+            disabled={loading}
+            className={`py-3 px-4 rounded-lg font-semibold transition-all duration-300 ${
+              loading
+                ? 'bg-gray-700 text-gray-400 cursor-not-allowed'
+                : 'btn-primary transform hover:scale-105 active:scale-95'
+            }`}
+          >
+            {loading ? (
+              <div className="flex items-center justify-center space-x-2">
+                <div className="spinner"></div>
+                <span>Saving...</span>
+              </div>
+            ) : (
+              'Save Settings'
+            )}
+          </button>
+          
+          <button
+            onClick={handleReset}
+            disabled={loading}
+            className="btn-secondary py-3 px-4 transform hover:scale-105 active:scale-95"
+          >
+            Reset to Defaults
+          </button>
+        </div>
+
+        {/* Current Settings Summary */}
+        <div className="p-3 bg-gray-800/20 rounded-lg border border-gray-700">
+          <h4 className="text-xs font-semibold text-gray-400 mb-2">Current Configuration</h4>
+          <div className="grid grid-cols-2 gap-2 text-xs">
+            <div className="text-gray-500">Environment:</div>
+            <div className="text-gray-300 capitalize">{settings.environment}</div>
+            <div className="text-gray-500">Debug:</div>
+            <div className={settings.debugMode ? 'text-green-400' : 'text-red-400'}>
+              {settings.debugMode ? 'Enabled' : 'Disabled'}
+            </div>
+            <div className="text-gray-500">Log Level:</div>
+            <div className="text-gray-300 capitalize">{settings.logLevel}</div>
+            <div className="text-gray-500">Timeout:</div>
+            <div className="text-gray-300">{settings.apiTimeout}ms</div>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }

components/SessionStatus.tsx

@@ -0,0 +1,202 @@
+"use client"
+import React, { useState, useEffect } from 'react'
+
+interface SessionInfo {
+  isAuthenticated: boolean
+  hasSavedCookies: boolean
+  hasSavedStorage: boolean
+  cookiesCount: number
+  currentUrl: string
+  browserActive: boolean
+  connectionStatus: 'connected' | 'disconnected' | 'unknown' | 'error'
+  lastChecked: string
+  dockerEnv?: boolean
+  environment?: string
+}
+
+export default function SessionStatus() {
+  const [sessionInfo, setSessionInfo] = useState<SessionInfo | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [refreshing, setRefreshing] = useState(false)
+
+  const fetchSessionStatus = async () => {
+    try {
+      setError(null)
+      const response = await fetch('/api/session-status', {
+        cache: 'no-cache' // Important for Docker environment
+      })
+      const data = await response.json()
+      
+      if (data.success) {
+        setSessionInfo(data.session)
+      } else {
+        setError(data.error || 'Failed to fetch session status')
+        setSessionInfo(data.session || null)
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Network error')
+      setSessionInfo(null)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSessionAction = async (action: string) => {
+    try {
+      setRefreshing(true)
+      setError(null)
+      
+      const response = await fetch('/api/session-status', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action }),
+        cache: 'no-cache' // Important for Docker environment
+      })
+      
+      const data = await response.json()
+      
+      if (data.success) {
+        // Refresh session status after action
+        await fetchSessionStatus()
+      } else {
+        setError(data.error || `Failed to ${action} session`)
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : `Failed to ${action} session`)
+    } finally {
+      setRefreshing(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchSessionStatus()
+    
+    // Auto-refresh more frequently in Docker environment (30s vs 60s)
+    const refreshInterval = 30000 // Start with 30 seconds for all environments
+    const interval = setInterval(fetchSessionStatus, refreshInterval)
+    return () => clearInterval(interval)
+  }, [])
+
+  const getConnectionStatus = () => {
+    if (!sessionInfo) return { color: 'bg-gray-500', text: 'Unknown', icon: '❓' }
+    
+    if (sessionInfo.isAuthenticated && sessionInfo.connectionStatus === 'connected') {
+      return { color: 'bg-green-500', text: 'Connected & Authenticated', icon: '✅' }
+    } else if (sessionInfo.hasSavedCookies || sessionInfo.hasSavedStorage) {
+      return { color: 'bg-yellow-500', text: 'Session Available', icon: '🟡' }
+    } else if (sessionInfo.connectionStatus === 'connected') {
+      return { color: 'bg-blue-500', text: 'Connected (Not Authenticated)', icon: '🔵' }
+    } else {
+      return { color: 'bg-red-500', text: 'Disconnected', icon: '🔴' }
+    }
+  }
+
+  const status = getConnectionStatus()
+
+  return (
+    <div className="card card-gradient">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-lg font-bold text-white flex items-center">
+          <span className="w-8 h-8 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-lg flex items-center justify-center mr-3">
+            🌐
+          </span>
+          Session Status
+        </h2>
+        <button
+          onClick={fetchSessionStatus}
+          disabled={loading || refreshing}
+          className="p-2 text-gray-400 hover:text-gray-300 transition-colors"
+          title="Refresh Status"
+        >
+          <svg className={`w-4 h-4 ${(loading || refreshing) ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Connection Status */}
+      <div className="mb-6">
+        <div className="flex items-center justify-between p-4 bg-gray-800/30 rounded-lg border border-gray-700">
+          <div className="flex items-center space-x-3">
+            <div className={`w-3 h-3 ${status.color} rounded-full ${sessionInfo?.isAuthenticated ? 'animate-pulse' : ''}`}></div>
+            <div>
+              <h3 className="text-sm font-semibold text-white">{status.text}</h3>
+              <p className="text-xs text-gray-400">
+                {sessionInfo?.dockerEnv ? 'Docker Environment' : 'Local Environment'}
+                {sessionInfo?.environment && ` • ${sessionInfo.environment}`}
+              </p>
+            </div>
+          </div>
+          <span className="text-2xl">{status.icon}</span>
+        </div>
+      </div>
+
+      {/* Session Details */}
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 gap-4">
+          <div className="p-3 bg-gray-800/20 rounded-lg">
+            <div className="text-xs text-gray-400">Browser Status</div>
+            <div className={`text-sm font-medium ${sessionInfo?.browserActive ? 'text-green-400' : 'text-red-400'}`}>
+              {loading ? 'Checking...' : sessionInfo?.browserActive ? 'Active' : 'Inactive'}
+            </div>
+          </div>
+          
+          <div className="p-3 bg-gray-800/20 rounded-lg">
+            <div className="text-xs text-gray-400">Cookies</div>
+            <div className="text-sm font-medium text-white">
+              {loading ? '...' : sessionInfo?.cookiesCount || 0} stored
+            </div>
+          </div>
+        </div>
+
+        {sessionInfo?.currentUrl && (
+          <div className="p-3 bg-gray-800/20 rounded-lg">
+            <div className="text-xs text-gray-400 mb-1">Current URL</div>
+            <div className="text-xs text-gray-300 font-mono break-all">
+              {sessionInfo.currentUrl}
+            </div>
+          </div>
+        )}
+
+        {sessionInfo?.lastChecked && (
+          <div className="text-xs text-gray-500 text-center">
+            Last updated: {new Date(sessionInfo.lastChecked).toLocaleString()}
+          </div>
+        )}
+      </div>
+
+      {/* Error Display */}
+      {error && (
+        <div className="mt-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
+          <div className="flex items-start space-x-2">
+            <span className="text-red-400 text-sm">⚠️</span>
+            <div>
+              <h4 className="text-red-400 font-medium text-sm">Connection Error</h4>
+              <p className="text-red-300 text-xs mt-1">{error}</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Action Buttons */}
+      <div className="mt-6 grid grid-cols-2 gap-3">
+        <button
+          onClick={() => handleSessionAction('reconnect')}
+          disabled={refreshing}
+          className="btn-primary py-2 px-4 text-sm"
+        >
+          {refreshing ? 'Connecting...' : 'Reconnect'}
+        </button>
+        
+        <button
+          onClick={() => handleSessionAction('clear')}
+          disabled={refreshing}
+          className="btn-secondary py-2 px-4 text-sm"
+        >
+          Clear Session
+        </button>
+      </div>
+    </div>
+  )
+}

components/SessionStatus_old.tsx

@@ -0,0 +1,318 @@
+"use client"
+import React, { useState, useEffect } from 'react'
+
+interface SessionInfo {
+  isAuthenticated: boolean
+  hasSavedCookies: boolean
+  hasSavedStorage: boolean
+  cookiesCount: number
+  currentUrl: string
+  browserActive: boolean
+  connectionStatus: 'connected' | 'disconnected' | 'unknown' | 'error'
+  lastChecked: string
+  dockerEnv?: boolean
+  environment?: string
+}
+
+export default function SessionStatus() {
+  const [sessionInfo, setSessionInfo] = useState<SessionInfo | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [refreshing, setRefreshing] = useState(false)
+
+  const fetchSessionStatus = async () => {
+    try {
+      setError(null)
+      const response = await fetch('/api/session-status', {
+        cache: 'no-cache' // Important for Docker environment
+      })
+      const data = await response.json()
+      
+      if (data.success) {
+        setSessionInfo(data.session)
+      } else {
+        setError(data.error || 'Failed to fetch session status')
+        setSessionInfo(data.session || null)
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Network error')
+      setSessionInfo(null)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSessionAction = async (action: string) => {
+    try {
+      setRefreshing(true)
+      setError(null)
+      
+      const response = await fetch('/api/session-status', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action }),
+        cache: 'no-cache' // Important for Docker environment
+      })
+      
+      const data = await response.json()
+      
+      if (data.success) {
+        // Refresh session status after action
+        await fetchSessionStatus()
+      } else {
+        setError(data.error || `Failed to ${action} session`)
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : `Failed to ${action} session`)
+    } finally {
+      setRefreshing(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchSessionStatus()
+    
+    // Auto-refresh more frequently in Docker environment (30s vs 60s)
+    const refreshInterval = 30000 // Start with 30 seconds for all environments
+    const interval = setInterval(fetchSessionStatus, refreshInterval)
+    return () => clearInterval(interval)
+  }, [])
+
+  const getConnectionStatus = () => {
+    if (!sessionInfo) return { color: 'bg-gray-500', text: 'Unknown', icon: '❓' }
+    
+    if (sessionInfo.isAuthenticated && sessionInfo.connectionStatus === 'connected') {
+      return { color: 'bg-green-500', text: 'Connected & Authenticated', icon: '✅' }
+    } else if (sessionInfo.hasSavedCookies || sessionInfo.hasSavedStorage) {
+      return { color: 'bg-yellow-500', text: 'Session Available', icon: '🟡' }
+    } else if (sessionInfo.connectionStatus === 'connected') {
+      return { color: 'bg-blue-500', text: 'Connected (Not Authenticated)', icon: '🔵' }
+    } else {
+      return { color: 'bg-red-500', text: 'Disconnected', icon: '🔴' }
+    }
+  }
+
+  const status = getConnectionStatus()
+
+  return (
+    <div className="card card-gradient">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-lg font-bold text-white flex items-center">
+          <span className="w-8 h-8 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-lg flex items-center justify-center mr-3">
+            🌐
+          </span>
+          Session Status
+        </h2>
+        <button
+          onClick={fetchSessionStatus}
+          disabled={loading || refreshing}
+          className="p-2 text-gray-400 hover:text-gray-300 transition-colors"
+          title="Refresh Status"
+        >
+          <svg className={`w-4 h-4 ${(loading || refreshing) ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Connection Status */}
+      <div className="mb-6">
+        <div className="flex items-center justify-between p-4 bg-gray-800/30 rounded-lg border border-gray-700">
+          <div className="flex items-center space-x-3">
+            <div className={`w-3 h-3 ${status.color} rounded-full ${sessionInfo?.isAuthenticated ? 'animate-pulse' : ''}`}></div>
+            <div>
+              <h3 className="text-sm font-semibold text-white">{status.text}</h3>
+              <p className="text-xs text-gray-400">
+                {sessionInfo?.dockerEnv ? 'Docker Environment' : 'Local Environment'}
+                {sessionInfo?.environment && ` • ${sessionInfo.environment}`}
+              </p>
+            </div>
+          </div>
+          <span className="text-2xl">{status.icon}</span>
+        </div>
+      </div>
+
+      {/* Session Details */}
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 gap-4">
+          <div className="p-3 bg-gray-800/20 rounded-lg">
+            <div className="text-xs text-gray-400">Browser Status</div>
+            <div className={`text-sm font-medium ${sessionInfo?.browserActive ? 'text-green-400' : 'text-red-400'}`}>
+              {loading ? 'Checking...' : sessionInfo?.browserActive ? 'Active' : 'Inactive'}
+            </div>
+          </div>
+          
+          <div className="p-3 bg-gray-800/20 rounded-lg">
+            <div className="text-xs text-gray-400">Cookies</div>
+            <div className="text-sm font-medium text-white">
+              {loading ? '...' : sessionInfo?.cookiesCount || 0} stored
+            </div>
+          </div>
+        </div>
+
+        {sessionInfo?.currentUrl && (
+          <div className="p-3 bg-gray-800/20 rounded-lg">
+            <div className="text-xs text-gray-400 mb-1">Current URL</div>
+            <div className="text-xs text-gray-300 font-mono break-all">
+              {sessionInfo.currentUrl}
+            </div>
+          </div>
+        )}
+
+        {sessionInfo?.lastChecked && (
+          <div className="text-xs text-gray-500 text-center">
+            Last updated: {new Date(sessionInfo.lastChecked).toLocaleString()}
+          </div>
+        )}
+      </div>
+
+      {/* Error Display */}
+      {error && (
+        <div className="mt-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
+          <div className="flex items-start space-x-2">
+            <span className="text-red-400 text-sm">⚠️</span>
+            <div>
+              <h4 className="text-red-400 font-medium text-sm">Connection Error</h4>
+              <p className="text-red-300 text-xs mt-1">{error}</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Action Buttons */}
+      <div className="mt-6 grid grid-cols-2 gap-3">
+        <button
+          onClick={() => handleSessionAction('reconnect')}
+          disabled={refreshing}
+          className="btn-primary py-2 px-4 text-sm"
+        >
+          {refreshing ? 'Connecting...' : 'Reconnect'}
+        </button>
+        
+        <button
+          onClick={() => handleSessionAction('clear')}
+          disabled={refreshing}
+          className="btn-secondary py-2 px-4 text-sm"
+        >
+          Clear Session
+        </button>
+      </div>
+    </div>
+  )
+}
+    } else if (sessionInfo.hasSavedCookies || sessionInfo.hasSavedStorage) {
+      return `Session Available${dockerSuffix}`
+    } else {
+      return `Not Logged In${dockerSuffix}`
+    }
+  }
+
+  const getDetailedStatus = () => {
+    if (!sessionInfo) return []
+    
+    return [
+      { label: 'Authenticated', value: sessionInfo.isAuthenticated ? '✅' : '❌' },
+      { label: 'Connection', value: sessionInfo.connectionStatus === 'connected' ? '✅' : 
+        sessionInfo.connectionStatus === 'disconnected' ? '🔌' : 
+        sessionInfo.connectionStatus === 'error' ? '❌' : '❓' },
+      { label: 'Browser Active', value: sessionInfo.browserActive ? '✅' : '❌' },
+      { label: 'Saved Cookies', value: sessionInfo.hasSavedCookies ? `✅ (${sessionInfo.cookiesCount})` : '❌' },
+      { label: 'Saved Storage', value: sessionInfo.hasSavedStorage ? '✅' : '❌' },
+      { label: 'Environment', value: sessionInfo.dockerEnv ? '🐳 Docker' : '💻 Local' },
+    ]
+  }
+
+  return (
+    <div className="bg-gray-900 rounded-lg shadow p-4">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold text-white">TradingView Session</h3>
+        <button
+          onClick={() => fetchSessionStatus()}
+          disabled={loading || refreshing}
+          className="px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 disabled:opacity-50"
+        >
+          {loading || refreshing ? '⟳' : '🔄'}
+        </button>
+      </div>
+
+      {/* Status Indicator */}
+      <div className="flex items-center space-x-3 mb-4">
+        <div className={`w-3 h-3 rounded-full ${getStatusColor()}`}></div>
+        <span className="text-white font-medium">{getStatusText()}</span>
+      </div>
+
+      {/* Detailed Status */}
+      {sessionInfo && (
+        <div className="space-y-2 mb-4">
+          {getDetailedStatus().map((item, index) => (
+            <div key={index} className="flex justify-between text-sm">
+              <span className="text-gray-400">{item.label}:</span>
+              <span className="text-white">{item.value}</span>
+            </div>
+          ))}
+          <div className="flex justify-between text-sm">
+            <span className="text-gray-400">Last Checked:</span>
+            <span className="text-white text-xs">
+              {new Date(sessionInfo.lastChecked).toLocaleTimeString()}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Error Display */}
+      {error && (
+        <div className="bg-red-900 border border-red-700 rounded p-2 mb-4">
+          <p className="text-red-300 text-sm">{error}</p>
+        </div>
+      )}
+
+      {/* Action Buttons */}
+      <div className="flex flex-wrap gap-2">
+        <button
+          onClick={() => handleSessionAction('refresh')}
+          disabled={refreshing}
+          className="px-3 py-1 bg-green-600 text-white rounded text-sm hover:bg-green-700 disabled:opacity-50"
+        >
+          Refresh Session
+        </button>
+        <button
+          onClick={() => handleSessionAction('test')}
+          disabled={refreshing}
+          className="px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 disabled:opacity-50"
+        >
+          Test Session
+        </button>
+        <button
+          onClick={() => handleSessionAction('clear')}
+          disabled={refreshing}
+          className="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700 disabled:opacity-50"
+        >
+          Clear Session
+        </button>
+      </div>
+
+      {/* Usage Instructions */}
+      {sessionInfo && !sessionInfo.isAuthenticated && (
+        <div className="mt-4 p-3 bg-yellow-900 border border-yellow-700 rounded">
+          <p className="text-yellow-300 text-sm">
+            💡 <strong>To establish session:</strong> Run the analysis or screenshot capture once to trigger manual login, 
+            then future requests will use the saved session and avoid captchas.
+            {sessionInfo.dockerEnv && (
+              <><br/>🐳 <strong>Docker:</strong> Session data is persisted in the container volume for reuse across restarts.</>
+            )}
+          </p>
+        </div>
+      )}
+
+      {/* Docker Environment Info */}
+      {sessionInfo?.dockerEnv && (
+        <div className="mt-4 p-3 bg-blue-900 border border-blue-700 rounded">
+          <p className="text-blue-300 text-sm">
+            🐳 <strong>Docker Environment:</strong> Running in containerized mode. Session persistence is enabled 
+            via volume mount at <code className="bg-blue-800 px-1 rounded">/.tradingview-session</code>
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

components/TradingHistory.tsx

@@ -9,6 +9,7 @@ interface Trade {
   price: number
   status: string
   executedAt: string
+  pnl?: number
 }
 
 export default function TradingHistory() {
@@ -17,43 +18,160 @@ export default function TradingHistory() {
 
   useEffect(() => {
     async function fetchTrades() {
+      try {
         const res = await fetch('/api/trading-history')
         if (res.ok) {
-        setTrades(await res.json())
+          const data = await res.json()
+          setTrades(data)
+        } else {
+          // Mock data for demonstration
+          setTrades([
+            {
+              id: '1',
+              symbol: 'BTCUSD',
+              side: 'BUY',
+              amount: 0.1,
+              price: 45230.50,
+              status: 'FILLED',
+              executedAt: new Date().toISOString(),
+              pnl: 125.50
+            },
+            {
+              id: '2',
+              symbol: 'ETHUSD',
+              side: 'SELL',
+              amount: 2.5,
+              price: 2856.75,
+              status: 'FILLED',
+              executedAt: new Date(Date.now() - 3600000).toISOString(),
+              pnl: -67.25
+            },
+            {
+              id: '3',
+              symbol: 'SOLUSD',
+              side: 'BUY',
+              amount: 10,
+              price: 95.80,
+              status: 'FILLED',
+              executedAt: new Date(Date.now() - 7200000).toISOString(),
+              pnl: 89.75
+            }
+          ])
+        }
+      } catch (error) {
+        console.error('Failed to fetch trades:', error)
+        setTrades([])
       }
       setLoading(false)
     }
     fetchTrades()
   }, [])
 
+  const getSideColor = (side: string) => {
+    return side.toLowerCase() === 'buy' ? 'text-green-400' : 'text-red-400'
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status.toLowerCase()) {
+      case 'filled': return 'text-green-400'
+      case 'pending': return 'text-yellow-400'
+      case 'cancelled': return 'text-red-400'
+      default: return 'text-gray-400'
+    }
+  }
+
+  const getPnLColor = (pnl?: number) => {
+    if (!pnl) return 'text-gray-400'
+    return pnl >= 0 ? 'text-green-400' : 'text-red-400'
+  }
+
   return (
-    <div className="p-4 border rounded bg-gray-900">
+    <div className="card card-gradient">
-      <h2 className="text-lg font-bold mb-2">Trading History</h2>
+      <div className="flex items-center justify-between mb-6">
-      {loading ? <div>Loading...</div> : (
+        <h2 className="text-lg font-bold text-white flex items-center">
-        <table className="w-full text-sm">
+          <span className="w-8 h-8 bg-gradient-to-br from-purple-400 to-violet-600 rounded-lg flex items-center justify-center mr-3">
+            📊
+          </span>
+          Trading History
+        </h2>
+        <span className="text-xs text-gray-400">Latest {trades.length} trades</span>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-8">
+          <div className="spinner"></div>
+          <span className="ml-2 text-gray-400">Loading trades...</span>
+        </div>
+      ) : trades.length === 0 ? (
+        <div className="text-center py-8">
+          <div className="w-16 h-16 bg-gray-700/50 rounded-full flex items-center justify-center mx-auto mb-4">
+            <span className="text-gray-400 text-2xl">📈</span>
+          </div>
+          <p className="text-gray-400 font-medium">No trading history</p>
+          <p className="text-gray-500 text-sm mt-2">Your completed trades will appear here</p>
+        </div>
+      ) : (
+        <div className="overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full">
               <thead>
-            <tr>
+                <tr className="border-b border-gray-700">
-              <th>Symbol</th>
+                  <th className="text-left py-3 px-4 text-gray-400 font-medium text-sm">Asset</th>
-              <th>Side</th>
+                  <th className="text-left py-3 px-4 text-gray-400 font-medium text-sm">Side</th>
-              <th>Amount</th>
+                  <th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Amount</th>
-              <th>Price</th>
+                  <th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Price</th>
-              <th>Status</th>
+                  <th className="text-center py-3 px-4 text-gray-400 font-medium text-sm">Status</th>
-              <th>Executed At</th>
+                  <th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">P&L</th>
+                  <th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Time</th>
                 </tr>
               </thead>
               <tbody>
-            {trades.map(trade => (
+                {trades.map((trade, index) => (
-              <tr key={trade.id}>
+                  <tr key={trade.id} className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors">
-                <td>{trade.symbol}</td>
+                    <td className="py-4 px-4">
-                <td>{trade.side}</td>
+                      <div className="flex items-center">
-                <td>{trade.amount}</td>
+                        <div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center mr-3">
-                <td>{trade.price}</td>
+                          <span className="text-white text-xs font-bold">
-                <td>{trade.status}</td>
+                            {trade.symbol.slice(0, 2)}
-                <td>{trade.executedAt}</td>
+                          </span>
+                        </div>
+                        <span className="font-medium text-white">{trade.symbol}</span>
+                      </div>
+                    </td>
+                    <td className="py-4 px-4">
+                      <span className={`font-semibold ${getSideColor(trade.side)}`}>
+                        {trade.side}
+                      </span>
+                    </td>
+                    <td className="py-4 px-4 text-right font-mono text-gray-300">
+                      {trade.amount}
+                    </td>
+                    <td className="py-4 px-4 text-right font-mono text-gray-300">
+                      ${trade.price.toLocaleString()}
+                    </td>
+                    <td className="py-4 px-4 text-center">
+                      <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
+                        trade.status.toLowerCase() === 'filled' ? 'bg-green-100 text-green-800' :
+                        trade.status.toLowerCase() === 'pending' ? 'bg-yellow-100 text-yellow-800' :
+                        'bg-red-100 text-red-800'
+                      }`}>
+                        {trade.status}
+                      </span>
+                    </td>
+                    <td className="py-4 px-4 text-right">
+                      <span className={`font-mono font-semibold ${getPnLColor(trade.pnl)}`}>
+                        {trade.pnl ? `${trade.pnl >= 0 ? '+' : ''}$${trade.pnl.toFixed(2)}` : '--'}
+                      </span>
+                    </td>
+                    <td className="py-4 px-4 text-right text-xs text-gray-400">
+                      {new Date(trade.executedAt).toLocaleTimeString()}
+                    </td>
                   </tr>
                 ))}
               </tbody>
             </table>
+          </div>
+        </div>
       )}
     </div>
   )

components/TradingHistory_old.tsx

@@ -0,0 +1,188 @@
+"use client"
+import React, { useEffect, useState } from 'react'
+
+interface Trade {
+  id: string
+  symbol: string
+  side: string
+  amount: number
+  price: number
+  status: string
+  executedAt: string
+  pnl?: number
+}
+
+export default function TradingHistory() {
+  const [trades, setTrades] = useState<Trade[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    async function fetchTrades() {
+      try {
+        const res = await fetch('/api/trading-history')
+        if (res.ok) {
+          const data = await res.json()
+          setTrades(data)
+        } else {
+          // Mock data for demonstration
+          setTrades([
+            {
+              id: '1',
+              symbol: 'BTCUSD',
+              side: 'BUY',
+              amount: 0.1,
+              price: 45230.50,
+              status: 'FILLED',
+              executedAt: new Date().toISOString(),
+              pnl: 125.50
+            },
+            {
+              id: '2',
+              symbol: 'ETHUSD',
+              side: 'SELL',
+              amount: 2.5,
+              price: 2856.75,
+              status: 'FILLED',
+              executedAt: new Date(Date.now() - 3600000).toISOString(),
+              pnl: -67.25
+            },
+            {
+              id: '3',
+              symbol: 'SOLUSD',
+              side: 'BUY',
+              amount: 10,
+              price: 95.80,
+              status: 'FILLED',
+              executedAt: new Date(Date.now() - 7200000).toISOString(),
+              pnl: 89.75
+            }
+          ])
+        }
+      } catch (error) {
+        console.error('Failed to fetch trades:', error)
+        setTrades([])
+      }
+      setLoading(false)
+    }
+    fetchTrades()
+  }, [])
+
+  const getSideColor = (side: string) => {
+    return side.toLowerCase() === 'buy' ? 'text-green-400' : 'text-red-400'
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status.toLowerCase()) {
+      case 'filled': return 'text-green-400'
+      case 'pending': return 'text-yellow-400'
+      case 'cancelled': return 'text-red-400'
+      default: return 'text-gray-400'
+    }
+  }
+
+  const getPnLColor = (pnl?: number) => {
+    if (!pnl) return 'text-gray-400'
+    return pnl >= 0 ? 'text-green-400' : 'text-red-400'
+  }
+
+  return (
+    <div className="card card-gradient">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-lg font-bold text-white flex items-center">
+          <span className="w-8 h-8 bg-gradient-to-br from-purple-400 to-violet-600 rounded-lg flex items-center justify-center mr-3">
+            📊
+          </span>
+          Trading History
+        </h2>
+        <span className="text-xs text-gray-400">Latest {trades.length} trades</span>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-8">
+          <div className="spinner"></div>
+          <span className="ml-2 text-gray-400">Loading trades...</span>
+        </div>
+      ) : trades.length === 0 ? (
+        <div className="text-center py-8">
+          <div className="w-16 h-16 bg-gray-700/50 rounded-full flex items-center justify-center mx-auto mb-4">
+            <span className="text-gray-400 text-2xl">📈</span>
+          </div>
+          <p className="text-gray-400 font-medium">No trading history</p>
+          <p className="text-gray-500 text-sm mt-2">Your completed trades will appear here</p>
+        </div>
+      ) : (
+        <div className="overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-gray-700">
+                  <th className="text-left py-3 px-4 text-gray-400 font-medium text-sm">Asset</th>
+                  <th className="text-left py-3 px-4 text-gray-400 font-medium text-sm">Side</th>
+                  <th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Amount</th>
+                  <th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Price</th>
+                  <th className="text-center py-3 px-4 text-gray-400 font-medium text-sm">Status</th>
+                  <th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">P&L</th>
+                  <th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Time</th>
+                </tr>
+              </thead>
+              <tbody>
+                {trades.map((trade, index) => (
+                  <tr key={trade.id} className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors">
+                    <td className="py-4 px-4">
+                      <div className="flex items-center">
+                        <div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center mr-3">
+                          <span className="text-white text-xs font-bold">
+                            {trade.symbol.slice(0, 2)}
+                          </span>
+                        </div>
+                        <span className="font-medium text-white">{trade.symbol}</span>
+                      </div>
+                    </td>
+                    <td className="py-4 px-4">
+                      <span className={`font-semibold ${getSideColor(trade.side)}`}>
+                        {trade.side}
+                      </span>
+                    </td>
+                    <td className="py-4 px-4 text-right font-mono text-gray-300">
+                      {trade.amount}
+                    </td>
+                    <td className="py-4 px-4 text-right font-mono text-gray-300">
+                      ${trade.price.toLocaleString()}
+                    </td>
+                    <td className="py-4 px-4 text-center">
+                      <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
+                        trade.status.toLowerCase() === 'filled' ? 'bg-green-100 text-green-800' :
+                        trade.status.toLowerCase() === 'pending' ? 'bg-yellow-100 text-yellow-800' :
+                        'bg-red-100 text-red-800'
+                      }`}>
+                        {trade.status}
+                      </span>
+                    </td>
+                    <td className="py-4 px-4 text-right">
+                      <span className={`font-mono font-semibold ${getPnLColor(trade.pnl)}`}>
+                        {trade.pnl ? `${trade.pnl >= 0 ? '+' : ''}$${trade.pnl.toFixed(2)}` : '--'}
+                      </span>
+                    </td>
+                    <td className="py-4 px-4 text-right text-xs text-gray-400">
+                      {new Date(trade.executedAt).toLocaleTimeString()}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+                <td>{trade.status}</td>
+                <td>{trade.executedAt}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  )
+}

docker-compose.yml

@@ -28,6 +28,7 @@ services:
     volumes:
       - ./screenshots:/app/screenshots
       - ./videos:/app/videos
+      - ./.tradingview-session:/app/.tradingview-session
     
     # Health check
     healthcheck:

lib/enhanced-screenshot.ts

@@ -10,9 +10,17 @@ export interface ScreenshotConfig {
 }
 
 export class EnhancedScreenshotService {
+  private static readonly OPERATION_TIMEOUT = 120000 // 2 minutes timeout
+
   async captureWithLogin(config: ScreenshotConfig): Promise<string[]> {
     const screenshotFiles: string[] = []
     
+    return new Promise(async (resolve, reject) => {
+      // Set overall timeout for the operation
+      const timeoutId = setTimeout(() => {
+        reject(new Error('Screenshot capture operation timed out after 2 minutes'))
+      }, EnhancedScreenshotService.OPERATION_TIMEOUT)
+      
       try {
         // Ensure screenshots directory exists
         const screenshotsDir = path.join(process.cwd(), 'screenshots')
@@ -20,6 +28,9 @@ export class EnhancedScreenshotService {
 
         console.log('Initializing TradingView automation for Docker container...')
         
+        // Ensure browser is healthy before operations
+        await tradingViewAutomation.ensureBrowserReady()
+
         // Initialize automation with Docker-optimized settings
         await tradingViewAutomation.init()
 
@@ -29,22 +40,28 @@ export class EnhancedScreenshotService {
       if (!alreadyLoggedIn) {
         console.log('No active session found...')
         
-        // Try to use session persistence first to avoid captcha
+        // Try to use enhanced session persistence first to avoid captcha
         const sessionTest = await tradingViewAutomation.testSessionPersistence()
+        console.log('📊 Current session info:', sessionTest)
         
-        if (sessionTest.isValid) {
+        if (sessionTest.isValid && sessionTest.cookiesCount > 0) {
-          console.log('✅ Valid session found - avoiding captcha!')
+          console.log('✅ Saved session data found')
+          console.log(`🍪 Cookies: ${sessionTest.cookiesCount}`)
+          console.log(`💾 Storage: ${sessionTest.hasStorage ? 'Yes' : 'No'}`)
         } else {
+          console.log('⚠️ Session data exists but appears to be expired')
+        }
+        
+        // Always try smart login which handles session validation and human-like behavior
         console.log('⚠️ No valid session - manual login may be required')
         console.log('💡 Using smart login to handle captcha scenario...')
         
-          // Use smart login which prioritizes session persistence
+        // Use smart login which prioritizes session persistence and anti-detection
         const loginSuccess = await tradingViewAutomation.smartLogin(config.credentials)
         
         if (!loginSuccess) {
           throw new Error('Smart login failed - manual intervention may be required')
         }
-        }
       } else {
         console.log('✅ Already logged in using saved session')
       }
@@ -90,15 +107,17 @@ export class EnhancedScreenshotService {
       }
 
       console.log(`Successfully captured ${screenshotFiles.length} screenshot(s)`)
-      return screenshotFiles
+      
+      clearTimeout(timeoutId)
+      resolve(screenshotFiles)
 
     } catch (error) {
       console.error('Enhanced screenshot capture failed:', error)
-      throw error
+      clearTimeout(timeoutId)
-    } finally {
+      reject(error)
-      // Always cleanup
-      await tradingViewAutomation.close()
     }
+    // Note: Don't close browser here - keep it alive for subsequent operations
+    })
   }
 
   async captureQuick(symbol: string, timeframe: string, credentials: TradingViewCredentials): Promise<string | null> {
@@ -208,6 +227,13 @@ export class EnhancedScreenshotService {
       throw error
     }
   }
+
+  /**
+   * Cleanup browser resources (can be called when shutting down the application)
+   */
+  async cleanup(): Promise<void> {
+    await tradingViewAutomation.close()
+  }
 }
 
 export const enhancedScreenshotService = new EnhancedScreenshotService()

lib/tradingview.ts

@@ -196,7 +196,10 @@ export class TradingViewCapture {
         
         if (emailButton.asElement()) {
           console.log('Found email login button, clicking...')
-          await emailButton.asElement()?.click()
+          const elementHandle = emailButton.asElement() as any
+          if (elementHandle) {
+            await elementHandle.click()
+          }
           await new Promise(res => setTimeout(res, 2000))
           await this.debugScreenshot('login_04b_after_email_button', page)
           
@@ -233,7 +236,7 @@ export class TradingViewCapture {
             const text = btn.textContent?.toLowerCase() || ''
             return text.includes('sign in') || text.includes('login') || text.includes('submit')
           })
-        }).then(handle => handle.asElement())
+        }).then(handle => handle.asElement()) as any
       }
       
       if (!signInButton) {

package.json

@@ -42,12 +42,13 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
-    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9",
     "eslint-config-next": "15.3.5",
-    "tailwindcss": "^4",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.8.3"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

tailwind.config.ts

@@ -0,0 +1,24 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+      fontFamily: {
+        'inter': ['Inter', 'system-ui', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;