fix 1s 1m chart less candles ;

fix vertical zoom

ANNOTATE/core/real_training_adapter.py

@@ -2430,13 +2430,14 @@ class RealTrainingAdapter:
         if not hasattr(self, 'inference_sessions'):
             self.inference_sessions = {}
         
-        # Create inference session
+        # Create inference session with position tracking
         self.inference_sessions[inference_id] = {
             'model_name': model_name,
             'symbol': symbol,
             'status': 'running',
             'start_time': time.time(),
-            'signals': [],
+            'signals': [],  # All signals (including rejected ones)
+            'executed_trades': [],  # Only executed trades (open/close positions)
             'stop_flag': False,
             'live_training_enabled': enable_live_training,
             'train_every_candle': train_every_candle,
@@ -2447,7 +2448,13 @@ class RealTrainingAdapter:
                 'loss': 0.0,
                 'steps': 0
             },
-            'last_candle_time': None
+            'last_candle_time': None,
+            # Position tracking
+            'position': None,  # {'type': 'long/short', 'entry_price': float, 'entry_time': str, 'entry_id': str}
+            'total_pnl': 0.0,
+            'win_count': 0,
+            'loss_count': 0,
+            'total_trades': 0
         }
         
         training_mode = "per-candle" if train_every_candle else ("pivot-based" if enable_live_training else "inference-only")
@@ -3211,13 +3218,39 @@ class RealTrainingAdapter:
                             'predicted_candle': prediction.get('predicted_candle')
                         }
                         
+                        # Store signal (all signals, including rejected ones)
                         session['signals'].append(signal)
                         
                         # Keep only last 100 signals
                         if len(session['signals']) > 100:
                             session['signals'] = session['signals'][-100:]
                         
-                        logger.info(f"Live Signal: {signal['action']} @ {signal['price']:.2f} (conf: {signal['confidence']:.2f})")
+                        # Execute trade logic (only if confidence is high enough and position logic allows)
+                        executed_trade = self._execute_realtime_trade(session, signal, current_price)
+                        
+                        if executed_trade:
+                            logger.info(f"Live Trade EXECUTED: {executed_trade['action']} @ {executed_trade['price']:.2f} (conf: {signal['confidence']:.2f})")
+                            
+                            # Send executed trade to frontend via WebSocket
+                            if hasattr(self, 'socketio') and self.socketio:
+                                self.socketio.emit('executed_trade', {
+                                    'trade': executed_trade,
+                                    'position_state': {
+                                        'has_position': session['position'] is not None,
+                                        'position_type': session['position']['type'] if session['position'] else None,
+                                        'entry_price': session['position']['entry_price'] if session['position'] else None,
+                                        'unrealized_pnl': self._calculate_unrealized_pnl(session, current_price) if session['position'] else 0.0
+                                    },
+                                    'session_metrics': {
+                                        'total_pnl': session['total_pnl'],
+                                        'total_trades': session['total_trades'],
+                                        'win_count': session['win_count'],
+                                        'loss_count': session['loss_count'],
+                                        'win_rate': (session['win_count'] / session['total_trades'] * 100) if session['total_trades'] > 0 else 0
+                                    }
+                                })
+                        else:
+                            logger.info(f"Live Signal (NOT executed): {signal['action']} @ {signal['price']:.2f} (conf: {signal['confidence']:.2f}) - {self._get_rejection_reason(session, signal)}")
                         
                         # Store prediction for visualization
                         if self.orchestrator and hasattr(self.orchestrator, 'store_transformer_prediction'):
@@ -3250,3 +3283,173 @@ class RealTrainingAdapter:
             logger.error(f"Fatal error in inference loop: {e}")
             session['status'] = 'error'
             session['error'] = str(e)
+    
+    def _execute_realtime_trade(self, session: Dict, signal: Dict, current_price: float) -> Optional[Dict]:
+        """
+        Execute trade based on signal, respecting position management rules
+        
+        Rules:
+        1. Only execute if confidence >= 0.6
+        2. Only open new position if no position is currently open
+        3. Close position on opposite signal
+        4. Track all executed trades for visualization
+        
+        Returns:
+            Dict with executed trade info, or None if signal was rejected
+        """
+        action = signal['action']
+        confidence = signal['confidence']
+        timestamp = signal['timestamp']
+        
+        # Rule 1: Confidence threshold
+        if confidence < 0.6:
+            return None  # Rejected: low confidence
+        
+        # Rule 2 & 3: Position management
+        position = session.get('position')
+        
+        if action == 'BUY':
+            if position is None:
+                # Open long position
+                trade_id = str(uuid.uuid4())[:8]
+                session['position'] = {
+                    'type': 'long',
+                    'entry_price': current_price,
+                    'entry_time': timestamp,
+                    'entry_id': trade_id,
+                    'signal_confidence': confidence
+                }
+                
+                executed_trade = {
+                    'trade_id': trade_id,
+                    'action': 'OPEN_LONG',
+                    'price': current_price,
+                    'timestamp': timestamp,
+                    'confidence': confidence
+                }
+                
+                session['executed_trades'].append(executed_trade)
+                return executed_trade
+                
+            elif position['type'] == 'short':
+                # Close short position
+                entry_price = position['entry_price']
+                pnl = entry_price - current_price  # Short profit
+                pnl_pct = (pnl / entry_price) * 100
+                
+                executed_trade = {
+                    'trade_id': position['entry_id'],
+                    'action': 'CLOSE_SHORT',
+                    'price': current_price,
+                    'timestamp': timestamp,
+                    'confidence': confidence,
+                    'entry_price': entry_price,
+                    'entry_time': position['entry_time'],
+                    'pnl': pnl,
+                    'pnl_pct': pnl_pct
+                }
+                
+                # Update session metrics
+                session['total_pnl'] += pnl
+                session['total_trades'] += 1
+                if pnl > 0:
+                    session['win_count'] += 1
+                else:
+                    session['loss_count'] += 1
+                
+                session['position'] = None
+                session['executed_trades'].append(executed_trade)
+                
+                logger.info(f"Position CLOSED: SHORT @ {current_price:.2f}, PnL=${pnl:.2f} ({pnl_pct:+.2f}%)")
+                return executed_trade
+        
+        elif action == 'SELL':
+            if position is None:
+                # Open short position
+                trade_id = str(uuid.uuid4())[:8]
+                session['position'] = {
+                    'type': 'short',
+                    'entry_price': current_price,
+                    'entry_time': timestamp,
+                    'entry_id': trade_id,
+                    'signal_confidence': confidence
+                }
+                
+                executed_trade = {
+                    'trade_id': trade_id,
+                    'action': 'OPEN_SHORT',
+                    'price': current_price,
+                    'timestamp': timestamp,
+                    'confidence': confidence
+                }
+                
+                session['executed_trades'].append(executed_trade)
+                return executed_trade
+                
+            elif position['type'] == 'long':
+                # Close long position
+                entry_price = position['entry_price']
+                pnl = current_price - entry_price  # Long profit
+                pnl_pct = (pnl / entry_price) * 100
+                
+                executed_trade = {
+                    'trade_id': position['entry_id'],
+                    'action': 'CLOSE_LONG',
+                    'price': current_price,
+                    'timestamp': timestamp,
+                    'confidence': confidence,
+                    'entry_price': entry_price,
+                    'entry_time': position['entry_time'],
+                    'pnl': pnl,
+                    'pnl_pct': pnl_pct
+                }
+                
+                # Update session metrics
+                session['total_pnl'] += pnl
+                session['total_trades'] += 1
+                if pnl > 0:
+                    session['win_count'] += 1
+                else:
+                    session['loss_count'] += 1
+                
+                session['position'] = None
+                session['executed_trades'].append(executed_trade)
+                
+                logger.info(f"Position CLOSED: LONG @ {current_price:.2f}, PnL=${pnl:.2f} ({pnl_pct:+.2f}%)")
+                return executed_trade
+        
+        # HOLD or position already open in same direction
+        return None
+    
+    def _get_rejection_reason(self, session: Dict, signal: Dict) -> str:
+        """Get reason why a signal was not executed"""
+        action = signal['action']
+        confidence = signal['confidence']
+        position = session.get('position')
+        
+        if confidence < 0.6:
+            return f"Low confidence ({confidence:.2f} < 0.6)"
+        
+        if action == 'HOLD':
+            return "HOLD signal (no trade)"
+        
+        if position:
+            if action == 'BUY' and position['type'] == 'long':
+                return "Already in LONG position"
+            elif action == 'SELL' and position['type'] == 'short':
+                return "Already in SHORT position"
+        
+        return "Unknown reason"
+    
+    def _calculate_unrealized_pnl(self, session: Dict, current_price: float) -> float:
+        """Calculate unrealized PnL for open position"""
+        position = session.get('position')
+        if not position or not current_price:
+            return 0.0
+        
+        entry_price = position['entry_price']
+        
+        if position['type'] == 'long':
+            return ((current_price - entry_price) / entry_price) * 100  # Percentage
+        else:  # short
+            return ((entry_price - current_price) / entry_price) * 100  # Percentage

ANNOTATE/web/app.py

@@ -538,6 +538,9 @@ class AnnotationDashboard:
                 engineio_logger=False
             )
             self.has_socketio = True
+            # Pass socketio to training adapter for live trade updates
+            if self.training_adapter:
+                self.training_adapter.socketio = self.socketio
             logger.info("SocketIO initialized for real-time updates")
         except ImportError:
             self.socketio = None
@@ -586,6 +589,8 @@ class AnnotationDashboard:
         self.annotation_manager = AnnotationManager()
         # Use REAL training adapter - NO SIMULATION!
         self.training_adapter = RealTrainingAdapter(None, self.data_provider)
+        # Pass socketio to training adapter for live trade updates
+        self.training_adapter.socketio = None  # Will be set after socketio initialization
         # Backtest runner for replaying visible chart with predictions
         self.backtest_runner = BacktestRunner()
         

ANNOTATE/web/static/js/chart_manager.js

@@ -17,6 +17,7 @@ class ChartManager {
         this.lastPredictionHash = null;  // Track if predictions actually changed
         this.ghostCandleHistory = {};  // Store ghost candles per timeframe (max 50 each)
         this.maxGhostCandles = 150;  // Maximum number of ghost candles to keep
+        this.modelAccuracyMetrics = {};  // Track overall model accuracy per timeframe
         
         // Helper to ensure all timestamps are in UTC
         this.normalizeTimestamp = (timestamp) => {
@@ -81,7 +82,8 @@ class ChartManager {
      */
     async updateChart(timeframe) {
         try {
-            const response = await fetch(`/api/chart-data?timeframe=${timeframe}&limit=1000`);
+            // Use consistent candle count across all timeframes (2500 for sufficient training context)
+            const response = await fetch(`/api/chart-data?timeframe=${timeframe}&limit=2500`);
             if (!response.ok) {
                 throw new Error(`HTTP ${response.status}`);
             }
@@ -109,7 +111,7 @@ class ChartManager {
                 Plotly.restyle(plotId, candlestickUpdate, [0]);
                 Plotly.restyle(plotId, volumeUpdate, [1]);
                 
-                console.log(`Updated ${timeframe} chart at ${new Date().toLocaleTimeString()}`);
+                console.log(`Updated ${timeframe} chart with ${chartData.timestamps.length} candles at ${new Date().toLocaleTimeString()}`);
             }
         } catch (error) {
             console.error(`Error updating ${timeframe} chart:`, error);
@@ -546,9 +548,9 @@ class ChartManager {
             plot_bgcolor: '#1f2937',
             paper_bgcolor: '#1f2937',
             font: { color: '#f8f9fa', size: 11 },
-            margin: { l: 60, r: 20, t: 10, b: 40 },
+            margin: { l: 80, r: 20, t: 10, b: 40 },  // Increased left margin for better Y-axis drag area
             hovermode: 'x unified',
-            dragmode: 'pan',
+            dragmode: 'pan',  // Pan mode for main chart area (horizontal panning)
             // Performance optimizations
             autosize: true,
             staticPlot: false
@@ -562,7 +564,7 @@ class ChartManager {
             scrollZoom: true,
             // Performance optimizations
             doubleClick: 'reset', // Enable double-click reset
-            showAxisDragHandles: true, // Enable axis dragging
+            showAxisDragHandles: true, // Enable axis dragging - allows Y-axis vertical zoom when dragging on Y-axis area
             showAxisRangeEntryBoxes: false
         };
 
@@ -711,6 +713,10 @@ class ChartManager {
         Plotly.newPlot(plotId, chartData, layout, config).then(() => {
             // Optimize rendering after initial plot
             plotElement._fullLayout._replotting = false;
+            
+            // Add custom handler for Y-axis vertical zoom
+            // When user drags on Y-axis area (left side), enable vertical zoom
+            this._setupYAxisZoom(plotElement, plotId, timeframe);
         });
 
         // Store chart reference
@@ -777,6 +783,134 @@ class ChartManager {
 
         console.log(`Chart created for ${timeframe} with ${data.timestamps.length} candles`);
     }
+    
+    /**
+     * Setup Y-axis vertical zoom handler
+     * Allows vertical zoom when dragging on the Y-axis area (left side of chart)
+     */
+    _setupYAxisZoom(plotElement, plotId, timeframe) {
+        let isDraggingYAxis = false;
+        let dragStartY = null;
+        let dragStartRange = null;
+        const Y_AXIS_MARGIN = 80;  // Left margin width in pixels
+        
+        // Mouse down handler - check if on Y-axis area
+        const handleMouseDown = (event) => {
+            const rect = plotElement.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            
+            // Check if click is in Y-axis area (left margin)
+            if (x < Y_AXIS_MARGIN) {
+                isDraggingYAxis = true;
+                dragStartY = event.clientY;
+                
+                // Get current Y-axis range
+                const layout = plotElement._fullLayout;
+                if (layout && layout.yaxis && layout.yaxis.range) {
+                    dragStartRange = {
+                        min: layout.yaxis.range[0],
+                        max: layout.yaxis.range[1],
+                        range: layout.yaxis.range[1] - layout.yaxis.range[0]
+                    };
+                }
+                
+                // Change cursor to indicate vertical zoom
+                plotElement.style.cursor = 'ns-resize';
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        
+        // Mouse move handler - handle vertical zoom and cursor update
+        const handleMouseMove = (event) => {
+            const rect = plotElement.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            
+            // Update cursor when hovering over Y-axis area (only if not dragging)
+            if (!isDraggingYAxis) {
+                if (x < Y_AXIS_MARGIN) {
+                    plotElement.style.cursor = 'ns-resize';
+                } else {
+                    plotElement.style.cursor = 'default';
+                }
+            }
+            
+            // Handle vertical zoom drag
+            if (isDraggingYAxis && dragStartY !== null && dragStartRange !== null) {
+                const deltaY = dragStartY - event.clientY;  // Negative = zoom in (drag up), Positive = zoom out (drag down)
+                const zoomFactor = 1 + (deltaY / 200);  // Adjust sensitivity (200px = 2x zoom)
+                
+                // Clamp zoom factor to reasonable limits
+                const clampedZoom = Math.max(0.1, Math.min(10, zoomFactor));
+                
+                // Calculate new range centered on current view
+                const center = (dragStartRange.min + dragStartRange.max) / 2;
+                const newRange = dragStartRange.range * clampedZoom;
+                const newMin = center - newRange / 2;
+                const newMax = center + newRange / 2;
+                
+                // Update Y-axis range
+                Plotly.relayout(plotId, {
+                    'yaxis.range': [newMin, newMax]
+                });
+                
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        
+        // Mouse up handler - end drag (use document level to catch even if mouse leaves element)
+        const handleMouseUp = () => {
+            if (isDraggingYAxis) {
+                isDraggingYAxis = false;
+                dragStartY = null;
+                dragStartRange = null;
+                plotElement.style.cursor = 'default';
+            }
+        };
+        
+        // Mouse leave handler - reset cursor but keep dragging state
+        const handleMouseLeave = () => {
+            if (!isDraggingYAxis) {
+                plotElement.style.cursor = 'default';
+            }
+        };
+        
+        // Attach event listeners
+        // Use element-level for mousedown and mouseleave (hover detection)
+        plotElement.addEventListener('mousedown', handleMouseDown);
+        plotElement.addEventListener('mouseleave', handleMouseLeave);
+        plotElement.addEventListener('mousemove', handleMouseMove);
+        
+        // Use document-level for mousemove and mouseup during drag (works even if mouse leaves element)
+        const handleDocumentMouseMove = (event) => {
+            if (isDraggingYAxis) {
+                handleMouseMove(event);
+            }
+        };
+        
+        const handleDocumentMouseUp = () => {
+            if (isDraggingYAxis) {
+                handleMouseUp();
+            }
+        };
+        
+        document.addEventListener('mousemove', handleDocumentMouseMove);
+        document.addEventListener('mouseup', handleDocumentMouseUp);
+        
+        // Store handlers for cleanup if needed
+        if (!plotElement._yAxisZoomHandlers) {
+            plotElement._yAxisZoomHandlers = {
+                mousedown: handleMouseDown,
+                mousemove: handleMouseMove,
+                mouseleave: handleMouseLeave,
+                documentMousemove: handleDocumentMouseMove,
+                documentMouseup: handleDocumentMouseUp
+            };
+        }
+        
+        console.log(`[${timeframe}] Y-axis vertical zoom enabled - drag on left side (Y-axis area) to zoom vertically`);
+    }
 
     /**
      * Handle chart click for annotation
@@ -2081,6 +2215,12 @@ class ChartManager {
                 };
                 
                 validatedCount++;
+                
+                // Calculate prediction range vs actual range to diagnose "wide" predictions
+                const predRange = predCandle[1] - predCandle[2];  // High - Low
+                const actualRange = actualCandle[1] - actualCandle[2];
+                const rangeRatio = predRange / actualRange;  // >1 means prediction is wider
+                
                 console.log(`[${timeframe}] Prediction validated (#${validatedCount}):`, {
                     timestamp: prediction.timestamp,
                     matchedTo: timestamps[matchIdx],
@@ -2090,34 +2230,144 @@ class ChartManager {
                     volumeError: pctErrors.volume.toFixed(2) + '%',
                     direction: directionCorrect ? '✓' : '✗',
                     timeDiff: Math.abs(predTime - new Date(timestamps[matchIdx]).getTime()) + 'ms',
+                    rangeAnalysis: {
+                        predictedRange: predRange.toFixed(2),
+                        actualRange: actualRange.toFixed(2),
+                        rangeRatio: rangeRatio.toFixed(2) + 'x',  // Shows if prediction is wider
+                        isWider: rangeRatio > 1.2 ? 'YES (too wide)' : rangeRatio < 0.8 ? 'NO (too narrow)' : 'OK'
+                    },
                     predicted: {
                         O: predCandle[0].toFixed(2),
                         H: predCandle[1].toFixed(2),
                         L: predCandle[2].toFixed(2),
                         C: predCandle[3].toFixed(2),
-                        V: predCandle[4].toFixed(2)
+                        V: predCandle[4].toFixed(2),
+                        Range: predRange.toFixed(2)
                     },
                     actual: {
                         O: actualCandle[0].toFixed(2),
                         H: actualCandle[1].toFixed(2),
                         L: actualCandle[2].toFixed(2),
                         C: actualCandle[3].toFixed(2),
-                        V: actualCandle[4].toFixed(2)
+                        V: actualCandle[4].toFixed(2),
+                        Range: actualRange.toFixed(2)
                     }
                 });
                 
                 // Send metrics to backend for training feedback
                 this._sendPredictionMetrics(timeframe, prediction);
+                
+                // Update overall model accuracy metrics
+                this._updateModelAccuracyMetrics(timeframe, accuracy, directionCorrect);
             }
         });
         
         // Summary log
         if (validatedCount > 0) {
             const totalPending = predictions.filter(p => !p.accuracy).length;
+            const avgAccuracy = this.modelAccuracyMetrics[timeframe]?.avgAccuracy || 0;
+            const directionAccuracy = this.modelAccuracyMetrics[timeframe]?.directionAccuracy || 0;
             console.log(`[${timeframe}] Validated ${validatedCount} predictions, ${totalPending} still pending`);
+            console.log(`[${timeframe}] Model Accuracy: ${avgAccuracy.toFixed(1)}% avg, ${directionAccuracy.toFixed(1)}% direction`);
+            
+            // CRITICAL: Re-render predictions to show updated accuracy in tooltips
+            // Trigger a refresh of prediction display
+            this._refreshPredictionDisplay(timeframe);
         }
     }
     
+    /**
+     * Update overall model accuracy metrics
+     */
+    _updateModelAccuracyMetrics(timeframe, accuracy, directionCorrect) {
+        if (!this.modelAccuracyMetrics[timeframe]) {
+            this.modelAccuracyMetrics[timeframe] = {
+                accuracies: [],
+                directionCorrect: [],
+                totalValidated: 0
+            };
+        }
+        
+        const metrics = this.modelAccuracyMetrics[timeframe];
+        metrics.accuracies.push(accuracy);
+        metrics.directionCorrect.push(directionCorrect);
+        metrics.totalValidated++;
+        
+        // Calculate averages
+        metrics.avgAccuracy = metrics.accuracies.reduce((a, b) => a + b, 0) / metrics.accuracies.length;
+        metrics.directionAccuracy = (metrics.directionCorrect.filter(c => c).length / metrics.directionCorrect.length) * 100;
+        
+        // Keep only last 100 validations for rolling average
+        if (metrics.accuracies.length > 100) {
+            metrics.accuracies = metrics.accuracies.slice(-100);
+            metrics.directionCorrect = metrics.directionCorrect.slice(-100);
+        }
+    }
+    
+    /**
+     * Refresh prediction display to show updated accuracy
+     */
+    _refreshPredictionDisplay(timeframe) {
+        const chart = this.charts[timeframe];
+        if (!chart) return;
+        
+        const plotId = chart.plotId;
+        const plotElement = document.getElementById(plotId);
+        if (!plotElement) return;
+        
+        // Get current predictions from history
+        if (!this.ghostCandleHistory[timeframe] || this.ghostCandleHistory[timeframe].length === 0) {
+            return;
+        }
+        
+        // Rebuild prediction traces with updated accuracy
+        const predictionTraces = [];
+        for (const ghost of this.ghostCandleHistory[timeframe]) {
+            this._addGhostCandlePrediction(ghost.candle, timeframe, predictionTraces, ghost.targetTime, ghost.accuracy);
+        }
+        
+        // Remove old prediction traces
+        const currentTraces = plotElement.data.length;
+        const indicesToRemove = [];
+        for (let i = currentTraces - 1; i >= 0; i--) {
+            const name = plotElement.data[i].name;
+            if (name === 'Ghost Prediction' || name === 'Shadow Prediction') {
+                indicesToRemove.push(i);
+            }
+        }
+        if (indicesToRemove.length > 0) {
+            Plotly.deleteTraces(plotId, indicesToRemove);
+        }
+        
+        // Add updated traces
+        if (predictionTraces.length > 0) {
+            Plotly.addTraces(plotId, predictionTraces);
+            console.log(`[${timeframe}] Refreshed ${predictionTraces.length} prediction candles with updated accuracy`);
+        }
+    }
+    
+    /**
+     * Get overall model accuracy metrics for a timeframe
+     */
+    getModelAccuracyMetrics(timeframe) {
+        if (!this.modelAccuracyMetrics[timeframe]) {
+            return {
+                avgAccuracy: 0,
+                directionAccuracy: 0,
+                totalValidated: 0,
+                recentAccuracies: []
+            };
+        }
+        
+        const metrics = this.modelAccuracyMetrics[timeframe];
+        return {
+            avgAccuracy: metrics.avgAccuracy || 0,
+            directionAccuracy: metrics.directionAccuracy || 0,
+            totalValidated: metrics.totalValidated || 0,
+            recentAccuracies: metrics.accuracies.slice(-10) || []  // Last 10 accuracies
+        };
+    }
+    
     /**
      * Send prediction accuracy metrics to backend for training feedback
      */
@@ -2814,6 +3064,169 @@ class ChartManager {
         }
     }
     
+    /**
+     * Add executed trade marker to chart
+     * Shows entry/exit points, PnL, and position lines
+     */
+    addExecutedTradeMarker(trade, positionState) {
+        try {
+            if (!trade || !trade.timestamp) return;
+            
+            // Find which timeframe to display on (prefer 1m, fallback to 1s)
+            const timeframe = this.timeframes.includes('1m') ? '1m' : (this.timeframes.includes('1s') ? '1s' : null);
+            if (!timeframe) return;
+            
+            const chart = this.charts[timeframe];
+            if (!chart) return;
+            
+            const plotId = chart.plotId;
+            const plotElement = document.getElementById(plotId);
+            if (!plotElement) return;
+            
+            // Parse timestamp
+            const timestamp = new Date(trade.timestamp);
+            const year = timestamp.getUTCFullYear();
+            const month = String(timestamp.getUTCMonth() + 1).padStart(2, '0');
+            const day = String(timestamp.getUTCDate()).padStart(2, '0');
+            const hours = String(timestamp.getUTCHours()).padStart(2, '0');
+            const minutes = String(timestamp.getUTCMinutes()).padStart(2, '0');
+            const seconds = String(timestamp.getUTCSeconds()).padStart(2, '0');
+            const formattedTimestamp = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+            
+            // Determine action type and styling
+            let shape, annotation;
+            
+            if (trade.action === 'OPEN_LONG') {
+                // Green upward arrow for long entry
+                shape = {
+                    type: 'line',
+                    x0: formattedTimestamp,
+                    x1: formattedTimestamp,
+                    y0: trade.price * 0.997,
+                    y1: trade.price * 0.993,
+                    line: { color: '#10b981', width: 3 },
+                    name: `trade_${trade.trade_id}`
+                };
+                annotation = {
+                    x: formattedTimestamp,
+                    y: trade.price * 0.992,
+                    text: `LONG<br>$${trade.price.toFixed(2)}`,
+                    showarrow: true,
+                    arrowhead: 2,
+                    arrowcolor: '#10b981',
+                    ax: 0,
+                    ay: 30,
+                    font: { size: 10, color: '#10b981', weight: 'bold' },
+                    bgcolor: 'rgba(16, 185, 129, 0.2)'
+                };
+            } else if (trade.action === 'OPEN_SHORT') {
+                // Red downward arrow for short entry
+                shape = {
+                    type: 'line',
+                    x0: formattedTimestamp,
+                    x1: formattedTimestamp,
+                    y0: trade.price * 1.003,
+                    y1: trade.price * 1.007,
+                    line: { color: '#ef4444', width: 3 },
+                    name: `trade_${trade.trade_id}`
+                };
+                annotation = {
+                    x: formattedTimestamp,
+                    y: trade.price * 1.008,
+                    text: `SHORT<br>$${trade.price.toFixed(2)}`,
+                    showarrow: true,
+                    arrowhead: 2,
+                    arrowcolor: '#ef4444',
+                    ax: 0,
+                    ay: -30,
+                    font: { size: 10, color: '#ef4444', weight: 'bold' },
+                    bgcolor: 'rgba(239, 68, 68, 0.2)'
+                };
+            } else if (trade.action === 'CLOSE_LONG' || trade.action === 'CLOSE_SHORT') {
+                // Exit marker with PnL
+                const isProfit = trade.pnl > 0;
+                const color = isProfit ? '#10b981' : '#ef4444';
+                const positionType = trade.action === 'CLOSE_LONG' ? 'LONG' : 'SHORT';
+                
+                shape = {
+                    type: 'line',
+                    x0: formattedTimestamp,
+                    x1: formattedTimestamp,
+                    y0: trade.price,
+                    y1: trade.price,
+                    line: { color: color, width: 4, dash: 'dot' },
+                    name: `trade_${trade.trade_id}_exit`
+                };
+                annotation = {
+                    x: formattedTimestamp,
+                    y: trade.price,
+                    text: `EXIT ${positionType}<br>$${trade.price.toFixed(2)}<br>PnL: ${isProfit ? '+' : ''}$${trade.pnl.toFixed(2)} (${trade.pnl_pct >= 0 ? '+' : ''}${trade.pnl_pct.toFixed(2)}%)`,
+                    showarrow: true,
+                    arrowhead: 1,
+                    arrowcolor: color,
+                    ax: 0,
+                    ay: isProfit ? -40 : 40,
+                    font: { size: 10, color: color, weight: 'bold' },
+                    bgcolor: isProfit ? 'rgba(16, 185, 129, 0.3)' : 'rgba(239, 68, 68, 0.3)'
+                };
+                
+                // Add position line connecting entry to exit if entry time available
+                if (trade.entry_time) {
+                    const entryTimestamp = new Date(trade.entry_time);
+                    const entryYear = entryTimestamp.getUTCFullYear();
+                    const entryMonth = String(entryTimestamp.getUTCMonth() + 1).padStart(2, '0');
+                    const entryDay = String(entryTimestamp.getUTCDate()).padStart(2, '0');
+                    const entryHours = String(entryTimestamp.getUTCHours()).padStart(2, '0');
+                    const entryMinutes = String(entryTimestamp.getUTCMinutes()).padStart(2, '0');
+                    const entrySeconds = String(entryTimestamp.getUTCSeconds()).padStart(2, '0');
+                    const formattedEntryTime = `${entryYear}-${entryMonth}-${entryDay} ${entryHours}:${entryMinutes}:${entrySeconds}`;
+                    
+                    const positionLine = {
+                        type: 'rect',
+                        x0: formattedEntryTime,
+                        x1: formattedTimestamp,
+                        y0: trade.entry_price,
+                        y1: trade.price,
+                        fillcolor: isProfit ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)',
+                        line: { color: color, width: 2, dash: isProfit ? 'solid' : 'dash' },
+                        name: `position_${trade.trade_id}`
+                    };
+                    
+                    // Add both position rectangle and exit marker
+                    const currentShapes = plotElement.layout.shapes || [];
+                    Plotly.relayout(plotId, {
+                        shapes: [...currentShapes, positionLine, shape]
+                    });
+                } else {
+                    // Just add exit marker
+                    const currentShapes = plotElement.layout.shapes || [];
+                    Plotly.relayout(plotId, {
+                        shapes: [...currentShapes, shape]
+                    });
+                }
+            } else {
+                // Entry marker only (no position line yet)
+                const currentShapes = plotElement.layout.shapes || [];
+                Plotly.relayout(plotId, {
+                    shapes: [...currentShapes, shape]
+                });
+            }
+            
+            // Add annotation
+            if (annotation) {
+                const currentAnnotations = plotElement.layout.annotations || [];
+                Plotly.relayout(plotId, {
+                    annotations: [...currentAnnotations, annotation]
+                });
+            }
+            
+            console.log(`Added executed trade marker: ${trade.action} @ ${trade.price.toFixed(2)}`);
+            
+        } catch (error) {
+            console.error('Error adding executed trade marker:', error);
+        }
+    }
+    
     /**
      * Remove live metrics overlay
      */

ANNOTATE/web/static/js/live_updates_ws.js

@@ -99,6 +99,18 @@ class LiveUpdatesWebSocket {
             console.error('Prediction error:', data);
         });
         
+        this.socket.on('executed_trade', (data) => {
+            console.log('Executed trade received:', data);
+            if (this.onExecutedTrade) {
+                this.onExecutedTrade(data);
+            }
+        });
+        
+        this.socket.on('training_update', (data) => {
+            console.log('Training update received:', data);
+            // Training feedback from incremental learning
+        });
+        
         // Error events
         this.socket.on('connect_error', (error) => {
             console.error('WebSocket connection error:', error);
@@ -230,6 +242,26 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     };
     
+    window.liveUpdatesWS.onExecutedTrade = function(data) {
+        // Visualize executed trade on chart
+        if (window.appState && window.appState.chartManager) {
+            window.appState.chartManager.addExecutedTradeMarker(data.trade, data.position_state);
+        }
+        
+        // Update position state display
+        if (typeof updatePositionStateDisplay === 'function') {
+            updatePositionStateDisplay(data.position_state, data.session_metrics);
+        }
+        
+        // Log trade details
+        console.log('Executed Trade:', {
+            action: data.trade.action,
+            price: data.trade.price,
+            pnl: data.trade.pnl ? `$${data.trade.pnl.toFixed(2)} (${data.trade.pnl_pct.toFixed(2)}%)` : 'N/A',
+            position: data.position_state.has_position ? `${data.position_state.position_type.toUpperCase()} @ $${data.position_state.entry_price}` : 'CLOSED'
+        });
+    };
+    
     // Auto-connect
     console.log('Auto-connecting to WebSocket...');
     window.liveUpdatesWS.connect();