Update app.py

app.py

@@ -8,22 +8,26 @@ import statistics
 from aiohttp import web
 import websockets
 
+# --- CONFIGURATION ---
 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
-HISTORY_LENGTH = 300
+HISTORY_LENGTH = 300 
 BROADCAST_RATE = 0.1
-DECAY_LAMBDA = 100.0
-IMPACT_SENSITIVITY = 0.5
-Z_SCORE_THRESHOLD = 3.0
-WALL_LOOKBACK = 200
+DECAY_LAMBDA = 100.0 
+IMPACT_SENSITIVITY = 0.5 
+
+# Wall Detection Parameters
+Z_SCORE_THRESHOLD = 3.0  
+WALL_LOOKBACK = 200      
 
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
 
+# --- GLOBAL STATE ---
 market_state = {
     "bids": {},
     "asks": {},
-    "history": [],
-    "pred_history": [],
+    "history": [], 
+    "pred_history": [], 
     "current_mid": 0.0,
     "prev_mid": 0.0,
     "ready": False
@@ -31,15 +35,12 @@ market_state = {
 
 connected_clients = set()
 
+# --- BACKEND LOGIC ---
 def detect_anomalies(orders, scan_depth):
-    if len(orders) < 10:
-        return []
-
+    if len(orders) < 10: return []
     relevant_orders = orders[:scan_depth]
     volumes = [q for p, q in relevant_orders]
-
-    if not volumes:
-        return []
+    if not volumes: return []
 
     try:
         avg_vol = statistics.mean(volumes)
@@ -47,30 +48,23 @@ def detect_anomalies(orders, scan_depth):
     except statistics.StatisticsError:
         return []
 
-    if stdev_vol == 0:
-        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.append({"price": price, "vol": qty, "z_score": z_score})
 
     walls.sort(key=lambda x: x['z_score'], reverse=True)
     return walls[:3]
 
 def analyze_structure(diff_x, diff_y, current_mid):
-    if not diff_y or len(diff_y) < 5:
-        return None
+    if not diff_y or len(diff_y) < 5: return None
 
     weighted_imbalance = 0.0
     prev_vol = 0.0
-
+    
     for i in range(len(diff_x)):
         dist = diff_x[i]
         cum_vol = diff_y[i]
@@ -81,24 +75,17 @@ def analyze_structure(diff_x, diff_y, current_mid):
 
     if weighted_imbalance != 0:
         impact = math.sqrt(abs(weighted_imbalance)) * IMPACT_SENSITIVITY
-        if weighted_imbalance < 0:
-            impact = -impact
+        if weighted_imbalance < 0: impact = -impact
     else:
         impact = 0.0
 
     projected_price = current_mid + impact
-
-    return {
-        "projected": projected_price,
-        "net_score": weighted_imbalance
-    }
+    return {"projected": projected_price, "net_score": weighted_imbalance}
 
 def process_market_data():
-    if not market_state['ready']:
-        return {"error": "Initializing..."}
+    if not market_state['ready']: return {"error": "Initializing..."}
 
     mid = market_state['current_mid']
-
     sorted_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0])
     sorted_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])
 
@@ -113,39 +100,36 @@ def process_market_data():
         d = mid - p
         if d >= 0:
             cum += q
-            d_b_x.append(d)
-            d_b_y.append(cum)
+            d_b_x.append(d); d_b_y.append(cum)
 
     d_a_x, d_a_y, cum = [], [], 0
     for p, q in raw_asks:
         d = p - mid
         if d >= 0:
             cum += q
-            d_a_x.append(d)
-            d_a_y.append(cum)
+            d_a_x.append(d); d_a_y.append(cum)
 
     diff_x, diff_y = [], []
     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)]
-
+        
         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
-
+            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
-
+            vol_a = d_a_y[idx_a-1] if idx_a > 0 else 0
+            
             diff_x.append(s)
             diff_y.append(vol_b - vol_a)
             chart_bids.append(vol_b)
             chart_asks.append(vol_a)
 
     analysis = analyze_structure(diff_x, diff_y, mid)
-
+    
     now = time.time()
     if analysis:
         if not market_state['pred_history'] or (now - market_state['pred_history'][-1]['t'] > 0.5):
@@ -162,790 +146,337 @@ def process_market_data():
         "depth_bids": chart_bids,
         "depth_asks": chart_asks,
         "analysis": analysis,
-        "walls": {
-            "bids": bid_walls,
-            "asks": ask_walls
-        }
+        "walls": {"bids": bid_walls, "asks": ask_walls}
     }
 
-HTML_PAGE = """
+# --- FRONTEND (UPDATED UI) ---
+HTML_PAGE = f"""
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Quantum Flow | BTC/USD</title>
+    <title>Liquidity Radar | {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=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto+Mono:wght@300;400;700&display=swap" rel="stylesheet">
     <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-
-        :root {
-            --bg-primary: #06080d;
-            --bg-secondary: #0c1018;
-            --bg-card: #111620;
-            --bg-elevated: #161d2a;
-            --border-primary: #1e2738;
-            --border-glow: #2a3f5f;
-            --text-primary: #e8eaed;
-            --text-secondary: #8b95a5;
-            --text-muted: #4a5568;
-            --accent-cyan: #00d4ff;
-            --accent-cyan-dim: rgba(0, 212, 255, 0.15);
-            --accent-green: #00ff88;
-            --accent-green-dim: rgba(0, 255, 136, 0.12);
-            --accent-red: #ff3366;
-            --accent-red-dim: rgba(255, 51, 102, 0.12);
-            --accent-orange: #ff9500;
-            --accent-purple: #a855f7;
-            --gradient-cyan: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
-            --gradient-green: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
-            --gradient-red: linear-gradient(135deg, #ff3366 0%, #cc2952 100%);
-        }
-
-        body {
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            overflow: hidden;
-            height: 100vh;
-            width: 100vw;
-        }
-
-        .app-container {
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-            background: radial-gradient(ellipse at top, #0d1520 0%, var(--bg-primary) 70%);
-        }
-
-        .header {
+        :root {{
+            --bg-dark: #050505;
+            --panel-bg: #0f1116;
+            --border: #1e222d;
+            --accent-blue: #2962FF;
+            --accent-green: #00E676;
+            --accent-red: #FF1744;
+            --text-main: #E0E0E0;
+            --text-dim: #757575;
+            --glass: rgba(15, 17, 22, 0.85);
+        }}
+        body {{ 
+            margin: 0; padding: 0; 
+            background-color: var(--bg-dark); 
+            color: var(--text-main); 
+            font-family: 'Roboto Mono', monospace; 
+            overflow: hidden; 
+            height: 100vh; width: 100vw;
+        }}
+        
+        /* LAYOUT GRID */
+        .layout {{ 
+            display: grid; 
+            grid-template-rows: 50px 1fr 1fr; 
+            grid-template-columns: 3fr 1fr; 
+            gap: 5px; 
+            height: 100vh; 
+            padding: 5px; 
+            box-sizing: border-box;
+        }}
+
+        /* TOP HEADER */
+        .header-bar {{
+            grid-column: 1 / 3;
+            grid-row: 1 / 2;
+            background: var(--panel-bg);
+            border: 1px solid var(--border);
+            border-radius: 4px;
             display: flex;
             align-items: center;
+            padding: 0 20px;
             justify-content: space-between;
-            padding: 12px 20px;
-            background: linear-gradient(180deg, rgba(17, 22, 32, 0.95) 0%, rgba(17, 22, 32, 0.8) 100%);
-            border-bottom: 1px solid var(--border-primary);
-            backdrop-filter: blur(20px);
-            z-index: 100;
-        }
-
-        .logo-section {
-            display: flex;
-            align-items: center;
-            gap: 14px;
-        }
-
-        .logo-icon {
-            width: 36px;
-            height: 36px;
-            background: var(--gradient-cyan);
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 18px;
-            box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
-        }
-
-        .logo-text {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 18px;
-            font-weight: 700;
-            background: var(--gradient-cyan);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            letter-spacing: -0.5px;
-        }
-
-        .logo-sub {
-            font-size: 10px;
-            color: var(--text-muted);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-top: 2px;
-        }
-
-        .header-center {
-            display: flex;
-            align-items: center;
-            gap: 24px;
-        }
-
-        .pair-display {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            padding: 8px 16px;
-            background: var(--bg-elevated);
-            border: 1px solid var(--border-primary);
-            border-radius: 12px;
-        }
-
-        .pair-icon {
-            width: 28px;
-            height: 28px;
-            background: linear-gradient(135deg, #f7931a 0%, #ffab40 100%);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
-            font-size: 14px;
-            color: #fff;
-        }
-
-        .pair-name {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 15px;
-            font-weight: 600;
-            color: var(--text-primary);
-        }
-
-        .live-price-container {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .live-indicator {
-            width: 8px;
-            height: 8px;
-            background: var(--accent-green);
-            border-radius: 50%;
-            animation: pulse-glow 2s ease-in-out infinite;
-            box-shadow: 0 0 10px var(--accent-green);
-        }
-
-        @keyframes pulse-glow {
-            0%, 100% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.6; transform: scale(0.9); }
-        }
-
-        .live-price {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 22px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .header-right {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .status-badge {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 6px 14px;
-            background: var(--accent-green-dim);
-            border: 1px solid rgba(0, 255, 136, 0.3);
-            border-radius: 20px;
-            font-size: 11px;
-            font-weight: 600;
-            color: var(--accent-green);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .main-grid {
-            flex: 1;
-            display: grid;
-            grid-template-columns: 1fr 320px;
-            grid-template-rows: 1fr 1fr;
-            gap: 4px;
-            padding: 4px;
-            min-height: 0;
-        }
-
-        .chart-panel {
-            grid-row: 1 / 3;
+        }}
+        .brand {{ font-family: 'Orbitron', sans-serif; font-weight: 700; color: var(--accent-blue); font-size: 18px; letter-spacing: 1px; }}
+        .live-price-box {{ display: flex; gap: 10px; align-items: baseline; }}
+        #main-price {{ font-size: 20px; font-weight: bold; color: #fff; }}
+
+        /* PANELS */
+        .panel {{ background: var(--panel-bg); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; position: relative; display: flex; flex-direction: column; }}
+        
+        #p-chart {{ grid-column: 1 / 2; grid-row: 2 / 3; }}
+        #p-depth {{ grid-column: 1 / 2; grid-row: 3 / 4; display: flex; flex-direction: row; gap: 5px; border: none; background: transparent; }}
+        
+        .sub-chart {{ flex: 1; background: var(--panel-bg); border: 1px solid var(--border); display: flex; flex-direction: column; }}
+
+        /* STATS SIDEBAR */
+        #p-sidebar {{ 
+            grid-column: 2 / 3; 
+            grid-row: 2 / 4; 
+            padding: 10px;
             display: flex;
             flex-direction: column;
-            background: var(--bg-card);
-            border: 1px solid var(--border-primary);
-            border-radius: 12px;
-            overflow: hidden;
-        }
-
-        .panel-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 12px 16px;
-            background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
-            border-bottom: 1px solid var(--border-primary);
-        }
-
-        .panel-title {
-            display: flex;
-            align-items: center;
             gap: 10px;
-            font-size: 12px;
-            font-weight: 600;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-
-        .panel-title-icon {
-            width: 20px;
-            height: 20px;
-            background: var(--accent-cyan-dim);
-            border-radius: 6px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 10px;
-        }
-
-        .chart-container {
-            flex: 1;
-            position: relative;
-            min-height: 0;
-        }
-
-        .depth-row {
-            display: flex;
-            gap: 4px;
-        }
-
-        .depth-panel {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            background: var(--bg-card);
-            border: 1px solid var(--border-primary);
-            border-radius: 12px;
-            overflow: hidden;
-        }
-
-        .stats-column {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-
-        .stats-panel {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            background: var(--bg-card);
-            border: 1px solid var(--border-primary);
-            border-radius: 12px;
-            overflow: hidden;
-        }
-
-        .stats-content {
-            flex: 1;
-            padding: 16px;
             overflow-y: auto;
-        }
-
-        .stat-card {
-            background: var(--bg-elevated);
-            border: 1px solid var(--border-primary);
-            border-radius: 10px;
-            padding: 14px;
-            margin-bottom: 12px;
-            transition: all 0.3s ease;
-        }
-
-        .stat-card:hover {
-            border-color: var(--border-glow);
-            transform: translateY(-1px);
-        }
-
-        .stat-card.highlight {
-            border-color: var(--accent-cyan);
-            background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(0, 212, 255, 0.05) 100%);
-            box-shadow: 0 4px 20px rgba(0, 212, 255, 0.1);
-        }
-
-        .stat-label {
-            font-size: 10px;
-            font-weight: 600;
-            color: var(--text-muted);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-bottom: 8px;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .stat-value {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 26px;
-            font-weight: 700;
-            line-height: 1.2;
-        }
-
-        .stat-value.green { color: var(--accent-green); }
-        .stat-value.red { color: var(--accent-red); }
-        .stat-value.cyan { color: var(--accent-cyan); }
-
-        .walls-section {
-            margin-top: 8px;
-        }
-
-        .walls-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 10px;
-        }
-
-        .walls-title {
-            font-size: 11px;
-            font-weight: 600;
-            color: var(--text-secondary);
-            text-transform: uppercase;
+        }}
+
+        .panel-header {{ 
+            padding: 8px 12px; 
+            background: rgba(255,255,255,0.02); 
+            border-bottom: 1px solid var(--border); 
+            font-size: 10px; 
+            font-weight: 700; 
+            color: var(--text-dim); 
+            text-transform: uppercase; 
             letter-spacing: 0.5px;
-        }
-
-        .walls-badge {
-            font-size: 9px;
-            padding: 3px 8px;
-            background: var(--accent-purple);
-            border-radius: 10px;
-            color: #fff;
-            font-weight: 600;
-        }
-
-        .wall-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 10px 12px;
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-primary);
-            border-radius: 8px;
-            margin-bottom: 8px;
-            transition: all 0.2s ease;
-        }
-
-        .wall-item:hover {
-            background: var(--bg-elevated);
-        }
-
-        .wall-item.bid {
-            border-left: 3px solid var(--accent-green);
-        }
-
-        .wall-item.ask {
-            border-left: 3px solid var(--accent-red);
-        }
-
-        .wall-type {
-            font-size: 9px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            padding: 3px 8px;
+        }}
+        
+        /* CARD STYLES */
+        .card {{
+            background: rgba(255,255,255,0.03);
+            border: 1px solid var(--border);
             border-radius: 4px;
-        }
-
-        .wall-type.bid {
-            background: var(--accent-green-dim);
-            color: var(--accent-green);
-        }
-
-        .wall-type.ask {
-            background: var(--accent-red-dim);
-            color: var(--accent-red);
-        }
-
-        .wall-price {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 13px;
-            font-weight: 600;
-            color: var(--text-primary);
-        }
-
-        .wall-zscore {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 11px;
-            color: var(--accent-orange);
-            font-weight: 600;
-        }
-
-        .empty-walls {
-            text-align: center;
-            padding: 20px;
-            color: var(--text-muted);
-            font-size: 12px;
-        }
-
-        #loader {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: var(--bg-primary);
-            z-index: 9999;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            gap: 24px;
-        }
-
-        .loader-spinner {
-            width: 60px;
-            height: 60px;
-            border: 3px solid var(--border-primary);
-            border-top-color: var(--accent-cyan);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-
-        .loader-text {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 2px;
-        }
-
-        .loader-sub {
-            font-size: 11px;
-            color: var(--text-muted);
-        }
-
-        .projection-row {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-top: 6px;
-        }
-
-        .projection-arrow {
-            font-size: 14px;
-        }
-
-        .projection-value {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 18px;
-            font-weight: 600;
-        }
+            padding: 15px;
+        }}
+        .card-title {{ font-size: 10px; color: var(--text-dim); margin-bottom: 5px; display: block; }}
+        .card-value {{ font-size: 24px; font-weight: 700; display: block; }}
+        .card-sub {{ font-size: 12px; margin-left: 5px; font-weight: 400; }}
+
+        /* TEXT COLORS */
+        .green {{ color: var(--accent-green); }}
+        .red {{ color: var(--accent-red); }}
+        .blue {{ color: var(--accent-blue); }}
+        .dim {{ color: var(--text-dim); }}
+
+        /* WALL LIST */
+        .wall-item {{ 
+            display: flex; justify-content: space-between; 
+            padding: 8px 5px; border-bottom: 1px solid #1a1d26; font-size: 11px; 
+        }}
+        .wall-item:last-child {{ border: none; }}
+        
+        /* LOADER */
+        #loader {{ position: fixed; top:0; left:0; width:100%; height:100%; background: #000; z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--accent-blue); }}
     </style>
 </head>
 <body>
+
     <div id="loader">
-        <div class="loader-spinner"></div>
-        <div class="loader-text">INITIALIZING QUANTUM FLOW</div>
-        <div class="loader-sub" id="loading-status">Connecting to market data stream...</div>
+        <div style="font-family: 'Orbitron'; font-size: 24px;">SYSTEM INITIALIZING</div>
+        <div id="loading-status" style="margin-top: 10px; font-size: 12px; color: #666;">Connecting to Feed...</div>
     </div>
 
-    <div class="app-container">
-        <header class="header">
-            <div class="logo-section">
-                <div class="logo-icon">◈</div>
-                <div>
-                    <div class="logo-text">QUANTUM FLOW</div>
-                    <div class="logo-sub">HFT Analytics</div>
-                </div>
+    <div class="layout">
+        <div class="header-bar">
+            <div class="brand">LIQUIDITY RADAR <span style="font-size: 12px; color: #666;">// {SYMBOL_KRAKEN}</span></div>
+            <div class="live-price-box">
+                <span class="dim">CURRENT MID:</span>
+                <span id="main-price">---</span>
             </div>
+        </div>
 
-            <div class="header-center">
-                <div class="pair-display">
-                    <div class="pair-icon">₿</div>
-                    <span class="pair-name">BTC/USD</span>
-                </div>
-                <div class="live-price-container">
-                    <div class="live-indicator"></div>
-                    <span class="live-price" id="live-price">---</span>
-                </div>
-            </div>
+        <!-- MAIN PRICE CHART -->
+        <div id="p-chart" class="panel">
+            <div class="panel-header">Real-time Price Action & Anomaly Detection</div>
+            <div id="tv-price" style="flex: 1; width: 100%;"></div>
+        </div>
 
-            <div class="header-right">
-                <div class="status-badge" id="status-badge">
-                    <span>●</span>
-                    <span id="status-text">LIVE</span>
-                </div>
+        <!-- DEPTH CHARTS (SPLIT) -->
+        <div id="p-depth">
+            <div class="sub-chart">
+                <div class="panel-header">Liquidity Density (Raw)</div>
+                <div id="tv-raw" style="flex: 1; width: 100%;"></div>
             </div>
-        </header>
-
-        <div class="main-grid">
-            <div class="chart-panel">
-                <div class="panel-header">
-                    <div class="panel-title">
-                        <div class="panel-title-icon">📈</div>
-                        Price Action & Liquidity Walls
-                    </div>
-                </div>
-                <div class="chart-container" id="tv-price"></div>
+            <div class="sub-chart">
+                <div class="panel-header">Order Imbalance (Net)</div>
+                <div id="tv-net" style="flex: 1; width: 100%;"></div>
             </div>
+        </div>
 
-            <div class="stats-column">
-                <div class="stats-panel">
-                    <div class="panel-header">
-                        <div class="panel-title">
-                            <div class="panel-title-icon">⚡</div>
-                            Analytics Engine
-                        </div>
-                    </div>
-                    <div class="stats-content">
-                        <div class="stat-card highlight">
-                            <div class="stat-label">◎ Impact Projection</div>
-                            <div class="stat-value cyan" id="proj-val">---</div>
-                            <div class="projection-row">
-                                <span class="projection-arrow" id="proj-arrow">→</span>
-                                <span class="projection-value" id="proj-direction">Calculating...</span>
-                            </div>
-                        </div>
-
-                        <div class="stat-card">
-                            <div class="stat-label">◉ Weighted Imbalance</div>
-                            <div class="stat-value" id="score-val">0.00</div>
-                        </div>
-
-                        <div class="walls-section">
-                            <div class="walls-header">
-                                <span class="walls-title">Detected Walls</span>
-                                <span class="walls-badge">Z > 3.0</span>
-                            </div>
-                            <div id="wall-list">
-                                <div class="empty-walls">Scanning for anomalies...</div>
-                            </div>
-                        </div>
-                    </div>
+        <!-- SIDEBAR ANALYTICS -->
+        <div id="p-sidebar" class="panel">
+            
+            <!-- IMPACT PROJECTION CARD -->
+            <div class="card" style="border-left: 3px solid var(--accent-blue);">
+                <span class="card-title">IMPACT PROJECTION (5s)</span>
+                <div style="display: flex; align-items: baseline;">
+                    <span id="proj-val" class="card-value">---</span>
                 </div>
-
-                <div class="depth-panel">
-                    <div class="panel-header">
-                        <div class="panel-title">
-                            <div class="panel-title-icon">📊</div>
-                            Market Depth
-                        </div>
-                    </div>
-                    <div class="chart-container" id="tv-raw"></div>
+                <!-- PERCENTAGE CHANGE INDICATOR -->
+                <div style="margin-top: 5px;">
+                    <span class="card-title" style="display:inline;">DELTA: </span>
+                    <span id="proj-pct" style="font-weight: bold;">--%</span>
                 </div>
+            </div>
+
+            <!-- IMBALANCE SCORE CARD -->
+            <div class="card">
+                <span class="card-title">WEIGHTED IMBALANCE</span>
+                <span id="score-val" class="card-value">0.00</span>
+                <span style="font-size: 10px; color: #555;">Exp Decay λ={DECAY_LAMBDA}</span>
+            </div>
 
-                <div class="depth-panel">
-                    <div class="panel-header">
-                        <div class="panel-title">
-                            <div class="panel-title-icon">Δ</div>
-                            Net Delta
-                        </div>
-                    </div>
-                    <div class="chart-container" id="tv-net"></div>
+            <!-- WALL DETECTION -->
+            <div class="card" style="flex: 1; display: flex; flex-direction: column;">
+                <span class="card-title">DETECTED LIQUIDITY WALLS (Z > 3.0)</span>
+                <div id="wall-list" style="margin-top: 10px; overflow-y: auto;">
+                    <div class="dim">Scanning depth...</div>
                 </div>
             </div>
         </div>
     </div>
 
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const dom = {
+        document.addEventListener('DOMContentLoaded', () => {{
+            const dom = {{
                 loader: document.getElementById('loader'),
                 status: document.getElementById('loading-status'),
-                statusBadge: document.getElementById('status-badge'),
-                statusText: document.getElementById('status-text'),
-                price: document.getElementById('live-price'),
+                mainPrice: document.getElementById('main-price'),
                 scoreVal: document.getElementById('score-val'),
                 projVal: document.getElementById('proj-val'),
-                projArrow: document.getElementById('proj-arrow'),
-                projDirection: document.getElementById('proj-direction'),
+                projPct: document.getElementById('proj-pct'),
                 wallList: document.getElementById('wall-list')
-            };
-
-            const chartCommon = {
-                layout: { background: { type: 'solid', color: '#111620' }, textColor: '#8b95a5', fontFamily: 'JetBrains Mono' },
-                grid: { vertLines: { color: '#1e2738' }, horzLines: { color: '#1e2738' } },
-                rightPriceScale: { borderColor: '#1e2738', scaleMargins: { top: 0.1, bottom: 0.1 } },
-                timeScale: { borderColor: '#1e2738', timeVisible: true, secondsVisible: true },
-                crosshair: { mode: 0, vertLine: { color: '#00d4ff', width: 1, style: 2 }, horzLine: { color: '#00d4ff', width: 1, style: 2 } }
-            };
-
+            }};
+
+            // CHART CONFIGURATION
+            const chartCommon = {{
+                layout: {{ background: {{ type: 'solid', color: '#0f1116' }}, textColor: '#757575', fontFamily: 'Roboto Mono' }},
+                grid: {{ vertLines: {{ color: '#1e222d' }}, horzLines: {{ color: '#1e222d' }} }},
+                rightPriceScale: {{ borderColor: '#1e222d', scaleMargins: {{ top: 0.1, bottom: 0.1 }} }},
+                timeScale: {{ borderColor: '#1e222d', timeVisible: true, secondsVisible: true }},
+                crosshair: {{ mode: 1, vertLine: {{ color: '#2962FF', labelBackgroundColor: '#2962FF' }}, horzLine: {{ color: '#2962FF', labelBackgroundColor: '#2962FF' }} }}
+            }};
+
+            // 1. PRICE CHART
             const priceChart = LightweightCharts.createChart(document.getElementById('tv-price'), chartCommon);
-            const priceSeries = priceChart.addLineSeries({ color: '#00d4ff', lineWidth: 2 });
-            const pastPredSeries = priceChart.addLineSeries({ color: '#4a5568', lineWidth: 1 });
-            const futurePredSeries = priceChart.addLineSeries({ color: '#ff9500', lineWidth: 2, lineStyle: 2 });
+            const priceSeries = priceChart.addLineSeries({{ color: '#E0E0E0', lineWidth: 2, title: 'Price' }});
+            const predSeries = priceChart.addLineSeries({{ color: '#2962FF', lineWidth: 2, lineStyle: 2, title: 'Projected' }});
 
-            const rawChart = LightweightCharts.createChart(document.getElementById('tv-raw'), {
+            // 2. RAW DEPTH CHART
+            const rawChart = LightweightCharts.createChart(document.getElementById('tv-raw'), {{
                 ...chartCommon,
-                timeScale: { tickMarkFormatter: (time) => parseFloat(time).toFixed(0) },
-                localization: { timeFormatter: (time) => '$' + parseFloat(time).toFixed(2) }
-            });
-            const rawBidSeries = rawChart.addAreaSeries({ lineColor: '#00ff88', topColor: 'rgba(0, 255, 136, 0.15)', bottomColor: 'rgba(0, 255, 136, 0.0)', lineWidth: 2 });
-            const rawAskSeries = rawChart.addAreaSeries({ lineColor: '#ff3366', topColor: 'rgba(255, 51, 102, 0.15)', bottomColor: 'rgba(255, 51, 102, 0.0)', lineWidth: 2 });
-
-            const netChart = LightweightCharts.createChart(document.getElementById('tv-net'), {
+                timeScale: {{ tickMarkFormatter: t => t.toFixed(0) }},
+                localization: {{ timeFormatter: t => 'Dist: $' + t.toFixed(2) }}
+            }});
+            const bidSeries = rawChart.addAreaSeries({{ lineColor: '#00E676', topColor: 'rgba(0, 230, 118, 0.2)', bottomColor: 'rgba(0,0,0,0)', lineWidth: 1 }});
+            const askSeries = rawChart.addAreaSeries({{ lineColor: '#FF1744', topColor: 'rgba(255, 23, 68, 0.2)', bottomColor: 'rgba(0,0,0,0)', lineWidth: 1 }});
+
+            // 3. NET CHART
+            const netChart = LightweightCharts.createChart(document.getElementById('tv-net'), {{
                 ...chartCommon,
-                timeScale: { tickMarkFormatter: (time) => parseFloat(time).toFixed(0) },
-                localization: { timeFormatter: (time) => '$' + parseFloat(time).toFixed(2) }
-            });
-            const netSeries = netChart.addAreaSeries({ topColor: 'rgba(0, 212, 255, 0.3)', bottomColor: 'rgba(0, 212, 255, 0.0)', lineColor: '#00d4ff', lineWidth: 2 });
+                timeScale: {{ tickMarkFormatter: t => t.toFixed(0) }},
+                localization: {{ timeFormatter: t => 'Dist: $' + t.toFixed(2) }}
+            }});
+            const netSeries = netChart.addHistogramSeries({{ color: '#2962FF' }});
 
             let activePriceLines = [];
 
-            const resizeObserver = 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-raw') rawChart.applyOptions({ width, height });
-                    if (entry.target.id === 'tv-net') netChart.applyOptions({ width, height });
-                }
-            });
-            ['tv-price', 'tv-raw', 'tv-net'].forEach(id => resizeObserver.observe(document.getElementById(id)));
-
-            function connect() {
-                const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
-                const url = `${proto}://${window.location.host}/ws`;
-                const ws = new WebSocket(url);
-
-                ws.onopen = () => {
-                    dom.status.innerText = "Receiving data stream...";
-                    dom.statusText.innerText = "LIVE";
-                    dom.statusBadge.style.background = "var(--accent-green-dim)";
-                    dom.statusBadge.style.borderColor = "rgba(0, 255, 136, 0.3)";
-                    dom.statusBadge.style.color = "var(--accent-green)";
-                };
-
-                ws.onclose = () => {
-                    dom.loader.style.display = 'flex';
-                    dom.status.innerText = "Connection lost. Reconnecting...";
-                    dom.statusText.innerText = "OFFLINE";
-                    dom.statusBadge.style.background = "var(--accent-red-dim)";
-                    dom.statusBadge.style.borderColor = "rgba(255, 51, 102, 0.3)";
-                    dom.statusBadge.style.color = "var(--accent-red)";
-                    setTimeout(connect, 3000);
-                };
-
-                ws.onmessage = (event) => {
-                    const data = JSON.parse(event.data);
+            // RESIZE HANDLER
+            new ResizeObserver(entries => {{
+                entries.forEach(e => {{
+                    if(e.target.id === 'tv-price') priceChart.applyOptions({{ width: e.contentRect.width, height: e.contentRect.height }});
+                    if(e.target.id === 'tv-raw') rawChart.applyOptions({{ width: e.contentRect.width, height: e.contentRect.height }});
+                    if(e.target.id === 'tv-net') netChart.applyOptions({{ width: e.contentRect.width, height: e.contentRect.height }});
+                }});
+            }}).observe(document.body);
+
+            function connect() {{
+                const ws = new WebSocket((window.location.protocol === 'https:' ? 'wss' : 'ws') + '://' + window.location.host + '/ws');
+                
+                ws.onopen = () => dom.status.innerText = "Stream Connected. Buffering...";
+                ws.onclose = () => {{ dom.loader.style.display = 'flex'; dom.status.innerText = "Reconnecting..."; setTimeout(connect, 3000); }};
+
+                ws.onmessage = (e) => {{
+                    const data = JSON.parse(e.data);
                     if (data.error) return;
                     dom.loader.style.display = 'none';
 
-                    const cleanHistory = [];
-                    const seen = new Set();
-                    data.history.forEach(d => {
-                        const t = Math.floor(d.t);
-                        if (!seen.has(t)) { seen.add(t); cleanHistory.push({ time: t, value: d.p }); }
-                    });
-
-                    const predHistory = [];
-                    const seenP = new Set();
-                    if (data.pred_history) {
-                        data.pred_history.forEach(d => {
-                            const t = Math.floor(d.t);
-                            if (!seenP.has(t)) { seenP.add(t); predHistory.push({ time: t, value: d.p }); }
-                        });
-                    }
-
-                    if (cleanHistory.length) {
-                        priceSeries.setData(cleanHistory);
-                        pastPredSeries.setData(predHistory);
-
-                        const last = cleanHistory[cleanHistory.length - 1];
-                        dom.price.innerText = '$' + last.value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-
-                        if (data.analysis) {
-                            const { projected, net_score } = data.analysis;
-
-                            futurePredSeries.setData([
-                                last,
-                                { time: last.time + 60, value: projected }
+                    // UPDATE CHARTS
+                    if (data.history.length) {{
+                        const hist = data.history.map(d => ({{ time: Math.floor(d.t), value: d.p }}));
+                        const uniqueHist = [...new Map(hist.map(item => [item.time, item])).values()];
+                        priceSeries.setData(uniqueHist);
+                        
+                        const lastPrice = uniqueHist[uniqueHist.length-1].value;
+                        dom.mainPrice.innerText = lastPrice.toLocaleString('en-US', {{ minimumFractionDigits: 2 }});
+
+                        // PREDICTION & PERCENTAGE LOGIC
+                        if (data.analysis) {{
+                            const proj = data.analysis.projected;
+                            const score = data.analysis.net_score;
+                            
+                            // 1. Draw projected line
+                            predSeries.setData([
+                                uniqueHist[uniqueHist.length-1],
+                                {{ time: uniqueHist[uniqueHist.length-1].time + 60, value: proj }}
                             ]);
 
-                            dom.projVal.innerText = '$' + projected.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 });
-
-                            const diff = projected - last.value;
-                            if (diff > 0) {
-                                dom.projArrow.innerText = '↑';
-                                dom.projArrow.style.color = 'var(--accent-green)';
-                                dom.projDirection.innerText = '+$' + Math.abs(diff).toFixed(2);
-                                dom.projDirection.style.color = 'var(--accent-green)';
-                            } else if (diff < 0) {
-                                dom.projArrow.innerText = '↓';
-                                dom.projArrow.style.color = 'var(--accent-red)';
-                                dom.projDirection.innerText = '-$' + Math.abs(diff).toFixed(2);
-                                dom.projDirection.style.color = 'var(--accent-red)';
-                            } else {
-                                dom.projArrow.innerText = '→';
-                                dom.projArrow.style.color = 'var(--text-muted)';
-                                dom.projDirection.innerText = 'Neutral';
-                                dom.projDirection.style.color = 'var(--text-muted)';
-                            }
-
-                            dom.scoreVal.innerText = net_score.toFixed(2);
-                            dom.scoreVal.className = net_score > 0 ? "stat-value green" : (net_score < 0 ? "stat-value red" : "stat-value");
-                        }
-                    }
-
-                    if (data.walls) {
-                        activePriceLines.forEach(line => priceSeries.removePriceLine(line));
-                        activePriceLines = [];
+                            // 2. Update UI Numbers
+                            dom.projVal.innerText = proj.toLocaleString('en-US', {{ minimumFractionDigits: 2 }});
+                            dom.projVal.className = proj > lastPrice ? "card-value green" : "card-value red";
+
+                            dom.scoreVal.innerText = score.toFixed(2);
+                            dom.scoreVal.style.color = score > 0 ? "var(--accent-green)" : "var(--accent-red)";
+
+                            // 3. CALCULATE PERCENTAGE CHANGE
+                            const pctChange = ((proj - lastPrice) / lastPrice) * 100;
+                            const sign = pctChange >= 0 ? "+" : "";
+                            dom.projPct.innerText = `${{sign}}${{pctChange.toFixed(3)}}%`;
+                            dom.projPct.style.color = pctChange >= 0 ? "var(--accent-green)" : "var(--accent-red)";
+                        }}
+                    }}
 
-                        let wallHtml = "";
-
-                        data.walls.bids.forEach(w => {
-                            const line = priceSeries.createPriceLine({
-                                price: w.price,
-                                color: 'rgba(0, 255, 136, 0.7)',
-                                lineWidth: 1,
-                                lineStyle: 2,
-                                axisLabelVisible: true,
-                                title: 'BUY'
-                            });
-                            activePriceLines.push(line);
-                            wallHtml += `<div class="wall-item bid"><span class="wall-type bid">BUY</span><span class="wall-price">$${w.price.toLocaleString()}</span><span class="wall-zscore">Z: ${w.z_score.toFixed(1)}</span></div>`;
-                        });
-
-                        data.walls.asks.forEach(w => {
-                            const line = priceSeries.createPriceLine({
-                                price: w.price,
-                                color: 'rgba(255, 51, 102, 0.7)',
-                                lineWidth: 1,
-                                lineStyle: 2,
-                                axisLabelVisible: true,
-                                title: 'SELL'
-                            });
-                            activePriceLines.push(line);
-                            wallHtml += `<div class="wall-item ask"><span class="wall-type ask">SELL</span><span class="wall-price">$${w.price.toLocaleString()}</span><span class="wall-zscore">Z: ${w.z_score.toFixed(1)}</span></div>`;
-                        });
-
-                        dom.wallList.innerHTML = wallHtml || '<div class="empty-walls">No significant walls detected</div>';
-                    }
-
-                    if (data.depth_x && data.depth_x.length) {
-                        const netData = [];
-                        const rawBids = [], rawAsks = [];
-
-                        for (let i = 0; i < data.depth_x.length; i++) {
-                            const x = data.depth_x[i];
-                            netData.push({ time: x, value: data.depth_net[i] });
-                            rawBids.push({ time: x, value: data.depth_bids[i] });
-                            rawAsks.push({ time: x, value: data.depth_asks[i] });
-                        }
-
-                        netSeries.setData(netData);
-                        rawBidSeries.setData(rawBids);
-                        rawAskSeries.setData(rawAsks);
-                    }
-                };
-            }
+                    // WALLS
+                    if (data.walls) {{
+                        activePriceLines.forEach(l => priceSeries.removePriceLine(l));
+                        activePriceLines = [];
+                        let html = "";
+
+                        data.walls.bids.forEach(w => {{
+                            activePriceLines.push(priceSeries.createPriceLine({{ price: w.price, color: '#00E676', lineWidth: 1, lineStyle: 2, axisLabelVisible: true, title: 'BUY WALL' }}));
+                            html += `<div class="wall-item"><span class="green">BID ${{w.price}}</span><span class="dim">Vol: ${{w.vol.toFixed(1)}} (Z:${{w.z_score.toFixed(1)}})</span></div>`;
+                        }});
+                        
+                        data.walls.asks.forEach(w => {{
+                            activePriceLines.push(priceSeries.createPriceLine({{ price: w.price, color: '#FF1744', lineWidth: 1, lineStyle: 2, axisLabelVisible: true, title: 'SELL WALL' }}));
+                            html += `<div class="wall-item"><span class="red">ASK ${{w.price}}</span><span class="dim">Vol: ${{w.vol.toFixed(1)}} (Z:${{w.z_score.toFixed(1)}})</span></div>`;
+                        }});
+                        dom.wallList.innerHTML = html || '<div style="padding:10px; font-size:10px; color:#555;">No significant anomalies detected.</div>';
+                    }}
+
+                    // DEPTH
+                    if (data.depth_x.length) {{
+                        const bids = [], asks = [], nets = [];
+                        for(let i=0; i<data.depth_x.length; i++) {{
+                            bids.push({{ time: data.depth_x[i], value: data.depth_bids[i] }});
+                            asks.push({{ time: data.depth_x[i], value: data.depth_asks[i] }});
+                            nets.push({{ time: data.depth_x[i], value: data.depth_net[i], color: data.depth_net[i] > 0 ? '#00E676' : '#FF1744' }});
+                        }}
+                        bidSeries.setData(bids);
+                        askSeries.setData(asks);
+                        netSeries.setData(nets);
+                    }}
+                }};
+            }}
             connect();
-        });
+        }});
     </script>
 </body>
 </html>
 """
 
+# --- SERVER BOILERPLATE ---
 async def kraken_worker():
     global market_state
     while True:
         try:
             async with websockets.connect("wss://ws.kraken.com/v2") as ws:
-                logging.info(f"Connected to Kraken ({SYMBOL_KRAKEN})")
+                logging.info(f"🔌 Connected to Kraken ({SYMBOL_KRAKEN})")
                 await ws.send(json.dumps({
                     "method": "subscribe",
                     "params": {"channel": "book", "symbol": [SYMBOL_KRAKEN], "depth": 500}
@@ -960,17 +491,13 @@ async def kraken_worker():
                         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
+                                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 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())
@@ -978,7 +505,7 @@ async def kraken_worker():
                             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})
@@ -986,7 +513,7 @@ async def kraken_worker():
                                     market_state['history'].pop(0)
 
         except Exception as e:
-            logging.warning(f"Reconnecting: {e}")
+            logging.warning(f"⚠️ Reconnecting: {e}")
             await asyncio.sleep(3)
 
 async def broadcast_worker():
@@ -995,21 +522,16 @@ async def broadcast_worker():
             payload = process_market_data()
             msg = json.dumps(payload)
             for ws in list(connected_clients):
-                try:
-                    await ws.send_str(msg)
-                except:
-                    pass
+                try: await ws.send_str(msg)
+                except: pass
         await asyncio.sleep(BROADCAST_RATE)
 
 async def websocket_handler(request):
     ws = web.WebSocketResponse()
     await ws.prepare(request)
     connected_clients.add(ws)
-    try:
-        async for msg in ws:
-            pass
-    finally:
-        connected_clients.remove(ws)
+    try: async for msg in ws: pass
+    finally: connected_clients.remove(ws)
     return ws
 
 async def handle_index(request):
@@ -1022,11 +544,8 @@ async def start_background(app):
 async def cleanup_background(app):
     app['kraken_task'].cancel()
     app['broadcast_task'].cancel()
-    try:
-        await app['kraken_task']
-        await app['broadcast_task']
-    except:
-        pass
+    try: await app['kraken_task']; await app['broadcast_task']
+    except: pass
 
 async def main():
     app = web.Application()
@@ -1038,11 +557,9 @@ async def main():
     await runner.setup()
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
-    print(f"Dashboard running at http://localhost:{PORT}")
+    print(f"🚀 AI Liquidity Dashboard: http://localhost:{PORT}")
     await asyncio.Event().wait()
 
 if __name__ == "__main__":
-    try:
-        asyncio.run(main())
-    except KeyboardInterrupt:
-        pass
+    try: asyncio.run(main())
+    except KeyboardInterrupt: pass