Spaces:

Alvin3y1
/

test

Sleeping

App Files Files Community

Alvin3y1 commited on 13 days ago

Commit

669adc5

verified ·

1 Parent(s): 6dbbeb8

Update app.py

Browse files

Files changed (1) hide show

app.py +167 -152

app.py CHANGED Viewed

@@ -3,13 +3,14 @@ import json
 import logging
 import time
 import bisect
-from aiohttp import web
 import websockets
 # --- Configuration ---
 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
 HISTORY_LENGTH = 300
 # --- Logging ---
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
@@ -24,6 +25,9 @@ market_state = {
     "ready": False
 }
 # --- AI Logic Helper ---
 def analyze_structure(diff_x, diff_y, current_mid):
     if not diff_y or len(diff_y) < 5:
@@ -58,6 +62,57 @@ def analyze_structure(diff_x, diff_y, current_mid):
         "net_score": net_total
     }
 # --- HTML Frontend ---
 HTML_PAGE = f"""
 <!DOCTYPE html>
@@ -65,10 +120,8 @@ HTML_PAGE = f"""
 <head>
     <meta charset="UTF-8">
     <title>AI Liquidity Dashboard | {SYMBOL_KRAKEN}</title>
-    <!-- Pinned Version for Stability -->
     <script src="https://unpkg.com/lightweight-charts@4.1.1/dist/lightweight-charts.standalone.production.js"></script>
     <style>
         :root {{
             --bg-color: #0b0c10;
@@ -108,31 +161,25 @@ HTML_PAGE = f"""
         .mid-mark {{ position: absolute; left: 50%; height: 100%; width: 2px; background: #fff; z-index: 10; }}
         #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); }}
-        #error-log {{ color: var(--accent-red); font-size: 12px; margin-top: 20px; max-width: 80%; text-align: center; }}
     </style>
 </head>
 <body>
     <div id="loader">
-        <div style="font-size: 24px; margin-bottom: 10px;">INITIALIZING AI MODELS...</div>
-        <div id="loading-status" style="font-size: 14px; color: #888;">Connecting to WebSocket...</div>
-        <div id="error-log"></div>
     </div>
     <div class="grid-container">
-        <!-- Price Chart Panel -->
         <div id="p-price" class="panel">
             <div class="panel-header"><span>BTC/USD Price Action</span><span id="live-price">---</span></div>
             <div id="tv-price"></div>
         </div>
-        <!-- Depth Chart Panel (Now using Lightweight Charts) -->
         <div id="p-depth" class="panel">
-            <div class="panel-header"><span>Net Liquidity (Green=Bids, Red=Asks)</span><span>DEPTH 300</span></div>
             <div id="tv-depth"></div>
         </div>
-        <!-- Analytics Panel -->
         <div id="p-stats" class="panel">
             <div class="panel-header">ANALYTICS ENGINE</div>
             <div class="stats-content">
@@ -159,16 +206,8 @@ HTML_PAGE = f"""
     </div>
     <script>
-        // --- ERROR HANDLING ---
-        window.onerror = function(msg, url, lineNo, columnNo, error) {{
-            const errDiv = document.getElementById('error-log');
-            errDiv.innerHTML += `ERROR: ${{msg}} (Line: ${{lineNo}})<br>`;
-            document.getElementById('loading-status').style.color = 'red';
-            document.getElementById('loading-status').innerText = "SYSTEM FAILURE";
-            return false;
-        }};
         document.addEventListener('DOMContentLoaded', () => {{
             const dom = {{
                 loader: document.getElementById('loader'),
                 status: document.getElementById('loading-status'),
@@ -181,7 +220,7 @@ HTML_PAGE = f"""
                 logs: document.getElementById('term-logs')
             }};
-            // --- CHART CONFIGURATION ---
             const chartOptionsCommon = {{
                 layout: {{ background: {{ type: 'solid', color: '#12141a' }}, textColor: '#888' }},
                 grid: {{ vertLines: {{ color: '#1f2833' }}, horzLines: {{ color: '#1f2833' }} }},
@@ -189,9 +228,8 @@ HTML_PAGE = f"""
                 timeScale: {{ borderColor: '#2d3842' }},
             }};
-            // 1. PRICE CHART
-            const priceContainer = document.getElementById('tv-price');
-            const priceChart = LightweightCharts.createChart(priceContainer, {{
                 ...chartOptionsCommon,
                 timeScale: {{ timeVisible: true, secondsVisible: true }},
             }});
@@ -199,46 +237,23 @@ HTML_PAGE = f"""
             const predSeries = priceChart.addLineSeries({{ color: '#ff9800', lineWidth: 2, lineStyle: 2 }});
             let supportLine = null, resistanceLine = null;
-            // 2. DEPTH CHART (Hacked for Non-Time Series)
-            const depthContainer = document.getElementById('tv-depth');
-            const depthChart = LightweightCharts.createChart(depthContainer, {{
                 ...chartOptionsCommon,
-                timeScale: {{
-                    // Override formatted date to just show raw distance
-                    tickMarkFormatter: (time) => parseFloat(time).toFixed(0),
-                }},
-                localization: {{
-                    // Override tooltip formatter
-                    timeFormatter: (time) => 'Dist: $' + parseFloat(time).toFixed(2),
-                }}
-            }});
-            // We use two Area series: one for Positive (Green), one for Negative (Red)
-            const bullSeries = depthChart.addAreaSeries({{
-                topColor: 'rgba(102, 252, 241, 0.4)',
-                bottomColor: 'rgba(102, 252, 241, 0.0)',
-                lineColor: '#66fcf1', lineWidth: 2
-            }});
-            const bearSeries = depthChart.addAreaSeries({{
-                topColor: 'rgba(255, 59, 59, 0.4)',
-                bottomColor: 'rgba(255, 59, 59, 0.0)',
-                lineColor: '#ff3b3b', lineWidth: 2
             }});
-            // Resize Logic
-            new ResizeObserver(entries => {{
-                for (let entry of entries) {{
-                    if (entry.target === priceContainer) priceChart.applyOptions({{ width: entry.contentRect.width, height: entry.contentRect.height }});
-                    if (entry.target === depthContainer) depthChart.applyOptions({{ width: entry.contentRect.width, height: entry.contentRect.height }});
-                }}
-            }}).observe(priceContainer);
-            new ResizeObserver(entries => {{
-                for (let entry of entries) {{
-                     if (entry.target === depthContainer) depthChart.applyOptions({{ width: entry.contentRect.width, height: entry.contentRect.height }});
-                }}
-            }}).observe(depthContainer);
-            // --- HELPERS ---
             function log(msg, type='neutral') {{
                 const div = document.createElement('div');
                 div.className = 'log-line';
@@ -248,19 +263,37 @@ HTML_PAGE = f"""
                 if (dom.logs.children.length > 20) dom.logs.removeChild(dom.logs.lastChild);
             }}
-            // --- DATA LOOP ---
-            async function fetchData() {{
-                try {{
-                    const res = await fetch('/data?t=' + Date.now());
-                    const data = await res.json();
                     if (data.error) {{
-                        dom.status.innerText = "Synchronizing Market State...";
                         return;
                     }}
                     dom.loader.style.display = 'none';
-                    // -- UPDATE PRICE CHART --
                     const uniqueHistory = [];
                     const seen = new Set();
                     data.history.forEach(d => {{
@@ -270,17 +303,17 @@ HTML_PAGE = f"""
                     if (uniqueHistory.length > 0) {{
                         priceSeries.setData(uniqueHistory);
-                        const last = uniqueHistory[uniqueHistory.length - 1];
                         dom.price.innerText = last.value.toLocaleString(undefined, {{minimumFractionDigits: 2}});
                         if (data.analysis) {{
                             const {{ projected, support, resistance, net_score }} = data.analysis;
-                            // Projection
                             predSeries.setData([last, {{ time: last.time + 60, value: projected }}]);
                             dom.projVal.innerText = projected.toFixed(0);
-                            // S/R Lines (Using createPriceLine)
                             if (support) {{
                                 dom.supVal.innerText = support.toFixed(0);
                                 if (!supportLine) supportLine = priceSeries.createPriceLine({{ price: support, color: '#00e676', title: 'SUP' }});
@@ -299,7 +332,7 @@ HTML_PAGE = f"""
                                 if (resistanceLine) {{ priceSeries.removePriceLine(resistanceLine); resistanceLine = null; }}
                             }}
-                            // Meter & Logs
                             dom.scoreVal.innerText = net_score.toFixed(1);
                             dom.scoreVal.className = net_score > 0 ? "stat-value green" : "stat-value red";
                             let barW = Math.min(Math.abs(net_score)*2, 50);
@@ -307,54 +340,45 @@ HTML_PAGE = f"""
                             dom.scoreBar.style.left = net_score > 0 ? '50%' : (50 - barW) + '%';
                             dom.scoreBar.style.background = net_score > 0 ? '#66fcf1' : '#ff3b3b';
-                            if (Math.random() > 0.98) {{
-                                if (net_score > 40) log("Strong Buyers Detected", 'bull');
-                                else if (net_score < -40) log("Strong Sellers Detected", 'bear');
                             }}
                         }}
                     }}
-                    // -- UPDATE DEPTH CHART --
-                    // Map diff_x (distance) to 'time', diff_y to 'value'
-                    // Split into Bull (Positive) and Bear (Negative) series
                     if (data.diff && data.diff.x.length > 0) {{
-                        const bullData = [];
-                        const bearData = [];
                         for (let i = 0; i < data.diff.x.length; i++) {{
-                            const xVal = data.diff.x[i]; // Distance
-                            const yVal = data.diff.y[i]; // Net Volume
-                            // Ensure strictly unique and ascending (already guaranteed by logic, but safe to cast)
-                            // We use xVal as 'time'
                             if (yVal >= 0) {{
                                 bullData.push({{ time: xVal, value: yVal }});
-                                bearData.push({{ time: xVal, value: 0 }}); // Clamp other series to 0
                             }} else {{
                                 bullData.push({{ time: xVal, value: 0 }});
                                 bearData.push({{ time: xVal, value: yVal }});
                             }}
                         }}
                         bullSeries.setData(bullData);
                         bearSeries.setData(bearData);
                         depthChart.timeScale().fitContent();
                     }}
-                }} catch (e) {{
-                    console.error(e);
-                }}
             }}
-            setInterval(fetchData, 1000);
         }});
     </script>
 </body>
 </html>
 """
 async def kraken_worker():
     global market_state
     while True:
         try:
@@ -390,78 +414,69 @@ async def kraken_worker():
                             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})
                                 if len(market_state['history']) > HISTORY_LENGTH:
                                     market_state['history'].pop(0)
         except Exception as e:
-            logging.warning(f"⚠️ Reconnecting: {e}")
             await asyncio.sleep(3)
-async def handle_index(request):
-    return web.Response(text=HTML_PAGE, content_type='text/html')
-async def handle_data(request):
-    if not market_state['ready']:
-        return web.json_response({"error": "Initializing..."})
-    mid = market_state['current_mid']
-    raw_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0])[:300]
-    raw_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])[:300]
-    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_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)
-    # Net Diff
-    diff_x, diff_y = [], []
-    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
-            idx_a = bisect.bisect_right(d_a_x, s)
-            vol_a = d_a_y[idx_a-1] if idx_a > 0 else 0
-            diff_x.append(s)
-            diff_y.append(vol_b - vol_a)
-    analysis = analyze_structure(diff_x, diff_y, mid)
-    return web.json_response({
-        "mid": mid,
-        "history": market_state['history'],
-        "diff": { "x": diff_x, "y": diff_y },
-        "analysis": analysis
-    })
 async def start_background(app):
     app['kraken_task'] = asyncio.create_task(kraken_worker())
 async def cleanup_background(app):
     app['kraken_task'].cancel()
-    try: await app['kraken_task']
-    except asyncio.CancelledError: pass
 async def main():
     app = web.Application()
     app.router.add_get('/', handle_index)
-    app.router.add_get('/data', handle_data)
     app.on_startup.append(start_background)
     app.on_cleanup.append(cleanup_background)
@@ -470,7 +485,7 @@ async def main():
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
-    print(f"🚀 AI Dashboard: http://localhost:{PORT}")
     await asyncio.Event().wait()
 if __name__ == "__main__":

 import logging
 import time
 import bisect
+from aiohttp import web, WSMsgType
 import websockets
 # --- Configuration ---
 SYMBOL_KRAKEN = "BTC/USD"
 PORT = 7860
 HISTORY_LENGTH = 300
+BROADCAST_RATE = 0.1  # Broadcast updates every 100ms (10Hz)
 # --- Logging ---
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s')
     "ready": False
 }
+# Set of connected client websockets
+connected_clients = set()
 # --- AI Logic Helper ---
 def analyze_structure(diff_x, diff_y, current_mid):
     if not diff_y or len(diff_y) < 5:
         "net_score": net_total
     }
+def process_market_data():
+    """Calculates the payload to send to clients."""
+    if not market_state['ready']:
+        return {"error": "Initializing..."}
+    mid = market_state['current_mid']
+    # Snapshot Top 300
+    raw_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0])[:300]
+    raw_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])[:300]
+    # Calculate Cumulative Volume
+    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_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)
+    # Calculate Net Liquidity Curve
+    diff_x, diff_y = [], []
+    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
+            idx_a = bisect.bisect_right(d_a_x, s)
+            vol_a = d_a_y[idx_a-1] if idx_a > 0 else 0
+            diff_x.append(s)
+            diff_y.append(vol_b - vol_a)
+    analysis = analyze_structure(diff_x, diff_y, mid)
+    return {
+        "mid": mid,
+        "history": market_state['history'],
+        "diff": { "x": diff_x, "y": diff_y },
+        "analysis": analysis
+    }
 # --- HTML Frontend ---
 HTML_PAGE = f"""
 <!DOCTYPE html>
 <head>
     <meta charset="UTF-8">
     <title>AI Liquidity Dashboard | {SYMBOL_KRAKEN}</title>
+    <!-- Lightweight Charts Pinned Version -->
     <script src="https://unpkg.com/lightweight-charts@4.1.1/dist/lightweight-charts.standalone.production.js"></script>
     <style>
         :root {{
             --bg-color: #0b0c10;
         .mid-mark {{ position: absolute; left: 50%; height: 100%; width: 2px; background: #fff; z-index: 10; }}
         #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); }}
+        #loading-status {{ font-size: 14px; color: #888; margin-top: 10px; }}
     </style>
 </head>
 <body>
     <div id="loader">
+        <div style="font-size: 24px;">ESTABLISHING UPLINK...</div>
+        <div id="loading-status">Connecting to WebSocket Stream...</div>
     </div>
     <div class="grid-container">
         <div id="p-price" class="panel">
             <div class="panel-header"><span>BTC/USD Price Action</span><span id="live-price">---</span></div>
             <div id="tv-price"></div>
         </div>
         <div id="p-depth" class="panel">
+            <div class="panel-header"><span>Net Liquidity (Bid - Ask)</span><span>DEPTH 300</span></div>
             <div id="tv-depth"></div>
         </div>
         <div id="p-stats" class="panel">
             <div class="panel-header">ANALYTICS ENGINE</div>
             <div class="stats-content">
     </div>
     <script>
         document.addEventListener('DOMContentLoaded', () => {{
+            // DOM Elements
             const dom = {{
                 loader: document.getElementById('loader'),
                 status: document.getElementById('loading-status'),
                 logs: document.getElementById('term-logs')
             }};
+            // --- CHART INIT ---
             const chartOptionsCommon = {{
                 layout: {{ background: {{ type: 'solid', color: '#12141a' }}, textColor: '#888' }},
                 grid: {{ vertLines: {{ color: '#1f2833' }}, horzLines: {{ color: '#1f2833' }} }},
                 timeScale: {{ borderColor: '#2d3842' }},
             }};
+            // 1. Price Chart
+            const priceChart = LightweightCharts.createChart(document.getElementById('tv-price'), {{
                 ...chartOptionsCommon,
                 timeScale: {{ timeVisible: true, secondsVisible: true }},
             }});
             const predSeries = priceChart.addLineSeries({{ color: '#ff9800', lineWidth: 2, lineStyle: 2 }});
             let supportLine = null, resistanceLine = null;
+            // 2. Depth Chart (Lightweight Charts hacked for non-time-series)
+            const depthChart = LightweightCharts.createChart(document.getElementById('tv-depth'), {{
                 ...chartOptionsCommon,
+                timeScale: {{ tickMarkFormatter: (time) => parseFloat(time).toFixed(0) }},
+                localization: {{ timeFormatter: (time) => 'Dist: $' + parseFloat(time).toFixed(2) }}
             }});
+            const bullSeries = depthChart.addAreaSeries({{ topColor: 'rgba(102, 252, 241, 0.4)', bottomColor: 'rgba(102, 252, 241, 0.0)', lineColor: '#66fcf1', lineWidth: 2 }});
+            const bearSeries = depthChart.addAreaSeries({{ topColor: 'rgba(255, 59, 59, 0.4)', bottomColor: 'rgba(255, 59, 59, 0.0)', lineColor: '#ff3b3b', lineWidth: 2 }});
+            // Resizers
+            new ResizeObserver(e => {{ for(let x of e) priceChart.applyOptions({{width:x.contentRect.width, height:x.contentRect.height}})}}).observe(document.getElementById('tv-price'));
+            new ResizeObserver(e => {{ for(let x of e) depthChart.applyOptions({{width:x.contentRect.width, height:x.contentRect.height}})}}).observe(document.getElementById('tv-depth'));
+            // --- WEBSOCKET LOGIC ---
+            let ws;
+            let retryCount = 0;
             function log(msg, type='neutral') {{
                 const div = document.createElement('div');
                 div.className = 'log-line';
                 if (dom.logs.children.length > 20) dom.logs.removeChild(dom.logs.lastChild);
             }}
+            function connect() {{
+                const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
+                const url = `${{proto}}://${{window.location.host}}/ws`;
+                ws = new WebSocket(url);
+                ws.onopen = () => {{
+                    console.log("WS Connected");
+                    dom.status.innerText = "Waiting for data stream...";
+                    retryCount = 0;
+                }};
+                ws.onclose = () => {{
+                    console.log("WS Closed");
+                    dom.loader.style.display = 'flex';
+                    dom.status.innerText = `Connection lost. Reconnecting (${{++retryCount}})...`;
+                    setTimeout(connect, 3000);
+                }};
+                ws.onmessage = (event) => {{
+                    const data = JSON.parse(event.data);
                     if (data.error) {{
+                        dom.status.innerText = data.error;
                         return;
                     }}
+                    // Data is flowing - Hide Loader
                     dom.loader.style.display = 'none';
+                    // 1. Update Price
                     const uniqueHistory = [];
                     const seen = new Set();
                     data.history.forEach(d => {{
                     if (uniqueHistory.length > 0) {{
                         priceSeries.setData(uniqueHistory);
+                        const last = uniqueHistory[uniqueHistory.length-1];
                         dom.price.innerText = last.value.toLocaleString(undefined, {{minimumFractionDigits: 2}});
                         if (data.analysis) {{
                             const {{ projected, support, resistance, net_score }} = data.analysis;
+                            // Prediction
                             predSeries.setData([last, {{ time: last.time + 60, value: projected }}]);
                             dom.projVal.innerText = projected.toFixed(0);
+                            // S/R Lines
                             if (support) {{
                                 dom.supVal.innerText = support.toFixed(0);
                                 if (!supportLine) supportLine = priceSeries.createPriceLine({{ price: support, color: '#00e676', title: 'SUP' }});
                                 if (resistanceLine) {{ priceSeries.removePriceLine(resistanceLine); resistanceLine = null; }}
                             }}
+                            // Meter
                             dom.scoreVal.innerText = net_score.toFixed(1);
                             dom.scoreVal.className = net_score > 0 ? "stat-value green" : "stat-value red";
                             let barW = Math.min(Math.abs(net_score)*2, 50);
                             dom.scoreBar.style.left = net_score > 0 ? '50%' : (50 - barW) + '%';
                             dom.scoreBar.style.background = net_score > 0 ? '#66fcf1' : '#ff3b3b';
+                            if (Math.random() > 0.99) {{
+                                if (net_score > 40) log("Significant Bullish Imbalance", 'bull');
+                                else if (net_score < -40) log("Significant Bearish Imbalance", 'bear');
                             }}
                         }}
                     }}
+                    // 2. Update Depth (Bids/Asks Areas)
                     if (data.diff && data.diff.x.length > 0) {{
+                        const bullData = [], bearData = [];
                         for (let i = 0; i < data.diff.x.length; i++) {{
+                            const xVal = data.diff.x[i];
+                            const yVal = data.diff.y[i];
                             if (yVal >= 0) {{
                                 bullData.push({{ time: xVal, value: yVal }});
+                                bearData.push({{ time: xVal, value: 0 }});
                             }} else {{
                                 bullData.push({{ time: xVal, value: 0 }});
                                 bearData.push({{ time: xVal, value: yVal }});
                             }}
                         }}
                         bullSeries.setData(bullData);
                         bearSeries.setData(bearData);
                         depthChart.timeScale().fitContent();
                     }}
+                }};
             }}
+            connect(); // Start WS connection
         }});
     </script>
 </body>
 </html>
 """
+# --- Backend Workers ---
 async def kraken_worker():
+    """Connects to Kraken WS and updates internal state."""
     global market_state
     while True:
         try:
                             market_state['ready'] = True
                             now = time.time()
+                            # Throttle history recording slightly
                             if not market_state['history'] or (now - market_state['history'][-1]['t'] > 0.5):
                                 market_state['history'].append({'t': now, 'p': mid})
                                 if len(market_state['history']) > HISTORY_LENGTH:
                                     market_state['history'].pop(0)
         except Exception as e:
+            logging.warning(f"⚠️ Kraken connection lost: {e}")
             await asyncio.sleep(3)
+async def broadcast_worker():
+    """Broadcasts processed data to all connected clients."""
+    while True:
+        if connected_clients and market_state['ready']:
+            # 1. Process data once
+            payload = process_market_data()
+            payload_json = json.dumps(payload)
+            # 2. Send to all clients
+            # Copy set to avoid size change iteration error if client disconnects mid-loop
+            for ws in list(connected_clients):
+                try:
+                    await ws.send_str(payload_json)
+                except Exception:
+                    # Connection likely closed, will be removed by handler
+                    pass
+        await asyncio.sleep(BROADCAST_RATE)
+async def websocket_handler(request):
+    """Handles new client WebSocket connections."""
+    ws = web.WebSocketResponse()
+    await ws.prepare(request)
+    connected_clients.add(ws)
+    try:
+        async for msg in ws:
+            pass # We just listen to keep connection open (or handle incoming client msgs if needed)
+    finally:
+        connected_clients.remove(ws)
+    return ws
+async def handle_index(request):
+    return web.Response(text=HTML_PAGE, content_type='text/html')
 async def start_background(app):
     app['kraken_task'] = asyncio.create_task(kraken_worker())
+    app['broadcast_task'] = asyncio.create_task(broadcast_worker())
 async def cleanup_background(app):
     app['kraken_task'].cancel()
+    app['broadcast_task'].cancel()
+    try:
+        await app['kraken_task']
+        await app['broadcast_task']
+    except asyncio.CancelledError:
+        pass
 async def main():
     app = web.Application()
     app.router.add_get('/', handle_index)
+    app.router.add_get('/ws', websocket_handler) # WebSocket Endpoint
     app.on_startup.append(start_background)
     app.on_cleanup.append(cleanup_background)
     site = web.TCPSite(runner, '0.0.0.0', PORT)
     await site.start()
+    print(f"🚀 AI Dashboard (WebSocket): http://localhost:{PORT}")
     await asyncio.Event().wait()
 if __name__ == "__main__":