Update app.py

app.py

@@ -6,14 +6,12 @@ import aiohttp
 import pandas as pd
 import numpy as np
 from aiohttp import web
-import websockets
 from sklearn.ensemble import RandomForestRegressor
 
-# --- Configuration ---
 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
-BROADCAST_RATE = 1.0 
-PREDICTION_HORIZON = 100 
+BROADCAST_RATE = 1.0
+PREDICTION_HORIZON = 100
 
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
 
@@ -21,73 +19,69 @@ market_state = {
     "ohlc_history": [],
     "ready": False,
     "model": None,
-    "last_training_time": 0
+    "last_training_time": 0,
+    "last_price": 0,
+    "price_change": 0
 }
 
 connected_clients = set()
 
-# --- Indicator Logic ---
 def calculate_indicators(candles):
-    if len(candles) < 50: return None
+    if len(candles) < 50:
+        return None
     
     df = pd.DataFrame(candles)
     cols = ['open', 'high', 'low', 'close', 'volume']
-    for c in cols: df[c] = df[c].astype(float)
+    for c in cols:
+        df[c] = df[c].astype(float)
 
-    # EMA 20
     df['ema'] = df['close'].ewm(span=20, adjust=False).mean()
-
-    # Bollinger Bands
+    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']
 
-    # RSI
     delta = df['close'].diff()
     gain = (delta.where(delta > 0, 0)).rolling(window=14).mean()
     loss = (-delta.where(delta < 0, 0)).rolling(window=14).mean()
     rs = gain / loss
     df['rsi'] = 100 - (100 / (1 + rs))
 
-    # MACD
     k = df['close'].ewm(span=12, adjust=False).mean()
     d = df['close'].ewm(span=26, adjust=False).mean()
     df['macd'] = k - d
     df['macd_signal'] = df['macd'].ewm(span=9, adjust=False).mean()
     df['macd_hist'] = df['macd'] - df['macd_signal']
 
-    # Stochastic
     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()
 
-    # ATR
     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()
 
-    # OBV
     df['obv'] = (np.sign(df['close'].diff()) * df['volume']).fillna(0).cumsum()
 
-    # VWAP
     df['tp'] = (df['high'] + df['low'] + df['close']) / 3
     df['vwap'] = (df['tp'] * df['volume']).cumsum() / df['volume'].cumsum()
     
     return df
 
-# --- Machine Learning Logic ---
 def train_model(df):
     logging.info("Training ML Model...")
     
     feature_cols = ['close', 'ema', 'bb_upper', 'bb_lower', 'rsi', 'macd', 'stoch_k', 'atr', 'obv', 'vwap']
     
-    # Clean data for training
     data = df.dropna().copy()
     
-    # Create Targets efficiently (fix for fragmentation warning)
     future_shifts = {}
     targets = []
     
@@ -98,7 +92,6 @@ def train_model(df):
         
     target_df = pd.DataFrame(future_shifts, index=data.index)
     data = pd.concat([data, target_df], axis=1)
-
     data = data.dropna()
 
     if len(data) < 100:
@@ -108,7 +101,6 @@ def train_model(df):
     X = data[feature_cols].values
     y = data[targets].values
 
-    # Train Random Forest
     model = RandomForestRegressor(n_estimators=50, max_depth=10, n_jobs=-1, random_state=42)
     model.fit(X, y)
     
@@ -116,34 +108,35 @@ def train_model(df):
     return model
 
 def get_prediction(df, model):
-    if model is None: return []
+    if model is None:
+        return []
     
     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(): return []
+    if last_row.isnull().values.any():
+        return []
 
-    prediction = model.predict(last_row.values)[0] 
+    prediction = model.predict(last_row.values)[0]
     
     current_time = int(df.iloc[-1]['time'])
     pred_data = []
     for i, price in enumerate(prediction):
         pred_data.append({
-            "time": current_time + ((i + 1) * 60), 
+            "time": current_time + ((i + 1) * 60),
             "value": float(price)
         })
     
     return pred_data
 
 def process_market_data():
-    if not market_state['ready'] or not market_state['ohlc_history']: 
+    if not market_state['ready'] or not market_state['ohlc_history']:
         return {"error": "Initializing..."}
 
-    # 1. Calculate DataFrame
     df = calculate_indicators(market_state['ohlc_history'])
-    if df is None or len(df) < 50: return {"error": "Not enough data"}
+    if df is None or len(df) < 50:
+        return {"error": "Not enough data"}
 
-    # 2. Train Model (Periodically)
     if market_state['model'] is None or (time.time() - market_state['last_training_time'] > 900):
         try:
             market_state['model'] = train_model(df)
@@ -151,162 +144,633 @@ def process_market_data():
         except Exception as e:
             logging.error(f"Training failed: {e}")
 
-    # 3. Get Prediction
     predictions = []
     try:
         predictions = get_prediction(df, market_state['model'])
     except Exception as e:
         logging.error(f"Prediction failed: {e}")
 
-    # 4. Clean Data for JSON (Remove Infinity/NaN)
-    # This prevents the "blank graph" issue caused by invalid JSON
     df_clean = df.replace([np.inf, -np.inf], np.nan)
+    
+    last_close = float(df_clean['close'].iloc[-1]) if len(df_clean) > 0 else 0
+    first_close = float(df_clean['close'].iloc[0]) if len(df_clean) > 0 else 0
+    price_change = ((last_close - first_close) / first_close * 100) if first_close > 0 else 0
+    
+    market_state['last_price'] = last_close
+    market_state['price_change'] = price_change
+    
     full_data = df_clean.where(pd.notnull(df_clean), None).to_dict('records')
     
+    last_row = df_clean.iloc[-1] if len(df_clean) > 0 else {}
+    
     return {
         "data": full_data,
-        "prediction": predictions
+        "prediction": predictions,
+        "stats": {
+            "price": last_close,
+            "change": round(price_change, 2),
+            "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
+        }
     }
 
-# --- Frontend ---
-HTML_PAGE = f"""
+HTML_PAGE = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>{SYMBOL_KRAKEN} AI Predictor</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
-        body {{ margin: 0; background: #000; color: #fff; font-family: 'Segoe UI', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }}
-        .header {{ height: 32px; background: #0a0a0a; border-bottom: 1px solid #333; display: flex; align-items: center; padding: 0 12px; font-size: 13px; font-weight: 600; justify-content: space-between; }}
-        #charts-container {{ flex: 1; display: flex; flex-direction: column; }}
-        .chart-row {{ width: 100%; position: relative; border-bottom: 1px solid #222; }}
-        #main-chart {{ flex: 4; }}
-        #osc-chart {{ flex: 1; min-height: 100px; }}
-        .legend {{ position: absolute; top: 8px; left: 10px; z-index: 10; font-size: 11px; color: #aaa; pointer-events: none; text-shadow: 1px 1px 2px #000; }}
-        .l-item {{ margin-right: 12px; }}
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        
+        body {
+            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;
+        }
+        
+        .header {
+            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;
+            z-index: 100;
+        }
+        
+        .logo-section {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        
+        .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;
+        }
+        
+        .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;
+        }
+        
+        .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;
+            position: relative;
+        }
+        
+        .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: 12px;
+            left: 16px;
+            z-index: 10;
+            display: flex;
+            gap: 16px;
+            font-size: 11px;
+            pointer-events: none;
+        }
+        
+        .chart-label span {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        
+        .chart-label .dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+        }
+        
+        .loading-overlay {
+            position: absolute;
+            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: 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); }
+        }
+        
+        .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: 10px;
+            color: #bf5af2;
+            z-index: 10;
+        }
     </style>
 </head>
 <body>
     <div class="header">
-        <span style="color:#00e676">{SYMBOL_KRAKEN} + Random Forest (Next 100 Candles)</span>
-        <span id="clock" style="color:#888">Connecting...</span>
+        <div class="logo-section">
+            <div class="logo">QuantAI</div>
+            <div class="symbol-badge">BTC/USD</div>
+        </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-item">
+                <span class="stat-label">RSI</span>
+                <span id="rsi" class="stat-value">--</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-label">ATR</span>
+                <span id="atr" class="stat-value">--</span>
+            </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 id="charts-container">
-        <div id="main-chart" class="chart-row">
-            <div class="legend">
-                <span class="l-item" style="color:#00ff9d">Price</span>
-                <span class="l-item" style="color:#bf5af2">AI Forecast</span>
-                <span class="l-item" style="color:#2962FF">EMA</span>
+    <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="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 id="osc-chart" class="chart-row">
-            <div class="legend">
-                <span class="l-item" style="color:#9C27B0">RSI</span>
-                <span class="l-item" style="color:#26a69a">MACD</span>
+        
+        <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>
     </div>
 
 <script>
-    document.addEventListener('DOMContentLoaded', () => {{
-        const mainEl = document.getElementById('main-chart');
-        const oscEl = document.getElementById('osc-chart');
-
-        const commonOpts = {{
-            layout: {{ background: {{ type: 'solid', color: '#000' }}, textColor: '#888' }},
-            grid: {{ vertLines: {{ color: '#111' }}, horzLines: {{ color: '#111' }} }},
-            timeScale: {{ timeVisible: true, secondsVisible: false, borderColor: '#333' }},
-            rightPriceScale: {{ borderColor: '#333' }},
-            crosshair: {{ mode: 1 }}
-        }};
-
-        // 1. Initialize Charts
-        const mainChart = LightweightCharts.createChart(mainEl, commonOpts);
-        const candles = mainChart.addCandlestickSeries({{ upColor: '#00ff9d', downColor: '#ff3b3b', borderVisible: false }});
-        const ema = mainChart.addLineSeries({{ color: '#2962FF', lineWidth: 1 }});
-        const predLine = mainChart.addLineSeries({{ color: '#bf5af2', lineWidth: 2, lineStyle: 2 }});
-
-        const oscChart = LightweightCharts.createChart(oscEl, commonOpts);
-        const rsi = oscChart.addLineSeries({{ color: '#9C27B0', lineWidth: 1 }});
-        const macdHist = oscChart.addHistogramSeries({{ priceScaleId: 'macd', color: '#2962FF' }});
-        oscChart.priceScale('macd').applyOptions({{ scaleMargins: {{ top: 0.8, bottom: 0 }} }});
-
-        // 2. Responsive Resize
-        new ResizeObserver(entries => {{
-             for (let e of entries) {{
-                 if(e.target === mainEl) mainChart.applyOptions({{ width: e.contentRect.width, height: e.contentRect.height }});
-                 if(e.target === oscEl) oscChart.applyOptions({{ width: e.contentRect.width, height: e.contentRect.height }});
-             }}
-        }}).observe(document.body);
-
-        // 3. Sync Time Scales
-        function syncCharts(source, targets) {{
-            source.timeScale().subscribeVisibleLogicalRangeChange(range => {{
-                targets.forEach(t => t.timeScale().setVisibleLogicalRange(range));
-            }});
-        }}
-        syncCharts(mainChart, [oscChart]);
-        syncCharts(oscChart, [mainChart]);
-
-        // 4. WebSocket Logic
-        function connect() {{
-            const ws = new WebSocket((location.protocol === 'https:' ? 'wss' : 'ws') + '://' + location.host + '/ws');
+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 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 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 });
+    }
+
+    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');
             
-            ws.onmessage = (e) => {{
-                try {{
-                    const payload = JSON.parse(e.data);
-                    if (!payload.data) return;
+            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;
+        }
+        
+        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.onopen = () => setStatus(true);
+        
+        ws.onmessage = (e) => {
+            try {
+                const payload = JSON.parse(e.data);
+                if (!payload.data || payload.data.length === 0) return;
+                
+                const d = payload.data;
+                
+                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 d = payload.data;
+                    const emaData = safeMap(d, 'ema');
+                    if (emaData.length > 0) ema.setData(emaData);
                     
-                    // Helper to map safely (avoids undefined/null crashes)
-                    const mapData = (key) => d
-                        .map(x => ({{ time: x.time, value: x[key] }}))
-                        .filter(x => x.value !== null && x.value !== undefined);
-
-                    // Set Data
-                    candles.setData(d.map(x => ({{ time: x.time, open: x.open, high: x.high, low: x.low, close: x.close }})));
-                    ema.setData(mapData('ema'));
-                    rsi.setData(mapData('rsi'));
+                    const bbUpperData = safeMap(d, 'bb_upper');
+                    if (bbUpperData.length > 0) bbUpper.setData(bbUpperData);
                     
-                    if(payload.prediction && payload.prediction.length > 0) {{
-                        predLine.setData(payload.prediction);
-                    }}
-
-                    macdHist.setData(d.map(x => ({{ 
-                        time: x.time, 
-                        value: x.macd_hist || 0, 
-                        color: (x.macd_hist||0) >= 0 ? '#26a69a' : '#ef5350' 
-                    }})));
+                    const bbLowerData = safeMap(d, 'bb_lower');
+                    if (bbLowerData.length > 0) bbLower.setData(bbLowerData);
                     
-                    // Update Clock
-                    document.getElementById('clock').innerText = new Date().toISOString().split('T')[1].split('.')[0] + ' UTC';
-                }} catch (err) {{
-                    console.error("Chart Render Error:", err);
-                }}
-            }};
-            
-            ws.onclose = () => {{
-                document.getElementById('clock').innerText = "Disconnected. Retrying...";
-                setTimeout(connect, 2000);
-            }};
-        }}
-        
-        connect();
-    }});
+                    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 (err) {
+                console.error("Chart error:", err);
+            }
+        };
+        
+        ws.onclose = () => {
+            setStatus(false);
+            setTimeout(connect, 2000);
+        };
+        
+        ws.onerror = () => ws.close();
+    }
+    
+    connect();
+});
 </script>
 </body>
 </html>
 """
 
-async def kraken_worker():
-    global market_state
+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) as response:
+            url = "https://api.kraken.com/0/public/OHLC?pair=XBTUSD&interval=1"
+            async with session.get(url, timeout=aiohttp.ClientTimeout(total=30)) as response:
                 if response.status == 200:
                     data = await response.json()
                     if 'result' in data:
@@ -315,82 +779,70 @@ async def kraken_worker():
                                 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]), 
+                                        '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:] 
+                                    for c in raw[-720:]
                                 ]
                                 market_state['ready'] = True
-                                break
+                                logging.info(f"Loaded {len(market_state['ohlc_history'])} initial candles")
+                                return True
     except Exception as e:
-        logging.error(f"Init Error: {e}")
+        logging.error(f"Initial data fetch error: {e}")
+    return False
 
+async def kraken_rest_worker():
+    await fetch_initial_data()
+    
     while True:
         try:
-            async with websockets.connect("wss://ws.kraken.com/v2") as ws:
-                logging.info("WebSocket Connected")
-                await ws.send(json.dumps({"method": "subscribe", "params": {"channel": "trade", "symbol": [SYMBOL_KRAKEN]}}))
-                await ws.send(json.dumps({"method": "subscribe", "params": {"channel": "ohlc", "symbol": [SYMBOL_KRAKEN], "interval": 1}}))
-
-                async for message in ws:
-                    payload = json.loads(message)
-                    channel = payload.get("channel")
-                    data = payload.get("data", [])
-
-                    if channel == "trade":
-                        for trade in data:
-                            try:
-                                price = float(trade['price'])
-                                vol = float(trade['qty'])
-                                current_minute = int(time.time()) // 60 * 60
-                                
-                                if market_state['ohlc_history']:
-                                    last = market_state['ohlc_history'][-1]
-                                    if last['time'] == current_minute:
-                                        last['close'] = price
-                                        last['volume'] += vol
-                                        if price > last['high']: last['high'] = price
-                                        if price < last['low']: last['low'] = price
-                                    elif current_minute > last['time']:
-                                        market_state['ohlc_history'].append({
-                                            'time': current_minute, 
-                                            'open': price, 
-                                            'high': price, 
-                                            'low': price, 
-                                            'close': price, 
-                                            'volume': vol
-                                        })
-                                        if len(market_state['ohlc_history']) > 800: 
-                                            market_state['ohlc_history'].pop(0)
-                            except: pass
-                    
-                    elif channel == "ohlc":
-                        for c in data:
-                            try:
-                                t = int(float(c['endtime'])) - 60
-                                c_data = {
-                                    'time': t, 
-                                    'open': float(c['open']), 
-                                    'high': float(c['high']), 
-                                    'low': float(c['low']), 
-                                    'close': float(c['close']), 
-                                    'volume': float(c['volume'])
-                                }
-                                if market_state['ohlc_history']:
-                                    if market_state['ohlc_history'][-1]['time'] == t: 
-                                        market_state['ohlc_history'][-1] = c_data
-                                    elif market_state['ohlc_history'][-1]['time'] < t: 
-                                        market_state['ohlc_history'].append(c_data)
-                                        if len(market_state['ohlc_history']) > 800: 
-                                            market_state['ohlc_history'].pop(0)
-                            except: pass
+            async with aiohttp.ClientSession() as session:
+                url = "https://api.kraken.com/0/public/OHLC?pair=XBTUSD&interval=1"
+                async with session.get(url, timeout=aiohttp.ClientTimeout(total=30)) as response:
+                    if response.status == 200:
+                        data = await response.json()
+                        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"Reconnecting: {e}")
-            await asyncio.sleep(2)
+            logging.warning(f"REST update error: {e}")
+        
+        await asyncio.sleep(5)
 
 async def broadcast_worker():
     while True:
@@ -398,35 +850,59 @@ async def broadcast_worker():
             payload = process_market_data()
             if payload and "data" in payload:
                 msg = json.dumps(payload)
-                for ws in list(connected_clients):
-                    try: await ws.send_str(msg)
-                    except: pass
+                disconnected = set()
+                for ws in connected_clients:
+                    try:
+                        await ws.send_str(msg)
+                    except Exception:
+                        disconnected.add(ws)
+                connected_clients.difference_update(disconnected)
         await asyncio.sleep(BROADCAST_RATE)
 
 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
-    finally: connected_clients.remove(ws)
+        async for msg in ws:
+            pass
+    finally:
+        connected_clients.discard(ws)
+        logging.info(f"Client disconnected. Total: {len(connected_clients)}")
     return ws
 
 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.router.add_get('/', handle_index)
     app.router.add_get('/ws', websocket_handler)
-    asyncio.create_task(kraken_worker())
+    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()
-    await web.TCPSite(runner, '0.0.0.0', PORT).start()
-    print(f"🚀 AI Quant: http://localhost:{PORT}")
+    site = web.TCPSite(runner, '0.0.0.0', PORT)
+    await site.start()
+    
+    logging.info(f"Server running at http://localhost:{PORT}")
+    
     await asyncio.Event().wait()
 
 if __name__ == "__main__":
-    try: asyncio.run(main())
-    except KeyboardInterrupt: pass
+    try:
+        asyncio.run(main())
+    except KeyboardInterrupt:
+        logging.info("Shutting down...")