Update app.py

app.py

@@ -5,157 +5,551 @@ import time
 import aiohttp
 from aiohttp import web
 import websockets
-import collections
 
-# --- CONFIGURATION ---
 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
-BROADCAST_RATE = 0.1  # Broadcast every 100ms
+HISTORY_LENGTH = 300
+BROADCAST_RATE = 0.1 # 100ms Updates (High Frequency)
+
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
 
-# --- GLOBAL STATE ---
 market_state = {
-    "prev_best_bid": None,
-    "prev_best_ask": None,
-    "prev_bid_qty": 0.0,
-    "prev_ask_qty": 0.0,
-    
-    "cumulative_ofi": 0.0,
-    "ofi_history": collections.deque(maxlen=300),
-    "price_history": collections.deque(maxlen=300),
-    
     "bids": {},
     "asks": {},
-    "mid_price": 0.0,
+    "history": [],
+    "ofi_history": [],     # Stores the Cumulative OFI
+    "trade_vol_history": [],
+    "ohlc_history": [],
+    "current_vol_window": {"buy": 0.0, "sell": 0.0, "start": time.time()},
+    "current_mid": 0.0,
+    "prev_book": None,     # To track t-1 state for CKS model
+    "cumulative_ofi": 0.0, # The running total of Order Flow Imbalance
     "ready": False
 }
 
 connected_clients = set()
-logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
 
-def calculate_ofi_step(best_bid, bid_qty, best_ask, ask_qty):
-    state = market_state
-    if state['prev_best_bid'] is None:
+def calculate_ofi(best_bid_p, best_bid_q, best_ask_p, best_ask_q):
+    """
+    Cont-Kukanov-Stoikov (CKS) Order Flow Imbalance Model.
+    e_n = I(b_n >= b_{n-1})*q_n^b - I(b_n <= b_{n-1})*q_{n-1}^b ...
+    """
+    prev = market_state['prev_book']
+    if not prev:
         return 0.0
 
-    # 1. Bid Side (Buying Pressure)
-    e_bid = 0.0
-    if best_bid > state['prev_best_bid']:
-        e_bid = bid_qty
-    elif best_bid < state['prev_best_bid']:
-        e_bid = -state['prev_bid_qty']
+    ofi_delta = 0.0
+
+    # --- BID SIDE IMPACT (Buying Pressure) ---
+    if best_bid_p > prev['bp']:
+        # Price Improvement: Aggressive Buy (Add full current qty)
+        ofi_delta += best_bid_q
+    elif best_bid_p < prev['bp']:
+        # Price Drop: Support Pulled (Subtract previous qty)
+        ofi_delta -= prev['bq']
     else:
-        e_bid = bid_qty - state['prev_bid_qty']
-
-    # 2. Ask Side (Selling Pressure)
-    e_ask = 0.0
-    if best_ask > state['prev_best_ask']:
-        e_ask = -state['prev_ask_qty']
-    elif best_ask < state['prev_best_ask']:
-        e_ask = ask_qty
+        # Price Same: Net change in liquidity
+        # If Qty increases, Support added (+). If Qty decreases, Support pulled (-).
+        ofi_delta += (best_bid_q - prev['bq'])
+
+    # --- ASK SIDE IMPACT (Selling Pressure) ---
+    # Note: Ask logic is inverted. Higher Ask = Less Pressure (Bullish), Lower Ask = More Pressure (Bearish)
+    # We subtract Ask Impact from Total OFI.
+    
+    ask_impact = 0.0
+    if best_ask_p < prev['ap']:
+        # Price Drop: Aggressive Sell (Add full current qty to sell pressure)
+        ask_impact += best_ask_q
+    elif best_ask_p > prev['ap']:
+        # Price Rise: Resistance Removed (Subtract previous qty from sell pressure)
+        ask_impact -= prev['aq']
     else:
-        e_ask = ask_qty - state['prev_ask_qty']
+        # Price Same: Net change in liquidity
+        # If Qty increases, Resistance added (+). If Qty decreases, Resistance removed (-).
+        ask_impact += (best_ask_q - prev['aq'])
 
-    return e_bid - e_ask
+    # Net OFI = Bid Impact - Ask Impact
+    return ofi_delta - ask_impact
 
 def process_market_data():
-    if not market_state['bids'] or not market_state['asks']:
-        return None
+    if not market_state['ready']: return {"error": "Initializing..."}
 
-    # Get BBO
+    # 1. Sort Book to get Best Bid/Ask
     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_p, best_bid_q = sorted_bids[0]
     best_ask_p, best_ask_q = sorted_asks[0]
-    mid_price = (best_bid_p + best_ask_p) / 2
-    
-    # Calculate OFI
-    instant_ofi = calculate_ofi_step(best_bid_p, best_bid_q, best_ask_p, best_ask_q)
-    decay = 0.99 
-    market_state['cumulative_ofi'] = (market_state['cumulative_ofi'] * decay) + instant_ofi
+    mid = (best_bid_p + best_ask_p) / 2
+    market_state['current_mid'] = mid
 
-    # Visualization scaling
-    ofi_visual_value = mid_price + (market_state['cumulative_ofi'] * 0.5) 
+    now = time.time()
 
-    # Update Previous State
-    market_state['prev_best_bid'] = best_bid_p
-    market_state['prev_best_ask'] = best_ask_p
-    market_state['prev_bid_qty'] = best_bid_q
-    market_state['prev_ask_qty'] = best_ask_q
+    # 2. CKS OFI Calculation
+    ofi_step = calculate_ofi(best_bid_p, best_bid_q, best_ask_p, best_ask_q)
+    market_state['cumulative_ofi'] += ofi_step
+    
+    # Store state for next tick (t-1)
+    market_state['prev_book'] = {
+        'bp': best_bid_p, 'bq': best_bid_q, 
+        'ap': best_ask_p, 'aq': best_ask_q
+    }
 
-    now = time.time()
-    market_state['price_history'].append({'time': now, 'value': mid_price})
-    market_state['ofi_history'].append({'time': now, 'value': ofi_visual_value})
+    # 3. History Management
+    if not market_state['history'] or (now - market_state['history'][-1]['t'] > 0.5):
+        # Price History
+        market_state['history'].append({'t': now, 'p': mid})
+        if len(market_state['history']) > HISTORY_LENGTH:
+            market_state['history'].pop(0)
+        
+        # OFI History (Synced with price updates)
+        market_state['ofi_history'].append({'t': now, 'v': market_state['cumulative_ofi']})
+        if len(market_state['ofi_history']) > HISTORY_LENGTH:
+            market_state['ofi_history'].pop(0)
 
-    # Signal Logic
-    signal = "NEUTRAL"
-    strength = 0.0
-    diff = ofi_visual_value - mid_price
-    if abs(diff) > 1.0:
-        strength = min(abs(diff) / 10.0, 1.0)
-        signal = "BULLISH PRESSURE" if diff > 0 else "BEARISH DRAG"
+    # 4. Volume Window Logic
+    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}
 
     return {
-        "price": list(market_state['price_history']),
-        "ofi": list(market_state['ofi_history']),
-        "current_price": mid_price,
-        "signal": signal,
-        "strength": strength * 100,
-        "raw_ofi": market_state['cumulative_ofi']
+        "mid": mid,
+        "history": market_state['history'],
+        "ofi": market_state['ofi_history'],
+        "trade_history": market_state['trade_vol_history'],
+        "ohlc": market_state['ohlc_history'],
+        "stats": {
+            "ofi_val": market_state['cumulative_ofi'],
+            "bid_depth": sum(q for p, q in sorted_bids[:10]),
+            "ask_depth": sum(q for p, q in sorted_asks[:10])
+        }
     }
 
+HTML_PAGE = f"""
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{SYMBOL_KRAKEN} | Institutional OFI</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; 
+        }}
+        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;
+            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: flex;
+            flex-direction: column;
+            background: var(--bg-panel);
+        }}
+        
+        #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; }}
+        
+        .divider {{ height: 1px; background: var(--border); width: 100%; }}
+        .c-green {{ color: var(--green); }}
+        .c-red {{ color: var(--red); }}
+        .c-yellow {{ color: var(--yellow); }}
+        
+        .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 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 - RHS) vs <span class="c-yellow">CUMULATIVE OFI (YELLOW - LHS)</span>
+        </div>
+        <div id="tv-price" style="flex: 1; width: 100%;"></div>
+    </div>
+
+    <div id="p-bottom" class="panel">
+        <div class="chart-header">1M KLINE (KRAKEN OHLC)</div>
+        <div id="tv-candles" style="flex: 1; width: 100%;"></div>
+    </div>
+
+    <div id="p-sidebar" class="panel">
+        
+        <div class="data-group">
+            <span class="label">Net OFI (Buying Pressure)</span>
+            <span id="ofi-val" class="value value-lg c-yellow">---</span>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="data-group">
+            <span class="label">Interpretation</span>
+            <div style="font-size: 11px; color: #888; line-height: 1.4;">
+                <span class="c-yellow">Yellow Line</span> tracks Order Flow Imbalance.
+                <br><br>
+                <b>Divergence:</b><br>
+                Yellow UP + Price Flat = <span class="c-green">BULLISH COIL</span><br>
+                Yellow DOWN + Price Flat = <span class="c-red">BEARISH DIST</span>
+            </div>
+        </div>
+
+        <div class="divider"></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>
+</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'),
+            ofiVal: document.getElementById('ofi-val')
+        }};
+
+        // --- MASTER CHART (Dual Axis) ---
+        const priceChart = LightweightCharts.createChart(document.getElementById('tv-price'), {{
+            layout: {{ background: {{ type: 'solid', color: '#0a0a0a' }}, textColor: '#888', fontFamily: 'JetBrains Mono' }},
+            grid: {{ vertLines: {{ color: '#151515' }}, horzLines: {{ color: '#151515' }} }},
+            rightPriceScale: {{ visible: true, borderColor: '#2979ff' }}, // Price on Right
+            leftPriceScale: {{ visible: true, borderColor: '#ffeb3b' }},  // OFI on Left
+            timeScale: {{ borderColor: '#222', timeVisible: true, secondsVisible: true }},
+        }});
+
+        // Price Series (Blue, Right Axis)
+        const priceSeries = priceChart.addLineSeries({{ 
+            color: '#2979ff', lineWidth: 2, title: 'Price',
+            priceScaleId: 'right' 
+        }});
+
+        // OFI Series (Yellow, Left Axis)
+        const ofiSeries = priceChart.addLineSeries({{ 
+            color: '#ffeb3b', lineWidth: 2, title: 'Cumulative OFI',
+            priceScaleId: 'left',
+            lastValueVisible: true
+        }});
+
+        // --- CANDLE CHART ---
+        const candleChart = LightweightCharts.createChart(document.getElementById('tv-candles'), {{
+            layout: {{ background: {{ type: 'solid', color: '#0a0a0a' }}, textColor: '#888', fontFamily: 'JetBrains Mono' }},
+            grid: {{ vertLines: {{ color: '#151515' }}, horzLines: {{ color: '#151515' }} }},
+            timeScale: {{ timeVisible: true, secondsVisible: false }},
+        }});
+        const candleSeries = candleChart.addCandlestickSeries({{ 
+            upColor: '#00ff9d', downColor: '#ff3b3b', borderVisible: false, wickUpColor: '#00ff9d', wickDownColor: '#ff3b3b' 
+        }});
+
+        // --- VOLUME CHART ---
+        const volChart = LightweightCharts.createChart(document.getElementById('sidebar-vol'), {{
+            layout: {{ background: {{ type: 'solid', color: '#0a0a0a' }}, textColor: '#888' }},
+            grid: {{ visible: false }},
+            rightPriceScale: {{ visible: false }},
+            timeScale: {{ visible: false }},
+            handleScroll: false, handleScale: false
+        }});
+        const volBuySeries = volChart.addHistogramSeries({{ color: '#00ff9d' }});
+        const volSellSeries = volChart.addHistogramSeries({{ color: '#ff3b3b' }});
+
+        // Resize Logic
+        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 === 'sidebar-vol') volChart.applyOptions({{width, height}});
+            }}
+        }}).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;
+
+                // 1. Update Price
+                if (data.history.length) {{
+                    const hist = data.history.map(d => ({{ time: Math.floor(d.t), value: d.p }}));
+                    const uniqueHist = [...new Map(hist.map(i => [i.time, i])).values()];
+                    priceSeries.setData(uniqueHist);
+
+                    const lastP = uniqueHist[uniqueHist.length-1].value;
+                    dom.ticker.innerText = lastP.toLocaleString('en-US', {{ minimumFractionDigits: 2 }});
+                }}
+
+                // 2. Update OFI
+                if (data.ofi.length) {{
+                    const ofiData = data.ofi.map(d => ({{ time: Math.floor(d.t), value: d.v }}));
+                    const uniqueOfi = [...new Map(ofiData.map(i => [i.time, i])).values()];
+                    ofiSeries.setData(uniqueOfi);
+
+                    // Update Sidebar Value
+                    const lastOfi = data.stats.ofi_val;
+                    dom.ofiVal.innerText = lastOfi.toLocaleString('en-US', {{ minimumFractionDigits: 0 }});
+                    dom.ofiVal.style.color = lastOfi >= 0 ? 'var(--yellow)' : 'var(--text-dim)';
+                }}
+
+                // 3. Update Candles
+                if (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);
+                }}
+
+                // 4. Update Volume
+                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()]);
+                }}
+            }};
+            ws.onclose = () => setTimeout(connect, 2000);
+        }}
+        connect();
+    }});
+</script>
+</body>
+</html>
+"""
+
 async def kraken_worker():
     global market_state
+    
+    # 1. Fetch History
+    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}")
+
+    # 2. Real-time Connection
     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})")
                 
-                # Subscribe
+                # Subscribe to Book (Level 1 is actually enough for CKS, but we take more for vol check)
                 await ws.send(json.dumps({
                     "method": "subscribe",
                     "params": {"channel": "book", "symbol": [SYMBOL_KRAKEN], "depth": 10}
                 }))
+                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)
-                    
-                    # Handle Heartbeats/Status
-                    if payload.get("channel") == "status":
-                        continue
-
-                    # Handle Book Updates
-                    if payload.get("channel") == "book":
-                        # v2 data is usually a list of objects
-                        data_list = payload.get("data", [])
-                        for data in data_list:
-                            for bid in data.get('bids', []):
-                                market_state['bids'][float(bid['price'])] = float(bid['qty'])
-                            for ask in data.get('asks', []):
-                                market_state['asks'][float(ask['price'])] = float(ask['qty'])
+                    channel = payload.get("channel")
+                    data = payload.get("data", [])
+
+                    if channel == "book":
+                        # Standard Book Maintenance
+                        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
                         
-                        # Mark as ready once we have data
                         if market_state['bids'] and market_state['asks']:
                             market_state['ready'] = True
+                    
+                    elif channel == "trade":
+                        for trade in data:
+                            try:
+                                qty = float(trade['qty'])
+                                price = float(trade['price'])
+                                side = trade['side']
+                                
+                                # Vol Accumulation
+                                if side == 'buy': market_state['current_vol_window']['buy'] += qty
+                                else: market_state['current_vol_window']['sell'] += qty
+
+                                # Live Candle Logic
+                                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: pass
 
         except Exception as e:
-            logging.error(f"WS Error: {e}")
-            await asyncio.sleep(2)
+            logging.warning(f"⚠️ Reconnecting: {e}")
+            await asyncio.sleep(3)
 
 async def broadcast_worker():
     while True:
-        # 1. Always process data to build history (if market is ready)
-        payload = None
-        if market_state['ready']:
+        if connected_clients and market_state['ready']:
             payload = process_market_data()
-
-        # 2. Only broadcast if we have clients AND data
-        if connected_clients and payload:
             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):
@@ -163,103 +557,36 @@ async def websocket_handler(request):
     await ws.prepare(request)
     connected_clients.add(ws)
     try:
-        async for msg in ws: pass
+        async for msg in ws:
+            pass
     finally:
         connected_clients.remove(ws)
     return ws
 
-HTML_PAGE = f"""
-<!DOCTYPE html>
-<html>
-<head>
-    <title>OFI Divergence Strategy</title>
-    <script src="https://unpkg.com/lightweight-charts@4.1.1/dist/lightweight-charts.standalone.production.js"></script>
-    <style>
-        body {{ background: #000; color: #fff; font-family: 'Courier New', monospace; margin: 0; display: flex; flex-direction: column; height: 100vh; }}
-        .header {{ padding: 15px; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; }}
-        .metric-box {{ text-align: right; }}
-        .big-val {{ font-size: 24px; font-weight: bold; }}
-        .sub-val {{ font-size: 12px; color: #888; }}
-        #chart-container {{ flex: 1; width: 100%; }}
-        .green {{ color: #00ff9d; }}
-        .red {{ color: #ff3b3b; }}
-    </style>
-</head>
-<body>
-    <div class="header">
-        <div>
-            <div style="font-size: 18px;">KRAKEN: {SYMBOL_KRAKEN}</div>
-            <div style="color: #666;">STRATEGY: ORDER FLOW IMBALANCE (CKS)</div>
-        </div>
-        <div class="metric-box">
-            <div id="signal-text" class="big-val">WAITING...</div>
-            <div id="signal-str" class="sub-val">CONFIDENCE: 0%</div>
-        </div>
-        <div class="metric-box">
-            <div id="price-text" class="big-val">---</div>
-            <div class="sub-val">CURRENT PRICE</div>
-        </div>
-    </div>
-    <div id="chart-container"></div>
-
-    <script>
-        const chart = LightweightCharts.createChart(document.getElementById('chart-container'), {{
-            layout: {{ background: {{ color: '#000' }}, textColor: '#888' }},
-            grid: {{ vertLines: {{ color: '#111' }}, horzLines: {{ color: '#111' }} }},
-            timeScale: {{ timeVisible: true, secondsVisible: true }},
-            rightPriceScale: {{ scaleMargins: {{ top: 0.1, bottom: 0.1 }} }},
-        }});
-
-        const priceSeries = chart.addLineSeries({{ color: '#2979ff', lineWidth: 2, title: 'Price' }});
-        const ofiSeries = chart.addLineSeries({{ color: '#ffeb3b', lineWidth: 2, title: 'OFI Pressure', lineStyle: 2 }});
-
-        const dom = {{
-            price: document.getElementById('price-text'),
-            signal: document.getElementById('signal-text'),
-            strength: document.getElementById('signal-str')
-        }};
-
-        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.price && data.price.length > 0) {{
-                    const latestPrice = data.price[data.price.length-1];
-                    
-                    priceSeries.setData(data.price);
-                    ofiSeries.setData(data.ofi);
-
-                    dom.price.innerText = latestPrice.value.toLocaleString('en-US', {{minimumFractionDigits: 2}});
-                    
-                    dom.signal.innerText = data.signal;
-                    dom.signal.className = data.signal.includes('BULL') ? 'big-val green' : (data.signal.includes('BEAR') ? 'big-val red' : 'big-val');
-                    
-                    dom.strength.innerText = `CONFIDENCE: ${{data.strength.toFixed(1)}}% (OFI: ${{data.raw_ofi.toFixed(2)}})`;
-                }}
-            }};
-            ws.onclose = () => setTimeout(connect, 2000);
-        }}
-        connect();
-    </script>
-</body>
-</html>
-"""
-
 async def handle_index(request):
     return web.Response(text=HTML_PAGE, 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 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()
     app.router.add_get('/', handle_index)
     app.router.add_get('/ws', websocket_handler)
-    app.on_startup.append(lambda a: asyncio.create_task(kraken_worker()))
-    app.on_startup.append(lambda a: asyncio.create_task(broadcast_worker()))
+    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"Strategy Dashboard: http://localhost:{PORT}")
+    print(f"🚀 Quant OFI Dashboard: http://localhost:{PORT}")
     await asyncio.Event().wait()
 
 if __name__ == "__main__":