Update app.py

app.py

@@ -10,22 +10,20 @@ import websockets
 
 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
-HISTORY_LENGTH = 300 
+HISTORY_LENGTH = 300
 BROADCAST_RATE = 0.1
-DECAY_LAMBDA = 100.0 
-IMPACT_SENSITIVITY = 0.5 
-
-# Wall Detection Parameters
-Z_SCORE_THRESHOLD = 3.0  # Statistical significance threshold (3 sigma)
-WALL_LOOKBACK = 200      # How many order book levels to scan
+DECAY_LAMBDA = 100.0
+IMPACT_SENSITIVITY = 0.5
+Z_SCORE_THRESHOLD = 3.0
+WALL_LOOKBACK = 200
 
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
 
 market_state = {
     "bids": {},
     "asks": {},
-    "history": [], 
-    "pred_history": [], 
+    "history": [],
+    "pred_history": [],
     "current_mid": 0.0,
     "prev_mid": 0.0,
     "ready": False
@@ -34,21 +32,15 @@ market_state = {
 connected_clients = set()
 
 def detect_anomalies(orders, scan_depth):
-    """
-    Mathematically detects liquidity walls using Z-Score outlier detection.
-    Returns the top significant walls.
-    """
     if len(orders) < 10:
         return []
 
-    # Get volumes for the scan depth
     relevant_orders = orders[:scan_depth]
     volumes = [q for p, q in relevant_orders]
 
     if not volumes:
         return []
 
-    # Calculate Distribution Statistics
     try:
         avg_vol = statistics.mean(volumes)
         stdev_vol = statistics.stdev(volumes)
@@ -59,12 +51,9 @@ def detect_anomalies(orders, scan_depth):
         return []
 
     walls = []
-    
+
     for price, qty in relevant_orders:
-        # Calculate Z-Score
         z_score = (qty - avg_vol) / stdev_vol
-        
-        # If Z-Score > Threshold, it is a mathematically significant wall
         if z_score > Z_SCORE_THRESHOLD:
             walls.append({
                 "price": price,
@@ -72,7 +61,6 @@ def detect_anomalies(orders, scan_depth):
                 "z_score": z_score
             })
 
-    # Sort by Z-Score descending (strongest walls first) and take top 3
     walls.sort(key=lambda x: x['z_score'], reverse=True)
     return walls[:3]
 
@@ -82,14 +70,12 @@ def analyze_structure(diff_x, diff_y, current_mid):
 
     weighted_imbalance = 0.0
     prev_vol = 0.0
-    
+
     for i in range(len(diff_x)):
         dist = diff_x[i]
         cum_vol = diff_y[i]
-        
         marginal_vol = cum_vol - prev_vol
         prev_vol = cum_vol
-        
         weight = math.exp(-dist / DECAY_LAMBDA)
         weighted_imbalance += marginal_vol * weight
 
@@ -112,57 +98,54 @@ def process_market_data():
         return {"error": "Initializing..."}
 
     mid = market_state['current_mid']
-    
-    # Sort orders for processing
-    # Bids: High to Low
+
     sorted_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0])
-    # Asks: Low to High
     sorted_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])
 
     raw_bids = sorted_bids[:300]
     raw_asks = sorted_asks[:300]
 
-    # --- WALL DETECTION LOGIC ---
     bid_walls = detect_anomalies(sorted_bids, WALL_LOOKBACK)
     ask_walls = detect_anomalies(sorted_asks, WALL_LOOKBACK)
-    # ----------------------------
 
     d_b_x, d_b_y, cum = [], [], 0
     for p, q in raw_bids:
         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):
@@ -185,286 +168,773 @@ def process_market_data():
         }
     }
 
-HTML_PAGE = f"""
+HTML_PAGE = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>HFT Liquidity Dashboard | {SYMBOL_KRAKEN}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quantum Flow | BTC/USD</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">
     <style>
-        :root {{
-            --bg-color: #0b0c10;
-            --panel-bg: #1f2833;
-            --text-main: #c5c6c7;
-            --accent-green: #66fcf1;
-            --accent-red: #ff3b3b;
-            --border: #2d3842;
-        }}
-        body {{ margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-main); font-family: monospace; overflow: hidden; height: 100vh; width: 100vw; }}
-        
-        .grid-container {{ 
-            display: grid; 
-            grid-template-columns: 3fr 1fr; 
-            grid-template-rows: 55% 45%; 
-            gap: 4px; 
-            height: 100vh; 
-            padding: 4px; 
-            box-sizing: border-box; 
-        }}
-        
-        .panel {{ background: #12141a; border: 1px solid var(--border); border-radius: 4px; position: relative; display: flex; flex-direction: column; overflow: hidden; }}
-        
-        #p-price {{ grid-column: 1 / 2; grid-row: 1 / 2; }}
-        #p-stats {{ grid-column: 2 / 3; grid-row: 1 / 3; border-left: 2px solid #45a29e; }}
-        #p-bottom {{ grid-column: 1 / 2; grid-row: 2 / 3; display: flex; gap: 4px; background: transparent; border: none; }}
-
-        .sub-panel {{ flex: 1; background: #12141a; border: 1px solid var(--border); border-radius: 4px; display: flex; flex-direction: column; overflow: hidden; }}
-
-        .panel-header {{ padding: 6px 10px; background: #0f1116; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: bold; display: flex; justify-content: space-between; color: var(--accent-green); text-transform: uppercase; }}
-        
-        #tv-price, #tv-raw, #tv-net {{ flex: 1; width: 100%; position: relative; }}
-        
-        .stats-content {{ padding: 15px; overflow-y: auto; flex: 1; }}
-        .stat-box {{ margin-bottom: 20px; padding: 10px; background: rgba(255,255,255,0.02); border-radius: 4px; }}
-        .stat-label {{ font-size: 11px; color: #666; display: block; margin-bottom: 4px; }}
-        .stat-value {{ font-size: 24px; font-weight: bold; }}
-        .stat-sub {{ font-size: 10px; color: #888; margin-top: 5px; }}
-        .green {{ color: var(--accent-green); }}
-        .red {{ color: var(--accent-red); }}
-        
-        #loader {{ position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.95); z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--accent-green); }}
-        
-        .wall-item {{ display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; padding: 4px; background: rgba(0,0,0,0.2); }}
+        * { 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 {
+            display: flex;
+            align-items: center;
+            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;
+            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;
+            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;
+            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;
+        }
     </style>
 </head>
 <body>
-
     <div id="loader">
-        <div style="font-size: 24px;">ESTABLISHING UPLINK...</div>
-        <div id="loading-status">Connecting to WebSocket Stream...</div>
+        <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>
 
-    <div class="grid-container">
-        <div id="p-price" class="panel">
-            <div class="panel-header"><span>BTC/USD Price + Liquidity Walls</span><span id="live-price">---</span></div>
-            <div id="tv-price"></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>
 
-        <div id="p-bottom">
-            <div class="sub-panel">
-                <div class="panel-header"><span>Market Depth (Bids vs Asks)</span></div>
-                <div id="tv-raw"></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>
-            <div class="sub-panel">
-                <div class="panel-header"><span>Net Delta (Bids - Asks)</span></div>
-                <div id="tv-net"></div>
+
+            <div class="header-right">
+                <div class="status-badge" id="status-badge">
+                    <span>●</span>
+                    <span id="status-text">LIVE</span>
+                </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>
-        </div>
 
-        <div id="p-stats" class="panel">
-            <div class="panel-header">HFT ANALYTICS ENGINE</div>
-            <div class="stats-content">
-                <div class="stat-box">
-                    <span class="stat-label">WEIGHTED IMBALANCE SCORE</span>
-                    <span id="score-val" class="stat-value">0</span>
+            <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>
                 </div>
-                <div class="stat-box" style="border: 1px solid #444;">
-                    <span class="stat-label" style="color:var(--accent-green);">IMPACT PROJECTION</span>
-                    <span id="proj-val" class="stat-value">---</span>
+
+                <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>
                 </div>
-                
-                <div class="stat-box">
-                    <span class="stat-label">DETECTED WALLS (Z-SCORE > 3)</span>
-                    <div id="wall-list">Waiting for data...</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>
                 </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'),
                 scoreVal: document.getElementById('score-val'),
                 projVal: document.getElementById('proj-val'),
+                projArrow: document.getElementById('proj-arrow'),
+                projDirection: document.getElementById('proj-direction'),
                 wallList: document.getElementById('wall-list')
-            }};
+            };
 
-            const chartCommon = {{
-                layout: {{ background: {{ type: 'solid', color: '#12141a' }}, textColor: '#888' }},
-                grid: {{ vertLines: {{ color: '#1f2833' }}, horzLines: {{ color: '#1f2833' }} }},
-                rightPriceScale: {{ borderColor: '#2d3842' }},
-                timeScale: {{ borderColor: '#2d3842', timeVisible: true, secondsVisible: true }},
-                crosshair: {{ mode: 0 }}
-            }};
+            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 } }
+            };
 
             const priceChart = LightweightCharts.createChart(document.getElementById('tv-price'), chartCommon);
-            const priceSeries = priceChart.addLineSeries({{ color: '#2962FF', lineWidth: 2, title: 'Price' }});
-            
-            const pastPredSeries = priceChart.addLineSeries({{ 
-                color: '#555555', 
-                lineWidth: 1, 
-                title: 'Past Prediction' 
-            }});
-
-            const futurePredSeries = priceChart.addLineSeries({{ 
-                color: '#ff9800', 
-                lineWidth: 2, 
-                lineStyle: 2, 
-                title: 'Projection' 
-            }});
-
-            const rawChart = LightweightCharts.createChart(document.getElementById('tv-raw'), {{
+            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 rawChart = LightweightCharts.createChart(document.getElementById('tv-raw'), {
                 ...chartCommon,
-                timeScale: {{ tickMarkFormatter: (time) => parseFloat(time).toFixed(0) }},
-                localization: {{ timeFormatter: (time) => 'Dist: $' + parseFloat(time).toFixed(2) }}
-            }});
-            const rawBidSeries = rawChart.addAreaSeries({{ lineColor: '#00e676', topColor: 'rgba(0, 230, 118, 0.2)', bottomColor: 'rgba(0, 230, 118, 0.0)', lineWidth: 2, title: "Bids" }});
-            const rawAskSeries = rawChart.addAreaSeries({{ lineColor: '#ff1744', topColor: 'rgba(255, 23, 68, 0.2)', bottomColor: 'rgba(255, 23, 68, 0.0)', lineWidth: 2, title: "Asks" }});
+                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'), {{
+            const netChart = LightweightCharts.createChart(document.getElementById('tv-net'), {
                 ...chartCommon,
-                timeScale: {{ tickMarkFormatter: (time) => parseFloat(time).toFixed(0) }},
-                localization: {{ timeFormatter: (time) => 'Dist: $' + parseFloat(time).toFixed(2) }}
-            }});
-            const netSeries = netChart.addAreaSeries({{ 
-                topColor: 'rgba(33, 150, 243, 0.56)', 
-                bottomColor: 'rgba(33, 150, 243, 0.0)', 
-                lineColor: '#2196f3', 
-                lineWidth: 2 
-            }});
-
-            // Refs for Price Lines (Walls)
+                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 });
+
             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}});
-                }}
-            }});
+            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() {{
+            function connect() {
                 const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
-                const url = `${{proto}}://${{window.location.host}}/ws`;
+                const url = `${proto}://${window.location.host}/ws`;
                 const ws = new WebSocket(url);
 
-                ws.onopen = () => {{ dom.status.innerText = "Receiving Data Stream..."; }};
-                ws.onclose = () => {{ dom.loader.style.display = 'flex'; dom.status.innerText = "Reconnecting..."; setTimeout(connect, 3000); }};
-
-                ws.onmessage = (event) => {{
+                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);
                     if (data.error) return;
                     dom.loader.style.display = 'none';
 
-                    // --- History & Prediction Plotting ---
                     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 }}); }}
-                    }});
+                    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 => {{
+                    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 (!seenP.has(t)) { seenP.add(t); predHistory.push({ time: t, value: d.p }); }
+                        });
+                    }
 
-                    if (cleanHistory.length) {{
+                    if (cleanHistory.length) {
                         priceSeries.setData(cleanHistory);
                         pastPredSeries.setData(predHistory);
 
-                        const last = cleanHistory[cleanHistory.length-1];
-                        dom.price.innerText = last.value.toLocaleString(undefined, {{minimumFractionDigits: 2}});
-                        
-                        if (data.analysis) {{
-                            const {{ projected, net_score }} = data.analysis;
-                            
+                        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 }}
+                                { time: last.time + 60, value: projected }
                             ]);
-                            
-                            dom.projVal.innerText = projected.toLocaleString(undefined, {{minimumFractionDigits: 0, maximumFractionDigits: 0}});
+
+                            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" : "stat-value red";
-                        }}
-                    }}
+                            dom.scoreVal.className = net_score > 0 ? "stat-value green" : (net_score < 0 ? "stat-value red" : "stat-value");
+                        }
+                    }
 
-                    // --- Wall Visualization ---
-                    if (data.walls) {{
-                        // Clear old lines
+                    if (data.walls) {
                         activePriceLines.forEach(line => priceSeries.removePriceLine(line));
                         activePriceLines = [];
-                        
+
                         let wallHtml = "";
 
-                        // Draw Bid Walls
-                        data.walls.bids.forEach(w => {{
-                            const line = priceSeries.createPriceLine({{
+                        data.walls.bids.forEach(w => {
+                            const line = priceSeries.createPriceLine({
                                 price: w.price,
-                                color: 'rgba(0, 230, 118, 0.8)',
+                                color: 'rgba(0, 255, 136, 0.7)',
                                 lineWidth: 1,
                                 lineStyle: 2,
                                 axisLabelVisible: true,
-                                title: `BUY WALL (Z: ${{w.z_score.toFixed(1)}})`,
-                            }});
+                                title: 'BUY'
+                            });
                             activePriceLines.push(line);
-                            wallHtml += `<div class="wall-item"><span class="green">BUY ${{w.price}}</span><span>Z: ${{w.z_score.toFixed(1)}}</span></div>`;
-                        }});
+                            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>`;
+                        });
 
-                        // Draw Ask Walls
-                        data.walls.asks.forEach(w => {{
-                            const line = priceSeries.createPriceLine({{
+                        data.walls.asks.forEach(w => {
+                            const line = priceSeries.createPriceLine({
                                 price: w.price,
-                                color: 'rgba(255, 23, 68, 0.8)',
+                                color: 'rgba(255, 51, 102, 0.7)',
                                 lineWidth: 1,
                                 lineStyle: 2,
                                 axisLabelVisible: true,
-                                title: `SELL WALL (Z: ${{w.z_score.toFixed(1)}})`,
-                            }});
+                                title: 'SELL'
+                            });
                             activePriceLines.push(line);
-                            wallHtml += `<div class="wall-item"><span class="red">SELL ${{w.price}}</span><span>Z: ${{w.z_score.toFixed(1)}}</span></div>`;
-                        }});
-                        
-                        dom.wallList.innerHTML = wallHtml || "No significant walls.";
-                    }}
-
-                    // --- Depth Charts ---
-                    if (data.depth_x && data.depth_x.length) {{
+                            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++) {{
+
+                        for (let i = 0; i < data.depth_x.length; i++) {
                             const x = data.depth_x[i];
-                            const netY = data.depth_net[i];
-                            const bidY = data.depth_bids[i];
-                            const askY = data.depth_asks[i];
-
-                            netData.push({{ time: x, value: netY }});
-                            rawBids.push({{ time: x, value: bidY }});
-                            rawAsks.push({{ time: x, value: askY }});
-                        }}
-                        
+                            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);
-                    }}
-                }};
-            }}
+                    }
+                };
+            }
             connect();
-        }});
+        });
     </script>
 </body>
 </html>
@@ -475,7 +945,7 @@ async def kraken_worker():
     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}
@@ -490,13 +960,17 @@ 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())
@@ -504,7 +978,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})
@@ -512,7 +986,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():
@@ -521,8 +995,10 @@ 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):
@@ -546,8 +1022,11 @@ 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()
@@ -559,9 +1038,11 @@ async def main():
     await runner.setup()
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
-    print(f"🚀 AI Dashboard: http://localhost:{PORT}")
+    print(f"Dashboard running at http://localhost:{PORT}")
     await asyncio.Event().wait()
 
 if __name__ == "__main__":
-    try: asyncio.run(main())
-    except KeyboardInterrupt: pass
+    try:
+        asyncio.run(main())
+    except KeyboardInterrupt:
+        pass