Update app.py

app.py

@@ -11,7 +11,7 @@ from sklearn.ensemble import RandomForestRegressor
 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
 BROADCAST_RATE = 1.0
-PREDICTION_HORIZON = 60
+PREDICTION_HORIZON = 100
 
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
 
@@ -36,11 +36,15 @@ def calculate_indicators(candles):
         df[c] = df[c].astype(float)
 
     df['ema'] = df['close'].ewm(span=20, adjust=False).mean()
+    df['ema_fast'] = df['close'].ewm(span=9, adjust=False).mean()
+    df['ema_slow'] = df['close'].ewm(span=50, adjust=False).mean()
+    
     df['sma20'] = df['close'].rolling(window=20).mean()
     df['std'] = df['close'].rolling(window=20).std()
     df['bb_upper'] = df['sma20'] + (df['std'] * 2)
     df['bb_lower'] = df['sma20'] - (df['std'] * 2)
-    
+    df['bb_mid'] = df['sma20']
+
     delta = df['close'].diff()
     gain = (delta.where(delta > 0, 0)).rolling(window=14).mean()
     loss = (-delta.where(delta < 0, 0)).rolling(window=14).mean()
@@ -56,20 +60,26 @@ def calculate_indicators(candles):
     low_min = df['low'].rolling(window=14).min()
     high_max = df['high'].rolling(window=14).max()
     df['stoch_k'] = 100 * ((df['close'] - low_min) / (high_max - low_min))
-    
+    df['stoch_d'] = df['stoch_k'].rolling(window=3).mean()
+
     df['tr0'] = abs(df['high'] - df['low'])
     df['tr1'] = abs(df['high'] - df['close'].shift())
     df['tr2'] = abs(df['low'] - df['close'].shift())
     df['tr'] = df[['tr0', 'tr1', 'tr2']].max(axis=1)
     df['atr'] = df['tr'].rolling(window=14).mean()
 
+    df['obv'] = (np.sign(df['close'].diff()) * df['volume']).fillna(0).cumsum()
+
     df['tp'] = (df['high'] + df['low'] + df['close']) / 3
     df['vwap'] = (df['tp'] * df['volume']).cumsum() / df['volume'].cumsum()
     
     return df
 
 def train_model(df):
-    feature_cols = ['close', 'ema', 'bb_upper', 'bb_lower', 'rsi', 'macd', 'stoch_k', 'atr', 'vwap']
+    logging.info("Training ML Model...")
+    
+    feature_cols = ['close', 'ema', 'bb_upper', 'bb_lower', 'rsi', 'macd', 'stoch_k', 'atr', 'obv', 'vwap']
+    
     data = df.dropna().copy()
     
     future_shifts = {}
@@ -85,20 +95,23 @@ def train_model(df):
     data = data.dropna()
 
     if len(data) < 100:
+        logging.warning("Not enough data to train model yet.")
         return None
 
     X = data[feature_cols].values
     y = data[targets].values
 
-    model = RandomForestRegressor(n_estimators=30, max_depth=8, n_jobs=-1, random_state=42)
+    model = RandomForestRegressor(n_estimators=50, max_depth=10, n_jobs=-1, random_state=42)
     model.fit(X, y)
+    
+    logging.info(f"Model Trained on {len(X)} samples.")
     return model
 
 def get_prediction(df, model):
     if model is None:
         return []
     
-    feature_cols = ['close', 'ema', 'bb_upper', 'bb_lower', 'rsi', 'macd', 'stoch_k', 'atr', 'vwap']
+    feature_cols = ['close', 'ema', 'bb_upper', 'bb_lower', 'rsi', 'macd', 'stoch_k', 'atr', 'obv', 'vwap']
     last_row = df.iloc[[-1]][feature_cols]
     
     if last_row.isnull().values.any():
@@ -134,8 +147,8 @@ def process_market_data():
     predictions = []
     try:
         predictions = get_prediction(df, market_state['model'])
-    except Exception:
-        pass
+    except Exception as e:
+        logging.error(f"Prediction failed: {e}")
 
     df_clean = df.replace([np.inf, -np.inf], np.nan)
     df_clean = df_clean.astype(object).where(pd.notnull(df_clean), None)
@@ -148,6 +161,7 @@ def process_market_data():
     market_state['price_change'] = price_change
     
     full_data = df_clean.to_dict('records')
+    
     last_row = df.iloc[-1] if len(df) > 0 else {}
     
     return {
@@ -156,10 +170,10 @@ def process_market_data():
         "stats": {
             "price": last_close,
             "change": round(price_change, 2),
-            "rsi": round(float(last_row.get('rsi')), 1) if pd.notna(last_row.get('rsi')) else 0,
-            "macd": round(float(last_row.get('macd')), 2) if pd.notna(last_row.get('macd')) else 0,
-            "atr": round(float(last_row.get('atr')), 2) if pd.notna(last_row.get('atr')) else 0,
-            "volume": round(float(last_row.get('volume')), 2) if pd.notna(last_row.get('volume')) else 0
+            "rsi": round(float(last_row.get('rsi', 0)), 1) if pd.notna(last_row.get('rsi')) else 0,
+            "macd": round(float(last_row.get('macd', 0)), 2) if pd.notna(last_row.get('macd')) else 0,
+            "atr": round(float(last_row.get('atr', 0)), 2) if pd.notna(last_row.get('atr')) else 0,
+            "volume": round(float(last_row.get('volume', 0)), 2) if pd.notna(last_row.get('volume')) else 0
         }
     }
 
@@ -169,296 +183,585 @@ HTML_PAGE = """
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>QuantAI Terminal | BTC/USD</title>
+    <title>BTC/USD AI Predictor</title>
     <script src="https://unpkg.com/lightweight-charts@4.1.1/dist/lightweight-charts.standalone.production.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
-        :root {
-            --bg-dark: #0b0e11;
-            --bg-panel: #151a21;
-            --accent: #2962ff;
-            --accent-glow: rgba(41, 98, 255, 0.3);
-            --up: #00e396;
-            --down: #ff004c;
-            --text-main: #eceff1;
-            --text-dim: #94a3b8;
-            --border: rgba(255, 255, 255, 0.08);
-        }
         * { margin: 0; padding: 0; box-sizing: border-box; }
+        
         body {
-            background-color: var(--bg-dark);
-            color: var(--text-main);
-            font-family: 'Inter', sans-serif;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
+            color: #ffffff;
             height: 100vh;
+            display: flex;
+            flex-direction: column;
             overflow: hidden;
-            display: grid;
-            grid-template-rows: 60px 1fr;
         }
+        
         .header {
-            background: var(--bg-panel);
-            border-bottom: 1px solid var(--border);
+            background: rgba(15, 15, 25, 0.95);
+            backdrop-filter: blur(20px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            padding: 12px 24px;
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: 0 24px;
-            z-index: 10;
+            z-index: 100;
         }
-        .brand {
+        
+        .logo-section {
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 16px;
         }
-        .brand-text { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 18px; color: #fff; }
-        .live-badge {
-            background: rgba(0, 227, 150, 0.15);
-            color: var(--up);
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 11px;
+        
+        .logo {
+            font-size: 24px;
+            font-weight: 700;
+            background: linear-gradient(135deg, #00ff88 0%, #00d4ff 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: -0.5px;
+        }
+        
+        .symbol-badge {
+            background: rgba(0, 255, 136, 0.1);
+            border: 1px solid rgba(0, 255, 136, 0.3);
+            padding: 6px 14px;
+            border-radius: 20px;
+            font-size: 13px;
             font-weight: 600;
+            color: #00ff88;
+        }
+        
+        .stats-row {
             display: flex;
+            gap: 24px;
             align-items: center;
-            gap: 6px;
         }
-        .live-dot { width: 6px; height: 6px; background: var(--up); border-radius: 50%; animation: pulse 1.5s infinite; }
-        .live-dot.offline { background: var(--down); animation: none; }
         
-        .dashboard-grid {
-            display: grid;
-            grid-template-columns: 280px 1fr;
-            height: 100%;
-            overflow: hidden;
+        .stat-item {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+        }
+        
+        .stat-label {
+            font-size: 10px;
+            color: #666;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        .stat-value {
+            font-size: 15px;
+            font-weight: 600;
+            font-variant-numeric: tabular-nums;
+        }
+        
+        .stat-value.positive { color: #00ff88; }
+        .stat-value.negative { color: #ff4757; }
+        .stat-value.neutral { color: #ffd700; }
+        
+        .status-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 12px;
+            color: #888;
+        }
+        
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #00ff88;
+            animation: pulse 2s infinite;
+        }
+        
+        .status-dot.disconnected {
+            background: #ff4757;
+            animation: none;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.4); }
+            50% { opacity: 0.8; box-shadow: 0 0 0 8px rgba(0, 255, 136, 0); }
+        }
+        
+        .indicator-panel {
+            background: rgba(15, 15, 25, 0.8);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            padding: 10px 24px;
+            display: flex;
+            gap: 32px;
+            overflow-x: auto;
         }
-        .sidebar {
-            background: var(--bg-panel);
-            border-right: 1px solid var(--border);
-            padding: 20px;
+        
+        .indicator-group {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        
+        .indicator-label {
+            font-size: 11px;
+            color: #666;
+            text-transform: uppercase;
+        }
+        
+        .indicator-value {
+            font-size: 13px;
+            font-weight: 500;
+            font-variant-numeric: tabular-nums;
+        }
+        
+        .charts-container {
+            flex: 1;
             display: flex;
             flex-direction: column;
-            gap: 20px;
-        }
-        .stat-card {
-            background: rgba(255,255,255,0.02);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            padding: 16px;
-        }
-        .stat-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
-        .stat-value { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 500; }
-        .stat-value.up { color: var(--up); }
-        .stat-value.down { color: var(--down); }
-        
-        .main-view {
-            display: grid;
-            grid-template-rows: 3fr 1fr;
             position: relative;
         }
-        .chart-container { position: relative; width: 100%; height: 100%; }
-        .chart-overlay {
+        
+        .chart-wrapper {
+            position: relative;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        
+        #main-chart { flex: 5; }
+        #volume-chart { flex: 1; min-height: 60px; }
+        #osc-chart { flex: 1.5; min-height: 80px; }
+        
+        .chart-label {
             position: absolute;
-            top: 20px;
-            left: 20px;
-            z-index: 5;
+            top: 12px;
+            left: 16px;
+            z-index: 10;
             display: flex;
-            gap: 15px;
-            font-size: 12px;
-            font-family: 'JetBrains Mono', monospace;
+            gap: 16px;
+            font-size: 11px;
             pointer-events: none;
         }
-        .legend-item { display: flex; align-items: center; gap: 6px; color: var(--text-dim); }
-        .legend-dot { width: 8px; height: 8px; border-radius: 2px; }
         
-        .loader-screen {
+        .chart-label span {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        
+        .chart-label .dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+        }
+        
+        .loading-overlay {
             position: absolute;
-            inset: 0;
-            background: var(--bg-dark);
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(10, 10, 15, 0.95);
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            z-index: 50;
-            transition: opacity 0.3s;
-        }
-        .spinner {
-            width: 40px;
-            height: 40px;
-            border: 3px solid rgba(41, 98, 255, 0.2);
-            border-top-color: var(--accent);
+            z-index: 1000;
+            transition: opacity 0.5s ease;
+        }
+        
+        .loading-overlay.hidden {
+            opacity: 0;
+            pointer-events: none;
+        }
+        
+        .loader {
+            width: 50px;
+            height: 50px;
+            border: 3px solid rgba(0, 255, 136, 0.1);
+            border-top-color: #00ff88;
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
-        @keyframes spin { to { transform: rotate(360deg); } }
-        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
         
-        .pred-pill {
-            background: linear-gradient(135deg, rgba(140, 0, 255, 0.2), rgba(41, 98, 255, 0.2));
-            border: 1px solid rgba(140, 0, 255, 0.4);
-            color: #d09bff;
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        
+        .loading-text {
+            margin-top: 20px;
+            font-size: 14px;
+            color: #666;
+        }
+        
+        .prediction-badge {
+            position: absolute;
+            top: 12px;
+            right: 16px;
+            background: rgba(191, 90, 242, 0.15);
+            border: 1px solid rgba(191, 90, 242, 0.3);
             padding: 4px 10px;
             border-radius: 12px;
-            font-size: 11px;
-            font-weight: 600;
+            font-size: 10px;
+            color: #bf5af2;
+            z-index: 10;
         }
     </style>
 </head>
 <body>
     <div class="header">
-        <div class="brand">
-            <div style="width: 24px; height: 24px; background: var(--accent); border-radius: 6px;"></div>
-            <span class="brand-text">QuantAI Terminal</span>
+        <div class="logo-section">
+            <div class="logo">QuantAI</div>
+            <div class="symbol-badge">BTC/USD</div>
         </div>
-        <div class="live-badge">
-            <div id="status-dot" class="live-dot"></div>
-            <span id="status-text">CONNECTING</span>
-        </div>
-    </div>
-    
-    <div class="dashboard-grid">
-        <div class="sidebar">
-            <div class="stat-card">
-                <div class="stat-label">Market Price</div>
-                <div id="price" class="stat-value">--</div>
+        
+        <div class="stats-row">
+            <div class="stat-item">
+                <span class="stat-label">Price</span>
+                <span id="price" class="stat-value">$--</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-label">Change</span>
+                <span id="change" class="stat-value neutral">--%</span>
             </div>
-            <div class="stat-card">
-                <div class="stat-label">24h Change</div>
-                <div id="change" class="stat-value">--</div>
+            <div class="stat-item">
+                <span class="stat-label">RSI</span>
+                <span id="rsi" class="stat-value">--</span>
             </div>
-            <div class="stat-card">
-                <div class="stat-label">RSI (14)</div>
-                <div id="rsi" class="stat-value">--</div>
+            <div class="stat-item">
+                <span class="stat-label">ATR</span>
+                <span id="atr" class="stat-value">--</span>
             </div>
-            <div class="stat-card">
-                <div class="stat-label">ATR Volatility</div>
-                <div id="atr" class="stat-value">--</div>
+        </div>
+        
+        <div class="status-indicator">
+            <div id="status-dot" class="status-dot"></div>
+            <span id="status-text">Connecting...</span>
+        </div>
+    </div>
+    
+    <div class="indicator-panel">
+        <div class="indicator-group">
+            <span class="indicator-label">EMA 20</span>
+            <span id="ema-val" class="indicator-value" style="color: #2962FF">--</span>
+        </div>
+        <div class="indicator-group">
+            <span class="indicator-label">BB Upper</span>
+            <span id="bb-upper" class="indicator-value" style="color: #26a69a">--</span>
+        </div>
+        <div class="indicator-group">
+            <span class="indicator-label">BB Lower</span>
+            <span id="bb-lower" class="indicator-value" style="color: #ef5350">--</span>
+        </div>
+        <div class="indicator-group">
+            <span class="indicator-label">MACD</span>
+            <span id="macd-val" class="indicator-value">--</span>
+        </div>
+        <div class="indicator-group">
+            <span class="indicator-label">Stoch K</span>
+            <span id="stoch-val" class="indicator-value" style="color: #ff9800">--</span>
+        </div>
+        <div class="indicator-group">
+            <span class="indicator-label">Volume</span>
+            <span id="vol-val" class="indicator-value" style="color: #888">--</span>
+        </div>
+    </div>
+
+    <div class="charts-container">
+        <div class="loading-overlay" id="loading">
+            <div class="loader"></div>
+            <div class="loading-text">Loading market data...</div>
+        </div>
+        
+        <div id="main-chart" class="chart-wrapper">
+            <div class="chart-label">
+                <span><div class="dot" style="background: #00ff88"></div>Price</span>
+                <span><div class="dot" style="background: #2962FF"></div>EMA 20</span>
+                <span><div class="dot" style="background: #26a69a; opacity: 0.5"></div>Bollinger</span>
             </div>
-             <div class="stat-card">
-                <div class="stat-label">AI Model Status</div>
-                <div id="model-status" style="font-size: 13px; color: var(--accent);">Active</div>
+            <div class="prediction-badge">AI Forecast: 100 candles</div>
+        </div>
+        
+        <div id="volume-chart" class="chart-wrapper">
+            <div class="chart-label">
+                <span><div class="dot" style="background: #5c6bc0"></div>Volume</span>
             </div>
         </div>
         
-        <div class="main-view">
-            <div id="main-chart" class="chart-container">
-                <div class="loader-screen" id="loader">
-                    <div class="spinner"></div>
-                    <div style="margin-top:15px; font-size:12px; color: #666;">PROCESSING MARKET DATA</div>
-                </div>
-                <div class="chart-overlay">
-                    <div class="legend-item"><div class="legend-dot" style="background: #00e396"></div>Price</div>
-                    <div class="legend-item"><div class="legend-dot" style="background: #2962ff"></div>EMA 20</div>
-                    <div class="legend-item"><div class="legend-dot" style="background: #d09bff"></div>AI Forecast</div>
-                    <div class="pred-pill">RF MODEL V2</div>
-                </div>
+        <div id="osc-chart" class="chart-wrapper">
+            <div class="chart-label">
+                <span><div class="dot" style="background: #9C27B0"></div>RSI</span>
+                <span><div class="dot" style="background: #26a69a"></div>MACD Hist</span>
             </div>
-            <div id="sub-chart" class="chart-container" style="border-top: 1px solid var(--border);"></div>
         </div>
     </div>
 
 <script>
-    const upColor = '#00e396';
-    const downColor = '#ff004c';
-    const bgDark = '#0b0e11';
-    
-    const mainChartEl = document.getElementById('main-chart');
-    const subChartEl = document.getElementById('sub-chart');
-    
-    const chartOpts = {
-        layout: { background: { color: bgDark }, textColor: '#94a3b8' },
-        grid: { vertLines: { color: 'rgba(255,255,255,0.04)' }, horzLines: { color: 'rgba(255,255,255,0.04)' } },
-        timeScale: { borderColor: 'rgba(255,255,255,0.1)', timeVisible: true },
-        rightPriceScale: { borderColor: 'rgba(255,255,255,0.1)' },
-        crosshair: { mode: LightweightCharts.CrosshairMode.Normal }
+document.addEventListener('DOMContentLoaded', () => {
+    const mainEl = document.getElementById('main-chart');
+    const volEl = document.getElementById('volume-chart');
+    const oscEl = document.getElementById('osc-chart');
+    const loading = document.getElementById('loading');
+
+    const chartOptions = {
+        layout: {
+            background: { type: 'solid', color: 'transparent' },
+            textColor: '#666'
+        },
+        grid: {
+            vertLines: { color: 'rgba(255,255,255,0.03)' },
+            horzLines: { color: 'rgba(255,255,255,0.03)' }
+        },
+        timeScale: {
+            timeVisible: true,
+            secondsVisible: false,
+            borderColor: 'rgba(255,255,255,0.1)'
+        },
+        rightPriceScale: {
+            borderColor: 'rgba(255,255,255,0.1)'
+        },
+        crosshair: {
+            mode: LightweightCharts.CrosshairMode.Normal,
+            vertLine: {
+                color: 'rgba(255,255,255,0.2)',
+                labelBackgroundColor: '#1a1a2e'
+            },
+            horzLine: {
+                color: 'rgba(255,255,255,0.2)',
+                labelBackgroundColor: '#1a1a2e'
+            }
+        }
     };
-    
-    const chart = LightweightCharts.createChart(mainChartEl, chartOpts);
-    const subChart = LightweightCharts.createChart(subChartEl, chartOpts);
-    
-    const candles = chart.addCandlestickSeries({
-        upColor: bgDark, downColor: downColor, borderUpColor: upColor, borderDownColor: downColor,
-        wickUpColor: upColor, wickDownColor: downColor
+
+    const mainChart = LightweightCharts.createChart(mainEl, chartOptions);
+    const volChart = LightweightCharts.createChart(volEl, chartOptions);
+    const oscChart = LightweightCharts.createChart(oscEl, chartOptions);
+
+    const candles = mainChart.addCandlestickSeries({
+        upColor: '#00ff88',
+        downColor: '#ff4757',
+        borderUpColor: '#00ff88',
+        borderDownColor: '#ff4757',
+        wickUpColor: '#00ff88',
+        wickDownColor: '#ff4757'
     });
-    
-    const emaSeries = chart.addLineSeries({ color: '#2962ff', lineWidth: 2, crosshairMarkerVisible: false });
-    const predSeries = chart.addLineSeries({ color: '#d09bff', lineWidth: 2, lineStyle: 2, crosshairMarkerVisible: false });
-    
-    const rsiSeries = subChart.addLineSeries({ color: '#f9a825', lineWidth: 2, priceScaleId: 'right' });
-    const rsiLine70 = subChart.createPriceLine({ price: 70, color: 'rgba(255,255,255,0.3)', lineWidth: 1, lineStyle: 2, axisLabelVisible: false });
-    const rsiLine30 = subChart.createPriceLine({ price: 30, color: 'rgba(255,255,255,0.3)', lineWidth: 1, lineStyle: 2, axisLabelVisible: false });
-    
-    function resize() {
-        chart.applyOptions({ width: mainChartEl.clientWidth, height: mainChartEl.clientHeight });
-        subChart.applyOptions({ width: subChartEl.clientWidth, height: subChartEl.clientHeight });
+
+    const ema = mainChart.addLineSeries({
+        color: '#2962FF',
+        lineWidth: 2,
+        crosshairMarkerVisible: false
+    });
+
+    const bbUpper = mainChart.addLineSeries({
+        color: 'rgba(38, 166, 154, 0.4)',
+        lineWidth: 1,
+        crosshairMarkerVisible: false
+    });
+
+    const bbLower = mainChart.addLineSeries({
+        color: 'rgba(239, 83, 80, 0.4)',
+        lineWidth: 1,
+        crosshairMarkerVisible: false
+    });
+
+    const predLine = mainChart.addLineSeries({
+        color: '#bf5af2',
+        lineWidth: 2,
+        lineStyle: LightweightCharts.LineStyle.Dashed,
+        crosshairMarkerVisible: false
+    });
+
+    const volumeSeries = volChart.addHistogramSeries({
+        priceFormat: { type: 'volume' },
+        priceScaleId: ''
+    });
+    volChart.priceScale('').applyOptions({
+        scaleMargins: { top: 0.1, bottom: 0 }
+    });
+
+    const rsi = oscChart.addLineSeries({
+        color: '#9C27B0',
+        lineWidth: 2,
+        priceScaleId: 'rsi'
+    });
+    oscChart.priceScale('rsi').applyOptions({
+        scaleMargins: { top: 0.1, bottom: 0.1 }
+    });
+
+    const macdHist = oscChart.addHistogramSeries({
+        priceScaleId: 'macd'
+    });
+    oscChart.priceScale('macd').applyOptions({
+        scaleMargins: { top: 0.6, bottom: 0 }
+    });
+
+    function resizeCharts() {
+        const mainH = mainEl.clientHeight;
+        const volH = volEl.clientHeight;
+        const oscH = oscEl.clientHeight;
+        const w = mainEl.clientWidth;
+
+        mainChart.applyOptions({ width: w, height: mainH });
+        volChart.applyOptions({ width: w, height: volH });
+        oscChart.applyOptions({ width: w, height: oscH });
     }
-    window.onresize = resize;
-    
-    chart.timeScale().subscribeVisibleLogicalRangeChange(range => subChart.timeScale().setVisibleLogicalRange(range));
-    subChart.timeScale().subscribeVisibleLogicalRangeChange(range => chart.timeScale().setVisibleLogicalRange(range));
-    
-    let isLoaded = false;
-    
-    function connect() {
-        const ws = new WebSocket((location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + '/ws');
+
+    new ResizeObserver(resizeCharts).observe(document.body);
+    setTimeout(resizeCharts, 100);
+
+    function syncTimeScales(charts) {
+        charts.forEach((chart, i) => {
+            chart.timeScale().subscribeVisibleLogicalRangeChange(range => {
+                if (range) {
+                    charts.forEach((c, j) => {
+                        if (i !== j) c.timeScale().setVisibleLogicalRange(range);
+                    });
+                }
+            });
+        });
+    }
+    syncTimeScales([mainChart, volChart, oscChart]);
+
+    function updateStats(stats, lastData) {
+        if (stats) {
+            document.getElementById('price').textContent = '$' + stats.price.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
+            
+            const changeEl = document.getElementById('change');
+            changeEl.textContent = (stats.change >= 0 ? '+' : '') + stats.change + '%';
+            changeEl.className = 'stat-value ' + (stats.change > 0 ? 'positive' : stats.change < 0 ? 'negative' : 'neutral');
+            
+            const rsiVal = stats.rsi;
+            const rsiEl = document.getElementById('rsi');
+            rsiEl.textContent = rsiVal;
+            rsiEl.className = 'stat-value ' + (rsiVal > 70 ? 'negative' : rsiVal < 30 ? 'positive' : 'neutral');
+            
+            document.getElementById('atr').textContent = stats.atr;
+        }
         
-        ws.onopen = () => {
-            document.getElementById('status-dot').className = 'live-dot';
-            document.getElementById('status-text').innerText = 'LIVE FEED';
-        };
+        if (lastData) {
+            document.getElementById('ema-val').textContent = lastData.ema ? lastData.ema.toFixed(2) : '--';
+            document.getElementById('bb-upper').textContent = lastData.bb_upper ? lastData.bb_upper.toFixed(2) : '--';
+            document.getElementById('bb-lower').textContent = lastData.bb_lower ? lastData.bb_lower.toFixed(2) : '--';
+            
+            const macdVal = lastData.macd;
+            const macdEl = document.getElementById('macd-val');
+            if (macdVal !== null && macdVal !== undefined) {
+                macdEl.textContent = macdVal.toFixed(2);
+                macdEl.style.color = macdVal >= 0 ? '#26a69a' : '#ef5350';
+            }
+            
+            document.getElementById('stoch-val').textContent = lastData.stoch_k ? lastData.stoch_k.toFixed(1) : '--';
+            document.getElementById('vol-val').textContent = lastData.volume ? lastData.volume.toFixed(2) : '--';
+        }
+    }
+
+    function setStatus(connected) {
+        const dot = document.getElementById('status-dot');
+        const text = document.getElementById('status-text');
+        if (connected) {
+            dot.className = 'status-dot';
+            text.textContent = 'Live';
+        } else {
+            dot.className = 'status-dot disconnected';
+            text.textContent = 'Reconnecting...';
+        }
+    }
+
+    let hasData = false;
+
+    function connect() {
+        const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+        const ws = new WebSocket(protocol + '://' + location.host + '/ws');
         
-        ws.onclose = () => {
-            document.getElementById('status-dot').className = 'live-dot offline';
-            document.getElementById('status-text').innerText = 'RECONNECTING';
-            setTimeout(connect, 2000);
-        };
+        ws.onopen = () => setStatus(true);
         
-        ws.onmessage = (event) => {
+        ws.onmessage = (e) => {
             try {
-                const msg = JSON.parse(event.data);
-                if(msg.error) return;
-                
-                const data = msg.data;
-                const last = data[data.length - 1];
-                
-                const candleData = data.map(d => ({
-                    time: d.time, open: d.open, high: d.high, low: d.low, close: d.close
-                }));
-                
-                candles.setData(candleData);
-                
-                const emaData = data.filter(d => d.ema).map(d => ({ time: d.time, value: d.ema }));
-                emaSeries.setData(emaData);
-                
-                const rsiData = data.filter(d => d.rsi).map(d => ({ time: d.time, value: d.rsi }));
-                rsiSeries.setData(rsiData);
-                
-                if (msg.prediction && msg.prediction.length) {
-                    const predPoints = [{ time: last.time, value: last.close }, ...msg.prediction];
-                    predSeries.setData(predPoints);
-                }
+                const payload = JSON.parse(e.data);
+                if (!payload.data || payload.data.length === 0) return;
                 
-                document.getElementById('price').innerText = '$' + msg.stats.price.toLocaleString(undefined, {minimumFractionDigits: 2});
+                const d = payload.data;
                 
-                const chg = msg.stats.change;
-                const chgEl = document.getElementById('change');
-                chgEl.innerText = (chg > 0 ? '+' : '') + chg + '%';
-                chgEl.className = 'stat-value ' + (chg >= 0 ? 'up' : 'down');
-                
-                document.getElementById('rsi').innerText = msg.stats.rsi;
-                document.getElementById('atr').innerText = msg.stats.atr;
-                
-                if (!isLoaded) {
-                    isLoaded = true;
-                    document.getElementById('loader').style.opacity = '0';
-                    setTimeout(() => document.getElementById('loader').remove(), 300);
-                    chart.timeScale().fitContent();
+                const safeMap = (arr, key) => arr
+                    .filter(x => x && x.time && x[key] !== null && x[key] !== undefined && !isNaN(x[key]))
+                    .map(x => ({ time: x.time, value: x[key] }));
+
+                const candleData = d
+                    .filter(x => x && x.time && x.open && x.high && x.low && x.close)
+                    .map(x => ({
+                        time: x.time,
+                        open: x.open,
+                        high: x.high,
+                        low: x.low,
+                        close: x.close
+                    }));
+
+                if (candleData.length > 0) {
+                    candles.setData(candleData);
+                    
+                    const emaData = safeMap(d, 'ema');
+                    if (emaData.length > 0) ema.setData(emaData);
+                    
+                    const bbUpperData = safeMap(d, 'bb_upper');
+                    if (bbUpperData.length > 0) bbUpper.setData(bbUpperData);
+                    
+                    const bbLowerData = safeMap(d, 'bb_lower');
+                    if (bbLowerData.length > 0) bbLower.setData(bbLowerData);
+                    
+                    const volData = d
+                        .filter(x => x && x.time && x.volume !== null && x.volume !== undefined)
+                        .map(x => ({
+                            time: x.time,
+                            value: x.volume,
+                            color: x.close >= x.open ? 'rgba(0, 255, 136, 0.5)' : 'rgba(255, 71, 87, 0.5)'
+                        }));
+                    if (volData.length > 0) volumeSeries.setData(volData);
+                    
+                    const rsiData = safeMap(d, 'rsi');
+                    if (rsiData.length > 0) rsi.setData(rsiData);
+                    
+                    const macdData = d
+                        .filter(x => x && x.time && x.macd_hist !== null && x.macd_hist !== undefined && !isNaN(x.macd_hist))
+                        .map(x => ({
+                            time: x.time,
+                            value: x.macd_hist,
+                            color: x.macd_hist >= 0 ? '#26a69a' : '#ef5350'
+                        }));
+                    if (macdData.length > 0) macdHist.setData(macdData);
+                    
+                    if (payload.prediction && payload.prediction.length > 0) {
+                        const lastCandle = candleData[candleData.length - 1];
+                        const predData = [
+                            { time: lastCandle.time, value: lastCandle.close },
+                            ...payload.prediction.filter(p => p && p.time && p.value !== null && !isNaN(p.value))
+                        ];
+                        predLine.setData(predData);
+                    }
+                    
+                    updateStats(payload.stats, d[d.length - 1]);
+                    
+                    if (!hasData) {
+                        hasData = true;
+                        loading.classList.add('hidden');
+                        mainChart.timeScale().fitContent();
+                    }
                 }
-            } catch (e) {
-                console.error(e);
+            } catch (err) {
+                console.error("Chart error:", err);
             }
         };
+        
+        ws.onclose = () => {
+            setStatus(false);
+            setTimeout(connect, 2000);
+        };
+        
+        ws.onerror = () => ws.close();
     }
     
     connect();
-    setTimeout(resize, 100);
+});
 </script>
 </body>
 </html>
@@ -468,7 +771,7 @@ async def fetch_initial_data():
     try:
         async with aiohttp.ClientSession() as session:
             url = "https://api.kraken.com/0/public/OHLC?pair=XBTUSD&interval=1"
-            async with session.get(url, timeout=30) as response:
+            async with session.get(url, timeout=aiohttp.ClientTimeout(total=30)) as response:
                 if response.status == 200:
                     data = await response.json()
                     if 'result' in data:
@@ -476,83 +779,131 @@ async def fetch_initial_data():
                             if key != 'last':
                                 raw = data['result'][key]
                                 market_state['ohlc_history'] = [
-                                    {'time': int(c[0]), 'open': float(c[1]), 'high': float(c[2]), 'low': float(c[3]), 'close': float(c[4]), 'volume': float(c[6])}
+                                    {
+                                        'time': int(c[0]),
+                                        'open': float(c[1]),
+                                        'high': float(c[2]),
+                                        'low': float(c[3]),
+                                        'close': float(c[4]),
+                                        'volume': float(c[6])
+                                    }
                                     for c in raw[-720:]
                                 ]
                                 market_state['ready'] = True
-    except Exception:
-        pass
+                                logging.info(f"Loaded {len(market_state['ohlc_history'])} initial candles")
+                                return True
+    except Exception as e:
+        logging.error(f"Initial data fetch error: {e}")
+    return False
 
-async def worker_kraken():
+async def kraken_rest_worker():
     await fetch_initial_data()
+    
     while True:
         try:
             async with aiohttp.ClientSession() as session:
                 url = "https://api.kraken.com/0/public/OHLC?pair=XBTUSD&interval=1"
-                async with session.get(url, timeout=10) as response:
+                async with session.get(url, timeout=aiohttp.ClientTimeout(total=30)) as response:
                     if response.status == 200:
                         data = await response.json()
-                        for key in data['result']:
-                            if key != 'last':
-                                raw = data['result'][key]
-                                new_candles = [
-                                    {'time': int(c[0]), 'open': float(c[1]), 'high': float(c[2]), 'low': float(c[3]), 'close': float(c[4]), 'volume': float(c[6])}
-                                    for c in raw[-5:]
-                                ]
-                                current_times = {c['time'] for c in market_state['ohlc_history']}
-                                for c in new_candles:
-                                    if c['time'] not in current_times:
-                                        market_state['ohlc_history'].append(c)
-                                    else:
-                                        for i, exist in enumerate(market_state['ohlc_history']):
-                                            if exist['time'] == c['time']:
-                                                market_state['ohlc_history'][i] = c
-                                market_state['ohlc_history'] = market_state['ohlc_history'][-800:]
-                                market_state['ready'] = True
-        except Exception:
-            pass
-        await asyncio.sleep(10)
+                        if 'result' in data:
+                            for key in data['result']:
+                                if key != 'last':
+                                    raw = data['result'][key]
+                                    new_candles = [
+                                        {
+                                            'time': int(c[0]),
+                                            'open': float(c[1]),
+                                            'high': float(c[2]),
+                                            'low': float(c[3]),
+                                            'close': float(c[4]),
+                                            'volume': float(c[6])
+                                        }
+                                        for c in raw[-10:]
+                                    ]
+                                    
+                                    if market_state['ohlc_history']:
+                                        existing_times = {c['time'] for c in market_state['ohlc_history']}
+                                        for nc in new_candles:
+                                            if nc['time'] in existing_times:
+                                                for i, ec in enumerate(market_state['ohlc_history']):
+                                                    if ec['time'] == nc['time']:
+                                                        market_state['ohlc_history'][i] = nc
+                                                        break
+                                            else:
+                                                market_state['ohlc_history'].append(nc)
+                                        
+                                        market_state['ohlc_history'].sort(key=lambda x: x['time'])
+                                        
+                                        if len(market_state['ohlc_history']) > 800:
+                                            market_state['ohlc_history'] = market_state['ohlc_history'][-800:]
+                                    
+                                    market_state['ready'] = True
+                                    break
+        except Exception as e:
+            logging.warning(f"REST update error: {e}")
+        
+        await asyncio.sleep(5)
 
-async def worker_broadcast():
+async def broadcast_worker():
     while True:
         if connected_clients and market_state['ready']:
             payload = process_market_data()
             if payload and "data" in payload:
                 msg = json.dumps(payload)
-                for ws in list(connected_clients):
+                disconnected = set()
+                for ws in connected_clients:
                     try:
                         await ws.send_str(msg)
                     except Exception:
-                        connected_clients.discard(ws)
+                        disconnected.add(ws)
+                connected_clients.difference_update(disconnected)
         await asyncio.sleep(BROADCAST_RATE)
 
-async def ws_handler(request):
+async def websocket_handler(request):
     ws = web.WebSocketResponse()
     await ws.prepare(request)
     connected_clients.add(ws)
+    logging.info(f"Client connected. Total: {len(connected_clients)}")
     try:
-        async for msg in ws: pass
+        async for msg in ws:
+            pass
     finally:
         connected_clients.discard(ws)
+        logging.info(f"Client disconnected. Total: {len(connected_clients)}")
     return ws
 
-async def idx_handler(request):
+async def handle_index(request):
     return web.Response(text=HTML_PAGE, content_type='text/html')
 
+async def handle_health(request):
+    return web.json_response({
+        "status": "ok",
+        "ready": market_state['ready'],
+        "candles": len(market_state['ohlc_history']),
+        "clients": len(connected_clients)
+    })
+
 async def main():
     app = web.Application()
-    app.add_routes([web.get('/', idx_handler), web.get('/ws', ws_handler)])
-    asyncio.create_task(worker_kraken())
-    asyncio.create_task(worker_broadcast())
+    app.router.add_get('/', handle_index)
+    app.router.add_get('/ws', websocket_handler)
+    app.router.add_get('/health', handle_health)
+    
+    asyncio.create_task(kraken_rest_worker())
+    asyncio.create_task(broadcast_worker())
+    
     runner = web.AppRunner(app)
     await runner.setup()
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
-    logging.info(f"http://localhost:{PORT}")
+    
+    logging.info(f"Server running at http://localhost:{PORT}")
+    
     await asyncio.Event().wait()
 
 if __name__ == "__main__":
     try:
         asyncio.run(main())
     except KeyboardInterrupt:
-        pass
+        logging.info("Shutting down...")