📚 COMPREHENSIVE KNOWLEDGE DOCUMENTATION

ADVANCED SYSTEM KNOWLEDGE:
- Superior parallel screenshot system (60% performance gain)
- AI learning system architecture and decision flow
- Orphaned order cleanup integration patterns
- Critical technical fixes and troubleshooting guide
- Database schema best practices
- Memory leak prevention strategies

- AI learning system patterns and functions
- Error handling best practices for trading systems
- Integration patterns for position monitoring
- Performance optimization rules
- UI/UX consistency requirements
- Critical anti-patterns to avoid

- Added links to new knowledge base documents
- Comprehensive documentation structure
- Development guides and best practices
- Performance optimizations summary

- 60% screenshot performance improvement techniques
- AI learning system that adapts trading decisions
- Container stability and crash prevention
- Frontend-backend consistency requirements
- Integration strategies for existing infrastructure

This documentation preserves critical insights from complex debugging sessions and provides patterns for future development.

app/api/automation/stop/route.js

@@ -1,10 +1,10 @@
-import { positionAwareAutomation } from '@/lib/position-aware-automation';
+import { simpleAutomation } from '@/lib/simple-automation';
 
 export async function POST() {
   try {
     console.log('🛑 AUTOMATION STOP: Request received');
     
-    const result = await positionAwareAutomation.stop();
+    const result = await simpleAutomation.stop();
     
     // Additional cleanup
     try {

app/api/enhanced-screenshot/route.js

@@ -0,0 +1,165 @@
+import { NextResponse } from 'next/server'
+import { superiorScreenshotService } from '../../../lib/superior-screenshot-service'
+import { aiAnalysisService } from '../../../lib/ai-analysis'
+import { progressTracker } from '../../../lib/progress-tracker'
+
+export async function POST(request) {
+  let sessionId = null
+  
+  try {
+    const body = await request.json()
+    console.log('🔍 Enhanced Screenshot API request:', body)
+
+    const config = {
+      symbol: body.symbol || 'SOLUSD',
+      timeframe: body.timeframe || '240',
+      layouts: body.layouts || ['ai', 'diy'],
+      analyze: body.analyze === true
+    }
+
+    // Create session for progress tracking
+    sessionId = progressTracker.createSession()
+    config.sessionId = sessionId
+    
+    console.log(`🔍 Created session ${sessionId} for enhanced screenshot`)
+
+    // Initialize progress steps
+    progressTracker.initializeSteps(sessionId, [
+      { id: 'init', name: 'Initialize', status: 'active' },
+      { id: 'auth', name: 'Authentication', status: 'pending' },
+      { id: 'loading', name: 'Loading Chart', status: 'pending' },
+      { id: 'capture', name: 'Capture Screenshot', status: 'pending' },
+      { id: 'analysis', name: 'AI Analysis', status: 'pending' }
+    ])
+
+    let screenshots = []
+    let analysis = null
+
+    // Capture screenshots using superior parallel technique
+    try {
+      console.log('🚀 Starting superior screenshot capture...')
+      
+      // Use single timeframe capture for backwards compatibility
+      const screenshotPaths = await superiorScreenshotService.captureQuick(
+        config.symbol, 
+        config.timeframe, 
+        config.layouts
+      )
+      
+      screenshots = screenshotPaths
+      console.log('📸 Superior screenshot capture completed:', screenshots.length, 'files')
+    } catch (screenshotError) {
+      console.error('❌ Superior screenshot capture failed:', screenshotError)
+      throw new Error(`Screenshot capture failed: ${screenshotError.message}`)
+    }
+
+    // Run AI analysis if requested
+    if (config.analyze && screenshots.length > 0) {
+      try {
+        console.log('🤖 Starting AI analysis...')
+        progressTracker.updateStep(sessionId, 'analysis', 'active', 'Analyzing screenshots...')
+        
+        const analysisConfig = {
+          sessionId,
+          screenshots,
+          symbol: config.symbol,
+          timeframe: config.timeframe,
+          layouts: config.layouts
+        }
+        
+        analysis = await aiAnalysisService.analyzeScreenshots(analysisConfig)
+        
+        if (analysis) {
+          progressTracker.updateStep(sessionId, 'analysis', 'completed', 'Analysis completed successfully')
+          console.log('✅ AI analysis completed')
+        } else {
+          progressTracker.updateStep(sessionId, 'analysis', 'error', 'Analysis failed to return results')
+          console.warn('⚠️ AI analysis completed but returned no results')
+        }
+        
+      } catch (analysisError) {
+        console.error('❌ AI analysis failed:', analysisError)
+        progressTracker.updateStep(sessionId, 'analysis', 'error', analysisError.message)
+        // Don't throw - return partial results with screenshots
+        analysis = { error: analysisError.message }
+      }
+    }
+
+    console.log('📸 Final screenshots:', screenshots)
+
+    const result = {
+      success: true,
+      sessionId,
+      timestamp: Date.now(),
+      symbol: config.symbol,
+      layouts: config.layouts,
+      timeframes: [config.timeframe],
+      screenshots,
+      analysis,
+      message: `Successfully captured ${screenshots.length} screenshot(s)${config.analyze ? ' with AI analysis' : ''}`
+    }
+
+    console.log('✅ Enhanced screenshot API completed successfully')
+    return NextResponse.json(result)
+
+  } catch (error) {
+    console.error('❌ Enhanced screenshot API error:', error)
+    
+    if (sessionId) {
+      // Mark any active step as error
+      const progress = progressTracker.getProgress(sessionId)
+      if (progress) {
+        const activeStep = progress.steps.find(step => step.status === 'active')
+        if (activeStep) {
+          progressTracker.updateStep(sessionId, activeStep.id, 'error', error.message)
+        }
+      }
+    }
+
+    return NextResponse.json({
+      success: false,
+      error: error.message,
+      timestamp: Date.now(),
+      sessionId
+    }, { status: 500 })
+    
+  } finally {
+    // CRITICAL: Always run cleanup in finally block
+    console.log('🧹 FINALLY BLOCK: Running superior screenshot service cleanup...')
+    
+    try {
+      // Force cleanup all browser sessions (API-managed, no action needed)
+      await superiorScreenshotService.cleanup()
+      console.log('✅ FINALLY BLOCK: Superior screenshot service cleanup completed')
+      
+      // Also run aggressive cleanup to ensure no processes remain
+      const { automatedCleanupService } = await import('../../../lib/automated-cleanup-service')
+      await automatedCleanupService.forceCleanup()
+      console.log('✅ FINALLY BLOCK: Automated cleanup completed')
+      
+    } catch (cleanupError) {
+      console.error('❌ FINALLY BLOCK: Error during cleanup:', cleanupError)
+    }
+    
+    // Clean up progress session after delay to allow frontend to read final state
+    if (sessionId) {
+      setTimeout(() => {
+        try {
+          progressTracker.deleteSession(sessionId)
+          console.log(`🗑️ Cleaned up session ${sessionId}`)
+        } catch (sessionCleanupError) {
+          console.error('Error cleaning up session:', sessionCleanupError)
+        }
+      }, 30000) // 30 second delay
+    }
+  }
+}
+
+export async function GET() {
+  return NextResponse.json({
+    message: 'Enhanced Screenshot API - use POST method for analysis',
+    endpoints: {
+      POST: '/api/enhanced-screenshot - Run analysis with parameters'
+    }
+  })
+}

app/automation-v2/page-clean.js

@@ -0,0 +1,444 @@
+'use client'
+import React, { useState, useEffect } from 'react'
+
+// Available timeframes for automation (matching analysis page format)
+const timeframes = [
+  { label: '5m', value: '5' },
+  { label: '15m', value: '15' },
+  { label: '30m', value: '30' },
+  { label: '1h', value: '60' },
+  { label: '2h', value: '120' },
+  { label: '4h', value: '240' },
+  { label: '1d', value: 'D' },
+]
+
+export default function AutomationPageV2() {
+  const [config, setConfig] = useState({
+    mode: 'SIMULATION',
+    dexProvider: 'DRIFT',
+    symbol: 'SOLUSD',
+    selectedTimeframes: ['60'], // Multi-timeframe support
+    tradingAmount: 100,
+    balancePercentage: 50, // Default to 50% of available balance
+  })
+
+  const [status, setStatus] = useState(null)
+  const [balance, setBalance] = useState(null)
+  const [positions, setPositions] = useState([])
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    fetchStatus()
+    fetchBalance()
+    fetchPositions()
+    
+    const interval = setInterval(() => {
+      fetchStatus()
+      fetchBalance()
+      fetchPositions()
+    }, 30000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const toggleTimeframe = (timeframe) => {
+    setConfig(prev => ({
+      ...prev,
+      selectedTimeframes: prev.selectedTimeframes.includes(timeframe)
+        ? prev.selectedTimeframes.filter(tf => tf !== timeframe)
+        : [...prev.selectedTimeframes, timeframe]
+    }))
+  }
+
+  const fetchStatus = async () => {
+    try {
+      const response = await fetch('/api/automation/status')
+      const data = await response.json()
+      if (data.success) {
+        setStatus(data.status)
+      }
+    } catch (error) {
+      console.error('Failed to fetch status:', error)
+    }
+  }
+
+  const fetchBalance = async () => {
+    try {
+      const response = await fetch('/api/drift/balance')
+      const data = await response.json()
+      if (data.success) {
+        setBalance(data)
+      }
+    } catch (error) {
+      console.error('Failed to fetch balance:', error)
+    }
+  }
+
+  const fetchPositions = async () => {
+    try {
+      const response = await fetch('/api/drift/positions')
+      const data = await response.json()
+      if (data.success) {
+        setPositions(data.positions || [])
+      }
+    } catch (error) {
+      console.error('Failed to fetch positions:', error)
+    }
+  }
+
+  const handleStart = async () => {
+    console.log('🚀 Starting automation...')
+    setLoading(true)
+    try {
+      if (config.selectedTimeframes.length === 0) {
+        console.error('No timeframes selected')
+        setLoading(false)
+        return
+      }
+
+      const automationConfig = {
+        symbol: config.symbol,
+        selectedTimeframes: config.selectedTimeframes,
+        mode: config.mode,
+        tradingAmount: config.tradingAmount,
+        leverage: config.leverage,
+        stopLoss: config.stopLoss,
+        takeProfit: config.takeProfit
+      }
+
+      const response = await fetch('/api/automation/start', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(automationConfig)
+      })
+      
+      const data = await response.json()
+      
+      if (data.success) {
+        console.log('✅ Automation started successfully')
+        fetchStatus()
+      } else {
+        console.error('Failed to start automation:', data.error)
+      }
+    } catch (error) {
+      console.error('Failed to start automation:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleStop = async () => {
+    console.log('🛑 Stopping automation...')
+    setLoading(true)
+    try {
+      const response = await fetch('/api/automation/stop', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' }
+      })
+      
+      const data = await response.json()
+      
+      if (data.success) {
+        console.log('✅ Automation stopped successfully')
+        fetchStatus()
+      } else {
+        console.error('Failed to stop automation:', data.error)
+      }
+    } catch (error) {
+      console.error('Failed to stop automation:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header with Start/Stop */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-white">Automated Trading</h1>
+          <p className="text-gray-400 mt-1">Multi-Timeframe Analysis</p>
+        </div>
+        <div className="flex space-x-3">
+          {status?.isActive ? (
+            <button
+              onClick={handleStop}
+              disabled={loading}
+              className="px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50 font-semibold"
+            >
+              {loading ? 'Stopping...' : 'STOP'}
+            </button>
+          ) : (
+            <button
+              onClick={handleStart}
+              disabled={loading}
+              className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50 font-semibold"
+            >
+              {loading ? 'Starting...' : 'START'}
+            </button>
+          )}
+        </div>
+      </div>
+      
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+        {/* Configuration Panel */}
+        <div className="xl:col-span-2 space-y-6">
+          <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
+            <h3 className="text-xl font-bold text-white mb-6">Configuration</h3>
+            
+            {/* Trading Mode */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+              <div className="space-y-3">
+                <label className="block text-sm font-bold text-blue-400">Trading Mode</label>
+                <div className="space-y-2">
+                  <label className="flex items-center space-x-3 cursor-pointer p-3 rounded-lg border border-gray-600 hover:border-blue-500 transition-colors">
+                    <input 
+                      type="radio" 
+                      className="w-4 h-4 text-blue-600" 
+                      name="mode" 
+                      checked={config.mode === 'SIMULATION'}
+                      onChange={() => setConfig({...config, mode: 'SIMULATION'})}
+                      disabled={status?.isActive}
+                    />
+                    <span className="text-white">Paper Trading</span>
+                  </label>
+                  <label className="flex items-center space-x-3 cursor-pointer p-3 rounded-lg border border-gray-600 hover:border-green-500 transition-colors">
+                    <input 
+                      type="radio" 
+                      className="w-4 h-4 text-green-600" 
+                      name="mode" 
+                      checked={config.mode === 'LIVE'}
+                      onChange={() => setConfig({...config, mode: 'LIVE'})}
+                      disabled={status?.isActive}
+                    />
+                    <span className="text-white font-semibold">Live Trading</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+
+            {/* Symbol and Position Size */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-2">Symbol</label>
+                <select
+                  className="w-full p-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:border-blue-500"
+                  value={config.symbol}
+                  onChange={(e) => setConfig({...config, symbol: e.target.value})}
+                  disabled={status?.isActive}
+                >
+                  <option value="SOLUSD">SOL/USD</option>
+                  <option value="BTCUSD">BTC/USD</option>
+                  <option value="ETHUSD">ETH/USD</option>
+                  <option value="APTUSD">APT/USD</option>
+                  <option value="AVAXUSD">AVAX/USD</option>
+                  <option value="DOGEUSD">DOGE/USD</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-2">
+                  Balance to Use: {config.balancePercentage}% 
+                  {balance && ` ($${(parseFloat(balance.availableBalance) * config.balancePercentage / 100).toFixed(2)})`}
+                </label>
+                <input
+                  type="range"
+                  className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
+                  style={{
+                    background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${config.balancePercentage}%, #374151 ${config.balancePercentage}%, #374151 100%)`
+                  }}
+                  min="10"
+                  max="100"
+                  step="5"
+                  value={config.balancePercentage}
+                  onChange={(e) => {
+                    const percentage = parseFloat(e.target.value);
+                    const newAmount = balance ? (parseFloat(balance.availableBalance) * percentage / 100) : 100;
+                    setConfig({
+                      ...config, 
+                      balancePercentage: percentage,
+                      tradingAmount: Math.round(newAmount)
+                    });
+                  }}
+                  disabled={status?.isActive}
+                />
+                <div className="flex justify-between text-xs text-gray-400 mt-1">
+                  <span>10%</span>
+                  <span>50%</span>
+                  <span>100%</span>
+                </div>
+              </div>
+            </div>
+
+            {/* MULTI-TIMEFRAME SELECTION */}
+            <div className="mb-6">
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Analysis Timeframes
+                <span className="text-xs text-cyan-400 ml-2">({config.selectedTimeframes.length} selected)</span>
+                {config.selectedTimeframes.length === 0 && (
+                  <span className="text-xs text-red-400 ml-2">⚠️ At least one timeframe required</span>
+                )}
+              </label>
+              
+              {/* Timeframe Checkboxes */}
+              <div className="grid grid-cols-4 gap-2 mb-3">
+                {timeframes.map(tf => (
+                  <label key={tf.value} className="group relative cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={config.selectedTimeframes.includes(tf.value)}
+                      onChange={() => toggleTimeframe(tf.value)}
+                      disabled={status?.isActive}
+                      className="sr-only"
+                    />
+                    <div className={`flex items-center justify-center p-2 rounded-lg border transition-all text-xs font-medium ${
+                      config.selectedTimeframes.includes(tf.value)
+                        ? 'border-cyan-500 bg-cyan-500/10 text-cyan-300 shadow-lg shadow-cyan-500/20'
+                        : status?.isActive
+                        ? 'border-gray-700 bg-gray-800/30 text-gray-500 cursor-not-allowed'
+                        : 'border-gray-700 bg-gray-800/30 text-gray-400 hover:border-gray-600 hover:bg-gray-800/50 hover:text-gray-300'
+                    }`}>
+                      {tf.label}
+                      {config.selectedTimeframes.includes(tf.value) && (
+                        <div className="absolute top-0.5 right-0.5 w-1.5 h-1.5 bg-cyan-400 rounded-full"></div>
+                      )}
+                    </div>
+                  </label>
+                ))}
+              </div>
+
+              {/* Selected Timeframes Display */}
+              {config.selectedTimeframes.length > 0 && (
+                <div className="p-2 bg-gray-800/30 rounded-lg mb-3">
+                  <div className="text-xs text-gray-400">
+                    Selected: <span className="text-cyan-400">
+                      {config.selectedTimeframes.map(tf => timeframes.find(t => t.value === tf)?.label || tf).filter(Boolean).join(', ')}
+                    </span>
+                  </div>
+                  <div className="text-xs text-gray-500 mt-1">
+                    💡 Multiple timeframes provide more robust analysis
+                  </div>
+                </div>
+              )}
+              
+              {/* Quick Selection Buttons */}
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => setConfig({...config, selectedTimeframes: ['5', '15', '30']})}
+                  disabled={status?.isActive}
+                  className="py-1 px-2 rounded text-xs font-medium bg-green-600/20 text-green-300 hover:bg-green-600/30 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  📈 Scalping
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setConfig({...config, selectedTimeframes: ['60', '120']})}
+                  disabled={status?.isActive}
+                  className="py-1 px-2 rounded text-xs font-medium bg-blue-600/20 text-blue-300 hover:bg-blue-600/30 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  ⚡ Day Trading
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setConfig({...config, selectedTimeframes: ['240', 'D']})}
+                  disabled={status?.isActive}
+                  className="py-1 px-2 rounded text-xs font-medium bg-purple-600/20 text-purple-300 hover:bg-purple-600/30 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  🎯 Swing Trading
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Status and Info Panel */}
+        <div className="space-y-6">
+          {/* Status */}
+          <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
+            <h3 className="text-lg font-bold text-white mb-4">Bot Status</h3>
+            
+            <div className="space-y-3">
+              <div className="flex justify-between items-center">
+                <span className="text-gray-400">Status:</span>
+                <span className={`px-2 py-1 rounded text-xs font-semibold ${
+                  status?.isActive ? 'bg-green-600 text-white' : 'bg-gray-600 text-gray-300'
+                }`}>
+                  {status?.isActive ? 'RUNNING' : 'STOPPED'}
+                </span>
+              </div>
+              
+              {status?.isActive && (
+                <>
+                  <div className="flex justify-between items-center">
+                    <span className="text-gray-400">Symbol:</span>
+                    <span className="text-white font-medium">{status.symbol}</span>
+                  </div>
+                  
+                  <div className="flex justify-between items-center">
+                    <span className="text-gray-400">Mode:</span>
+                    <span className={`px-2 py-1 rounded text-xs font-semibold ${
+                      status.mode === 'LIVE' ? 'bg-red-600 text-white' : 'bg-blue-600 text-white'
+                    }`}>
+                      {status.mode}
+                    </span>
+                  </div>
+                  
+                  <div className="flex justify-between items-center">
+                    <span className="text-gray-400">Timeframes:</span>
+                    <span className="text-cyan-400 text-xs">
+                      {status.timeframes?.map(tf => timeframes.find(t => t.value === tf)?.label || tf).join(', ')}
+                    </span>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* Balance */}
+          {balance && (
+            <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
+              <h3 className="text-lg font-bold text-white mb-4">Account Balance</h3>
+              
+              <div className="space-y-3">
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-400">Available:</span>
+                  <span className="text-green-400 font-semibold">${balance.availableBalance}</span>
+                </div>
+                
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-400">Total:</span>
+                  <span className="text-white font-medium">${balance.totalCollateral}</span>
+                </div>
+                
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-400">Positions:</span>
+                  <span className="text-yellow-400">{balance.positions || 0}</span>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Positions */}
+          {positions.length > 0 && (
+            <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
+              <h3 className="text-lg font-bold text-white mb-4">Open Positions</h3>
+              
+              <div className="space-y-2">
+                {positions.map((position, index) => (
+                  <div key={index} className="flex justify-between items-center p-2 bg-gray-700 rounded">
+                    <span className="text-white">{position.symbol}</span>
+                    <span className={`font-semibold ${
+                      position.side === 'LONG' ? 'text-green-400' : 'text-red-400'
+                    }`}>
+                      {position.side} ${position.size}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

app/automation-v2/page.js

@@ -1,6 +1,5 @@
 'use client'
 import React, { useState, useEffect } from 'react'
-import PositionMonitor from '../components/PositionMonitor.tsx'
 
 // Available timeframes for automation (matching analysis page format)
 const timeframes = [
@@ -156,10 +155,7 @@ export default function AutomationPageV2() {
   }
 
   return (
-    <div className="space-y-8">
-      {/* Position Monitor - Real-time Trading Overview */}
-      <PositionMonitor />
-      
+    <div className="space-y-6">
       <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
         {/* Configuration Panel */}
         <div className="xl:col-span-2 space-y-6">
@@ -168,16 +164,6 @@ export default function AutomationPageV2() {
             <div className="flex items-center justify-between mb-6">
               <h3 className="text-xl font-bold text-white">Configuration</h3>
               <div className="flex space-x-3">
-                {/* Emergency Stop Button - Always Available */}
-                <button
-                  onClick={handleStop}
-                  disabled={loading}
-                  className="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors disabled:opacity-50 font-semibold text-sm border-2 border-orange-500"
-                  title="Emergency Stop - Immediately stops all automation"
-                >
-                  🚨 EMERGENCY STOP
-                </button>
-                
                 {status?.isActive ? (
                   <button
                     onClick={handleStop}

app/components/PositionMonitor.tsx

@@ -106,13 +106,10 @@ export default function PositionMonitor() {
   return (
     <div className="space-y-6">
       {/* Header */}
-      <div className="bg-gray-800 rounded-lg p-4 border border-gray-700">
+      <div className="bg-gray-50 rounded-lg p-4">
         <div className="flex justify-between items-center">
-          <h2 className="text-lg font-semibold text-white flex items-center">
-            <span className="mr-2">🔍</span>
-            Position Monitor
-          </h2>
-          <span className="text-sm text-gray-400">
+          <h2 className="text-lg font-semibold text-gray-800">🔍 Position Monitor</h2>
+          <span className="text-sm text-gray-500">
             Last update: {lastUpdate.toLocaleTimeString()}
           </span>
         </div>
@@ -120,167 +117,139 @@ export default function PositionMonitor() {
 
       {/* Position Status */}
       {monitorData?.hasPosition && monitorData.position ? (
-        <div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
-          <h3 className="text-lg font-medium text-white mb-4 flex items-center">
-            <span className="mr-2">📊</span>
-            Active Position
-          </h3>
+        <div className="bg-white border rounded-lg p-6">
+          <h3 className="text-lg font-medium text-gray-900 mb-4">📊 Active Position</h3>
           
           <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-            <div className="bg-gray-900/50 p-3 rounded-lg">
-              <p className="text-sm text-gray-400">Symbol & Side</p>
-              <p className="font-medium text-white">{monitorData.position.symbol}</p>
-              <p className={`text-sm font-semibold ${monitorData.position.side === 'short' ? 'text-red-400' : 'text-green-400'}`}>
-                {monitorData.position.side.toUpperCase()}
-              </p>
+            <div>
+              <p className="text-sm text-gray-500">Symbol & Side</p>
+              <p className="font-medium">{monitorData.position.symbol} | {monitorData.position.side.toUpperCase()}</p>
             </div>
-            <div className="bg-gray-900/50 p-3 rounded-lg">
-              <p className="text-sm text-gray-400">Size</p>
-              <p className="font-medium text-white">{monitorData.position.size} SOL</p>
+            <div>
+              <p className="text-sm text-gray-500">Size</p>
+              <p className="font-medium">{monitorData.position.size} SOL</p>
             </div>
-            <div className="bg-gray-900/50 p-3 rounded-lg">
-              <p className="text-sm text-gray-400">Entry Price</p>
-              <p className="font-medium text-white">${monitorData.position.entryPrice.toFixed(4)}</p>
+            <div>
+              <p className="text-sm text-gray-500">Entry Price</p>
+              <p className="font-medium">${monitorData.position.entryPrice.toFixed(4)}</p>
             </div>
-            <div className="bg-gray-900/50 p-3 rounded-lg">
-              <p className="text-sm text-gray-400">Current Price</p>
-              <p className="font-medium text-white">${monitorData.position.currentPrice.toFixed(4)}</p>
+            <div>
+              <p className="text-sm text-gray-500">Current Price</p>
+              <p className="font-medium">${monitorData.position.currentPrice.toFixed(4)}</p>
             </div>
-            <div className="bg-gray-900/50 p-3 rounded-lg">
-              <p className="text-sm text-gray-400">P&L</p>
-              <p className={`font-medium ${monitorData.position.unrealizedPnl >= 0 ? 'text-green-400' : 'text-red-400'}`}>
+            <div>
+              <p className="text-sm text-gray-500">P&L</p>
+              <p className={`font-medium ${monitorData.position.unrealizedPnl >= 0 ? 'text-green-600' : 'text-red-600'}`}>
                 {monitorData.position.unrealizedPnl >= 0 ? '+' : ''}${monitorData.position.unrealizedPnl.toFixed(2)}
               </p>
             </div>
-            <div className="bg-gray-900/50 p-3 rounded-lg">
-              <p className="text-sm text-gray-400">Notional Value</p>
-              <p className="font-medium text-white">${monitorData.position.notionalValue.toFixed(2)}</p>
+            <div>
+              <p className="text-sm text-gray-500">Notional Value</p>
+              <p className="font-medium">${monitorData.position.notionalValue.toFixed(2)}</p>
             </div>
           </div>
 
           {/* Stop Loss Section */}
           {monitorData.stopLossProximity && (
-            <div className="mt-6 p-4 bg-gray-900/30 rounded-lg border border-gray-600">
-              <h4 className="font-medium text-white mb-3 flex items-center">
-                <span className="mr-2">🤖</span>
-                AI Autonomous Risk Management
-              </h4>
+            <div className="mt-6 p-4 bg-gray-50 rounded-lg">
+              <h4 className="font-medium text-gray-900 mb-3">🛡️ Stop Loss Protection</h4>
               
               <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div className="bg-gray-800/50 p-3 rounded-lg">
-                  <p className="text-sm text-gray-400">Stop Loss Price</p>
-                  <p className="font-medium text-white">${monitorData.stopLossProximity.stopLossPrice.toFixed(4)}</p>
+                <div>
+                  <p className="text-sm text-gray-500">Stop Loss Price</p>
+                  <p className="font-medium">${monitorData.stopLossProximity.stopLossPrice.toFixed(4)}</p>
                 </div>
-                <div className="bg-gray-800/50 p-3 rounded-lg">
-                  <p className="text-sm text-gray-400">Distance</p>
-                  <p className="font-medium text-white">{monitorData.stopLossProximity.distancePercent}% away</p>
+                <div>
+                  <p className="text-sm text-gray-500">Distance</p>
+                  <p className="font-medium">{monitorData.stopLossProximity.distancePercent}% away</p>
                 </div>
-                <div className="bg-gray-800/50 p-3 rounded-lg">
-                  <p className="text-sm text-gray-400">AI Status</p>
+                <div>
+                  <p className="text-sm text-gray-500">Status</p>
                   {(() => {
                     const status = getStopLossStatus(monitorData.stopLossProximity.distancePercent);
-                    const aiActions: Record<string, { text: string; color: string }> = {
-                      'DANGER': { text: '🚨 Emergency Analysis', color: 'text-red-400' },
-                      'WARNING': { text: '⚠️ Position Review', color: 'text-yellow-400' },
-                      'CAUTION': { text: '🟡 Enhanced Watch', color: 'text-yellow-400' },
-                      'SAFE': { text: '✅ Opportunity Scan', color: 'text-green-400' }
-                    };
-                    const aiAction = aiActions[status.text] || aiActions['SAFE'];
                     return (
-                      <p className={`font-medium ${aiAction.color}`}>
-                        {aiAction.text}
+                      <p className={`font-medium ${status.color}`}>
+                        {status.icon} {status.text}
                       </p>
                     );
                   })()}
                 </div>
               </div>
               
-              <div className="mt-3 bg-gray-800/30 p-3 rounded-lg">
-                <p className="text-sm text-gray-400">AI Action Plan</p>
-                <p className="font-medium text-blue-400">
-                  {monitorData.nextAction || 'AI monitoring position autonomously'}
+              <div className="mt-3">
+                <p className="text-sm text-gray-500">Risk Level</p>
+                <p className={`font-medium ${getRiskColor(monitorData.riskLevel)}`}>
+                  {monitorData.riskLevel}
                 </p>
               </div>
 
               {monitorData.stopLossProximity.isNear && (
-                <div className="mt-4 p-3 bg-blue-900/30 border border-blue-500/30 rounded-lg">
-                  <p className="text-blue-300 font-medium">🤖 AI TAKING ACTION: Autonomous risk management activated!</p>
-                  <p className="text-blue-400 text-sm mt-1">No manual intervention required - enjoy your beach time! 🏖️</p>
+                <div className="mt-4 p-3 bg-red-100 border border-red-300 rounded-lg">
+                  <p className="text-red-700 font-medium">🚨 ALERT: Price is near stop loss!</p>
                 </div>
               )}
             </div>
           )}
         </div>
       ) : (
-        <div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
+        <div className="bg-white border rounded-lg p-6">
           <div className="text-center py-8">
-            <p className="text-gray-400 text-lg flex items-center justify-center">
-              <span className="mr-2">📊</span>
-              No Open Positions
-            </p>
-            <p className="text-gray-500 mt-2">Scanning for opportunities...</p>
+            <p className="text-gray-500 text-lg">📊 No Open Positions</p>
+            <p className="text-gray-400 mt-2">Scanning for opportunities...</p>
           </div>
         </div>
       )}
 
       {/* Automation Status */}
-      <div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
-        <h3 className="text-lg font-medium text-white mb-4 flex items-center">
-          <span className="mr-2">🤖</span>
-          Automation Status
-        </h3>
+      <div className="bg-white border rounded-lg p-6">
+        <h3 className="text-lg font-medium text-gray-900 mb-4">🤖 Automation Status</h3>
         
         {automationStatus?.isActive ? (
           <div className="space-y-4">
             <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              <div className="bg-gray-900/50 p-3 rounded-lg">
-                <p className="text-sm text-gray-400">Status</p>
-                <p className="font-medium text-green-400 flex items-center">
-                  <span className="w-2 h-2 bg-green-400 rounded-full mr-2"></span>
-                  ACTIVE
-                </p>
+              <div>
+                <p className="text-sm text-gray-500">Status</p>
+                <p className="font-medium text-green-600">✅ ACTIVE</p>
               </div>
-              <div className="bg-gray-900/50 p-3 rounded-lg">
-                <p className="text-sm text-gray-400">Mode</p>
-                <p className={`font-medium ${automationStatus.mode === 'LIVE' ? 'text-red-400' : 'text-blue-400'}`}>
-                  {automationStatus.mode}
-                </p>
+              <div>
+                <p className="text-sm text-gray-500">Mode</p>
+                <p className="font-medium">{automationStatus.mode}</p>
               </div>
-              <div className="bg-gray-900/50 p-3 rounded-lg">
-                <p className="text-sm text-gray-400">Strategy</p>
-                <p className="font-medium text-white">Scalping</p>
+              <div>
+                <p className="text-sm text-gray-500">Strategy</p>
+                <p className="font-medium">Scalping</p>
               </div>
-              <div className="bg-gray-900/50 p-3 rounded-lg">
-                <p className="text-sm text-gray-400">Symbol</p>
-                <p className="font-medium text-white">{automationStatus.symbol}</p>
+              <div>
+                <p className="text-sm text-gray-500">Symbol</p>
+                <p className="font-medium">{automationStatus.symbol}</p>
               </div>
             </div>
             
             <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              <div className="bg-gray-900/50 p-3 rounded-lg">
-                <p className="text-sm text-gray-400">Timeframes</p>
-                <p className="font-medium text-cyan-400">{automationStatus.timeframes?.join(', ') || 'N/A'}</p>
+              <div>
+                <p className="text-sm text-gray-500">Timeframes</p>
+                <p className="font-medium">{automationStatus.timeframes?.join(', ') || 'N/A'}</p>
               </div>
-              <div className="bg-gray-900/50 p-3 rounded-lg">
-                <p className="text-sm text-gray-400">Cycles</p>
-                <p className="font-medium text-white">{automationStatus.totalCycles}</p>
+              <div>
+                <p className="text-sm text-gray-500">Cycles</p>
+                <p className="font-medium">{automationStatus.totalCycles}</p>
               </div>
-              <div className="bg-gray-900/50 p-3 rounded-lg">
-                <p className="text-sm text-gray-400">Trades</p>
-                <p className="font-medium text-white">{automationStatus.totalTrades}</p>
+              <div>
+                <p className="text-sm text-gray-500">Trades</p>
+                <p className="font-medium">{automationStatus.totalTrades}</p>
               </div>
-              <div className="bg-gray-900/50 p-3 rounded-lg">
-                <p className="text-sm text-gray-400">Errors</p>
-                <p className={`font-medium ${automationStatus.consecutiveErrors > 0 ? 'text-yellow-400' : 'text-green-400'}`}>
+              <div>
+                <p className="text-sm text-gray-500">Errors</p>
+                <p className={`font-medium ${automationStatus.consecutiveErrors > 0 ? 'text-yellow-600' : 'text-green-600'}`}>
                   {automationStatus.consecutiveErrors}/3
                 </p>
               </div>
             </div>
 
             {automationStatus.lastActivity && (
-              <div className="bg-gray-900/30 p-3 rounded-lg">
-                <p className="text-sm text-gray-400">Last Activity</p>
-                <p className="font-medium text-white">
+              <div>
+                <p className="text-sm text-gray-500">Last Activity</p>
+                <p className="font-medium">
                   {new Date(automationStatus.lastActivity).toLocaleString()}
                 </p>
               </div>
@@ -288,10 +257,7 @@ export default function PositionMonitor() {
           </div>
         ) : (
           <div className="text-center py-4">
-            <p className="text-red-400 font-medium flex items-center justify-center">
-              <span className="w-2 h-2 bg-red-400 rounded-full mr-2"></span>
-              STOPPED
-            </p>
+            <p className="text-red-600 font-medium">❌ STOPPED</p>
             <p className="text-gray-500 mt-2">{automationStatus?.detailedStatus}</p>
           </div>
         )}