Spaces:

Alvin3y1
/

test

Sleeping

App Files Files Community

Alvin3y1 commited on 13 days ago

Commit

8b9c571

verified ·

1 Parent(s): cff3b95

Update app.py

Browse files

Files changed (1) hide show

app.py +192 -186

app.py CHANGED Viewed

@@ -5,11 +5,12 @@ import time
 import bisect
 import math
 import statistics
 from aiohttp import web
 import websockets
 # --- CONFIGURATION ---
-SYMBOL_KRAKEN = "SOL/USD"
 PORT = 7860
 HISTORY_LENGTH = 300
 BROADCAST_RATE = 0.1
@@ -149,319 +150,324 @@ def process_market_data():
         "walls": {"bids": bid_walls, "asks": ask_walls}
     }
-# --- FRONTEND (UPDATED UI) ---
 HTML_PAGE = f"""
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <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=Orbitron:wght@400;700&family=Roboto+Mono:wght@300;400;700&display=swap" rel="stylesheet">
     <style>
         :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;
         }}
-        .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;
-            gap: 10px;
-            overflow-y: auto;
         }}
-        .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;
-        }}
-        /* CARD STYLES */
-        .card {{
-            background: rgba(255,255,255,0.03);
-            border: 1px solid var(--border);
-            border-radius: 4px;
-            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 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="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>
-        <!-- 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>
-        <!-- 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>
-            <div class="sub-chart">
-                <div class="panel-header">Order Imbalance (Net)</div>
-                <div id="tv-net" style="flex: 1; width: 100%;"></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>
-                <!-- 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>
-            <!-- 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 = {{
-                loader: document.getElementById('loader'),
-                status: document.getElementById('loading-status'),
-                mainPrice: document.getElementById('main-price'),
-                scoreVal: document.getElementById('score-val'),
                 projVal: document.getElementById('proj-val'),
                 projPct: document.getElementById('proj-pct'),
                 wallList: document.getElementById('wall-list')
             }};
-            // 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: '#E0E0E0', lineWidth: 2, title: 'Price' }});
-            const predSeries = priceChart.addLineSeries({{ color: '#2962FF', lineWidth: 2, lineStyle: 2, title: 'Projected' }});
-            // 2. RAW DEPTH CHART
             const rawChart = LightweightCharts.createChart(document.getElementById('tv-raw'), {{
-                ...chartCommon,
-                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: t => t.toFixed(0) }},
-                localization: {{ timeFormatter: t => 'Dist: $' + t.toFixed(2) }}
             }});
-            const netSeries = netChart.addHistogramSeries({{ color: '#2962FF' }});
-            let activePriceLines = [];
-            // 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';
-                    // 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 }}
                             ]);
-                            // 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)";
                         }}
                     }}
                     // 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();
         }});

 import bisect
 import math
 import statistics
+from datetime import datetime
 from aiohttp import web
 import websockets
 # --- CONFIGURATION ---
+SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
 HISTORY_LENGTH = 300
 BROADCAST_RATE = 0.1
         "walls": {"bids": bid_walls, "asks": ask_walls}
     }
+# --- FRONTEND (MINIMALIST UI) ---
 HTML_PAGE = f"""
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <title>Terminal | {SYMBOL_KRAKEN}</title>
     <script src="https://unpkg.com/lightweight-charts@4.1.1/dist/lightweight-charts.standalone.production.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     <style>
         :root {{
+            --bg-base: #050505;
+            --bg-panel: #0a0a0a;
+            --border: #1a1a1a;
+            --text-main: #e0e0e0;
+            --text-dim: #555555;
+            --green: #2ebd85;
+            --red: #f6465d;
+            --blue: #3772ff;
         }}
         body {{
             margin: 0; padding: 0;
+            background-color: var(--bg-base);
             color: var(--text-main);
+            font-family: 'Inter', sans-serif;
             overflow: hidden;
             height: 100vh; width: 100vw;
         }}
+        /* THE GRID */
         .layout {{
             display: grid;
+            grid-template-rows: 28px 1fr 1fr; /* Slim header */
             grid-template-columns: 3fr 1fr;
+            gap: 1px; /* The 'border' is just the gap showing the background */
+            background-color: var(--border); /* Acts as border color */
             height: 100vh;
             box-sizing: border-box;
         }}
+        .panel {{ background: var(--bg-panel); position: relative; display: flex; flex-direction: column; overflow: hidden; }}
+        /* STATUS BAR HEADER */
+        .status-bar {{
             grid-column: 1 / 3;
             grid-row: 1 / 2;
+            background: var(--bg-panel);
             display: flex;
             align-items: center;
             justify-content: space-between;
+            padding: 0 15px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 11px;
+            text-transform: uppercase;
         }}
+        .status-left {{ display: flex; gap: 15px; align-items: center; }}
+        .status-right {{ color: var(--text-dim); }}
+        .live-dot {{ width: 6px; height: 6px; background-color: var(--green); border-radius: 50%; display: inline-block; box-shadow: 0 0 5px var(--green); }}
+        .symbol-tag {{ color: var(--text-dim); font-weight: 600; color: #fff; }}
+        /* MAIN CHART AREA */
         #p-chart {{ grid-column: 1 / 2; grid-row: 2 / 3; }}
+        /* DEPTH AREA */
+        #p-depth {{
+            grid-column: 1 / 2; grid-row: 3 / 4;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1px;
+            background: var(--border);
+        }}
+        .depth-sub {{ background: var(--bg-panel); display: flex; flex-direction: column; }}
+        /* SIDEBAR */
         #p-sidebar {{
             grid-column: 2 / 3;
             grid-row: 2 / 4;
+            padding: 20px;
             display: flex;
             flex-direction: column;
+            gap: 30px;
         }}
+        /* COMPONENT STYLES */
+        .data-group {{ display: flex; flex-direction: column; gap: 4px; }}
+        .label {{ font-size: 10px; color: var(--text-dim); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; }}
+        .value {{ font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 400; color: #fff; }}
+        .value-lg {{ font-size: 28px; font-weight: 500; }}
+        .value-sub {{ font-family: 'JetBrains Mono', monospace; font-size: 11px; margin-top: 2px; }}
+        .divider {{ height: 1px; background: var(--border); width: 100%; }}
+        /* COLORS */
+        .c-green {{ color: var(--green); }}
+        .c-red {{ color: var(--red); }}
+        .c-dim {{ color: var(--text-dim); }}
+        /* LISTS */
+        .list-container {{ display: flex; flex-direction: column; gap: 8px; }}
+        .list-item {{
+            display: flex; justify-content: space-between;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 11px;
+            color: #888;
+        }}
+        .list-item span:first-child {{ color: #fff; }}
+        /* CHART OVERLAYS */
+        .chart-label {{
+            position: absolute; top: 10px; left: 15px;
+            z-index: 10;
             font-size: 10px;
             color: var(--text-dim);
+            font-weight: 600;
         }}
     </style>
 </head>
 <body>
     <div class="layout">
+        <!-- STATUS BAR -->
+        <div class="status-bar">
+            <div class="status-left">
+                <span class="live-dot"></span>
+                <span class="symbol-tag">{SYMBOL_KRAKEN}</span>
+                <span id="price-ticker" style="color: #fff;">---</span>
             </div>
+            <div class="status-right" id="clock">--:--:-- UTC</div>
         </div>
+        <!-- PRICE CHART -->
         <div id="p-chart" class="panel">
+            <div class="chart-label">PRICE ACTION // ANOMALIES</div>
+            <div id="tv-price" style="flex: 1;"></div>
         </div>
+        <!-- DEPTH CHARTS -->
         <div id="p-depth">
+            <div class="depth-sub">
+                <div class="chart-label">LIQUIDITY DENSITY</div>
+                <div id="tv-raw" style="flex: 1;"></div>
             </div>
+            <div class="depth-sub">
+                <div class="chart-label">NET IMBALANCE</div>
+                <div id="tv-net" style="flex: 1;"></div>
             </div>
         </div>
+        <!-- SIDEBAR -->
         <div id="p-sidebar" class="panel">
+            <!-- 1. PREDICTED IMPACT -->
+            <div class="data-group">
+                <span class="label">Projected Impact (5s)</span>
+                <div style="display:flex; align-items: baseline; gap: 8px;">
+                    <span id="proj-pct" class="value value-lg">--%</span>
+                    <span id="proj-val" class="value-sub c-dim">---</span>
                 </div>
             </div>
+            <div class="divider"></div>
+            <!-- 2. IMBALANCE SCORE -->
+            <div class="data-group">
+                <span class="label">Order Flow Imbalance</span>
+                <span id="score-val" class="value">0.00</span>
             </div>
+            <div class="divider"></div>
+            <!-- 3. WALLS -->
+            <div class="data-group" style="flex: 1;">
+                <span class="label" style="margin-bottom: 10px;">Significant Structures (Z > 3.0)</span>
+                <div id="wall-list" class="list-container">
+                    <span class="c-dim" style="font-size: 11px;">Scanning...</span>
                 </div>
             </div>
+            <div style="margin-top: auto;">
+                <span class="label">System Latency</span>
+                <div class="value-sub c-green">12ms</div>
+            </div>
         </div>
     </div>
     <script>
+        // UPDATE CLOCK
+        setInterval(() => {{
+            const now = new Date();
+            document.getElementById('clock').innerText = now.toISOString().split('T')[1].split('.')[0] + ' UTC';
+        }}, 1000);
         document.addEventListener('DOMContentLoaded', () => {{
             const dom = {{
+                ticker: document.getElementById('price-ticker'),
+                score: document.getElementById('score-val'),
                 projVal: document.getElementById('proj-val'),
                 projPct: document.getElementById('proj-pct'),
                 wallList: document.getElementById('wall-list')
             }};
+            // MINIMALIST CHART CONFIG
+            const chartOpts = {{
+                layout: {{ background: {{ type: 'solid', color: '#0a0a0a' }}, textColor: '#444', fontFamily: 'JetBrains Mono' }},
+                grid: {{ vertLines: {{ color: '#111' }}, horzLines: {{ color: '#111' }} }},
+                rightPriceScale: {{ borderColor: '#111', scaleMargins: {{ top: 0.1, bottom: 0.1 }} }},
+                timeScale: {{ borderColor: '#111', timeVisible: true, secondsVisible: true }},
+                crosshair: {{ mode: 1, vertLine: {{ color: '#333', labelBackgroundColor: '#333' }}, horzLine: {{ color: '#333', labelBackgroundColor: '#333' }} }}
             }};
+            // 1. PRICE
+            const priceChart = LightweightCharts.createChart(document.getElementById('tv-price'), chartOpts);
+            const priceSeries = priceChart.addLineSeries({{ color: '#e0e0e0', lineWidth: 1, title: 'Price' }});
+            const predSeries = priceChart.addLineSeries({{ color: '#3772ff', lineWidth: 1, lineStyle: 2, title: 'Forecast' }});
+            // 2. RAW
             const rawChart = LightweightCharts.createChart(document.getElementById('tv-raw'), {{
+                ...chartOpts,
+                localization: {{ timeFormatter: t => '$' + t.toFixed(2) }}
             }});
+            const bidSeries = rawChart.addAreaSeries({{ lineColor: '#2ebd85', topColor: 'rgba(46, 189, 133, 0.1)', bottomColor: 'rgba(0,0,0,0)', lineWidth: 1 }});
+            const askSeries = rawChart.addAreaSeries({{ lineColor: '#f6465d', topColor: 'rgba(246, 70, 93, 0.1)', bottomColor: 'rgba(0,0,0,0)', lineWidth: 1 }});
+            // 3. NET
             const netChart = LightweightCharts.createChart(document.getElementById('tv-net'), {{
+                ...chartOpts,
+                localization: {{ timeFormatter: t => '$' + t.toFixed(2) }}
             }});
+            const netSeries = netChart.addHistogramSeries({{ color: '#3772ff' }});
+            let activeLines = [];
+            // RESIZE
+            new ResizeObserver(e => {{
+                e.forEach(x => {{
+                   if(x.target.id === 'tv-price') priceChart.applyOptions({{ width: x.contentRect.width, height: x.contentRect.height }});
+                   if(x.target.id === 'tv-raw') rawChart.applyOptions({{ width: x.contentRect.width, height: x.contentRect.height }});
+                   if(x.target.id === 'tv-net') netChart.applyOptions({{ width: x.contentRect.width, height: x.contentRect.height }});
                 }});
             }}).observe(document.body);
             function connect() {{
+                const ws = new WebSocket((location.protocol === 'https:' ? 'wss' : 'ws') + '://' + location.host + '/ws');
                 ws.onmessage = (e) => {{
                     const data = JSON.parse(e.data);
                     if (data.error) return;
+                    // HISTORY & PRICE
                     if (data.history.length) {{
                         const hist = data.history.map(d => ({{ time: Math.floor(d.t), value: d.p }}));
+                        const cleanHist = [...new Map(hist.map(i => [i.time, i])).values()];
+                        priceSeries.setData(cleanHist);
+                        const lastP = cleanHist[cleanHist.length-1].value;
+                        dom.ticker.innerText = lastP.toLocaleString('en-US', {{ minimumFractionDigits: 2 }});
+                        // ANALYSIS
                         if (data.analysis) {{
                             const proj = data.analysis.projected;
                             const score = data.analysis.net_score;
                             predSeries.setData([
+                                cleanHist[cleanHist.length-1],
+                                {{ time: cleanHist[cleanHist.length-1].time + 60, value: proj }}
                             ]);
+                            // PCT CALC
+                            const pct = ((proj - lastP) / lastP) * 100;
+                            const sign = pct >= 0 ? "+" : "";
+                            dom.projPct.innerText = `${{sign}}${{pct.toFixed(4)}}%`;
+                            dom.projPct.style.color = pct >= 0 ? "var(--green)" : "var(--red)";
                             dom.projVal.innerText = proj.toLocaleString('en-US', {{ minimumFractionDigits: 2 }});
+                            dom.score.innerText = score.toFixed(2);
+                            dom.score.style.color = score > 0 ? "var(--green)" : (score < 0 ? "var(--red)" : "var(--text-main)");
                         }}
                     }}
                     // WALLS
                     if (data.walls) {{
+                        activeLines.forEach(l => priceSeries.removePriceLine(l));
+                        activeLines = [];
                         let html = "";
+                        const addWall = (w, type) => {{
+                            const color = type === 'BID' ? '#2ebd85' : '#f6465d';
+                            activeLines.push(priceSeries.createPriceLine({{ price: w.price, color: color, lineWidth: 1, lineStyle: 2, axisLabelVisible: false }}));
+                            html += `<div class="list-item">
+                                <span style="color:${{color}}">${{type}} ${{w.price}}</span>
+                                <span>Z:${{w.z_score.toFixed(1)}}</span>
+                            </div>`;
+                        }};
+                        data.walls.asks.forEach(w => addWall(w, 'ASK'));
+                        data.walls.bids.forEach(w => addWall(w, 'BID'));
+                        dom.wallList.innerHTML = html || '<span class="c-dim" style="font-size:11px">No anomalies.</span>';
                     }}
                     // DEPTH
                     if (data.depth_x.length) {{
                         const bids = [], asks = [], nets = [];
                         for(let i=0; i<data.depth_x.length; i++) {{
+                            const t = data.depth_x[i];
+                            bids.push({{ time: t, value: data.depth_bids[i] }});
+                            asks.push({{ time: t, value: data.depth_asks[i] }});
+                            nets.push({{ time: t, value: data.depth_net[i], color: data.depth_net[i] > 0 ? '#2ebd85' : '#f6465d' }});
                         }}
                         bidSeries.setData(bids);
                         askSeries.setData(asks);
                         netSeries.setData(nets);
                     }}
                 }};
+                ws.onclose = () => setTimeout(connect, 2000);
             }}
             connect();
         }});