Update app.py

app.py

@@ -2,818 +2,578 @@ import asyncio
 import json
 import logging
 import time
-import bisect
 import math
 import statistics
 import aiohttp
-from datetime import datetime
 from aiohttp import web
-import websockets
-
-SYMBOL_KRAKEN = "BTC/USD"
+from collections import deque
+from dataclasses import dataclass, field
+from typing import Dict, List, Optional
+
+# ==========================================
+# CONFIGURATION & HYPERPARAMETERS
+# ==========================================
+SYMBOL_DISPLAY = "BTC/USD"
+SYMBOL_KRAKEN = "BTC/USD"  # Kraken WS V2 format
 PORT = 7860
-HISTORY_LENGTH = 300
-BROADCAST_RATE = 0.1
-
-DECAY_LAMBDA = 50.0
-IMPACT_SENSITIVITY = 2.0
-WALL_DAMPENING = 0.8
-Z_SCORE_THRESHOLD = 3.0
-WALL_LOOKBACK = 200
-
-logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
-
-market_state = {
-    "bids": {},
-    "asks": {},
-    "history": [],
-    "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
-}
-
-connected_clients = set()
-
-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 []
-
-    try:
-        avg_vol = statistics.mean(volumes)
-        stdev_vol = statistics.stdev(volumes)
-    except statistics.StatisticsError:
-        return []
-
-    if stdev_vol == 0: return []
-
-    walls = []
-    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})
-
-    walls.sort(key=lambda x: x['z_score'], reverse=True)
-    return walls[:3]
-
-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
-
-    weighted_imbalance = 0.0
-    total_weight = 0.0
-
-    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
-
-    return {
-        "projected": current_mid + final_delta,
-        "rho": rho
-    }
-
-def calculate_polr(bids, asks, mid):
-    if not bids or not asks: return []
-
-    sorted_bids = sorted(bids.items(), key=lambda x: -x[0])
-    sorted_asks = sorted(asks.items(), key=lambda x: x[0])
 
-    path_points = []
-    volume_steps = [i * 0.5 for i in range(1, 61)] 
+# Quantitative Parameters
+OFI_LOOKBACK = 50           # Number of updates to smooth OFI
+LIQUIDITY_BANDS_USD = [10000, 50000, 150000, 500000] # Dynamic slippage tiers
+DEPTH_BUCKETS = 100         # Resolution of depth chart
+BROADCAST_INTERVAL = 0.1    # 100ms UI updates (10Hz)
+
+# Logging Setup
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s | %(levelname)s | %(message)s',
+    datefmt='%H:%M:%S'
+)
+logger = logging.getLogger("QuantEngine")
+
+# ==========================================
+# DATA STRUCTURES
+# ==========================================
+
+@dataclass
+class MarketMicrostructure:
+    """Thread-safe container for market state."""
+    bids: Dict[float, float] = field(default_factory=dict)
+    asks: Dict[float, float] = field(default_factory=dict)
     
-    current_time = time.time()
+    # State snapshots for OFI calculation
+    prev_best_bid: float = 0.0
+    prev_best_ask: float = 0.0
+    prev_bid_qty: float = 0.0
+    prev_ask_qty: float = 0.0
     
-    for i, target_vol in enumerate(volume_steps):
-        ask_cost_dist = 0
+    # Computed Metrics
+    mid_price: float = 0.0
+    spread: float = 0.0
+    ofi_rolling: float = 0.0
+    ofi_history: deque = field(default_factory=lambda: deque(maxlen=OFI_LOOKBACK))
+    
+    # Trade Data
+    last_trade_price: float = 0.0
+    trade_pressure: float = 0.0 # VWP equivalent
+    
+    ready: bool = False
+
+    def get_sorted_book(self):
+        """Returns sorted lists of (price, qty) tuples."""
+        # Sorting is expensive, do it only when necessary or optimize with b-trees in C++
+        # For Python/Websockets, standard timsort is sufficient for <1000 items
+        b_sorted = sorted(self.bids.items(), key=lambda x: -x[0])
+        a_sorted = sorted(self.asks.items(), key=lambda x: x[0])
+        return b_sorted, a_sorted
+
+state = MarketMicrostructure()
+
+# ==========================================
+# QUANTITATIVE ALGORITHMS
+# ==========================================
+
+class QuantEngine:
+    @staticmethod
+    def calculate_ofi(best_bid, bid_qty, best_ask, ask_qty):
+        """
+        Order Flow Imbalance (OFI) Calculation.
+        Formula based on Cont, Kukanov, Stoikov (2014).
+        Measures net supply/demand changes at the best quotes.
+        """
+        if state.prev_best_bid == 0: return 0.0
+
+        # Bid Contribution
+        e_b = 0.0
+        if best_bid > state.prev_best_bid:
+            e_b = bid_qty
+        elif best_bid < state.prev_best_bid:
+            e_b = -state.prev_bid_qty
+        else:
+            e_b = bid_qty - state.prev_bid_qty
+
+        # Ask Contribution
+        e_a = 0.0
+        if best_ask > state.prev_best_ask:
+            e_a = state.prev_ask_qty
+        elif best_ask < state.prev_best_ask:
+            e_a = -ask_qty
+        else:
+            e_a = state.prev_ask_qty - ask_qty
+
+        return e_b - e_a
+
+    @staticmethod
+    def calculate_liquidity_bands(bids, asks, mid_price):
+        """
+        Path of Least Resistance (POLR) v2.
+        Calculates the price levels required to sweep specific USD amounts (Liquidity Bands).
+        Returns a set of price points representing dynamic support/resistance.
+        """
+        bands = {'bids': [], 'asks': []}
+        
+        # Calculate Ask Bands (Resistance)
+        current_cost = 0.0
+        current_vol = 0.0
+        ask_ptr = 0
+        
+        for target_usd in LIQUIDITY_BANDS_USD:
+            while ask_ptr < len(asks):
+                p, q = asks[ask_ptr]
+                cost = p * q
+                if current_cost + cost >= target_usd:
+                    # Interpolate exact price for remaining amount
+                    remaining = target_usd - current_cost
+                    bands['asks'].append(p) # Approx
+                    current_cost += remaining # Cap it here
+                    break
+                current_cost += cost
+                ask_ptr += 1
+            if ask_ptr >= len(asks):
+                bands['asks'].append(asks[-1][0])
+
+        # Calculate Bid Bands (Support)
+        current_cost = 0.0
+        bid_ptr = 0
+        for target_usd in LIQUIDITY_BANDS_USD:
+            while bid_ptr < len(bids):
+                p, q = bids[bid_ptr]
+                cost = p * q
+                if current_cost + cost >= target_usd:
+                    bands['bids'].append(p)
+                    current_cost += remaining
+                    break
+                current_cost += cost
+                bid_ptr += 1
+            if bid_ptr >= len(bids):
+                bands['bids'].append(bids[-1][0])
+                
+        return bands
+
+    @staticmethod
+    def aggregate_depth(bids, asks, mid):
+        """Buckets order book depth for efficient frontend rendering."""
+        # Simple decimation for visualization
+        if not bids or not asks: return [], [], []
+        
+        range_pct = 0.02 # 2% depth
+        min_p = mid * (1 - range_pct)
+        max_p = mid * (1 + range_pct)
+        
+        chart_bids = []
         cum_vol = 0
-        target_ask_price = mid
-        for p, q in sorted_asks:
+        for p, q in bids:
+            if p < min_p: break
             cum_vol += q
-            if cum_vol >= target_vol:
-                target_ask_price = p
-                break
-        ask_cost_dist = target_ask_price - mid
-
-        bid_cost_dist = 0
+            chart_bids.append({'p': p, 'v': cum_vol})
+            
+        chart_asks = []
         cum_vol = 0
-        target_bid_price = mid
-        for p, q in sorted_bids:
+        for p, q in asks:
+            if p > max_p: break
             cum_vol += q
-            if cum_vol >= target_vol:
-                target_bid_price = p
-                break
-        bid_cost_dist = mid - target_bid_price
+            chart_asks.append({'p': p, 'v': cum_vol})
+            
+        # Downsample to N points
+        def downsample(data, n):
+            if not data: return []
+            if len(data) <= n: return data
+            step = len(data) / n
+            return [data[int(i * step)] for i in range(n)]
 
-        if bid_cost_dist <= 0: bid_cost_dist = 0.01
-        if ask_cost_dist <= 0: ask_cost_dist = 0.01
+        return downsample(chart_bids, DEPTH_BUCKETS), downsample(chart_asks, DEPTH_BUCKETS)
 
-        projected_p = mid
-        if ask_cost_dist > bid_cost_dist:
-             projected_p = target_ask_price 
-        else:
-             projected_p = target_bid_price
-        
-        path_points.append({
-            'index': i, 
-            'p': projected_p
-        })
+# ==========================================
+# ASYNC WORKERS
+# ==========================================
 
-    return path_points
+async def ingestion_worker():
+    """Handles WebSocket connection to Kraken and updates Market State."""
+    while True:
+        try:
+            async with aiohttp.ClientSession() as session:
+                async with session.ws_connect("wss://ws.kraken.com/v2") as ws:
+                    logger.info(f"🔌 Connected to Kraken V2: {SYMBOL_KRAKEN}")
+                    
+                    # Subscribe to Book and Trade
+                    await ws.send_json({
+                        "method": "subscribe",
+                        "params": {"channel": "book", "symbol": [SYMBOL_KRAKEN], "depth": 500}
+                    })
+                    await ws.send_json({
+                        "method": "subscribe",
+                        "params": {"channel": "trade", "symbol": [SYMBOL_KRAKEN]}
+                    })
+
+                    async for msg in ws:
+                        payload = json.loads(msg.data)
+                        channel = payload.get("channel")
+                        
+                        if channel == "book":
+                            data = payload.get("data", [])[0]
+                            # Is this a snapshot or update? V2 usually sends snapshot first
+                            # For simplified handling here, we assume standard dict updates
+                            
+                            # Update Bids
+                            for bid in data.get('bids', []):
+                                price, qty = float(bid['price']), float(bid['qty'])
+                                if qty == 0: state.bids.pop(price, None)
+                                else: state.bids[price] = qty
+                                
+                            # Update Asks
+                            for ask in data.get('asks', []):
+                                price, qty = float(ask['price']), float(ask['qty'])
+                                if qty == 0: state.asks.pop(price, None)
+                                else: state.asks[price] = qty
+                            
+                            # --- QUANTITATIVE UPDATE TRIGGER ---
+                            if state.bids and state.asks:
+                                # 1. Get Sorted Top of Book
+                                b_sorted, a_sorted = state.get_sorted_book()
+                                best_bid, best_bid_qty = b_sorted[0]
+                                best_ask, best_ask_qty = a_sorted[0]
+                                
+                                # 2. Calculate Mid & Spread
+                                state.mid_price = (best_bid + best_ask) / 2
+                                state.spread = best_ask - best_bid
+                                
+                                # 3. Calculate OFI (Microstructure Alpha)
+                                ofi_val = QuantEngine.calculate_ofi(
+                                    best_bid, best_bid_qty, 
+                                    best_ask, best_ask_qty
+                                )
+                                state.ofi_history.append(ofi_val)
+                                state.ofi_rolling = statistics.mean(state.ofi_history) if state.ofi_history else 0
+                                
+                                # 4. Update State for next tick
+                                state.prev_best_bid = best_bid
+                                state.prev_best_ask = best_ask
+                                state.prev_bid_qty = best_bid_qty
+                                state.prev_ask_qty = best_ask_qty
+                                
+                                state.ready = True
+
+                        elif channel == "trade":
+                            trades = payload.get("data", [])
+                            for t in trades:
+                                state.last_trade_price = float(t['price'])
+                                qty = float(t['qty'])
+                                side = t['side'] # 'buy' or 'sell'
+                                
+                                # Simple Buying/Selling Pressure Oscillator
+                                direction = 1 if side == 'buy' else -1
+                                state.trade_pressure = (state.trade_pressure * 0.95) + (direction * qty * 0.05)
 
-def process_market_data():
-    if not market_state['ready']: return {"error": "Initializing..."}
+        except Exception as e:
+            logger.error(f"Ingestion Error: {e}")
+            state.ready = False
+            await asyncio.sleep(5)
 
-    mid = market_state['current_mid']
-    
-    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])
-
-    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 = [], []
-
-    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)]
+async def broadcast_worker(app):
+    """Pushes analyzed metrics to frontend at fixed intervals."""
+    while True:
+        start_t = time.time()
         
-        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}
-    )
-    
-    polr_path = calculate_polr(market_state['bids'], market_state['asks'], mid)
-
-    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'],
-        "polr": polr_path,
-        "trade_history": market_state['trade_vol_history'],
-        "ohlc": market_state['ohlc_history'],
-        "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}
-    }
+        if state.ready and app['websockets']:
+            try:
+                # 1. Snapshot Data
+                bids, asks = state.get_sorted_book()
+                mid = state.mid_price
+                
+                # 2. Run Heavy Analysis
+                liq_bands = QuantEngine.calculate_liquidity_bands(bids, asks, mid)
+                depth_b, depth_a = QuantEngine.aggregate_depth(bids, asks, mid)
+                
+                # 3. Construct Payload
+                payload = {
+                    "t": time.time(),
+                    "mid": mid,
+                    "spread": state.spread,
+                    "trade_p": state.last_trade_price,
+                    "ofi": state.ofi_rolling,
+                    "pressure": state.trade_pressure,
+                    "bands": liq_bands,
+                    "depth": {"bids": depth_b, "asks": depth_a}
+                }
+                
+                # 4. Broadcast
+                msg = json.dumps(payload)
+                for ws in set(app['websockets']):
+                    await ws.send_str(msg)
+                    
+            except Exception as e:
+                logger.error(f"Broadcast Logic Error: {e}")
+
+        # Sleep remaining time to maintain Hz
+        elapsed = time.time() - start_t
+        wait = max(0, BROADCAST_INTERVAL - elapsed)
+        await asyncio.sleep(wait)
+
+# ==========================================
+# FRONTEND (EMBEDDED HTML/JS)
+# ==========================================
 
-HTML_PAGE = f"""
+HTML_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>{SYMBOL_KRAKEN}</title>
+    <title>QUANT // COMMAND</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;
-            --blue: #2979ff;
-            --yellow: #ffeb3b; 
-            --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; 
+        :root {
+            --bg-dark: #050505;
+            --bg-panel: #0E0E0E;
+            --border: #1F1F1F;
+            --text-main: #EAEAEA;
+            --text-dim: #666666;
+            --accent-green: #00F0FF; /* Cyber Cyan */
+            --accent-red: #FF2A6D;   /* Neon Red */
+            --accent-yellow: #FAFF00;
+            --accent-band: rgba(255, 255, 255, 0.08);
+        }
+        * { box-sizing: border-box; }
+        body { margin: 0; background: var(--bg-dark); color: var(--text-main); font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; overflow: hidden; height: 100vh; width: 100vw; }
+        
+        /* GRID LAYOUT */
+        .grid-container {
+            display: grid;
+            grid-template-columns: 3fr 1fr;
+            grid-template-rows: 40px 2fr 1fr;
+            height: 100vh;
             gap: 1px;
-            background-color: var(--border); 
-            height: 100vh; 
-            box-sizing: border-box;
-        }}
-        .panel {{ background: var(--bg-panel); display: flex; flex-direction: column; overflow: hidden; }}
+            background-color: var(--border);
+        }
         
-        .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; }}
+        .header { grid-column: 1 / 3; background: var(--bg-panel); display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid var(--border); justify-content: space-between; }
+        .main-chart { grid-column: 1 / 2; grid-row: 2 / 3; background: var(--bg-panel); position: relative; }
+        .sub-chart { grid-column: 1 / 2; grid-row: 3 / 4; background: var(--bg-panel); position: relative; }
+        .sidebar { grid-column: 2 / 3; grid-row: 2 / 4; background: var(--bg-panel); padding: 10px; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--border); }
         
-        #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; 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-green {{ color: var(--green); }}
-        .c-red {{ color: var(--red); }}
-        .c-dim {{ color: var(--text-dim); }}
-        .c-purp {{ color: var(--purple); }}
-
-        .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; }}
+        /* TYPOGRAPHY */
+        .title { font-weight: 800; letter-spacing: 1px; font-size: 14px; color: var(--text-main); }
+        .live-tag { background: var(--accent-red); color: #000; font-weight: bold; font-size: 10px; padding: 2px 6px; border-radius: 2px; margin-right: 10px; }
+        .metric-box { background: rgba(255,255,255,0.03); padding: 10px; border-radius: 4px; border: 1px solid var(--border); }
+        .metric-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; }
+        .metric-val { font-family: 'Courier New', monospace; font-size: 18px; font-weight: 700; color: #FFF; }
+        .small-chart-container { height: 150px; width: 100%; margin-top: auto; }
         
-        .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;
-        }}
+        /* UTILS */
+        .c-up { color: var(--accent-green); }
+        .c-down { color: var(--accent-red); }
+        .chart-overlay-info { position: absolute; top: 10px; left: 10px; z-index: 10; font-family: monospace; font-size: 11px; background: rgba(0,0,0,0.5); padding: 5px; pointer-events: none; }
     </style>
 </head>
 <body>
-<div class="layout">
-    <div class="status-bar">
-        <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) // <span class="c-purp">POLR RIVER (HIGH RES)</span> // <span style="color:var(--yellow)">PRED (YELLOW)</span>
-        </div>
-        <div id="tv-price" style="flex: 1; width: 100%;"></div>
+<div class="grid-container">
+    <div class="header">
+        <div><span class="live-tag">LIVE</span> <span class="title">KRAKEN // QUANTITATIVE MONITOR // BTC-USD</span></div>
+        <div style="font-family: monospace; font-size: 12px; color: var(--text-dim);" id="connection-status">DISCONNECTED</div>
     </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 class="main-chart" id="chart-price">
+        <div class="chart-overlay-info">
+            MID: <span id="val-mid">---</span><br>
+            SPREAD: <span id="val-spread">---</span>
         </div>
     </div>
+    
+    <div class="sub-chart" id="chart-ofi">
+         <div class="chart-overlay-info">ORDER FLOW IMBALANCE (Rolling)</div>
+    </div>
 
-    <div id="p-sidebar" class="panel">
-        
-        <div class="data-group">
-            <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">---</span>
-            </div>
-        </div>
-
-        <div class="divider"></div>
-
-        <div class="data-group">
-            <span class="label">OFI Imbalance Ratio</span>
-            <span id="score-val" class="value">0.00</span>
+    <div class="sidebar">
+        <div class="metric-box">
+            <span class="metric-label">Liquidity Cost (Ask)</span>
+            <span class="metric-val" id="val-ask-liq">---</span>
         </div>
-
-        <div class="divider"></div>
-
-        <div class="data-group">
-            <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 class="metric-box">
+            <span class="metric-label">Liquidity Cost (Bid)</span>
+            <span class="metric-val" id="val-bid-liq">---</span>
         </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 class="metric-box">
+            <span class="metric-label">Net Pressure</span>
+            <span class="metric-val" id="val-pressure">0.00</span>
         </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 style="flex:1; display:flex; flex-direction:column;">
+            <span class="metric-label">REAL-TIME DEPTH</span>
+            <div id="chart-depth" style="flex:1; width:100%;"></div>
         </div>
     </div>
 </div>
 
 <script>
-    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')
-        }};
-
-        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' }} }}
-        }};
-
-        const priceChart = LightweightCharts.createChart(document.getElementById('tv-price'), chartOpts);
-        
-        const polrLines = [];
-        const polrCount = 60; 
+    const CONFIG = {
+        colors: {
+            bg: '#0E0E0E',
+            grid: '#1F1F1F',
+            text: '#666',
+            green: '#00F0FF',
+            red: '#FF2A6D',
+            band: 'rgba(255, 255, 255, 0.05)'
+        }
+    };
+
+    // --- CHART INITIALIZATION ---
+    const chartOpts = {
+        layout: { background: { type: 'solid', color: CONFIG.colors.bg }, textColor: '#888' },
+        grid: { vertLines: { color: CONFIG.colors.grid }, horzLines: { color: CONFIG.colors.grid } },
+        crosshair: { mode: 1 },
+        timeScale: { timeVisible: true, secondsVisible: true }
+    };
+
+    // 1. Price Chart
+    const priceChart = LightweightCharts.createChart(document.getElementById('chart-price'), chartOpts);
+    const midSeries = priceChart.addLineSeries({ color: '#FFF', lineWidth: 1, title: 'Mid' });
+    const tradeSeries = priceChart.addAreaSeries({ 
+        topColor: 'rgba(0, 240, 255, 0.1)', bottomColor: 'rgba(0,0,0,0)', 
+        lineColor: CONFIG.colors.green, lineWidth: 2, title: 'Last Trade' 
+    });
+    
+    // POLR Bands (4 levels)
+    const bandSeries = [];
+    for(let i=0; i<4; i++) {
+        bandSeries.push({
+            bid: priceChart.addLineSeries({ color: '#2b2b2b', lineWidth: 1, lineStyle: 2, lastValueVisible: false }),
+            ask: priceChart.addLineSeries({ color: '#2b2b2b', lineWidth: 1, lineStyle: 2, lastValueVisible: false })
+        });
+    }
+
+    // 2. OFI Chart
+    const ofiChart = LightweightCharts.createChart(document.getElementById('chart-ofi'), {
+        ...chartOpts,
+        rightPriceScale: { scaleMargins: { top: 0.1, bottom: 0.1 } }
+    });
+    const ofiSeries = ofiChart.addHistogramSeries({ color: '#26a69a' });
+
+    // 3. Depth Chart (Sidebar)
+    const depthChart = LightweightCharts.createChart(document.getElementById('chart-depth'), {
+        layout: { background: { type: 'solid', color: 'transparent' }, textColor: '#444' },
+        grid: { visible: false, vertLines: { visible: false }, horzLines: { visible: false } },
+        rightPriceScale: { visible: false },
+        timeScale: { visible: false },
+        crosshair: { visible: false },
+        handleScroll: false, handleScale: false
+    });
+    const depthBidSeries = depthChart.addAreaSeries({ lineColor: CONFIG.colors.green, topColor: 'rgba(0, 240, 255, 0.2)', bottomColor: 'rgba(0,0,0,0)', lineWidth: 1 });
+    const depthAskSeries = depthChart.addAreaSeries({ lineColor: CONFIG.colors.red, topColor: 'rgba(255, 42, 109, 0.2)', bottomColor: 'rgba(0,0,0,0)', lineWidth: 1 });
+
+    // --- RESIZING ---
+    new ResizeObserver(entries => {
+        for (let entry of entries) {
+            const { width, height } = entry.contentRect;
+            if (entry.target.id === 'chart-price') priceChart.applyOptions({ width, height });
+            if (entry.target.id === 'chart-ofi') ofiChart.applyOptions({ width, height });
+            if (entry.target.id === 'chart-depth') depthChart.applyOptions({ width, height });
+        }
+    }).observe(document.body);
+
+    // --- SYNC ---
+    // Simple time-sync logic could be added here, but tricky with different scale types (Price vs Histogram)
+
+    // --- WEBSOCKET ---
+    const connect = () => {
+        const ws = new WebSocket(`ws://${location.host}/ws`);
+        const status = document.getElementById('connection-status');
         
-        for(let i=0; i<polrCount; i++) {{
-            const opacity = 1.0 - (i / (polrCount + 5)); 
-            const color = `rgba(213, 0, 249, ${{opacity.toFixed(2)}})`; 
-            
-            polrLines.push(
-                priceChart.addLineSeries({{
-                    color: color,
-                    lineWidth: 1,
-                    crosshairMarkerVisible: false,
-                    lastValueVisible: false,
-                    priceLineVisible: false,
-                    title: '' 
-                }})
-            );
-        }}
-
-        const priceSeries = priceChart.addLineSeries({{ color: '#2979ff', lineWidth: 2, title: 'Price' }}); 
-        const predSeries = priceChart.addLineSeries({{ color: '#ffeb3b', lineWidth: 2, lineStyle: 2, title: 'Math Forecast' }});
+        ws.onopen = () => { status.innerText = 'CONNECTED'; status.style.color = CONFIG.colors.green; };
+        ws.onclose = () => { status.innerText = 'RECONNECTING...'; status.style.color = CONFIG.colors.red; setTimeout(connect, 2000); };
         
-        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 = [];
-        let activeCandleLines = [];
-
-        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);
-
-        function connect() {{
-            const ws = new WebSocket((location.protocol === 'https:' ? 'wss' : 'ws') + '://' + location.host + '/ws');
+        ws.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            const t = data.t; // timestamp
+
+            // 1. Update Price
+            midSeries.update({ time: t, value: data.mid });
+            tradeSeries.update({ time: t, value: data.trade_p });
+
+            // 2. Update Bands
+            if (data.bands) {
+                data.bands.bids.forEach((p, i) => { if(bandSeries[i]) bandSeries[i].bid.update({ time: t, value: p }); });
+                data.bands.asks.forEach((p, i) => { if(bandSeries[i]) bandSeries[i].ask.update({ time: t, value: p }); });
+            }
+
+            // 3. Update OFI
+            const color = data.ofi >= 0 ? CONFIG.colors.green : CONFIG.colors.red;
+            ofiSeries.update({ time: t, value: data.ofi, color: color });
+
+            // 4. Update Depth (Snapshot mode, re-mapping x-axis to indices for smooth look)
+            if (data.depth) {
+                // Depth chart doesn't use time, just simple index 0..100
+                const bidData = data.depth.bids.reverse().map((d, i) => ({ time: i, value: d.v }));
+                const askData = data.depth.asks.map((d, i) => ({ time: i + 100, value: d.v }));
+                depthBidSeries.setData(bidData);
+                depthAskSeries.setData(askData);
+                depthChart.timeScale().fitContent();
+            }
+
+            // 5. DOM Updates
+            document.getElementById('val-mid').innerText = data.mid.toFixed(1);
+            document.getElementById('val-spread').innerText = data.spread.toFixed(1);
             
-            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;
-                    const lastTime = cleanHist[cleanHist.length-1].time;
-                    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: lastTime + 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.polr && data.polr.length) {{
-                        data.polr.forEach((point, index) => {{
-                            if (index < polrLines.length) {{
-                                polrLines[index].update({{
-                                    time: lastTime, 
-                                    value: point.p
-                                }});
-                            }}
-                        }});
-                    }}
-                }}
-
-                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 = [];
-                    activeCandleLines.forEach(l => candleSeries.removePriceLine(l));
-                    activeCandleLines = [];
-                    
-                    let html = "";
-                    const addWall = (w, type) => {{
-                        const color = type === 'BID' ? '#00ff9d' : '#ff3b3b';
-                        const lineOpts = {{ price: w.price, color: color, lineWidth: 1, lineStyle: 2, axisLabelVisible: false }};
-                        
-                        activeLines.push(priceSeries.createPriceLine(lineOpts));
-                        activeCandleLines.push(candleSeries.createPriceLine(lineOpts));
-                        
-                        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();
-    }});
+            const pressEl = document.getElementById('val-pressure');
+            pressEl.innerText = data.pressure.toFixed(4);
+            pressEl.style.color = data.pressure > 0 ? CONFIG.colors.green : CONFIG.colors.red;
+
+            // Simple distance to first band calc
+            if(data.bands.asks.length) document.getElementById('val-ask-liq').innerText = (data.bands.asks[0] - data.mid).toFixed(2);
+            if(data.bands.bids.length) document.getElementById('val-bid-liq').innerText = (data.mid - data.bands.bids[0]).toFixed(2);
+        };
+    };
+
+    connect();
 </script>
 </body>
 </html>
 """
 
-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"
-            async with session.get(url) as response:
-                if response.status == 200:
-                    data = await response.json()
-                    if 'result' in data:
-                        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"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})")
-                
-                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)
-                    channel = payload.get("channel")
-                    data = payload.get("data", [])
-
-                    if channel == "book":
-                        for item in data:
-                            for bid in item.get('bids', []):
-                                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', []):
-                                q, p = float(ask['qty']), float(ask['price'])
-                                if q == 0: market_state['asks'].pop(p, None)
-                                else: market_state['asks'][p] = q
-                        
-                        if market_state['bids'] and market_state['asks']:
-                            best_bid = max(market_state['bids'].keys())
-                            best_ask = min(market_state['asks'].keys())
-                            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:
-                                qty = float(trade['qty'])
-                                price = float(trade['price'])
-                                side = trade['side']
-                                
-                                if side == 'buy': market_state['current_vol_window']['buy'] += qty
-                                else: market_state['current_vol_window']['sell'] += qty
-
-                                current_minute_start = int(time.time()) // 60 * 60
-                                
-                                if market_state['ohlc_history']:
-                                    last_candle = market_state['ohlc_history'][-1]
-                                    
-                                    if last_candle['time'] == current_minute_start:
-                                        last_candle['close'] = price
-                                        if price > last_candle['high']: last_candle['high'] = price
-                                        if price < last_candle['low']: last_candle['low'] = price
-                                    
-                                    elif current_minute_start > last_candle['time']:
-                                        new_candle = {
-                                            'time': current_minute_start,
-                                            'open': price,
-                                            'high': price,
-                                            'low': price,
-                                            'close': price
-                                        }
-                                        market_state['ohlc_history'].append(new_candle)
-                                        if len(market_state['ohlc_history']) > 200:
-                                            market_state['ohlc_history'].pop(0)
-                            except: pass
-
-                    elif channel == "ohlc":
-                        for candle in data:
-                            try:
-                                start_time = int(float(candle['endtime'])) - 60
-                                c_data = {
-                                    'time': start_time, 
-                                    'open': float(candle['open']),
-                                    'high': float(candle['high']),
-                                    'low': float(candle['low']),
-                                    'close': float(candle['close'])
-                                }
-                                
-                                if market_state['ohlc_history']:
-                                    if market_state['ohlc_history'][-1]['time'] == start_time:
-                                        market_state['ohlc_history'][-1] = c_data
-                                    elif market_state['ohlc_history'][-1]['time'] < start_time:
-                                        market_state['ohlc_history'].append(c_data)
-                                        if len(market_state['ohlc_history']) > 200:
-                                            market_state['ohlc_history'].pop(0)
-                            except Exception as e:
-                                pass
+# ==========================================
+# WEBSERVER SETUP
+# ==========================================
 
-        except Exception as e:
-            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()
-            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):
+async def ws_handler(request):
     ws = web.WebSocketResponse()
     await ws.prepare(request)
-    connected_clients.add(ws)
+    
+    request.app['websockets'].add(ws)
     try:
-        async for msg in ws:
-            pass
+        async for msg in ws: pass
     finally:
-        connected_clients.remove(ws)
+        request.app['websockets'].discard(ws)
     return ws
 
-async def handle_index(request):
-    return web.Response(text=HTML_PAGE, content_type='text/html')
+async def index_handler(request):
+    return web.Response(text=HTML_TEMPLATE, content_type='text/html')
 
-async def start_background(app):
-    app['kraken_task'] = asyncio.create_task(kraken_worker())
-    app['broadcast_task'] = asyncio.create_task(broadcast_worker())
+async def on_startup(app):
+    app['websockets'] = set()
+    app['ingestion_task'] = asyncio.create_task(ingestion_worker())
+    app['broadcast_task'] = asyncio.create_task(broadcast_worker(app))
 
-async def cleanup_background(app):
-    app['kraken_task'].cancel()
+async def on_cleanup(app):
+    app['ingestion_task'].cancel()
     app['broadcast_task'].cancel()
-    try: await app['kraken_task']; await app['broadcast_task']
-    except: pass
+    for ws in app['websockets']:
+        await ws.close()
 
-async def main():
+def main():
     app = web.Application()
-    app.router.add_get('/', handle_index)
-    app.router.add_get('/ws', websocket_handler)
-    app.on_startup.append(start_background)
-    app.on_cleanup.append(cleanup_background)
-    runner = web.AppRunner(app)
-    await runner.setup()
-    site = web.TCPSite(runner, '0.0.0.0', PORT)
-    await site.start()
-    print(f"🚀 Quant Dashboard: http://localhost:{PORT}")
-    await asyncio.Event().wait()
+    app.router.add_get('/', index_handler)
+    app.router.add_get('/ws', ws_handler)
+    app.on_startup.append(on_startup)
+    app.on_cleanup.append(on_cleanup)
+    
+    print(f"🚀 QUANT SUITE ACTIVE: http://localhost:{PORT}")
+    web.run_app(app, port=PORT, print=None)
 
 if __name__ == "__main__":
-    try: asyncio.run(main())
-    except KeyboardInterrupt: pass
+    try:
+        # Windows selector event loop policy fix
+        import sys
+        if sys.platform == 'win32':
+            asyncio.set_event_loop_policy(asyncio.WindowsSelectorEventLoopPolicy())
+        main()
+    except KeyboardInterrupt:
+        pass