Update app.py

app.py

@@ -6,29 +6,24 @@ import bisect
 import math
 import statistics
 import aiohttp
+from datetime import datetime
 from aiohttp import web
 import websockets
 
-# --- CONFIGURATION ---
-SYMBOL_KRAKEN = "BTC/USD"  # WebSocket Symbol
-API_PAIR = "XBTUSD"        # REST API Pair
+SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
 HISTORY_LENGTH = 300 
 BROADCAST_RATE = 0.1
 
-# Quant Parameters
 DECAY_LAMBDA = 50.0      
-IMPACT_SENSITIVITY = 1.5 
+IMPACT_SENSITIVITY = 2.0 
 Z_SCORE_THRESHOLD = 3.0  
 WALL_LOOKBACK = 200      
-SQRT_IMPACT_K = 0.5      
 
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
 
-# --- MATHEMATICAL CLASSES ---
-
 class KalmanFilter:
-    def __init__(self, process_noise=1e-5, measurement_noise=1e-3):
+    def __init__(self, process_noise=1e-4, measurement_noise=1e-2):
         self.x = 0.0 
         self.v = 0.0 
         self.P = 1.0 
@@ -38,7 +33,6 @@ class KalmanFilter:
         self.last_time = time.time()
 
     def update(self, measurement):
-        if measurement == 0: return
         now = time.time()
         dt = now - self.last_time
         self.last_time = now
@@ -48,37 +42,34 @@ class KalmanFilter:
             self.first_run = False
             return
 
+        # 1. Predict
+        # x = x + v*dt
         pred_x = self.x + self.v * dt
         pred_v = self.v
-        self.P = self.P + self.Q
         
-        residual = measurement - pred_x
-        S = self.P + self.R
-        K = self.P / S
+        # P = FPF' + Q
+        # Simple scalar expansion for P (covariance)
+        # F is [1 dt; 0 1]
+        p_xx = self.P + dt * dt + self.Q
+        
+        # 2. Update
+        # y = z - Hx (Residual)
+        y = measurement - pred_x
+        
+        # S = HPH' + R
+        S = p_xx + self.R
         
-        self.x = pred_x + K * residual
-        self.v = pred_v + (K / dt) * residual * 0.1 
-        self.P = (1 - K) * self.P
-
-class VolatilityModel:
-    def __init__(self, decay=0.94): 
-        self.variance = 0.0
-        self.decay = decay
-        self.initialized = False
-
-    def update(self, high, low):
-        if high == 0 or low == 0: return
-        range_sq = (high - low) ** 2
-        if not self.initialized:
-            self.variance = range_sq
-            self.initialized = True
-        else:
-            self.variance = (self.decay * self.variance) + ((1 - self.decay) * range_sq)
-
-    def get_sigma(self):
-        return math.sqrt(self.variance)
-
-# --- GLOBAL STATE ---
+        # K = PH'S^-1
+        K_x = p_xx / S
+        K_v = dt / S # simplified gain for velocity
+
+        # x = x + Ky
+        self.x = pred_x + K_x * y
+        self.v = pred_v + K_v * y
+        
+        # P = (I - KH)P
+        self.P = (1 - K_x) * p_xx
+
 market_state = {
     "bids": {},
     "asks": {},
@@ -86,18 +77,16 @@ market_state = {
     "pred_history": [], 
     "trade_vol_history": [], 
     "ohlc_history": [], 
-    "current_vol_window": {"buy": 0.0, "sell": 0.0, "start": time.time()}, 
+    "current_vol_window": {"buy": 0.0, "sell": 0.0, "start": time.time()},
     "current_mid": 0.0,
     "ready": False,
     "kalman": KalmanFilter(),
-    "vol_model": VolatilityModel(),
-    "avg_minute_volume": 1.0 
+    "volatility_sq_sum": 0.0,
+    "volatility_count": 0
 }
 
 connected_clients = set()
 
-# --- ANALYTICS ---
-
 def detect_anomalies(orders, scan_depth):
     if len(orders) < 10: return []
     relevant_orders = orders[:scan_depth]
@@ -121,89 +110,79 @@ def detect_anomalies(orders, scan_depth):
     walls.sort(key=lambda x: x['z_score'], reverse=True)
     return walls[:3]
 
-def calculate_book_imbalance(diff_x, diff_y_net):
-    if not diff_x or len(diff_x) < 5: return 0.0
+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
-    if total_weight == 0: return 0.0
-    return weighted_imbalance / total_weight
-
-def predict_next_candle(current_mid, kf_velocity, book_rho, net_trade_vol, avg_vol, sigma, walls):
-    trend_impact = kf_velocity * 60.0
-    book_impact = book_rho * 100 * IMPACT_SENSITIVITY 
-
-    denom = max(avg_vol, 0.1)
-    trade_impact_raw = sigma * math.sqrt(abs(net_trade_vol) / denom)
-    trade_impact = trade_impact_raw * (1 if net_trade_vol >= 0 else -1) * SQRT_IMPACT_K
-
-    total_drift = trend_impact + book_impact + trade_impact
-    pred_close = current_mid + total_drift
 
-    range_expansion = sigma * 1.0 
+    rho = weighted_imbalance / total_weight if total_weight > 0 else 0
 
-    pred_high = max(current_mid, pred_close) + (range_expansion * 0.5)
-    pred_low = min(current_mid, pred_close) - (range_expansion * 0.5)
+    spread = best_ask - best_bid
+    theoretical_delta = (spread / 2) * rho * IMPACT_SENSITIVITY
+    projected_price = current_mid + theoretical_delta
 
-    if walls['asks']:
+    final_delta = theoretical_delta
+    if final_delta > 0 and walls['asks']:
         nearest_wall = walls['asks'][0]
-        if pred_high > nearest_wall['price']:
-            pred_high -= (pred_high - nearest_wall['price']) * 0.8
-            if pred_close > nearest_wall['price']:
-                pred_close -= (pred_close - nearest_wall['price']) * 0.8
-
-    if walls['bids']:
+        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 pred_low < nearest_wall['price']:
-            pred_low += (nearest_wall['price'] - pred_low) * 0.8
-            if pred_close < nearest_wall['price']:
-                pred_close += (nearest_wall['price'] - pred_close) * 0.8
+        if projected_price <= nearest_wall['price']:
+            damp_factor = 1.0 / (1.0 + (nearest_wall['z_score'] * 0.2))
+            final_delta *= damp_factor
 
-    now_ts = int(time.time())
     return {
-        'time': now_ts + 60,
-        'open': current_mid,
-        'high': pred_high,
-        'low': pred_low,
-        'close': pred_close
+        "projected": current_mid + final_delta,
+        "rho": rho
     }
 
 def process_market_data():
-    if not market_state['ready'] or market_state['current_mid'] == 0: 
-        return {"error": "Initializing..."}
+    if not market_state['ready']: return {"error": "Initializing..."}
 
     mid = market_state['current_mid']
     
-    # Update Models
+    # 1. Update Kalman Filter
     market_state['kalman'].update(mid)
-    if market_state['ohlc_history']:
-        last_candle = market_state['ohlc_history'][-1]
-        market_state['vol_model'].update(last_candle['high'], last_candle['low'])
+    
+    # 2. Update Volatility Estimate (Welford's online algorithm approx)
+    if market_state['history']:
+        prev_p = market_state['history'][-1]['p']
+        ret = math.log(mid / prev_p) if prev_p > 0 else 0
+        market_state['volatility_sq_sum'] = 0.95 * market_state['volatility_sq_sum'] + 0.05 * (ret ** 2)
+    
+    current_volatility = math.sqrt(market_state['volatility_sq_sum']) * mid 
 
-    # Volume Window
     now = time.time()
+    
+    # Volume Window Logic
     if now - market_state['current_vol_window']['start'] >= 1.0:
-        b_vol = market_state['current_vol_window']['buy']
-        s_vol = market_state['current_vol_window']['sell']
-        market_state['trade_vol_history'].append({'t': now, 'buy': b_vol, 'sell': s_vol})
+        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)
-        
-        total_recent_vol = sum(x['buy'] + x['sell'] for x in market_state['trade_vol_history'])
-        market_state['avg_minute_volume'] = max(total_recent_vol, 1.0)
         market_state['current_vol_window'] = {"buy": 0.0, "sell": 0.0, "start": now}
 
-    # Order Book
     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)
 
@@ -228,39 +207,59 @@ def process_market_data():
         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)]
+        
         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)
-
-    # Predictions
-    rho = calculate_book_imbalance(diff_x, diff_y_net)
-    recent_net_vol = sum(x['buy'] - x['sell'] for x in market_state['trade_vol_history'])
-    sigma = market_state['vol_model'].get_sigma()
-    if sigma == 0: sigma = 10.0 
-
-    pred_candle = predict_next_candle(
-        current_mid=mid,
-        kf_velocity=market_state['kalman'].v,
-        book_rho=rho,
-        net_trade_vol=recent_net_vol,
-        avg_vol=market_state['avg_minute_volume'],
-        sigma=sigma,
-        walls={"bids": bid_walls, "asks": ask_walls}
-    )
+            chart_bids.append(vol_b)
+            chart_asks.append(vol_a)
 
-    analysis = { "projected": pred_candle['close'], "rho": rho }
+    analysis = calculate_micro_price_structure(
+        diff_x, diff_y_net, mid, best_bid, best_ask, 
+        {"bids": bid_walls, "asks": ask_walls}
+    )
+    
+    # --- PREDICT NEXT CANDLE ---
+    # Formula: Price(t+60) = Price(t) + (Kalman_Velocity * 60) + (OFI_Impact)
+    kf_velocity = market_state['kalman'].v
+    ofi_impact = 0
+    if analysis:
+        # We use the Micro-Structure Delta as the immediate force
+        ofi_impact = (analysis['projected'] - mid) 
+
+    # Forecast 60 seconds out
+    pred_close = mid + (kf_velocity * 60.0) + ofi_impact
     
+    # Estimate High/Low based on Volatility
+    # We assume High/Low expand from Open/Close by sigma * sqrt(t)
+    range_expansion = current_volatility * math.sqrt(60) * 2 # 2 Sigma
+    
+    pred_candle = {
+        'time': int(now) + 60, # Future time
+        'open': mid,
+        'close': pred_close,
+        'high': max(mid, pred_close) + range_expansion,
+        'low': min(mid, pred_close) - range_expansion
+    }
+
+    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,
+        "pred_candle": pred_candle, # NEW
         "depth_x": diff_x,
         "depth_net": diff_y_net,
         "depth_bids": chart_bids,
@@ -274,7 +273,7 @@ HTML_PAGE = f"""
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>{SYMBOL_KRAKEN} | Quant Terminal</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>
@@ -290,46 +289,135 @@ HTML_PAGE = f"""
             --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; gap: 1px; background-color: var(--border); height: 100vh; box-sizing: border-box; }}
+        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-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 1fr; gap: 1px; background: 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; }}
+
+        #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-purple {{ 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 {{ 
+            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; }}
+        
+        .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">CONNECTING...</span></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 ACTION (BLUE)</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">
             <div class="bottom-sub">
                 <div class="chart-header">1M KLINE + GHOST PREDICTION (PURPLE)</div>
@@ -340,100 +428,218 @@ HTML_PAGE = f"""
                 <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">Next 1M Candle Prediction</span>
+                <span class="label">Next 1M Candle Close</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>
                 </div>
-                <span class="label" style="margin-top:4px;">Kalman + SqRoot Impact + OFI</span>
+                <span class="label" style="margin-top:4px;">Kalman Trend + OFI</span>
             </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>
+
+            <div class="data-group">
+                <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">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 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>
+
+            <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>
-        setInterval(() => {{ const now = new Date(); document.getElementById('clock').innerText = now.toISOString().split('T')[1].split('.')[0] + ' UTC'; }}, 1000);
+        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 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 priceSeries = priceChart.addLineSeries({{ color: '#2979ff', lineWidth: 2, title: 'Price' }});
-            
-            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 ghostSeries = candleChart.addCandlestickSeries({{ upColor: 'rgba(213, 0, 249, 0.5)', downColor: 'rgba(213, 0, 249, 0.5)', borderVisible: true, borderColor: '#d500f9', wickUpColor: '#d500f9', wickDownColor: '#d500f9' }});
-            
-            const netChart = LightweightCharts.createChart(document.getElementById('tv-net'), {{ ...chartOpts, localization: {{ timeFormatter: t => '$' + t.toFixed(2) }} }});
+            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' 
+            }});
+            // Ghost Candle Series (Prediction)
+            const ghostSeries = candleChart.addCandlestickSeries({{ 
+                upColor: 'rgba(213, 0, 249, 0.5)', 
+                downColor: 'rgba(213, 0, 249, 0.5)', 
+                borderVisible: true, 
+                borderColor: '#d500f9',
+                wickUpColor: '#d500f9', 
+                wickDownColor: '#d500f9' 
+            }});
+
+            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 }} }});
+
+            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 }} }});
+
+            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 => {{ entries.forEach(e => {{ const id = e.target.id; const {{width, height}} = e.contentRect; if(id==='tv-price') priceChart.applyOptions({{width, height}}); if(id==='tv-candles') candleChart.applyOptions({{width, height}}); if(id==='tv-net') netChart.applyOptions({{width, height}}); if(id==='sidebar-vol') volChart.applyOptions({{width, height}}); if(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) {{ 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)); }});
+
+            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 && data.history.length) {{
+
+                    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 rho = data.analysis.rho;
+                            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 }}
+                            ]);
+                            
                             dom.score.innerText = rho.toFixed(3);
                             dom.score.style.color = rho > 0 ? "var(--green)" : (rho < 0 ? "var(--red)" : "var(--text-main)");
                         }}
                     }}
+
                     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 }}));
-                        candleSeries.setData(candles);
+                        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);
                     }}
+
+                    // RENDER GHOST CANDLE
                     if (data.pred_candle) {{
                         ghostSeries.setData([data.pred_candle]);
                         const pClose = data.pred_candle.close;
                         dom.projVal.innerText = pClose.toLocaleString('en-US', {{ minimumFractionDigits: 2 }});
-                        const currentP = parseFloat(dom.ticker.innerText.replace(/,/g, '') || 0);
-                        if(currentP > 0) {{
-                            const pct = ((pClose - currentP) / currentP) * 100;
-                            dom.projPct.innerText = (pct >= 0 ? "+" : "") + pct.toFixed(4) + "%";
-                            dom.projPct.style.color = pct >= 0 ? "var(--green)" : "var(--red)";
-                        }}
+                        
+                        // Calculate pct from current open
+                        const currentP = parseFloat(dom.ticker.innerText.replace(/,/g, ''));
+                        const pct = ((pClose - currentP) / currentP) * 100;
+                        const sign = pct >= 0 ? "+" : "";
+                        dom.projPct.innerText = `${{sign}}${{pct.toFixed(4)}}%`;
+                        dom.projPct.style.color = pct >= 0 ? "var(--green)" : "var(--red)";
                     }}
+
                     if (data.walls) {{
-                        activeLines.forEach(l => priceSeries.removePriceLine(l)); activeLines = [];
+                        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'));
+                        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) {{
+
+                    if (data.trade_history && data.trade_history.length) {{
                         const buyData = [], sellData = [];
-                        data.trade_history.forEach(t => {{ const tm = Math.floor(t.t); buyData.push({{ time: tm, value: t.buy }}); sellData.push({{ time: tm, value: t.sell }}); }});
+                        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) {{
+
+                    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];
@@ -441,7 +647,9 @@ HTML_PAGE = f"""
                             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);
+                        bidSeries.setData(bids);
+                        askSeries.setData(asks);
+                        netSeries.setData(nets);
                     }}
                 }};
                 ws.onclose = () => setTimeout(connect, 2000);
@@ -456,12 +664,10 @@ HTML_PAGE = f"""
 async def kraken_worker():
     global market_state
     
-    # 1. Fetch History with Timeout to prevent hanging
     try:
         async with aiohttp.ClientSession() as session:
-            url = f"https://api.kraken.com/0/public/OHLC?pair={API_PAIR}&interval=1"
-            # 5 second timeout for history fetch
-            async with session.get(url, timeout=5) as response:
+            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:
@@ -469,23 +675,36 @@ async def kraken_worker():
                             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]) }
+                                    {
+                                        '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:]
                                 ]
-                                logging.info(f"Loaded {len(market_state['ohlc_history'])} historical candles")
                                 break
     except Exception as e:
-        logging.error(f"History fetch failed (Continuing anyway): {e}")
+        logging.error(f"History fetch failed: {e}")
 
-    # 2. Main WebSocket Loop
     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}}))
+                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)
@@ -531,8 +750,10 @@ async def kraken_worker():
                             try:
                                 c_data = {
                                     'time': int(float(candle['endtime'])), 
-                                    'open': float(candle['open']), 'high': float(candle['high']),
-                                    'low': float(candle['low']), 'close': float(candle['close'])
+                                    '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
@@ -540,7 +761,8 @@ async def kraken_worker():
                                     market_state['ohlc_history'].append(c_data)
                                     if len(market_state['ohlc_history']) > 100:
                                         market_state['ohlc_history'].pop(0)
-                            except: pass
+                            except Exception as e:
+                                pass
 
         except Exception as e:
             logging.warning(f"⚠️ Reconnecting: {e}")
@@ -561,7 +783,8 @@ 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