Spaces:

Alvin3y1
/

test

Sleeping

App Files Files Community

Alvin3y1 commited on 14 days ago

Commit

7c6576b

verified ·

1 Parent(s): 25c08cc

Update app.py

Browse files

Files changed (1) hide show

app.py +239 -230

app.py CHANGED Viewed

@@ -12,24 +12,24 @@ import websockets
 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
-HISTORY_LENGTH = 300
 BROADCAST_RATE = 0.1
-DECAY_LAMBDA = 50.0
-IMPACT_SENSITIVITY = 2.0
-WALL_DAMPENING = 0.8
-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": [],
-    "trade_vol_history": [],
-    "ohlc_history": [],
     "current_vol_window": {"buy": 0.0, "sell": 0.0, "start": time.time()},
     "current_mid": 0.0,
     "ready": False
@@ -65,7 +65,7 @@ def calculate_micro_price_structure(diff_x, diff_y_net, current_mid, best_bid, b
     weighted_imbalance = 0.0
     total_weight = 0.0
     for i in range(len(diff_x)):
         dist = diff_x[i]
         net_vol = diff_y_net[i]
@@ -114,7 +114,7 @@ def process_market_data():
     sorted_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0])
     sorted_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])
     if not sorted_bids or not sorted_asks: return {"error": "Empty Book"}
     best_bid = sorted_bids[0][0]
@@ -139,7 +139,7 @@ def process_market_data():
     diff_x, diff_y_net = [], []
     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
@@ -160,7 +160,7 @@ def process_market_data():
         diff_x, diff_y_net, mid, best_bid, best_ask,
         {"bids": bid_walls, "asks": ask_walls}
     )
     if analysis:
         if not market_state['pred_history'] or (now - market_state['pred_history'][-1]['t'] > 0.5):
             market_state['pred_history'].append({'t': now, 'p': analysis['projected']})
@@ -209,7 +209,6 @@ HTML_PAGE = f"""
             overflow: hidden;
             height: 100vh; width: 100vw;
         }}
         .layout {{
             display: grid;
             grid-template-rows: 34px 1fr 1fr;
@@ -219,7 +218,6 @@ HTML_PAGE = f"""
             height: 100vh;
             box-sizing: border-box;
         }}
         .panel {{ background: var(--bg-panel); display: flex; flex-direction: column; overflow: hidden; }}
         .status-bar {{
@@ -313,254 +311,265 @@ HTML_PAGE = f"""
     </style>
 </head>
 <body>
-    <div class="layout">
-        <div class="status-bar">
-            <div class="status-left">
-                <span class="live-dot"></span>
-                <span style="font-weight:700; color:#fff;">{SYMBOL_KRAKEN}</span>
-                <span id="price-ticker" class="ticker-val">---</span>
-            </div>
-            <div class="status-right" id="clock">00:00:00 UTC</div>
         </div>
-        <div id="p-chart" class="panel">
-            <div class="chart-header">PRICE ACTION (BLUE) // PREDICTION (YELLOW)</div>
-            <div id="tv-price" style="flex: 1; width: 100%;"></div>
-        </div>
-        <div id="p-bottom">
-            <div class="bottom-sub">
-                <div class="chart-header">1M KLINE (KRAKEN OHLC)</div>
-                <div id="tv-candles" style="flex: 1; width: 100%;"></div>
-            </div>
-            <div class="bottom-sub">
-                <div class="chart-header">ORDER FLOW IMBALANCE</div>
-                <div id="tv-net" style="flex: 1; width: 100%;"></div>
-            </div>
         </div>
-        <div id="p-sidebar" class="panel">
-            <div class="data-group">
-                <span class="label">Micro-Price Delta</span>
-                <div style="display:flex; align-items: baseline; gap: 10px;">
-                    <span id="proj-pct" class="value value-lg">--%</span>
-                    <span id="proj-val" class="value-sub">---</span>
-                </div>
             </div>
-            <div class="divider"></div>
-            <div class="data-group">
-                <span class="label">OFI Imbalance Ratio</span>
-                <span id="score-val" class="value">0.00</span>
-            </div>
-            <div class="divider"></div>
-            <div class="data-group">
-                <span class="label">Detected Walls (Z > 3.0)</span>
-                <div id="wall-list" class="list-container">
-                    <span class="c-dim" style="font-size: 11px;">Scanning...</span>
-                </div>
             </div>
-            <div class="sidebar-chart-box">
-                <span class="label" style="margin-bottom:4px;">Real-time Volume Ticks</span>
-                <div id="sidebar-vol" class="mini-chart"></div>
-            </div>
-            <div class="sidebar-chart-box">
-                <span class="label" style="margin-bottom:4px;">Liquidity Density</span>
-                <div id="sidebar-density" class="mini-chart"></div>
-            </div>
         </div>
     </div>
-    <script>
-        setInterval(() => {{
-            const now = new Date();
-            document.getElementById('clock').innerText = now.toISOString().split('T')[1].split('.')[0] + ' UTC';
-        }}, 1000);
-        document.addEventListener('DOMContentLoaded', () => {{
-            const dom = {{
-                ticker: document.getElementById('price-ticker'),
-                score: document.getElementById('score-val'),
-                projVal: document.getElementById('proj-val'),
-                projPct: document.getElementById('proj-pct'),
-                wallList: document.getElementById('wall-list')
-            }};
-            const chartOpts = {{
-                layout: {{ background: {{ type: 'solid', color: '#0a0a0a' }}, textColor: '#888', fontFamily: 'JetBrains Mono' }},
-                grid: {{ vertLines: {{ color: '#151515' }}, horzLines: {{ color: '#151515' }} }},
-                rightPriceScale: {{ borderColor: '#222', scaleMargins: {{ top: 0.1, bottom: 0.1 }} }},
-                timeScale: {{ borderColor: '#222', timeVisible: true, secondsVisible: true }},
-                crosshair: {{ mode: 1, vertLine: {{ color: '#444', labelBackgroundColor: '#444' }}, horzLine: {{ color: '#444', labelBackgroundColor: '#444' }} }}
-            }};
-            const priceChart = LightweightCharts.createChart(document.getElementById('tv-price'), chartOpts);
-            const priceSeries = priceChart.addLineSeries({{ color: '#2979ff', lineWidth: 2, title: 'Price' }});
-            const predSeries = priceChart.addLineSeries({{ color: '#ffeb3b', lineWidth: 2, lineStyle: 2, title: 'Forecast' }});
-            const candleChart = LightweightCharts.createChart(document.getElementById('tv-candles'), {{
-                ...chartOpts,
-                timeScale: {{ timeVisible: true, secondsVisible: false }}
-            }});
-            const candleSeries = candleChart.addCandlestickSeries({{
-                upColor: '#00ff9d', downColor: '#ff3b3b', borderVisible: false, wickUpColor: '#00ff9d', wickDownColor: '#ff3b3b'
-            }});
-            const netChart = LightweightCharts.createChart(document.getElementById('tv-net'), {{
-                ...chartOpts, localization: {{ timeFormatter: t => '$' + t.toFixed(2) }}
-            }});
-            const netSeries = netChart.addHistogramSeries({{ color: '#2979ff' }});
-            const volChart = LightweightCharts.createChart(document.getElementById('sidebar-vol'), {{
-                ...chartOpts,
-                grid: {{ vertLines: {{ visible: false }}, horzLines: {{ visible: false }} }},
-                rightPriceScale: {{ visible: false }},
-                timeScale: {{ visible: false }},
-                handleScroll: false, handleScale: false
-            }});
-            const volBuySeries = volChart.addHistogramSeries({{ color: '#00ff9d' }});
-            const volSellSeries = volChart.addHistogramSeries({{ color: '#ff3b3b' }});
-            const denChart = LightweightCharts.createChart(document.getElementById('sidebar-density'), {{
-                ...chartOpts,
-                grid: {{ vertLines: {{ visible: false }}, horzLines: {{ visible: false }} }},
-                rightPriceScale: {{ visible: false }},
-                timeScale: {{ visible: false }},
-                handleScroll: false, handleScale: false
-            }});
-            const bidSeries = denChart.addAreaSeries({{ lineColor: '#00ff9d', topColor: 'rgba(0, 255, 157, 0.15)', bottomColor: 'rgba(0,0,0,0)', lineWidth: 1 }});
-            const askSeries = denChart.addAreaSeries({{ lineColor: '#ff3b3b', topColor: 'rgba(255, 59, 59, 0.15)', bottomColor: 'rgba(0,0,0,0)', lineWidth: 1 }});
-            let activeLines = [];
-            new ResizeObserver(entries => {{
-                for(let entry of entries) {{
-                    const {{width, height}} = entry.contentRect;
-                    if(entry.target.id === 'tv-price') priceChart.applyOptions({{width, height}});
-                    if(entry.target.id === 'tv-candles') candleChart.applyOptions({{width, height}});
-                    if(entry.target.id === 'tv-net') netChart.applyOptions({{width, height}});
-                    if(entry.target.id === 'sidebar-vol') volChart.applyOptions({{width, height}});
-                    if(entry.target.id === 'sidebar-density') denChart.applyOptions({{width, height}});
-                }}
-            }}).observe(document.body);
-            ['tv-price', 'tv-candles', 'tv-net', 'sidebar-vol', 'sidebar-density'].forEach(id => {{
-                new ResizeObserver(e => {{
-                     const t = document.getElementById(id);
-                     if (t.clientWidth && t.clientHeight) {{
-                        if(id === 'tv-price') priceChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
-                        if(id === 'tv-candles') candleChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
-                        if(id === 'tv-net') netChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
-                        if(id === 'sidebar-vol') volChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
-                        if(id === 'sidebar-density') denChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
-                     }}
-                }}).observe(document.getElementById(id));
-            }});
-            function connect() {{
-                const ws = new WebSocket((location.protocol === 'https:' ? 'wss' : 'ws') + '://' + location.host + '/ws');
-                ws.onmessage = (e) => {{
-                    const data = JSON.parse(e.data);
-                    if (data.error) return;
-                    if (data.history.length) {{
-                        const hist = data.history.map(d => ({{ time: Math.floor(d.t), value: d.p }}));
-                        const cleanHist = [...new Map(hist.map(i => [i.time, i])).values()];
-                        priceSeries.setData(cleanHist);
-                        const lastP = cleanHist[cleanHist.length-1].value;
-                        dom.ticker.innerText = lastP.toLocaleString('en-US', {{ minimumFractionDigits: 2 }});
-                        if (data.analysis) {{
-                            const proj = data.analysis.projected;
-                            const rho = data.analysis.rho;
-                            predSeries.setData([
-                                cleanHist[cleanHist.length-1],
-                                {{ time: cleanHist[cleanHist.length-1].time + 60, value: proj }}
-                            ]);
-                            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 = rho.toFixed(3);
-                            dom.score.style.color = rho > 0 ? "var(--green)" : (rho < 0 ? "var(--red)" : "var(--text-main)");
-                        }}
                     }}
-                    if (data.ohlc && data.ohlc.length) {{
-                        const candles = data.ohlc.map(c => ({{
-                            time: c.time,
-                            open: c.open,
-                            high: c.high,
-                            low: c.low,
-                            close: c.close
-                        }}));
-                        const uniqueCandles = [...new Map(candles.map(i => [i.time, i])).values()];
-                        candleSeries.setData(uniqueCandles);
-                    }}
-                    if (data.walls) {{
-                        activeLines.forEach(l => priceSeries.removePriceLine(l));
-                        activeLines = [];
-                        let html = "";
-                        const addWall = (w, type) => {{
-                            const color = type === 'BID' ? '#00ff9d' : '#ff3b3b';
-                            activeLines.push(priceSeries.createPriceLine({{ price: w.price, color: color, lineWidth: 1, lineStyle: 2, axisLabelVisible: false }}));
-                            html += `<div class="list-item"><span style="color:${{color}}">${{type}} ${{w.price}}</span><span class="c-dim">Z:${{w.z_score.toFixed(1)}}</span></div>`;
-                        }};
-                        data.walls.asks.forEach(w => addWall(w, 'ASK'));
-                        data.walls.bids.forEach(w => addWall(w, 'BID'));
-                        dom.wallList.innerHTML = html || '<span class="c-dim" style="font-size:11px">Scanning...</span>';
-                    }}
-                    if (data.trade_history && data.trade_history.length) {{
-                        const buyData = [], sellData = [];
-                        data.trade_history.forEach(t => {{
-                            const time = Math.floor(t.t);
-                            buyData.push({{ time: time, value: t.buy }});
-                            sellData.push({{ time: time, value: t.sell }});
-                        }});
-                        volBuySeries.setData([...new Map(buyData.map(i => [i.time, i])).values()]);
-                        volSellSeries.setData([...new Map(sellData.map(i => [i.time, i])).values()]);
-                    }}
-                    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 ? '#00ff9d' : '#ff3b3b' }});
-                        }}
-                        bidSeries.setData(bids);
-                        askSeries.setData(asks);
-                        netSeries.setData(nets);
                     }}
-                }};
-                ws.onclose = () => setTimeout(connect, 2000);
-            }}
-            connect();
-        }});
-    </script>
 </body>
 </html>
 """
 async def kraken_worker():
     global market_state
     try:
         async with aiohttp.ClientSession() as session:
             url = "https://api.kraken.com/0/public/OHLC?pair=XBTUSD&interval=1"

 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
+HISTORY_LENGTH = 300
 BROADCAST_RATE = 0.1
+DECAY_LAMBDA = 50.0
+IMPACT_SENSITIVITY = 2.0
+WALL_DAMPENING = 0.8
+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": [],
+    "trade_vol_history": [],
+    "ohlc_history": [],
     "current_vol_window": {"buy": 0.0, "sell": 0.0, "start": time.time()},
     "current_mid": 0.0,
     "ready": False
     weighted_imbalance = 0.0
     total_weight = 0.0
     for i in range(len(diff_x)):
         dist = diff_x[i]
         net_vol = diff_y_net[i]
     sorted_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0])
     sorted_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])
     if not sorted_bids or not sorted_asks: return {"error": "Empty Book"}
     best_bid = sorted_bids[0][0]
     diff_x, diff_y_net = [], []
     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
         diff_x, diff_y_net, mid, best_bid, best_ask,
         {"bids": bid_walls, "asks": ask_walls}
     )
     if analysis:
         if not market_state['pred_history'] or (now - market_state['pred_history'][-1]['t'] > 0.5):
             market_state['pred_history'].append({'t': now, 'p': analysis['projected']})
             overflow: hidden;
             height: 100vh; width: 100vw;
         }}
         .layout {{
             display: grid;
             grid-template-rows: 34px 1fr 1fr;
             height: 100vh;
             box-sizing: border-box;
         }}
         .panel {{ background: var(--bg-panel); display: flex; flex-direction: column; overflow: hidden; }}
         .status-bar {{
     </style>
 </head>
 <body>
+<div class="layout">
+    <div class="status-bar">
+        <div class="status-left">
+            <span class="live-dot"></span>
+            <span style="font-weight:700; color:#fff;">{SYMBOL_KRAKEN}</span>
+            <span id="price-ticker" class="ticker-val">---</span>
         </div>
+        <div class="status-right" id="clock">00:00:00 UTC</div>
+    </div>
+    <div id="p-chart" class="panel">
+        <div class="chart-header">PRICE ACTION (BLUE) // PREDICTION (YELLOW)</div>
+        <div id="tv-price" style="flex: 1; width: 100%;"></div>
+    </div>
+    <div id="p-bottom">
+        <div class="bottom-sub">
+            <div class="chart-header">1M KLINE (KRAKEN OHLC)</div>
+            <div id="tv-candles" style="flex: 1; width: 100%;"></div>
         </div>
+        <div class="bottom-sub">
+            <div class="chart-header">ORDER FLOW IMBALANCE</div>
+            <div id="tv-net" style="flex: 1; width: 100%;"></div>
+        </div>
+    </div>
+    <div id="p-sidebar" class="panel">
+        <div class="data-group">
+            <span class="label">Micro-Price Delta</span>
+            <div style="display:flex; align-items: baseline; gap: 10px;">
+                <span id="proj-pct" class="value value-lg">--%</span>
+                <span id="proj-val" class="value-sub">---</span>
             </div>
+        </div>
+        <div class="divider"></div>
+        <div class="data-group">
+            <span class="label">OFI Imbalance Ratio</span>
+            <span id="score-val" class="value">0.00</span>
+        </div>
+        <div class="divider"></div>
+        <div class="data-group">
+            <span class="label">Detected Walls (Z > 3.0)</span>
+            <div id="wall-list" class="list-container">
+                <span class="c-dim" style="font-size: 11px;">Scanning...</span>
             </div>
+        </div>
+        <div class="sidebar-chart-box">
+            <span class="label" style="margin-bottom:4px;">Real-time Volume Ticks</span>
+            <div id="sidebar-vol" class="mini-chart"></div>
+        </div>
+        <div class="sidebar-chart-box">
+            <span class="label" style="margin-bottom:4px;">Liquidity Density</span>
+            <div id="sidebar-density" class="mini-chart"></div>
         </div>
     </div>
+</div>
+<script>
+    setInterval(() => {{
+        const now = new Date();
+        document.getElementById('clock').innerText = now.toISOString().split('T')[1].split('.')[0] + ' UTC';
+    }}, 1000);
+    document.addEventListener('DOMContentLoaded', () => {{
+        const dom = {{
+            ticker: document.getElementById('price-ticker'),
+            score: document.getElementById('score-val'),
+            projVal: document.getElementById('proj-val'),
+            projPct: document.getElementById('proj-pct'),
+            wallList: document.getElementById('wall-list')
+        }};
+        const chartOpts = {{
+            layout: {{ background: {{ type: 'solid', color: '#0a0a0a' }}, textColor: '#888', fontFamily: 'JetBrains Mono' }},
+            grid: {{ vertLines: {{ color: '#151515' }}, horzLines: {{ color: '#151515' }} }},
+            rightPriceScale: {{ borderColor: '#222', scaleMargins: {{ top: 0.1, bottom: 0.1 }} }},
+            timeScale: {{ borderColor: '#222', timeVisible: true, secondsVisible: true }},
+            crosshair: {{ mode: 1, vertLine: {{ color: '#444', labelBackgroundColor: '#444' }}, horzLine: {{ color: '#444', labelBackgroundColor: '#444' }} }}
+        }};
+        const priceChart = LightweightCharts.createChart(document.getElementById('tv-price'), chartOpts);
+        const priceSeries = priceChart.addLineSeries({{ color: '#2979ff', lineWidth: 2, title: 'Price' }});
+        const predSeries = priceChart.addLineSeries({{ color: '#ffeb3b', lineWidth: 2, lineStyle: 2, title: 'Forecast' }});
+        const candleChart = LightweightCharts.createChart(document.getElementById('tv-candles'), {{
+            ...chartOpts,
+            timeScale: {{ timeVisible: true, secondsVisible: false }}
+        }});
+        const candleSeries = candleChart.addCandlestickSeries({{
+            upColor: '#00ff9d', downColor: '#ff3b3b', borderVisible: false, wickUpColor: '#00ff9d', wickDownColor: '#ff3b3b'
+        }});
+        const netChart = LightweightCharts.createChart(document.getElementById('tv-net'), {{
+            ...chartOpts, localization: {{ timeFormatter: t => '$' + t.toFixed(2) }}
+        }});
+        const netSeries = netChart.addHistogramSeries({{ color: '#2979ff' }});
+        const volChart = LightweightCharts.createChart(document.getElementById('sidebar-vol'), {{
+            ...chartOpts,
+            grid: {{ vertLines: {{ visible: false }}, horzLines: {{ visible: false }} }},
+            rightPriceScale: {{ visible: false }},
+            timeScale: {{ visible: false }},
+            handleScroll: false, handleScale: false
+        }});
+        const volBuySeries = volChart.addHistogramSeries({{ color: '#00ff9d' }});
+        const volSellSeries = volChart.addHistogramSeries({{ color: '#ff3b3b' }});
+        const denChart = LightweightCharts.createChart(document.getElementById('sidebar-density'), {{
+            ...chartOpts,
+            grid: {{ vertLines: {{ visible: false }}, horzLines: {{ visible: false }} }},
+            rightPriceScale: {{ visible: false }},
+            timeScale: {{ visible: false }},
+            handleScroll: false, handleScale: false
+        }});
+        const bidSeries = denChart.addAreaSeries({{ lineColor: '#00ff9d', topColor: 'rgba(0, 255, 157, 0.15)', bottomColor: 'rgba(0,0,0,0)', lineWidth: 1 }});
+        const askSeries = denChart.addAreaSeries({{ lineColor: '#ff3b3b', topColor: 'rgba(255, 59, 59, 0.15)', bottomColor: 'rgba(0,0,0,0)', lineWidth: 1 }});
+        let activeLines = [];
+        let activeCandleLines = []; // New array to track lines on the candle chart
+        new ResizeObserver(entries => {{
+            for(let entry of entries) {{
+                const {{width, height}} = entry.contentRect;
+                if(entry.target.id === 'tv-price') priceChart.applyOptions({{width, height}});
+                if(entry.target.id === 'tv-candles') candleChart.applyOptions({{width, height}});
+                if(entry.target.id === 'tv-net') netChart.applyOptions({{width, height}});
+                if(entry.target.id === 'sidebar-vol') volChart.applyOptions({{width, height}});
+                if(entry.target.id === 'sidebar-density') denChart.applyOptions({{width, height}});
+            }}
+        }}).observe(document.body);
+        ['tv-price', 'tv-candles', 'tv-net', 'sidebar-vol', 'sidebar-density'].forEach(id => {{
+            new ResizeObserver(e => {{
+                 const t = document.getElementById(id);
+                 if (t.clientWidth && t.clientHeight) {{
+                    if(id === 'tv-price') priceChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
+                    if(id === 'tv-candles') candleChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
+                    if(id === 'tv-net') netChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
+                    if(id === 'sidebar-vol') volChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
+                    if(id === 'sidebar-density') denChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
+                 }}
+            }}).observe(document.getElementById(id));
+        }});
+        function connect() {{
+            const ws = new WebSocket((location.protocol === 'https:' ? 'wss' : 'ws') + '://' + location.host + '/ws');
+            ws.onmessage = (e) => {{
+                const data = JSON.parse(e.data);
+                if (data.error) return;
+                if (data.history.length) {{
+                    const hist = data.history.map(d => ({{ time: Math.floor(d.t), value: d.p }}));
+                    const cleanHist = [...new Map(hist.map(i => [i.time, i])).values()];
+                    priceSeries.setData(cleanHist);
+                    const lastP = cleanHist[cleanHist.length-1].value;
+                    dom.ticker.innerText = lastP.toLocaleString('en-US', {{ minimumFractionDigits: 2 }});
+                    if (data.analysis) {{
+                        const proj = data.analysis.projected;
+                        const rho = data.analysis.rho;
+                        predSeries.setData([
+                            cleanHist[cleanHist.length-1],
+                            {{ time: cleanHist[cleanHist.length-1].time + 60, value: proj }}
+                        ]);
+                        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 = rho.toFixed(3);
+                        dom.score.style.color = rho > 0 ? "var(--green)" : (rho < 0 ? "var(--red)" : "var(--text-main)");
                     }}
+                }}
+                if (data.ohlc && data.ohlc.length) {{
+                    const candles = data.ohlc.map(c => ({{
+                        time: c.time,
+                        open: c.open,
+                        high: c.high,
+                        low: c.low,
+                        close: c.close
+                    }}));
+                    const uniqueCandles = [...new Map(candles.map(i => [i.time, i])).values()];
+                    candleSeries.setData(uniqueCandles);
+                }}
+                if (data.walls) {{
+                    // Remove old lines from both charts
+                    activeLines.forEach(l => priceSeries.removePriceLine(l));
+                    activeLines = [];
+                    activeCandleLines.forEach(l => candleSeries.removePriceLine(l));
+                    activeCandleLines = [];
+                    let html = "";
+                    const addWall = (w, type) => {{
+                        const color = type === 'BID' ? '#00ff9d' : '#ff3b3b';
+                        const lineOpts = {{ price: w.price, color: color, lineWidth: 1, lineStyle: 2, axisLabelVisible: false }};
+                        // Add to Price Chart
+                        activeLines.push(priceSeries.createPriceLine(lineOpts));
+                        // Add to Candle Chart
+                        activeCandleLines.push(candleSeries.createPriceLine(lineOpts));
+                        html += `<div class="list-item"><span style="color:${{color}}">${{type}} ${{w.price}}</span><span class="c-dim">Z:${{w.z_score.toFixed(1)}}</span></div>`;
+                    }};
+                    data.walls.asks.forEach(w => addWall(w, 'ASK'));
+                    data.walls.bids.forEach(w => addWall(w, 'BID'));
+                    dom.wallList.innerHTML = html || '<span class="c-dim" style="font-size:11px">Scanning...</span>';
+                }}
+                if (data.trade_history && data.trade_history.length) {{
+                    const buyData = [], sellData = [];
+                    data.trade_history.forEach(t => {{
+                        const time = Math.floor(t.t);
+                        buyData.push({{ time: time, value: t.buy }});
+                        sellData.push({{ time: time, value: t.sell }});
+                    }});
+                    volBuySeries.setData([...new Map(buyData.map(i => [i.time, i])).values()]);
+                    volSellSeries.setData([...new Map(sellData.map(i => [i.time, i])).values()]);
+                }}
+                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 ? '#00ff9d' : '#ff3b3b' }});
                     }}
+                    bidSeries.setData(bids);
+                    askSeries.setData(asks);
+                    netSeries.setData(nets);
+                }}
+            }};
+            ws.onclose = () => setTimeout(connect, 2000);
+        }}
+        connect();
+    }});
+</script>
 </body>
 </html>
 """
 async def kraken_worker():
     global market_state
     try:
         async with aiohttp.ClientSession() as session:
             url = "https://api.kraken.com/0/public/OHLC?pair=XBTUSD&interval=1"