Update app.py

app.py

@@ -30,7 +30,8 @@ market_state = {
     "asks": {},
     "history": [], 
     "pred_history": [], 
-    "trade_vol_history": [], # New: Store trade volume history
+    "trade_vol_history": [], 
+    "ohlc_history": [], # Stores 1m candles
     "current_vol_window": {"buy": 0.0, "sell": 0.0, "start": time.time()},
     "current_mid": 0.0,
     "ready": False
@@ -66,7 +67,6 @@ def detect_anomalies(orders, scan_depth):
 def calculate_micro_price_structure(diff_x, diff_y_net, current_mid, best_bid, best_ask, walls):
     if not diff_x or len(diff_x) < 5: return None
 
-    # Weighted Imbalance Calculation
     weighted_imbalance = 0.0
     total_weight = 0.0
     
@@ -79,12 +79,10 @@ def calculate_micro_price_structure(diff_x, diff_y_net, current_mid, best_bid, b
 
     rho = weighted_imbalance / total_weight if total_weight > 0 else 0
 
-    # Base Projection
     spread = best_ask - best_bid
     theoretical_delta = (spread / 2) * rho * IMPACT_SENSITIVITY
     projected_price = current_mid + theoretical_delta
 
-    # Wall Friction
     final_delta = theoretical_delta
     if final_delta > 0 and walls['asks']:
         nearest_wall = walls['asks'][0]
@@ -115,13 +113,10 @@ def process_market_data():
             'buy': market_state['current_vol_window']['buy'],
             'sell': market_state['current_vol_window']['sell']
         })
-        if len(market_state['trade_vol_history']) > 60: # Keep last 60 seconds
+        if len(market_state['trade_vol_history']) > 60: 
             market_state['trade_vol_history'].pop(0)
-        
-        # Reset window
         market_state['current_vol_window'] = {"buy": 0.0, "sell": 0.0, "start": now}
 
-    # Order Book Processing
     sorted_bids = sorted(market_state['bids'].items(), key=lambda x: -x[0])
     sorted_asks = sorted(market_state['asks'].items(), key=lambda x: x[0])
     
@@ -182,6 +177,7 @@ def process_market_data():
         "history": market_state['history'],
         "pred_history": market_state['pred_history'],
         "trade_history": market_state['trade_vol_history'],
+        "ohlc": market_state['ohlc_history'],
         "depth_x": diff_x,
         "depth_net": diff_y_net,
         "depth_bids": chart_bids,
@@ -247,30 +243,31 @@ HTML_PAGE = f"""
             z-index: 50;
         }}
         .status-left {{ display: flex; gap: 20px; align-items: center; }}
-        .status-right {{ color: var(--text-dim); letter-spacing: 1px; }}
         .live-dot {{ width: 8px; height: 8px; background-color: var(--green); border-radius: 50%; display: inline-block; box-shadow: 0 0 8px var(--green); }}
         .ticker-val {{ font-weight: 700; color: #fff; font-size: 13px; }}
 
         #p-chart {{ grid-column: 1 / 2; grid-row: 2 / 3; }}
         
-        #p-depth {{ 
+        /* BOTTOM GRID */
+        #p-bottom {{ 
             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; position: relative; }}
+        .bottom-sub {{ background: var(--bg-panel); display: flex; flex-direction: column; position: relative; }}
 
+        /* SIDEBAR */
         #p-sidebar {{ 
             grid-column: 2 / 3; 
             grid-row: 2 / 4; 
-            padding: 20px;
+            padding: 15px;
             display: flex;
             flex-direction: column;
-            gap: 15px; /* Tighter gap to fit the new chart */
+            gap: 15px;
             border-left: 1px solid var(--border);
-            overflow-y: hidden;
+            overflow: hidden;
         }}
 
         .chart-header {{
@@ -298,7 +295,7 @@ HTML_PAGE = f"""
         .c-red {{ color: var(--red); }}
         .c-dim {{ color: var(--text-dim); }}
 
-        .list-container {{ display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 120px; }}
+        .list-container {{ display: flex; flex-direction: column; gap: 8px; overflow-y: auto; height: 100px; }}
         .list-item {{ 
             display: flex; justify-content: space-between; 
             font-family: 'JetBrains Mono', monospace; 
@@ -309,12 +306,18 @@ HTML_PAGE = f"""
         .list-item span:first-child {{ color: #e0e0e0; }}
         .list-item:last-child {{ border: none; }}
         
-        #sidebar-chart {{
+        /* SIDEBAR CHARTS */
+        .sidebar-chart-box {{
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-height: 0; /* Important for flex scaling */
+        }}
+        .mini-chart {{
             flex: 1;
             background: rgba(255,255,255,0.02);
             border: 1px solid var(--border);
             border-radius: 4px;
-            min-height: 100px;
         }}
     </style>
 </head>
@@ -330,24 +333,28 @@ HTML_PAGE = f"""
             <div class="status-right" id="clock">00:00:00 UTC</div>
         </div>
 
+        <!-- TOP LEFT: Price Line -->
         <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-depth">
-            <div class="depth-sub">
-                <div class="chart-header">LIQUIDITY DENSITY</div>
-                <div id="tv-raw" style="flex: 1; width: 100%;"></div>
+        <!-- BOTTOM: Candles + Imbalance -->
+        <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="depth-sub">
+            <div class="bottom-sub">
                 <div class="chart-header">ORDER FLOW IMBALANCE</div>
                 <div id="tv-net" style="flex: 1; width: 100%;"></div>
             </div>
         </div>
 
+        <!-- SIDEBAR -->
         <div id="p-sidebar" class="panel">
             
+            <!-- STATS -->
             <div class="data-group">
                 <span class="label">Micro-Price Delta</span>
                 <div style="display:flex; align-items: baseline; gap: 10px;">
@@ -365,6 +372,7 @@ HTML_PAGE = f"""
 
             <div class="divider"></div>
 
+            <!-- WALLS -->
             <div class="data-group">
                 <span class="label">Detected Walls (Z > 3.0)</span>
                 <div id="wall-list" class="list-container">
@@ -372,10 +380,16 @@ HTML_PAGE = f"""
                 </div>
             </div>
 
-            <!-- NEW CHART UNDER WALLS -->
-            <div class="data-group" style="flex: 1; display:flex; flex-direction:column;">
-                <span class="label">Real-time Volume (Ticks)</span>
-                <div id="sidebar-chart"></div>
+            <!-- VOL CHART -->
+            <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>
+
+            <!-- DENSITY CHART -->
+            <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>
@@ -403,35 +417,48 @@ HTML_PAGE = f"""
                 crosshair: {{ mode: 1, vertLine: {{ color: '#444', labelBackgroundColor: '#444' }}, horzLine: {{ color: '#444', labelBackgroundColor: '#444' }} }}
             }};
 
-            // 1. MAIN PRICE CHART
+            // 1. PRICE LINE
             const priceChart = LightweightCharts.createChart(document.getElementById('tv-price'), chartOpts);
-            const priceSeries = priceChart.addLineSeries({{ color: '#2979ff', lineWidth: 2, title: 'Price' }}); // BLUE
-            const predSeries = priceChart.addLineSeries({{ color: '#ffeb3b', lineWidth: 2, lineStyle: 2, title: 'Forecast' }}); // YELLOW
+            const priceSeries = priceChart.addLineSeries({{ color: '#2979ff', lineWidth: 2, title: 'Price' }}); 
+            const predSeries = priceChart.addLineSeries({{ color: '#ffeb3b', lineWidth: 2, lineStyle: 2, title: 'Forecast' }});
 
-            // 2. DEPTH CHARTS
-            const rawChart = LightweightCharts.createChart(document.getElementById('tv-raw'), {{
-                ...chartOpts, localization: {{ timeFormatter: t => '$' + t.toFixed(2) }}
+            // 2. CANDLESTICK CHART (NEW)
+            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 bidSeries = rawChart.addAreaSeries({{ lineColor: '#00ff9d', topColor: 'rgba(0, 255, 157, 0.15)', bottomColor: 'rgba(0,0,0,0)', lineWidth: 1 }});
-            const askSeries = rawChart.addAreaSeries({{ lineColor: '#ff3b3b', topColor: 'rgba(255, 59, 59, 0.15)', bottomColor: 'rgba(0,0,0,0)', lineWidth: 1 }});
 
+            // 3. NET IMBALANCE
             const netChart = LightweightCharts.createChart(document.getElementById('tv-net'), {{
                 ...chartOpts, localization: {{ timeFormatter: t => '$' + t.toFixed(2) }}
             }});
             const netSeries = netChart.addHistogramSeries({{ color: '#2979ff' }});
 
-            // 3. SIDEBAR VOLUME CHART
-            const volChart = LightweightCharts.createChart(document.getElementById('sidebar-chart'), {{
+            // 4. SIDEBAR: VOLUME
+            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
+                handleScroll: false, handleScale: false
             }});
             const volBuySeries = volChart.addHistogramSeries({{ color: '#00ff9d' }});
             const volSellSeries = volChart.addHistogramSeries({{ color: '#ff3b3b' }});
 
+            // 5. SIDEBAR: DENSITY (MOVED)
+            const denChart = LightweightCharts.createChart(document.getElementById('sidebar-density'), {{
+                ...chartOpts,
+                grid: {{ vertLines: {{ visible: false }}, horzLines: {{ visible: false }} }},
+                rightPriceScale: {{ visible: false }},
+                timeScale: {{ visible: false }}, /* Hide X axis to fit */
+                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 = [];
 
             // RESIZE OBSERVER
@@ -439,19 +466,24 @@ HTML_PAGE = f"""
                 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-candles') candleChart.applyOptions({{width, height}});
                     if(entry.target.id === 'tv-net') netChart.applyOptions({{width, height}});
-                    if(entry.target.id === 'sidebar-chart') volChart.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-raw', 'tv-net', 'sidebar-chart'].forEach(id => {{
+            ['tv-price', 'tv-candles', 'tv-net', 'sidebar-vol', 'sidebar-density'].forEach(id => {{
                 new ResizeObserver(e => {{
                      const t = document.getElementById(id);
-                     if(id === 'tv-price') priceChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
-                     if(id === 'tv-raw') rawChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
-                     if(id === 'tv-net') netChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
-                     if(id === 'sidebar-chart') volChart.applyOptions({{ width: t.clientWidth, height: t.clientHeight }});
+                     // Simple check to ensure chart fits container
+                     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));
             }});
 
@@ -462,6 +494,7 @@ HTML_PAGE = f"""
                     const data = JSON.parse(e.data);
                     if (data.error) return;
 
+                    // MAIN LINE & TEXT
                     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()];
@@ -484,52 +517,55 @@ HTML_PAGE = f"""
                             
                             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)");
                         }}
                     }}
 
+                    // CANDLES
+                    if (data.ohlc && data.ohlc.length) {{
+                        // Map backend format to LW Charts
+                        const candles = data.ohlc.map(c => ({{
+                            time: c.time,
+                            open: c.open,
+                            high: c.high,
+                            low: c.low,
+                            close: c.close
+                        }}));
+                        // De-dupe by time
+                        const uniqueCandles = [...new Map(candles.map(i => [i.time, i])).values()];
+                        candleSeries.setData(uniqueCandles);
+                    }}
+
                     // WALLS
                     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>`;
+                            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>';
                     }}
 
-                    // VOLUME CHART IN SIDEBAR
+                    // SIDEBAR: VOL
                     if (data.trade_history && data.trade_history.length) {{
-                        const buyData = [];
-                        const sellData = [];
+                        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 }});
                         }});
-                        // Ensure unique time points for LW Charts
-                        const uniqueBuys = [...new Map(buyData.map(i => [i.time, i])).values()];
-                        const uniqueSells = [...new Map(sellData.map(i => [i.time, i])).values()];
-                        
-                        volBuySeries.setData(uniqueBuys);
-                        volSellSeries.setData(uniqueSells);
+                        volBuySeries.setData([...new Map(buyData.map(i => [i.time, i])).values()]);
+                        volSellSeries.setData([...new Map(sellData.map(i => [i.time, i])).values()]);
                     }}
 
-                    // DEPTH
+                    // SIDEBAR: DENSITY (Moved)
                     if (data.depth_x.length) {{
                         const bids = [], asks = [], nets = [];
                         for(let i=0; i<data.depth_x.length; i++) {{
@@ -543,7 +579,6 @@ HTML_PAGE = f"""
                         netSeries.setData(nets);
                     }}
                 }};
-                
                 ws.onclose = () => setTimeout(connect, 2000);
             }}
             connect();
@@ -561,7 +596,6 @@ async def kraken_worker():
             async with websockets.connect("wss://ws.kraken.com/v2") as ws:
                 logging.info(f"🔌 Connected to Kraken ({SYMBOL_KRAKEN})")
                 
-                # SUBSCRIBE TO BOOK AND TRADES
                 await ws.send(json.dumps({
                     "method": "subscribe",
                     "params": {"channel": "book", "symbol": [SYMBOL_KRAKEN], "depth": 500}
@@ -570,6 +604,11 @@ async def kraken_worker():
                     "method": "subscribe",
                     "params": {"channel": "trade", "symbol": [SYMBOL_KRAKEN]}
                 }))
+                # OHLC Interval 1 minute
+                await ws.send(json.dumps({
+                    "method": "subscribe",
+                    "params": {"channel": "ohlc", "symbol": [SYMBOL_KRAKEN], "interval": 1}
+                }))
 
                 async for message in ws:
                     payload = json.loads(message)
@@ -602,18 +641,36 @@ async def kraken_worker():
                                     market_state['history'].pop(0)
                     
                     elif channel == "trade":
-                        # Process trades for volume history
                         for trade in data:
-                            # Kraken Trade format: [price, qty, time, side, order_type, misc]
-                            # side: 'buy' or 'sell'
                             try:
                                 qty = float(trade['qty'])
-                                side = trade['side'] # 'buy' or 'sell'
-                                if side == 'buy':
-                                    market_state['current_vol_window']['buy'] += qty
+                                side = trade['side']
+                                if side == 'buy': market_state['current_vol_window']['buy'] += qty
+                                else: market_state['current_vol_window']['sell'] += qty
+                            except: pass
+
+                    elif channel == "ohlc":
+                        # Kraken v2 OHLC data format:
+                        # [{"time": "...", "open": "...", "high": "...", "low": "...", "close": "...", ...}]
+                        for candle in data:
+                            try:
+                                c_data = {
+                                    # Kraken sends end time as timestamp, we use it for chart
+                                    'time': int(float(candle['endtime'])), 
+                                    'open': float(candle['open']),
+                                    'high': float(candle['high']),
+                                    'low': float(candle['low']),
+                                    'close': float(candle['close'])
+                                }
+                                # Update or Append
+                                # If last candle has same time, replace it, else append
+                                if market_state['ohlc_history'] and market_state['ohlc_history'][-1]['time'] == c_data['time']:
+                                    market_state['ohlc_history'][-1] = c_data
                                 else:
-                                    market_state['current_vol_window']['sell'] += qty
-                            except:
+                                    market_state['ohlc_history'].append(c_data)
+                                    if len(market_state['ohlc_history']) > 100:
+                                        market_state['ohlc_history'].pop(0)
+                            except Exception as e:
                                 pass
 
         except Exception as e:
@@ -634,10 +691,8 @@ async def websocket_handler(request):
     ws = web.WebSocketResponse()
     await ws.prepare(request)
     connected_clients.add(ws)
-    try:
-        async for msg in ws: pass
-    finally:
-        connected_clients.remove(ws)
+    try: async for msg in ws: pass
+    finally: connected_clients.remove(ws)
     return ws
 
 async def handle_index(request):