Update app.py

app.py

@@ -2,219 +2,181 @@ import asyncio
 import json
 import logging
 import time
+import bisect
 import math
+import statistics
 import aiohttp
-from collections import deque
+from datetime import datetime
 from aiohttp import web
 import websockets
-import statistics
 
 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
 HISTORY_LENGTH = 300 
 BROADCAST_RATE = 0.1
-MICROPRICE_DECAY = 0.05 
 
-logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
+DECAY_LAMBDA = 50.0      
+IMPACT_SENSITIVITY = 2.0 
+WALL_DAMPENING = 0.8     
+Z_SCORE_THRESHOLD = 3.0  
+WALL_LOOKBACK = 200      
 
-class OnlineStats:
-    def __init__(self):
-        self.count = 0
-        self.mean = 0.0
-        self.M2 = 0.0
-
-    def update(self, value):
-        self.count += 1
-        delta = value - self.mean
-        self.mean += delta / self.count
-        delta2 = value - self.mean
-        self.M2 += delta * delta2
-
-    @property
-    def variance(self):
-        if self.count < 2: return 0.0
-        return self.M2 / self.count
-
-    @property
-    def std_dev(self):
-        return math.sqrt(self.variance)
-
-class KalmanVelocity:
-    def __init__(self, R=0.001, Q=0.0001):
-        self.z = 0.0 
-        self.v = 0.0 
-        self.P = 1.0 
-        self.R = R   
-        self.Q = Q   
-        self.last_ts = time.time()
-
-    def update(self, price):
-        now = time.time()
-        dt = now - self.last_ts
-        self.last_ts = now
-        if dt <= 0: return
-
-        pred_z = self.z + self.v * dt
-        pred_v = self.v
-        p_cov = self.P + self.Q
-
-        y = price - pred_z 
-        K = p_cov / (p_cov + self.R) 
-        
-        self.z = pred_z + K * y
-        self.v = pred_v + (K / dt) * y 
-        self.P = (1 - K) * p_cov
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
 
 market_state = {
     "bids": {},
     "asks": {},
     "history": [], 
-    "trade_history": deque(maxlen=2000), 
+    "pred_history": [], 
+    "trade_vol_history": [], 
     "ohlc_history": [], 
     "current_vol_window": {"buy": 0.0, "sell": 0.0, "start": time.time()},
     "current_mid": 0.0,
-    "ready": False,
-    "kalman": KalmanVelocity(),
-    "stats": OnlineStats(), 
-    "walls": {"bids": [], "asks": []}
+    "ready": False
 }
 
 connected_clients = set()
 
-def detect_walls(order_book, side_name):
-    if not order_book: return []
-    
-    sorted_book = sorted(order_book.items(), key=lambda x: x[0], reverse=(side_name == 'bids'))
-    relevant = sorted_book[:50]
-    
-    volumes = [q for p, q in relevant]
+def detect_anomalies(orders, scan_depth):
+    if len(orders) < 10: return []
+    relevant_orders = orders[:scan_depth]
+    volumes = [q for p, q in relevant_orders]
     if not volumes: return []
-    
-    avg_vol = statistics.mean(volumes)
-    std_vol = statistics.stdev(volumes) if len(volumes) > 1 else 0
-    
+
+    try:
+        avg_vol = statistics.mean(volumes)
+        stdev_vol = statistics.stdev(volumes)
+    except statistics.StatisticsError:
+        return []
+
+    if stdev_vol == 0: return []
+
     walls = []
-    for p, q in relevant:
-        if std_vol > 0:
-            z = (q - avg_vol) / std_vol
-            if z > 2.5:
-                walls.append({'p': p, 'q': q, 'z': z})
-    
-    return walls[:3]
+    for price, qty in relevant_orders:
+        z_score = (qty - avg_vol) / stdev_vol
+        if z_score > Z_SCORE_THRESHOLD:
+            walls.append({"price": price, "vol": qty, "z_score": z_score})
 
-def calculate_weighted_micro_price(mid_price):
-    bids = sorted(market_state['bids'].items(), reverse=True)[:50] 
-    asks = sorted(market_state['asks'].items())[:50]
+    walls.sort(key=lambda x: x['z_score'], reverse=True)
+    return walls[:3]
 
-    if not bids or not asks: return mid_price
+def calculate_micro_price_structure(diff_x, diff_y_net, current_mid, best_bid, best_ask, walls):
+    if not diff_x or len(diff_x) < 5: return None
 
-    sum_wb = 0.0
-    sum_wa = 0.0
+    weighted_imbalance = 0.0
+    total_weight = 0.0
     
-    for p, q in bids:
-        distance = abs(mid_price - p)
-        weight = q * math.exp(-MICROPRICE_DECAY * distance)
-        sum_wb += weight
-
-    for p, q in asks:
-        distance = abs(p - mid_price)
-        weight = q * math.exp(-MICROPRICE_DECAY * distance)
-        sum_wa += weight
-
-    total_w = sum_wb + sum_wa
-    if total_w == 0: return mid_price
-
-    imbalance = (sum_wb - sum_wa) / total_w
-    spread = asks[0][0] - bids[0][0]
-    micro_price = mid_price + (imbalance * (spread / 2))
-    return micro_price
-
-def calculate_vwap_1m():
-    cutoff = time.time() - 60
-    v_sum = 0.0
-    pv_sum = 0.0
-    
-    for trade in reversed(market_state['trade_history']):
-        if trade['t'] < cutoff: break
-        pv_sum += trade['p'] * trade['q']
-        v_sum += trade['q']
-    
-    return pv_sum / v_sum if v_sum > 0 else market_state['current_mid']
+    for i in range(len(diff_x)):
+        dist = diff_x[i]
+        net_vol = diff_y_net[i]
+        weight = math.exp(-dist / DECAY_LAMBDA)
+        weighted_imbalance += net_vol * weight
+        total_weight += weight
+
+    rho = weighted_imbalance / total_weight if total_weight > 0 else 0
+
+    spread = best_ask - best_bid
+    theoretical_delta = (spread / 2) * rho * IMPACT_SENSITIVITY
+    projected_price = current_mid + theoretical_delta
+
+    final_delta = theoretical_delta
+    if final_delta > 0 and walls['asks']:
+        nearest_wall = walls['asks'][0]
+        if projected_price >= nearest_wall['price']:
+            damp_factor = 1.0 / (1.0 + (nearest_wall['z_score'] * 0.2))
+            final_delta *= damp_factor
+    elif final_delta < 0 and walls['bids']:
+        nearest_wall = walls['bids'][0]
+        if projected_price <= nearest_wall['price']:
+            damp_factor = 1.0 / (1.0 + (nearest_wall['z_score'] * 0.2))
+            final_delta *= damp_factor
 
-def calculate_kyle_lambda(volatility, volume_window):
-    if volume_window <= 0: return 0
-    return (volatility * 1000) / (math.sqrt(volume_window) + 1)
+    return {
+        "projected": current_mid + final_delta,
+        "rho": rho
+    }
 
 def process_market_data():
     if not market_state['ready']: return {"error": "Initializing..."}
 
     mid = market_state['current_mid']
-    now = time.time()
-
-    market_state['stats'].update(mid)
-    volatility = market_state['stats'].std_dev
-    if volatility == 0: volatility = 1.0 
-
-    market_state['kalman'].update(mid)
     
-    micro_price = calculate_weighted_micro_price(mid)
-    vwap = calculate_vwap_1m()
+    now = time.time()
+    if now - market_state['current_vol_window']['start'] >= 1.0:
+        market_state['trade_vol_history'].append({
+            't': now,
+            'buy': market_state['current_vol_window']['buy'],
+            'sell': market_state['current_vol_window']['sell']
+        })
+        if len(market_state['trade_vol_history']) > 60: 
+            market_state['trade_vol_history'].pop(0)
+        market_state['current_vol_window'] = {"buy": 0.0, "sell": 0.0, "start": now}
+
+    sorted_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0])
+    sorted_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])
     
-    ofi_buy = 0.0
-    ofi_sell = 0.0
-    ofi_window = 10.0
+    if not sorted_bids or not sorted_asks: return {"error": "Empty Book"}
+
+    best_bid = sorted_bids[0][0]
+    best_ask = sorted_asks[0][0]
+
+    bid_walls = detect_anomalies(sorted_bids, WALL_LOOKBACK)
+    ask_walls = detect_anomalies(sorted_asks, WALL_LOOKBACK)
+
+    d_b_x, d_b_y, cum = [], [], 0
+    for p, q in sorted_bids[:300]:
+        d = mid - p
+        if d >= 0:
+            cum += q
+            d_b_x.append(d); d_b_y.append(cum)
+
+    d_a_x, d_a_y, cum = [], [], 0
+    for p, q in sorted_asks[:300]:
+        d = p - mid
+        if d >= 0:
+            cum += q
+            d_a_x.append(d); d_a_y.append(cum)
+
+    diff_x, diff_y_net = [], []
+    chart_bids, chart_asks = [], []
     
-    for t in reversed(market_state['trade_history']):
-        if t['t'] < (now - ofi_window): break
-        if t['side'] == 'buy': ofi_buy += t['q']
-        else: ofi_sell += t['q']
+    if d_b_x and d_a_x:
+        max_dist = min(d_b_x[-1], d_a_x[-1])
+        step_size = max_dist / 100
+        steps = [i * step_size for i in range(1, 101)]
         
-    net_ofi = ofi_buy - ofi_sell
-    total_vol_10s = ofi_buy + ofi_sell
+        for s in steps:
+            idx_b = bisect.bisect_right(d_b_x, s)
+            vol_b = d_b_y[idx_b-1] if idx_b > 0 else 0
+            idx_a = bisect.bisect_right(d_a_x, s)
+            vol_a = d_a_y[idx_a-1] if idx_a > 0 else 0
+            
+            diff_x.append(s)
+            diff_y_net.append(vol_b - vol_a)
+            chart_bids.append(vol_b)
+            chart_asks.append(vol_a)
+
+    analysis = calculate_micro_price_structure(
+        diff_x, diff_y_net, mid, best_bid, best_ask, 
+        {"bids": bid_walls, "asks": ask_walls}
+    )
     
-    k_lambda = calculate_kyle_lambda(volatility, total_vol_10s)
-    impact_term = net_ofi * k_lambda
-
-    mean_reversion_alpha = 0.1 
-    reversion_term = (vwap - mid) * mean_reversion_alpha
-
-    micro_alpha = (micro_price - mid) * 0.8 
-
-    trend_term = market_state['kalman'].v * 60.0
-
-    predicted_delta = impact_term + micro_alpha + trend_term + reversion_term
-    pred_close = mid + predicted_delta
-
-    sigma_1m = volatility * math.sqrt(60) 
-    
-    pred_candle = {
-        'time': int(now) + 60,
-        'open': mid,
-        'close': pred_close,
-        'high': max(mid, pred_close) + (2 * sigma_1m),
-        'low': min(mid, pred_close) - (2 * sigma_1m)
-    }
-
-    if not market_state['history'] or (now - market_state['history'][-1]['t'] > 0.5):
-        market_state['history'].append({'t': now, 'p': mid})
-        if len(market_state['history']) > HISTORY_LENGTH:
-            market_state['history'].pop(0)
-
-    bid_walls = detect_walls(market_state['bids'], 'bids')
-    ask_walls = detect_walls(market_state['asks'], 'asks')
-
-    analysis = {
-        "projected": pred_close,
-        "rho": (micro_price - mid), 
-        "vwap": vwap,
-        "lambda": k_lambda
-    }
+    if analysis:
+        if not market_state['pred_history'] or (now - market_state['pred_history'][-1]['t'] > 0.5):
+            market_state['pred_history'].append({'t': now, 'p': analysis['projected']})
+            if len(market_state['pred_history']) > HISTORY_LENGTH:
+                market_state['pred_history'].pop(0)
 
     return {
         "mid": mid,
         "history": market_state['history'],
+        "pred_history": market_state['pred_history'],
+        "trade_history": market_state['trade_vol_history'],
         "ohlc": market_state['ohlc_history'],
-        "pred_candle": pred_candle,
+        "depth_x": diff_x,
+        "depth_net": diff_y_net,
+        "depth_bids": chart_bids,
+        "depth_asks": chart_asks,
         "analysis": analysis,
         "walls": {"bids": bid_walls, "asks": ask_walls}
     }
@@ -224,145 +186,373 @@ HTML_PAGE = f"""
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>{SYMBOL_KRAKEN} Quant</title>
+    <title>{SYMBOL_KRAKEN}</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@500;600&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     <style>
-        :root {{ --bg-base: #000000; --bg-panel: #0a0a0a; --border: #252525; --text-main: #FFFFFF; --text-dim: #999999; --green: #00ff9d; --red: #ff3b3b; --purple: #d500f9; }}
-        body {{ margin: 0; padding: 0; background-color: var(--bg-base); color: var(--text-main); font-family: 'Inter', sans-serif; overflow: hidden; height: 100vh; width: 100vw; }}
-        .layout {{ display: grid; grid-template-rows: 34px 1fr 1fr; grid-template-columns: 3fr 1fr; gap: 1px; background-color: var(--border); height: 100vh; }}
+        :root {{
+            --bg-base: #000000;
+            --bg-panel: #0a0a0a;
+            --border: #252525;
+            --text-main: #FFFFFF;
+            --text-dim: #999999;
+            --green: #00ff9d;
+            --red: #ff3b3b;
+            --blue: #2979ff;
+            --yellow: #ffeb3b; 
+        }}
+        body {{ 
+            margin: 0; padding: 0; 
+            background-color: var(--bg-base); 
+            color: var(--text-main); 
+            font-family: 'Inter', sans-serif; 
+            overflow: hidden; 
+            height: 100vh; width: 100vw;
+        }}
+        
+        .layout {{ 
+            display: grid; 
+            grid-template-rows: 34px 1fr 1fr; 
+            grid-template-columns: 3fr 1fr; 
+            gap: 1px;
+            background-color: var(--border); 
+            height: 100vh; 
+            box-sizing: border-box;
+        }}
+
         .panel {{ background: var(--bg-panel); display: flex; flex-direction: column; overflow: hidden; }}
-        .status-bar {{ grid-column: 1 / 3; grid-row: 1 / 2; background: var(--bg-panel); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-family: 'JetBrains Mono', monospace; font-size: 12px; border-bottom: 1px solid var(--border); }}
-        .live-dot {{ width: 8px; height: 8px; background-color: var(--green); border-radius: 50%; display: inline-block; margin-right: 8px; box-shadow: 0 0 8px var(--green); }}
+        
+        .status-bar {{
+            grid-column: 1 / 3;
+            grid-row: 1 / 2;
+            background: var(--bg-panel);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 12px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 12px;
+            text-transform: uppercase;
+            border-bottom: 1px solid var(--border);
+            z-index: 50;
+        }}
+        .status-left {{ display: flex; gap: 20px; align-items: center; }}
+        .live-dot {{ width: 8px; height: 8px; background-color: var(--green); border-radius: 50%; display: inline-block; box-shadow: 0 0 8px var(--green); }}
+        .ticker-val {{ font-weight: 700; color: #fff; font-size: 13px; }}
+
         #p-chart {{ grid-column: 1 / 2; grid-row: 2 / 3; }}
-        #p-bottom {{ grid-column: 1 / 2; grid-row: 3 / 4; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); }}
-        #p-sidebar {{ grid-column: 2 / 3; grid-row: 2 / 4; padding: 15px; display: flex; flex-direction: column; gap: 20px; border-left: 1px solid var(--border); }}
-        .chart-header {{ height: 24px; display: flex; align-items: center; padding-left: 12px; font-size: 10px; font-weight: 700; color: var(--text-dim); background: #050505; border-bottom: 1px solid #151515; }}
+        
+        #p-bottom {{ 
+            grid-column: 1 / 2; grid-row: 3 / 4; 
+            display: grid; 
+            grid-template-columns: 1fr 1fr; 
+            gap: 1px; 
+            background: var(--border); 
+        }}
+        .bottom-sub {{ background: var(--bg-panel); display: flex; flex-direction: column; position: relative; }}
+
+        #p-sidebar {{ 
+            grid-column: 2 / 3; 
+            grid-row: 2 / 4; 
+            padding: 15px;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+            border-left: 1px solid var(--border);
+            overflow: hidden;
+        }}
+
+        .chart-header {{
+            height: 24px;
+            min-height: 24px;
+            display: flex;
+            align-items: center;
+            padding-left: 12px;
+            font-size: 10px;
+            font-weight: 700;
+            color: var(--text-dim);
+            background: #050505; 
+            border-bottom: 1px solid #151515;
+            letter-spacing: 0.5px;
+        }}
+
         .data-group {{ display: flex; flex-direction: column; gap: 4px; }}
-        .label {{ font-size: 10px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; }}
+        .label {{ font-size: 10px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }}
         .value {{ font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; color: #fff; }}
         .value-lg {{ font-size: 26px; }}
         .value-sub {{ font-family: 'JetBrains Mono', monospace; font-size: 11px; margin-top: 2px; color: #666; }}
+
         .divider {{ height: 1px; background: var(--border); width: 100%; }}
-        .c-purple {{ color: var(--purple); }}
+        .c-green {{ color: var(--green); }}
+        .c-red {{ color: var(--red); }}
+        .c-dim {{ color: var(--text-dim); }}
+
+        .list-container {{ display: flex; flex-direction: column; gap: 8px; overflow-y: auto; height: 100px; }}
+        .list-item {{ 
+            display: flex; justify-content: space-between; 
+            font-family: 'JetBrains Mono', monospace; 
+            font-size: 11px; 
+            border-bottom: 1px solid #151515;
+            padding-bottom: 4px;
+        }}
+        .list-item span:first-child {{ color: #e0e0e0; }}
+        .list-item:last-child {{ border: none; }}
+        
+        .sidebar-chart-box {{
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-height: 0;
+        }}
+        .mini-chart {{
+            flex: 1;
+            background: rgba(255,255,255,0.02);
+            border: 1px solid var(--border);
+            border-radius: 4px;
+        }}
     </style>
 </head>
 <body>
+
     <div class="layout">
         <div class="status-bar">
-            <div><span class="live-dot"></span><span style="font-weight:700;">{SYMBOL_KRAKEN} MATH MODEL</span></div>
-            <div id="price-ticker">---</div>
+            <div class="status-left">
+                <span class="live-dot"></span>
+                <span style="font-weight:700; color:#fff;">{SYMBOL_KRAKEN}</span>
+                <span id="price-ticker" class="ticker-val">---</span>
+            </div>
+            <div class="status-right" id="clock">00:00:00 UTC</div>
         </div>
+
         <div id="p-chart" class="panel">
-            <div class="chart-header">PRICE (BLUE) vs PREDICTION (YELLOW) vs VWAP (WHITE)</div>
-            <div id="tv-price" style="flex: 1;"></div>
+            <div class="chart-header">PRICE ACTION (BLUE) // PREDICTION (YELLOW)</div>
+            <div id="tv-price" style="flex: 1; width: 100%;"></div>
         </div>
-        <div id="p-bottom" class="panel">
-            <div class="chart-header">1M KLINE + WALLS + GHOST PREDICTION (PURPLE)</div>
-            <div id="tv-candles" style="flex: 1;"></div>
+
+        <div id="p-bottom">
+            <div class="bottom-sub">
+                <div class="chart-header">1M KLINE (KRAKEN OHLC)</div>
+                <div id="tv-candles" style="flex: 1; width: 100%;"></div>
+            </div>
+            <div class="bottom-sub">
+                <div class="chart-header">ORDER FLOW IMBALANCE</div>
+                <div id="tv-net" style="flex: 1; width: 100%;"></div>
+            </div>
         </div>
+
         <div id="p-sidebar" class="panel">
+            
             <div class="data-group">
-                <span class="label">Predicted Close (1m)</span>
+                <span class="label">Micro-Price Delta</span>
                 <div style="display:flex; align-items: baseline; gap: 10px;">
                     <span id="proj-pct" class="value value-lg">--%</span>
-                    <span id="proj-val" class="value-sub c-purple">---</span>
+                    <span id="proj-val" class="value-sub">---</span>
                 </div>
-                <span class="label" style="margin-top:4px;">MicroPrice + OFI Impact</span>
             </div>
+
             <div class="divider"></div>
+
             <div class="data-group">
-                <span class="label">VWAP Divergence</span>
-                <span id="vwap-div" class="value">0.00</span>
+                <span class="label">OFI Imbalance Ratio</span>
+                <span id="score-val" class="value">0.00</span>
             </div>
+
             <div class="divider"></div>
+
             <div class="data-group">
-                <span class="label">Kyle's Lambda (Liq. Cost)</span>
-                <span id="lambda-val" class="value">0.00</span>
-                <span class="value-sub">Impact per Volume Unit</span>
+                <span class="label">Detected Walls (Z > 3.0)</span>
+                <div id="wall-list" class="list-container">
+                    <span class="c-dim" style="font-size: 11px;">Scanning...</span>
+                </div>
+            </div>
+
+            <div class="sidebar-chart-box">
+                <span class="label" style="margin-bottom:4px;">Real-time Volume Ticks</span>
+                <div id="sidebar-vol" class="mini-chart"></div>
+            </div>
+
+            <div class="sidebar-chart-box">
+                <span class="label" style="margin-bottom:4px;">Liquidity Density</span>
+                <div id="sidebar-density" class="mini-chart"></div>
             </div>
         </div>
     </div>
+
     <script>
-        const dom = {{ ticker: document.getElementById('price-ticker'), projVal: document.getElementById('proj-val'), projPct: document.getElementById('proj-pct'), vwapDiv: document.getElementById('vwap-div'), lambdaVal: document.getElementById('lambda-val') }};
-        const chartOpts = {{ layout: {{ background: {{ type: 'solid', color: '#0a0a0a' }}, textColor: '#888', fontFamily: 'JetBrains Mono' }}, grid: {{ vertLines: {{ color: '#151515' }}, horzLines: {{ color: '#151515' }} }}, crosshair: {{ mode: 1 }} }};
-        
-        const priceChart = LightweightCharts.createChart(document.getElementById('tv-price'), chartOpts);
-        const priceSeries = priceChart.addLineSeries({{ color: '#2979ff', lineWidth: 2 }});
-        const predSeries = priceChart.addLineSeries({{ color: '#ffeb3b', lineWidth: 2, lineStyle: 2 }});
-        const vwapSeries = priceChart.addLineSeries({{ color: 'rgba(255,255,255,0.3)', lineWidth: 1, lineStyle: 0 }});
-
-        const candleChart = LightweightCharts.createChart(document.getElementById('tv-candles'), chartOpts);
-        const candleSeries = candleChart.addCandlestickSeries({{ upColor: '#00ff9d', downColor: '#ff3b3b', borderVisible: false }});
-        const ghostSeries = candleChart.addCandlestickSeries({{ upColor: 'rgba(213, 0, 249, 0.5)', downColor: 'rgba(213, 0, 249, 0.5)', borderVisible: true, borderColor: '#d500f9' }});
-
-        let activeWallLines = [];
-
-        new ResizeObserver(e => {{ 
-            const t1 = document.getElementById('tv-price');
-            const t2 = document.getElementById('tv-candles');
-            priceChart.applyOptions({{ width: t1.clientWidth, height: t1.clientHeight }});
-            candleChart.applyOptions({{ width: t2.clientWidth, height: t2.clientHeight }});
-        }}).observe(document.body);
-
-        function connect() {{
-            const ws = new WebSocket((location.protocol === 'https:' ? 'wss' : 'ws') + '://' + location.host + '/ws');
-            ws.onmessage = (e) => {{
-                const data = JSON.parse(e.data);
-                if (data.error) return;
-
-                if (data.history.length) {{
-                    const hist = data.history.map(d => ({{ time: Math.floor(d.t), value: d.p }}));
-                    const cleanHist = [...new Map(hist.map(i => [i.time, i])).values()];
-                    priceSeries.setData(cleanHist);
-                    dom.ticker.innerText = cleanHist[cleanHist.length-1].value.toFixed(2);
-                    
-                    if(data.analysis) {{
-                         predSeries.setData([
-                            cleanHist[cleanHist.length-1],
-                            {{ time: cleanHist[cleanHist.length-1].time + 60, value: data.analysis.projected }}
-                         ]);
-                         
-                         vwapSeries.setData([
-                            {{ time: cleanHist[0].time, value: data.analysis.vwap }},
-                            {{ time: cleanHist[cleanHist.length-1].time, value: data.analysis.vwap }}
-                         ]);
-
-                         dom.lambdaVal.innerText = (data.analysis.lambda * 1000).toFixed(4); 
-                         const vwapDiff = cleanHist[cleanHist.length-1].value - data.analysis.vwap;
-                         dom.vwapDiv.innerText = vwapDiff.toFixed(2);
-                         dom.vwapDiv.style.color = vwapDiff > 0 ? '#ff3b3b' : '#00ff9d'; 
-                    }}
-                }}
+        setInterval(() => {{
+            const now = new Date();
+            document.getElementById('clock').innerText = now.toISOString().split('T')[1].split('.')[0] + ' UTC';
+        }}, 1000);
+
+        document.addEventListener('DOMContentLoaded', () => {{
+            const dom = {{
+                ticker: document.getElementById('price-ticker'),
+                score: document.getElementById('score-val'),
+                projVal: document.getElementById('proj-val'),
+                projPct: document.getElementById('proj-pct'),
+                wallList: document.getElementById('wall-list')
+            }};
 
-                if (data.ohlc && data.ohlc.length) {{
-                    candleSeries.setData(data.ohlc.map(c => ({{ time: c.time, open: c.open, high: c.high, low: c.low, close: c.close }})));
-                }}
+            const chartOpts = {{
+                layout: {{ background: {{ type: 'solid', color: '#0a0a0a' }}, textColor: '#888', fontFamily: 'JetBrains Mono' }},
+                grid: {{ vertLines: {{ color: '#151515' }}, horzLines: {{ color: '#151515' }} }},
+                rightPriceScale: {{ borderColor: '#222', scaleMargins: {{ top: 0.1, bottom: 0.1 }} }},
+                timeScale: {{ borderColor: '#222', timeVisible: true, secondsVisible: true }},
+                crosshair: {{ mode: 1, vertLine: {{ color: '#444', labelBackgroundColor: '#444' }}, horzLine: {{ color: '#444', labelBackgroundColor: '#444' }} }}
+            }};
 
-                if (data.walls) {{
-                    activeWallLines.forEach(l => candleSeries.removePriceLine(l));
-                    activeWallLines = [];
-                    data.walls.bids.forEach(w => {{
-                        activeWallLines.push(candleSeries.createPriceLine({{ price: w.p, color: '#00ff9d', lineWidth: 2, lineStyle: 2, axisLabelVisible: true, title: 'BID WALL' }}));
-                    }});
-                    data.walls.asks.forEach(w => {{
-                        activeWallLines.push(candleSeries.createPriceLine({{ price: w.p, color: '#ff3b3b', lineWidth: 2, lineStyle: 2, axisLabelVisible: true, title: 'ASK WALL' }}));
-                    }});
+            const priceChart = LightweightCharts.createChart(document.getElementById('tv-price'), chartOpts);
+            const priceSeries = priceChart.addLineSeries({{ color: '#2979ff', lineWidth: 2, title: 'Price' }}); 
+            const predSeries = priceChart.addLineSeries({{ color: '#ffeb3b', lineWidth: 2, lineStyle: 2, title: 'Forecast' }});
+
+            const candleChart = LightweightCharts.createChart(document.getElementById('tv-candles'), {{
+                ...chartOpts, 
+                timeScale: {{ timeVisible: true, secondsVisible: false }}
+            }});
+            const candleSeries = candleChart.addCandlestickSeries({{ 
+                upColor: '#00ff9d', downColor: '#ff3b3b', borderVisible: false, wickUpColor: '#00ff9d', wickDownColor: '#ff3b3b' 
+            }});
+
+            const netChart = LightweightCharts.createChart(document.getElementById('tv-net'), {{
+                ...chartOpts, localization: {{ timeFormatter: t => '$' + t.toFixed(2) }}
+            }});
+            const netSeries = netChart.addHistogramSeries({{ color: '#2979ff' }});
+
+            const volChart = LightweightCharts.createChart(document.getElementById('sidebar-vol'), {{
+                ...chartOpts,
+                grid: {{ vertLines: {{ visible: false }}, horzLines: {{ visible: false }} }},
+                rightPriceScale: {{ visible: false }},
+                timeScale: {{ visible: false }},
+                handleScroll: false, handleScale: false
+            }});
+            const volBuySeries = volChart.addHistogramSeries({{ color: '#00ff9d' }});
+            const volSellSeries = volChart.addHistogramSeries({{ color: '#ff3b3b' }});
+
+            const denChart = LightweightCharts.createChart(document.getElementById('sidebar-density'), {{
+                ...chartOpts,
+                grid: {{ vertLines: {{ visible: false }}, horzLines: {{ visible: false }} }},
+                rightPriceScale: {{ visible: false }},
+                timeScale: {{ visible: false }},
+                handleScroll: false, handleScale: false
+            }});
+            const bidSeries = denChart.addAreaSeries({{ lineColor: '#00ff9d', topColor: 'rgba(0, 255, 157, 0.15)', bottomColor: 'rgba(0,0,0,0)', lineWidth: 1 }});
+            const askSeries = denChart.addAreaSeries({{ lineColor: '#ff3b3b', topColor: 'rgba(255, 59, 59, 0.15)', bottomColor: 'rgba(0,0,0,0)', lineWidth: 1 }});
+
+            let activeLines = [];
+
+            new ResizeObserver(entries => {{
+                for(let entry of entries) {{
+                    const {{width, height}} = entry.contentRect;
+                    if(entry.target.id === 'tv-price') priceChart.applyOptions({{width, height}});
+                    if(entry.target.id === 'tv-candles') candleChart.applyOptions({{width, height}});
+                    if(entry.target.id === 'tv-net') netChart.applyOptions({{width, height}});
+                    if(entry.target.id === 'sidebar-vol') volChart.applyOptions({{width, height}});
+                    if(entry.target.id === 'sidebar-density') denChart.applyOptions({{width, height}});
                 }}
+            }}).observe(document.body);
+
+            ['tv-price', 'tv-candles', 'tv-net', 'sidebar-vol', 'sidebar-density'].forEach(id => {{
+                new ResizeObserver(e => {{
+                     const t = document.getElementById(id);
+                     if (t.clientWidth && t.clientHeight) {{
+                        if(id === 'tv-price') priceChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
+                        if(id === 'tv-candles') candleChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
+                        if(id === 'tv-net') netChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
+                        if(id === 'sidebar-vol') volChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
+                        if(id === 'sidebar-density') denChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
+                     }}
+                }}).observe(document.getElementById(id));
+            }});
+
+            function connect() {{
+                const ws = new WebSocket((location.protocol === 'https:' ? 'wss' : 'ws') + '://' + location.host + '/ws');
+                
+                ws.onmessage = (e) => {{
+                    const data = JSON.parse(e.data);
+                    if (data.error) return;
+
+                    if (data.history.length) {{
+                        const hist = data.history.map(d => ({{ time: Math.floor(d.t), value: d.p }}));
+                        const cleanHist = [...new Map(hist.map(i => [i.time, i])).values()];
+                        priceSeries.setData(cleanHist);
+
+                        const lastP = cleanHist[cleanHist.length-1].value;
+                        dom.ticker.innerText = lastP.toLocaleString('en-US', {{ minimumFractionDigits: 2 }});
+
+                        if (data.analysis) {{
+                            const proj = data.analysis.projected;
+                            const rho = data.analysis.rho; 
+
+                            predSeries.setData([
+                                cleanHist[cleanHist.length-1],
+                                {{ time: cleanHist[cleanHist.length-1].time + 60, value: proj }}
+                            ]);
+
+                            const pct = ((proj - lastP) / lastP) * 100;
+                            const sign = pct >= 0 ? "+" : "";
+                            
+                            dom.projPct.innerText = `${{sign}}${{pct.toFixed(4)}}%`;
+                            dom.projPct.style.color = pct >= 0 ? "var(--green)" : "var(--red)";
+                            dom.projVal.innerText = proj.toLocaleString('en-US', {{ minimumFractionDigits: 2 }});
+                            dom.score.innerText = rho.toFixed(3);
+                            dom.score.style.color = rho > 0 ? "var(--green)" : (rho < 0 ? "var(--red)" : "var(--text-main)");
+                        }}
+                    }}
 
-                if (data.pred_candle) {{
-                    ghostSeries.setData([data.pred_candle]);
-                    const currentP = parseFloat(dom.ticker.innerText);
-                    const pClose = data.pred_candle.close;
-                    dom.projVal.innerText = pClose.toFixed(2);
-                    const pct = ((pClose - currentP) / currentP) * 100;
-                    dom.projPct.innerText = (pct >= 0 ? "+" : "") + pct.toFixed(3) + "%";
-                    dom.projPct.style.color = pct >= 0 ? "var(--green)" : "var(--red)";
-                }}
-            }};
-            ws.onclose = () => setTimeout(connect, 2000);
-        }}
-        connect();
+                    if (data.ohlc && data.ohlc.length) {{
+                        const candles = data.ohlc.map(c => ({{
+                            time: c.time,
+                            open: c.open,
+                            high: c.high,
+                            low: c.low,
+                            close: c.close
+                        }}));
+                        const uniqueCandles = [...new Map(candles.map(i => [i.time, i])).values()];
+                        candleSeries.setData(uniqueCandles);
+                    }}
+
+                    if (data.walls) {{
+                        activeLines.forEach(l => priceSeries.removePriceLine(l));
+                        activeLines = [];
+                        let html = "";
+                        const addWall = (w, type) => {{
+                            const color = type === 'BID' ? '#00ff9d' : '#ff3b3b';
+                            activeLines.push(priceSeries.createPriceLine({{ price: w.price, color: color, lineWidth: 1, lineStyle: 2, axisLabelVisible: false }}));
+                            html += `<div class="list-item"><span style="color:${{color}}">${{type}} ${{w.price}}</span><span class="c-dim">Z:${{w.z_score.toFixed(1)}}</span></div>`;
+                        }};
+                        data.walls.asks.forEach(w => addWall(w, 'ASK'));
+                        data.walls.bids.forEach(w => addWall(w, 'BID'));
+                        dom.wallList.innerHTML = html || '<span class="c-dim" style="font-size:11px">Scanning...</span>';
+                    }}
+
+                    if (data.trade_history && data.trade_history.length) {{
+                        const buyData = [], sellData = [];
+                        data.trade_history.forEach(t => {{
+                            const time = Math.floor(t.t);
+                            buyData.push({{ time: time, value: t.buy }});
+                            sellData.push({{ time: time, value: t.sell }});
+                        }});
+                        volBuySeries.setData([...new Map(buyData.map(i => [i.time, i])).values()]);
+                        volSellSeries.setData([...new Map(sellData.map(i => [i.time, i])).values()]);
+                    }}
+
+                    if (data.depth_x.length) {{
+                        const bids = [], asks = [], nets = [];
+                        for(let i=0; i<data.depth_x.length; i++) {{
+                            const t = data.depth_x[i];
+                            bids.push({{ time: t, value: data.depth_bids[i] }});
+                            asks.push({{ time: t, value: data.depth_asks[i] }});
+                            nets.push({{ time: t, value: data.depth_net[i], color: data.depth_net[i] > 0 ? '#00ff9d' : '#ff3b3b' }});
+                        }}
+                        bidSeries.setData(bids);
+                        askSeries.setData(asks);
+                        netSeries.setData(nets);
+                    }}
+                }};
+                ws.onclose = () => setTimeout(connect, 2000);
+            }}
+            connect();
+        }});
     </script>
 </body>
 </html>
@@ -370,6 +560,7 @@ HTML_PAGE = f"""
 
 async def kraken_worker():
     global market_state
+    
     try:
         async with aiohttp.ClientSession() as session:
             url = "https://api.kraken.com/0/public/OHLC?pair=XBTUSD&interval=1"
@@ -377,22 +568,40 @@ async def kraken_worker():
                 if response.status == 200:
                     data = await response.json()
                     if 'result' in data:
-                        raw = list(data['result'].values())[0]
-                        market_state['ohlc_history'] = [
-                            {'time': int(c[0]), 'open': float(c[1]), 'high': float(c[2]), 'low': float(c[3]), 'close': float(c[4])}
-                            for c in raw[-120:]
-                        ]
+                        for key in data['result']:
+                            if key != 'last':
+                                raw_candles = 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])
+                                    }
+                                    for c in raw_candles[-120:]
+                                ]
+                                break
     except Exception as e:
-        logging.error(f"Init Error: {e}")
+        logging.error(f"History fetch failed: {e}")
 
     while True:
         try:
             async with websockets.connect("wss://ws.kraken.com/v2") as ws:
-                logging.info(f"Connected to Kraken ({SYMBOL_KRAKEN})")
+                logging.info(f"🔌 Connected to Kraken ({SYMBOL_KRAKEN})")
                 
-                await ws.send(json.dumps({"method": "subscribe", "params": {"channel": "book", "symbol": [SYMBOL_KRAKEN], "depth": 100}}))
-                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}}))
+                await ws.send(json.dumps({
+                    "method": "subscribe",
+                    "params": {"channel": "book", "symbol": [SYMBOL_KRAKEN], "depth": 500}
+                }))
+                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)
@@ -402,59 +611,68 @@ async def kraken_worker():
                     if channel == "book":
                         for item in data:
                             for bid in item.get('bids', []):
-                                market_state['bids'][float(bid['price'])] = float(bid['qty'])
+                                q, p = float(bid['qty']), float(bid['price'])
+                                if q == 0: market_state['bids'].pop(p, None)
+                                else: market_state['bids'][p] = q
                             for ask in item.get('asks', []):
-                                market_state['asks'][float(ask['price'])] = float(ask['qty'])
+                                q, p = float(ask['qty']), float(ask['price'])
+                                if q == 0: market_state['asks'].pop(p, None)
+                                else: market_state['asks'][p] = q
                         
-                        market_state['bids'] = {k: v for k, v in market_state['bids'].items() if v > 0}
-                        market_state['asks'] = {k: v for k, v in market_state['asks'].items() if v > 0}
-
                         if market_state['bids'] and market_state['asks']:
                             best_bid = max(market_state['bids'].keys())
                             best_ask = min(market_state['asks'].keys())
-                            market_state['current_mid'] = (best_bid + best_ask) / 2
+                            mid = (best_bid + best_ask) / 2
+                            market_state['prev_mid'] = market_state['current_mid']
+                            market_state['current_mid'] = mid
                             market_state['ready'] = True
-
+                            
+                            now = time.time()
+                            if not market_state['history'] or (now - market_state['history'][-1]['t'] > 0.5):
+                                market_state['history'].append({'t': now, 'p': mid})
+                                if len(market_state['history']) > HISTORY_LENGTH:
+                                    market_state['history'].pop(0)
+                    
                     elif channel == "trade":
                         for trade in data:
                             try:
-                                t_obj = {
-                                    't': time.time(), 
-                                    'p': float(trade['price']), 
-                                    'q': float(trade['qty']), 
-                                    'side': trade['side']
-                                }
-                                market_state['trade_history'].append(t_obj)
+                                qty = float(trade['qty'])
+                                side = trade['side']
+                                if side == 'buy': market_state['current_vol_window']['buy'] += qty
+                                else: market_state['current_vol_window']['sell'] += qty
                             except: pass
 
                     elif channel == "ohlc":
-                        for c in data:
-                            c_data = {
-                                'time': int(float(c['endtime'])), 
-                                'open': float(c['open']),
-                                'high': float(c['high']),
-                                'low': float(c['low']),
-                                'close': float(c['close'])
-                            }
-                            if market_state['ohlc_history'] and market_state['ohlc_history'][-1]['time'] == c_data['time']:
-                                market_state['ohlc_history'][-1] = c_data
-                            else:
-                                market_state['ohlc_history'].append(c_data)
-                                if len(market_state['ohlc_history']) > 100: market_state['ohlc_history'].pop(0)
+                        for candle in data:
+                            try:
+                                c_data = {
+                                    'time': int(float(candle['endtime'])), 
+                                    'open': float(candle['open']),
+                                    'high': float(candle['high']),
+                                    'low': float(candle['low']),
+                                    'close': float(candle['close'])
+                                }
+                                if market_state['ohlc_history'] and market_state['ohlc_history'][-1]['time'] == c_data['time']:
+                                    market_state['ohlc_history'][-1] = c_data
+                                else:
+                                    market_state['ohlc_history'].append(c_data)
+                                    if len(market_state['ohlc_history']) > 100:
+                                        market_state['ohlc_history'].pop(0)
+                            except Exception as e:
+                                pass
 
         except Exception as e:
-            logging.warning(f"Reconnecting: {e}")
-            await asyncio.sleep(2)
+            logging.warning(f"⚠️ Reconnecting: {e}")
+            await asyncio.sleep(3)
 
 async def broadcast_worker():
     while True:
         if connected_clients and market_state['ready']:
             payload = process_market_data()
-            if "error" not in payload:
-                msg = json.dumps(payload)
-                for ws in list(connected_clients):
-                    try: await ws.send_str(msg)
-                    except: pass
+            msg = json.dumps(payload)
+            for ws in list(connected_clients):
+                try: await ws.send_str(msg)
+                except: pass
         await asyncio.sleep(BROADCAST_RATE)
 
 async def websocket_handler(request):
@@ -478,6 +696,8 @@ async def start_background(app):
 async def cleanup_background(app):
     app['kraken_task'].cancel()
     app['broadcast_task'].cancel()
+    try: await app['kraken_task']; await app['broadcast_task']
+    except: pass
 
 async def main():
     app = web.Application()
@@ -489,7 +709,7 @@ async def main():
     await runner.setup()
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
-    print(f"Quant Dashboard: http://localhost:{PORT}")
+    print(f"🚀 Quant Dashboard: http://localhost:{PORT}")
     await asyncio.Event().wait()
 
 if __name__ == "__main__":