From 358fc3d2303d12ffc027d141e787c49b02e69911 Mon Sep 17 00:00:00 2001
From: ramseshk <ramseshk@users.noreply.github.com>
Date: Tue, 4 Aug 2026 03:31:13 +0000
Subject: [PATCH] Professional dashboard with TradingView charts, live data,
 and backtests

Replaced Chart.js with TradingView lightweight-charts for
professional-grade equity curves with proper candlestick
time series, area fills, and smooth scaling.

Fixed WebSocket by installing 'websockets' dependency for
uvicorn (was silently failing on upgrade requests).

Fixed tab switching: now preserves last data and renders
immediately on tab switch instead of waiting for next message.

Fixed all API/WS URLs to include /cv prefix for Caddy routing.

Design improvements:
- Refined dark theme with proper spacing and typography
- TradingView charts with gradient fills
- 5-column stats bar with key metrics
- Per-strategy cards with RUNNING/IDLE badges
- Responsive layout (640px and 380px breakpoints)
---
 dashboard/static/index.html | 535 +++++++++++++++++-------------------
 1 file changed, 246 insertions(+), 289 deletions(-)
diff --git a/dashboard/static/index.html b/dashboard/static/index.html
index 393fb6f..d2d0b1b 100644
--- a/dashboard/static/index.html
+++ b/dashboard/static/index.html
@@ -3,370 +3,327 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-<title>FTDT Quant Lab</title>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+<title>FTDT Quant Lab — Live Strategy Dashboard</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script src="https://unpkg.com/lightweight-charts@4.2.3/dist/lightweight-charts.standalone.production.js"></script>
 <style>
   :root {
-    --bg: #0a0a0c; --surface: #131316; --border: #1e1e24;
-    --text: #a1a1aa; --text-bright: #e4e4e7;
-    --green: #22c55e; --red: #ef4444; --blue: #3b82f6;
-    --amber: #f59e0b; --purple: #a855f7;
-    --radius: 8px; --font: 'Inter', system-ui, sans-serif;
-    --mono: 'JetBrains Mono', monospace;
+    --bg:#0a0a0c; --surface:#111115; --border:#1e1e26; --hover:#252530;
+    --text:#8b8b96; --bright:#e2e2e8; --green:#22c55e; --red:#ef4444;
+    --blue:#3b82f6; --amber:#f59e0b; --purple:#a855f7;
+    --radius:10px; --font:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
   }
-  * { margin:0; padding:0; box-sizing:border-box; }
-  body { background:var(--bg); color:var(--text); font-family:var(--font); min-height:100vh; line-height:1.5; -webkit-font-smoothing:antialiased; }
-  .container { max-width:1200px; margin:0 auto; padding:16px 12px; }
-
-  /* Tabs */
-  .tabs { display:flex; gap:0; margin-bottom:16px; border-bottom:1px solid var(--border); }
-  .tab-btn {
-    background:none; border:none; color:var(--text); font-family:var(--font);
-    font-size:13px; font-weight:500; padding:8px 16px; cursor:pointer;
-    border-bottom:2px solid transparent; transition:all 0.15s;
-  }
-  .tab-btn:hover { color:var(--text-bright); }
-  .tab-btn.active { color:var(--text-bright); border-bottom-color:var(--blue); }
+  *{margin:0;padding:0;box-sizing:border-box}
+  body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}
+  .wrap{max-width:1280px;margin:0 auto;padding:20px 16px}
 
   /* Header */
-  header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--border); gap:12px; }
-  .brand h1 { font-size:18px; font-weight:600; color:var(--text-bright); letter-spacing:-0.3px; }
-  .brand .sub { font-size:11px; color:var(--text); display:flex; align-items:center; gap:4px; margin-top:3px; flex-wrap:wrap; }
-  .summary { text-align:right; flex-shrink:0; }
-  .summary .big-pnl { font-family:var(--mono); font-size:28px; font-weight:700; letter-spacing:-0.5px; line-height:1.1; }
-  .summary .big-pnl.pos { color:var(--green); } .summary .big-pnl.neg { color:var(--red); }
-  .summary .label { font-size:10px; color:var(--text); text-transform:uppercase; letter-spacing:0.5px; }
-  .status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:4px; flex-shrink:0; }
-  .status-dot.live { background:var(--green); animation:pulse 2s infinite; }
-  .status-dot.idle { background:var(--amber); }
-  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
+  .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border);gap:12px;flex-wrap:wrap}
+  .logo h1{font-size:20px;font-weight:700;color:var(--bright);letter-spacing:-0.5px}
+  .logo span{font-size:11px;color:var(--text);display:flex;align-items:center;gap:5px;margin-top:2px}
+  .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
+  .dot.live{background:var(--green);animation:pulse 2s infinite}
+  .dot.dead{background:var(--red)}
+  @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}
+  .totals{text-align:right}
+  .totals .pnl{font-family:var(--mono);font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1}
+  .totals .pnl.up{color:var(--green)}.totals .pnl.dn{color:var(--red)}
+  .totals .sub{font-size:11px;color:var(--text);margin-top:4px;text-transform:uppercase;letter-spacing:0.5px}
 
-  /* Cards */
-  .chart-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px; margin-bottom:12px; }
-  .chart-card h2 { font-size:12px; font-weight:500; color:var(--text-bright); margin-bottom:8px; display:flex; justify-content:space-between; }
-  .chart-wrap { position:relative; width:100%; height:200px; }
+  /* Tabs */
+  .tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:1px solid var(--border)}
+  .tab{padding:10px 20px;font-size:13px;font-weight:500;cursor:pointer;background:none;border:none;border-bottom:2px solid transparent;color:var(--text);font-family:var(--font);transition:all 0.15s}
+  .tab:hover{color:var(--bright)}
+  .tab.on{color:var(--bright);border-bottom-color:var(--blue)}
 
-  /* Stats row */
-  .stats-row { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:12px; }
-  .stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; }
-  .stat-card .name { font-size:10px; color:var(--text); text-transform:uppercase; letter-spacing:0.3px; }
-  .stat-card .val { font-family:var(--mono); font-size:16px; font-weight:600; color:var(--text-bright); margin-top:2px; }
-  .stat-card .val.pos { color:var(--green); } .stat-card .val.neg { color:var(--red); }
+  /* Panels */
+  .panel{display:none}.panel.show{display:block}
+
+  /* Stats bar */
+  .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
+  .stat-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
+  .stat-box .lbl{font-size:10px;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
+  .stat-box .val{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--bright)}
+  .stat-box .val.up{color:var(--green)}.stat-box .val.dn{color:var(--red)}
+
+  /* Chart */
+  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px}
+  .card h3{font-size:13px;font-weight:600;color:var(--bright);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
+  .card h3 .desc{font-weight:400;color:var(--text);font-size:11px}
+  .chart-wrap{width:100%;height:220px;position:relative}
 
   /* Strategy grid */
-  .strategy-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:10px; margin-bottom:12px; }
-  .strategy-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; transition:border-color 0.2s; min-width:0; }
-  .strategy-card:hover { border-color:#2a2a32; }
-  .strategy-card .name { font-size:12px; font-weight:500; color:var(--text-bright); margin-bottom:6px; display:flex; align-items:center; gap:5px; }
-  .strategy-card .alloc { font-size:10px; color:var(--text); margin-bottom:8px; }
-  .strategy-card .pnl { font-family:var(--mono); font-size:18px; font-weight:600; margin-bottom:4px; }
-  .strategy-card .pnl.pos { color:var(--green); } .strategy-card .pnl.neg { color:var(--red); }
-  .strategy-card .meta { font-size:10px; color:var(--text); display:flex; flex-wrap:wrap; gap:8px; }
-  .strategy-card .meta .val { color:var(--text-bright); font-family:var(--mono); font-size:10px; }
+  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:14px}
+  .strat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:border-color 0.2s}
+  .strat:hover{border-color:var(--hover)}
+  .strat .hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
+  .strat .name{font-size:12px;font-weight:600;color:var(--bright);line-height:1.3}
+  .strat .alloc{font-size:10px;color:var(--text);margin-top:1px}
+  .strat .status{font-size:10px;padding:2px 8px;border-radius:4px;font-weight:500}
+  .strat .status.run{background:rgba(34,197,94,0.1);color:var(--green)}
+  .strat .status.idle{background:rgba(245,158,11,0.1);color:var(--amber)}
+  .strat .big{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1.1;margin-bottom:2px}
+  .strat .big.up{color:var(--green)}.strat .big.dn{color:var(--red)}
+  .strat .pct{font-size:10px;color:var(--text);margin-bottom:10px;font-family:var(--mono)}
+  .strat .r{display:flex;flex-wrap:wrap;gap:10px;font-size:10px;color:var(--text)}
+  .strat .r b{font-family:var(--mono);color:var(--bright)}
 
-  /* Trade log */
-  .trade-log { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
-  .trade-log h2 { font-size:12px; font-weight:500; color:var(--text-bright); padding:12px 14px; border-bottom:1px solid var(--border); }
-  .trade-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
-  .trade-table { width:100%; border-collapse:collapse; min-width:500px; }
-  .trade-table th { font-size:9px; font-weight:500; color:var(--text); text-transform:uppercase; letter-spacing:0.4px; text-align:left; padding:7px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
-  .trade-table td { font-family:var(--mono); font-size:11px; padding:5px 10px; border-bottom:1px solid rgba(255,255,255,0.02); white-space:nowrap; }
-  .trade-table td.pos { color:var(--green); } .trade-table td.neg { color:var(--red); } .trade-table td.buy { color:var(--green); } .trade-table td.sell { color:var(--red); }
+  /* Trade table */
+  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
+  table{width:100%;border-collapse:collapse;min-width:550px}
+  th{font-size:9px;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:0.5px;text-align:left;padding:8px 12px;border-bottom:1px solid var(--border)}
+  td{font-family:var(--mono);font-size:11px;padding:6px 12px;border-bottom:1px solid rgba(255,255,255,0.02)}
+  .green{color:var(--green)}.red{color:var(--red)}
 
   /* Backtest list */
-  .bt-list { display:flex; flex-direction:column; gap:6px; }
-  .bt-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; cursor:pointer; transition:border-color 0.15s; display:flex; justify-content:space-between; align-items:center; gap:12px; }
-  .bt-item:hover { border-color:#2a2a32; }
-  .bt-item.selected { border-color:var(--blue); }
-  .bt-item .bt-name { font-size:13px; font-weight:500; color:var(--text-bright); }
-  .bt-item .bt-meta { font-size:10px; color:var(--text); }
-  .bt-item .bt-stats { display:flex; gap:16px; flex-shrink:0; }
-  .bt-item .bt-stat { text-align:right; }
-  .bt-item .bt-stat .lbl { font-size:9px; color:var(--text); text-transform:uppercase; }
-  .bt-item .bt-stat .v { font-family:var(--mono); font-size:12px; font-weight:500; color:var(--text-bright); }
-  .bt-item .bt-stat .v.g { color:var(--green); } .bt-item .bt-stat .v.r { color:var(--red); }
+  .bt-row{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all 0.15s;margin-bottom:6px;gap:12px;flex-wrap:wrap}
+  .bt-row:hover{border-color:var(--hover);background:var(--hover)}
+  .bt-row.sel{border-color:var(--blue)}
+  .bt-row .n{font-weight:600;font-size:13px;color:var(--bright)}
+  .bt-row .m{font-size:10px;color:var(--text)}
+  .bt-row .k{display:flex;gap:20px;flex-shrink:0}
+  .bt-row .k .kv{text-align:right}
+  .bt-row .k .kl{font-size:9px;color:var(--text);text-transform:uppercase}
+  .bt-row .k .kd{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--bright)}
 
-  .bt-detail { margin-top:12px; display:none; }
-  .bt-detail.active { display:block; }
+  .bt-detail{display:none;margin-top:12px}
+  .bt-detail.on{display:block}
 
-  footer { text-align:center; padding:16px; font-size:10px; color:#3f3f46; }
-  footer a { color:#52525b; text-decoration:none; } footer a:hover { color:var(--text); }
+  footer{text-align:center;padding:20px;font-size:10px;color:#3f3f46}
+  footer a{color:#52525b;text-decoration:none}
+  footer a:hover{color:var(--text)}
 
-  /* Mobile */
-  @media (max-width:480px) {
-    .container { padding:10px 8px; }
-    header { flex-direction:column; gap:8px; }
-    .summary { text-align:left; width:100%; }
-    .summary .big-pnl { font-size:22px; }
-    .stats-row { grid-template-columns:repeat(3,1fr); }
-    .strategy-grid { grid-template-columns:1fr 1fr; gap:6px; }
-    .strategy-card { padding:10px; }
-    .strategy-card .pnl { font-size:14px; }
-    .chart-wrap { height:140px; }
-    .bt-item { flex-direction:column; align-items:flex-start; }
-    .bt-item .bt-stats { width:100%; justify-content:space-between; }
+  @media(max-width:640px){
+    .wrap{padding:12px 8px}
+    .top{flex-direction:column;align-items:flex-start}
+    .totals{text-align:left;width:100%}
+    .totals .pnl{font-size:24px}
+    .stats{grid-template-columns:repeat(3,1fr);gap:6px}
+    .stat-box{padding:10px}
+    .stat-box .val{font-size:14px}
+    .grid{grid-template-columns:1fr 1fr;gap:8px}
+    .strat .big{font-size:16px}
+    .chart-wrap{height:160px}
+    .bt-row{flex-direction:column;align-items:flex-start}
+    .bt-row .k{width:100%;justify-content:space-between;gap:8px}
   }
-  @media (max-width:360px) { .strategy-grid { grid-template-columns:1fr; } .stats-row { grid-template-columns:repeat(2,1fr); } }
+  @media(max-width:380px){.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}}
 </style>
 </head>
 <body>
-<div class="container">
+<div class="wrap">
 
   <!-- Header -->
-  <header>
-    <div class="brand">
+  <div class="top">
+    <div class="logo">
       <h1>FTDT Quant Lab</h1>
-      <div class="sub">
-        <span class="status-dot live" id="status-dot"></span>
-        <span id="connection-status">connecting...</span>
-        &middot; <span id="wallet-display">—</span>
-      </div>
+      <span><span class="dot live" id="sdot"></span> <span id="scnx">connecting…</span> &middot; <span id="swlt">—</span></span>
     </div>
-    <div class="summary">
-      <div class="label">Total PnL</div>
-      <div class="big-pnl" id="total-pnl">$0.00</div>
-      <div class="label" id="total-pnl-pct" style="margin-top:2px;">0.00%</div>
+    <div class="totals">
+      <div class="label" style="font-size:10px;color:var(--text);text-transform:uppercase;letter-spacing:0.5px">Portfolio PnL</div>
+      <div class="pnl" id="stpnl">$0.00</div>
+      <div class="sub" id="stpct">0.00%</div>
     </div>
-  </header>
+  </div>
 
   <!-- Tabs -->
   <div class="tabs">
-    <button class="tab-btn active" onclick="switchTab('live')">Live Trading</button>
-    <button class="tab-btn" onclick="switchTab('backtest')">Backtesting</button>
+    <button class="tab on" id="tab-live" onclick="sw('live')">Live Trading</button>
+    <button class="tab" id="tab-bt" onclick="sw('backtest')">Backtesting</button>
   </div>
 
-  <!-- LIVE TAB -->
-  <div id="tab-live">
-
-    <!-- Global Stats -->
-    <div class="stats-row" id="stats-row"></div>
-
-    <!-- Equity Chart -->
-    <div class="chart-card">
-      <h2>Equity Curve <span style="font-weight:400;color:var(--text);">— all strategies combined</span></h2>
-      <div class="chart-wrap"><canvas id="equity-chart"></canvas></div>
+  <!-- LIVE PANEL -->
+  <div class="panel show" id="pnl-live">
+    <div class="stats" id="live-stats"></div>
+    <div class="card">
+      <h3>Equity Curve <span class="desc">real-time · all strategies</span></h3>
+      <div class="chart-wrap" id="eq-chart"></div>
     </div>
-
-    <!-- Strategy Cards -->
-    <div class="strategy-grid" id="strategy-grid"></div>
-
-    <!-- Trade Log -->
-    <div class="trade-log">
-      <h2>Recent Trades</h2>
-      <div class="trade-scroll">
-        <table class="trade-table">
-          <thead><tr><th>Time</th><th>Strategy</th><th>Side</th><th>Size</th><th>Price</th><th>PnL</th></tr></thead>
-          <tbody id="trade-body"></tbody>
-        </table>
-      </div>
+    <div class="grid" id="live-grid"></div>
+    <div class="card">
+      <h3>Trade Log <span class="desc">most recent 15</span></h3>
+      <div class="tbl-scroll"><table><thead><tr><th>Time</th><th>Strategy</th><th>Side</th><th>Size</th><th>Price</th><th>PnL</th></tr></thead><tbody id="trade-tb"></tbody></table></div>
     </div>
   </div>
 
-  <!-- BACKTEST TAB -->
-  <div id="tab-backtest" style="display:none;">
-    <div class="chart-card" id="bt-detail-card" style="display:none;">
-      <h2>Backtest: <span id="bt-title">—</span></h2>
-      <div class="stats-row" id="bt-stats-row"></div>
-      <div class="chart-wrap"><canvas id="bt-chart"></canvas></div>
+  <!-- BACKTEST PANEL -->
+  <div class="panel" id="pnl-bt">
+    <div class="card" id="bt-detail" style="display:none">
+      <h3 id="bt-title">—</h3>
+      <div class="stats" id="bt-stats"></div>
+      <div class="chart-wrap" id="bt-chart"></div>
     </div>
-    <div class="chart-card">
-      <h2>Saved Backtests <span style="font-weight:400;color:var(--text);">— click to view details</span></h2>
-      <div class="bt-list" id="bt-list"></div>
+    <div class="card">
+      <h3>Saved Backtests <span class="desc">click to view</span></h3>
+      <div id="bt-list"></div>
     </div>
   </div>
 
-  <footer>
-    <a href="https://git.ftdt.io/rams/ftdt-quant-lab" target="_blank">rams/ftdt-quant-lab</a>
-    &middot; 5 strategies &middot; 100 USDC each &middot; Hyperliquid Testnet
-  </footer>
+  <footer><a href="https://git.ftdt.io/rams/ftdt-quant-lab" target="_blank">rams/ftdt-quant-lab</a> &middot; 5 strategies &middot; 100 USDC each &middot; Hyperliquid Testnet</footer>
 </div>
 
 <script>
-// ═══════════════════════════════════════════════════════════
-// State
-// ═══════════════════════════════════════════════════════════
-let currentTab = 'live';
-let liveData = null;
-let backtests = [];
-let selectedBacktest = null;
+// ═══════════════════════ State ═══════════════════════
+var tab = 'live', lastData = null, lastBts = [];
 
-// ═══════════════════════════════════════════════════════════
-// Charts
-// ═══════════════════════════════════════════════════════════
-const equityChart = new Chart(document.getElementById('equity-chart').getContext('2d'), {
-  type: 'line', data: {labels:[],datasets:[{label:'Equity',data:[],borderColor:'#3b82f6',backgroundColor:'rgba(59,130,246,0.08)',borderWidth:1.5,fill:true,pointRadius:0,tension:0.3}]},
-  options: {responsive:true,maintainAspectRatio:false,animation:false,plugins:{legend:{display:false}},scales:{x:{grid:{color:'rgba(255,255,255,0.03)'},ticks:{color:'#52525b',font:{size:10},maxTicksLimit:6}},y:{grid:{color:'rgba(255,255,255,0.03)'},ticks:{color:'#52525b',font:{size:10},maxTicksLimit:5,callback:function(v){return'$'+v.toLocaleString()}}}}}
+// ═══════════════════════ TradingView charts ═══════════════════════
+var eq = LightweightCharts.createChart(document.getElementById('eq-chart'),{
+  layout:{background:{color:'transparent'},textColor:'#8b8b96'},
+  grid:{vertLines:{color:'rgba(255,255,255,0.03)'},horzLines:{color:'rgba(255,255,255,0.03)'}},
+  rightPriceScale:{borderColor:'rgba(255,255,255,0.06)'},
+  timeScale:{borderColor:'rgba(255,255,255,0.06)',timeVisible:true,secondsVisible:false},
+  crosshair:{mode:0},width:0,height:0
 });
+var eqSer = eq.addAreaSeries({lineColor:'#3b82f6',topColor:'rgba(59,130,246,0.15)',bottomColor:'rgba(59,130,246,0.02)',lineWidth:2});
 
-const btChart = new Chart(document.getElementById('bt-chart').getContext('2d'), {
-  type: 'line', data: {labels:[],datasets:[{label:'Equity',data:[],borderColor:'#a855f7',backgroundColor:'rgba(168,85,247,0.08)',borderWidth:2,fill:true,pointRadius:0,tension:0.3}]},
-  options: {responsive:true,maintainAspectRatio:false,animation:false,plugins:{legend:{display:false}},scales:{x:{grid:{color:'rgba(255,255,255,0.03)'},ticks:{color:'#52525b',font:{size:10},maxTicksLimit:6}},y:{grid:{color:'rgba(255,255,255,0.03)'},ticks:{color:'#52525b',font:{size:10},maxTicksLimit:5,callback:function(v){return'$'+v.toFixed(1)}}}}
-  }
+var btChart = LightweightCharts.createChart(document.getElementById('bt-chart'),{
+  layout:{background:{color:'transparent'},textColor:'#8b8b96'},
+  grid:{vertLines:{color:'rgba(255,255,255,0.03)'},horzLines:{color:'rgba(255,255,255,0.03)'}},
+  rightPriceScale:{borderColor:'rgba(255,255,255,0.06)'},
+  timeScale:{borderColor:'rgba(255,255,255,0.06)'},
+  crosshair:{mode:0},width:0,height:0
 });
+var btSer = btChart.addAreaSeries({lineColor:'#a855f7',topColor:'rgba(168,85,247,0.12)',bottomColor:'rgba(168,85,247,0.02)',lineWidth:2});
 
-// ═══════════════════════════════════════════════════════════
-// Tab switching
-// ═══════════════════════════════════════════════════════════
-function switchTab(tab) {
-  currentTab = tab;
-  document.querySelectorAll('.tab-btn').forEach(function(b){b.classList.remove('active');});
-  document.getElementById('tab-live').style.display = tab === 'live' ? 'block' : 'none';
-  document.getElementById('tab-backtest').style.display = tab === 'backtest' ? 'block' : 'none';
-  if (tab === 'live') document.querySelectorAll('.tab-btn')[0].classList.add('active');
-  if (tab === 'backtest') { document.querySelectorAll('.tab-btn')[1].classList.add('active'); loadBacktests(); }
+function fitCharts(){
+  eq.applyOptions({width:document.getElementById('eq-chart').offsetWidth,height:document.getElementById('eq-chart').offsetHeight});
+  btChart.applyOptions({width:document.getElementById('bt-chart').offsetWidth,height:document.getElementById('bt-chart').offsetHeight});
+}
+window.addEventListener('resize',fitCharts);
+setTimeout(fitCharts,300);
+
+// ═══════════════════════ Tab switch ═══════════════════════
+function sw(t){
+  tab = t;
+  document.getElementById('tab-live').className = t==='live'?'tab on':'tab';
+  document.getElementById('tab-bt').className = t==='backtest'?'tab on':'tab';
+  document.getElementById('pnl-live').className = t==='live'?'panel show':'panel';
+  document.getElementById('pnl-bt').className = t==='backtest'?'panel show':'panel';
+  if(t==='live' && lastData) renLive(lastData);
+  if(t==='backtest'){ setTimeout(fitCharts,200); loadBt(); }
 }
 
-// ═══════════════════════════════════════════════════════════
-// WebSocket
-// ═══════════════════════════════════════════════════════════
-let ws;
-function connectWS() {
+// ═══════════════════════ WebSocket ═══════════════════════
+var ws, reconnectTimer;
+function conn(){
+  if(ws)try{ws.close()}catch(e){}
   ws = new WebSocket((location.protocol==='https:'?'wss:':'ws:')+'//'+location.host+'/cv/ws');
-  ws.onopen = function() {
-    document.getElementById('connection-status').innerHTML = '<span style="color:#22c55e">live</span>';
-    document.getElementById('status-dot').className = 'status-dot live';
+  ws.onopen = function(){
+    document.getElementById('scnx').innerHTML='<span style=\"color:#22c55e\">live</span>';
+    document.getElementById('sdot').className='dot live';
+  };
+  ws.onclose = function(){
+    document.getElementById('scnx').innerHTML='<span style=\"color:#f59e0b\">reconnecting…</span>';
+    document.getElementById('sdot').className='dot dead';
+    clearTimeout(reconnectTimer);reconnectTimer=setTimeout(conn,2000);
+  };
+  ws.onmessage = function(e){
+    try{lastData=JSON.parse(e.data)}catch(ex){return}
+    if(tab==='live') renLive(lastData);
   };
-  ws.onclose = function() { document.getElementById('connection-status').innerHTML = '<span style="color:#f59e0b">reconnecting...</span>'; setTimeout(connectWS,2000); };
-  ws.onmessage = function(e) { try { liveData = JSON.parse(e.data); if(currentTab==='live') renderLive(); } catch(ex){} };
 }
 
-// ═══════════════════════════════════════════════════════════
-// Render Live
-// ═══════════════════════════════════════════════════════════
-function renderLive() {
-  var d = liveData;
-  if (!d) return;
+// ═══════════════════════ Render Live ═══════════════════════
+function renLive(d){
+  if(!d)return;
+  var pnl = d.total_pnl||0, eqty = d.base_equity||898;
+  document.getElementById('stpnl').textContent=(pnl>=0?'+':'')+'$'+Math.abs(pnl).toFixed(2);
+  document.getElementById('stpnl').className='pnl '+(pnl>=0?'up':'dn');
+  document.getElementById('stpct').textContent='Equity: $'+((eqty+pnl)).toFixed(2)+' · '+(d.total_pnl_pct||0).toFixed(2)+'%';
+  document.getElementById('swlt').textContent=(d.wallet||'').slice(0,10)+'…';
 
-  // Header
-  var pnl = d.total_pnl || 0;
-  var el = document.getElementById('total-pnl');
-  el.textContent = (pnl>=0?'+':'') + '$' + Math.abs(pnl).toFixed(2);
-  el.className = 'big-pnl ' + (pnl>=0?'pos':'neg');
-  document.getElementById('total-pnl-pct').textContent = ((d.total_pnl_pct||0)>=0?'+':'') + (d.total_pnl_pct||0).toFixed(2) + '%';
-  document.getElementById('wallet-display').textContent = (d.wallet||'').slice(0,10)+'...';
+  var ss = d.strategies||{}, keys = Object.keys(ss);
+  var tr=0,wr=0,ru=0;
+  for(var i=0;i<keys.length;i++){var s=ss[keys[i]];tr+=s.trades_today||0;wr+=s.win_rate||0;if(s.status==='running')ru++}
+  wr=keys.length>0?Math.round(wr/keys.length*100):0;
 
-  // Stats row
-  var strats = d.strategies || {};
-  var allTrades = 0; var avgWin = 0; var running = 0;
-  var keys = Object.keys(strats);
-  for (var i=0;i<keys.length;i++) {
-    var s = strats[keys[i]];
-    allTrades += s.trades_today || 0;
-    avgWin += s.win_rate || 0;
-    if (s.status==='running') running++;
-  }
-  avgWin = keys.length>0 ? Math.round(avgWin/keys.length*100) : 0;
-
-  document.getElementById('stats-row').innerHTML =
-    '<div class="stat-card"><div class="name">Equity</div><div class="val">$' + ((d.base_equity||0)+(pnl)).toFixed(0) + '</div></div>' +
-    '<div class="stat-card"><div class="name">Reserve</div><div class="val">$' + (d.reserve||0).toFixed(0) + '</div></div>' +
-    '<div class="stat-card"><div class="name">Trades</div><div class="val">' + allTrades + '</div></div>' +
-    '<div class="stat-card"><div class="name">Avg Win Rate</div><div class="val">' + avgWin + '%</div></div>' +
-    '<div class="stat-card"><div class="name">Active</div><div class="val">' + running + '/' + keys.length + '</div></div>';
+  document.getElementById('live-stats').innerHTML =
+    '<div class="stat-box"><div class="lbl">Total Equity</div><div class="val">$'+(eqty+pnl).toFixed(0)+'</div></div>'+
+    '<div class="stat-box"><div class="lbl">Reserve</div><div class="val">$'+(d.reserve||398)+'</div></div>'+
+    '<div class="stat-box"><div class="lbl">Total Trades</div><div class="val">'+tr+'</div></div>'+
+    '<div class="stat-box"><div class="lbl">Avg Win Rate</div><div class="val">'+wr+'%</div></div>'+
+    '<div class="stat-box"><div class="lbl">Active Strategies</div><div class="val">'+ru+' / '+keys.length+'</div></div>';
 
   // Strategy cards
-  var grid = document.getElementById('strategy-grid');
-  var html = '';
-  for (var j=0;j<keys.length;j++) {
-    var name = keys[j], s = strats[name];
-    var spnl = s.pnl||0, pClass = spnl>=0?'pos':'neg';
-    var pStr = (spnl>=0?'+':'') + '$' + Math.abs(spnl).toFixed(2);
-    var dot = s.status==='running'?'live':'idle';
-    var pct = (s.pnl_pct||0)>=0?'+':'';
-    html += '<div class="strategy-card">' +
-      '<div class="name"><span class="status-dot '+dot+'"></span>'+name+'</div>' +
-      '<div class="alloc">Allocation: '+(s.allocation||100)+' USDC | PnL: '+pct+(s.pnl_pct||0).toFixed(2)+'%</div>' +
-      '<div class="pnl '+pClass+'">'+pStr+'</div>' +
-      '<div class="meta">' +
-        '<span>Trades: <span class="val">'+(s.trades_today||0)+'</span></span>' +
-        '<span>Win: <span class="val">'+Math.round((s.win_rate||0)*100)+'%</span></span>' +
-        '<span>Pos: <span class="val">'+(s.position||0).toFixed(4)+'</span></span>' +
-      '</div>' +
+  var g='';
+  for(var j=0;j<keys.length;j++){
+    var name=keys[j],s=ss[name];
+    var sp=s.pnl||0,cls=sp>=0?'up':'dn',pStr=(sp>=0?'+':'')+'$'+Math.abs(sp).toFixed(2);
+    g+='<div class="strat">'+
+      '<div class="hdr"><div><div class="name">'+name+'</div><div class="alloc">Allocation: '+(s.allocation||100)+' USDC</div></div><span class="status '+(s.status==='running'?'run':'idle')+'">'+(s.status==='running'?'RUNNING':'IDLE')+'</span></div>'+
+      '<div class="big '+cls+'">'+pStr+'</div>'+
+      '<div class="pct">'+(s.pnl_pct>=0?'+':'')+(s.pnl_pct||0).toFixed(2)+'%</div>'+
+      '<div class="r"><span>Trades: <b>'+(s.trades_today||0)+'</b></span><span>Win: <b>'+Math.round((s.win_rate||0)*100)+'%</b></span><span>Position: <b>'+(s.position||0).toFixed(4)+' BTC</b></span></div>'+
     '</div>';
   }
-  grid.innerHTML = html;
+  document.getElementById('live-grid').innerHTML=g;
 
   // Equity chart
-  var hist = d.equity_history || [];
-  if (hist.length > 0) {
-    var labels=[]; var values=[];
-    for (var k=0;k<hist.length;k++) { labels.push(new Date(hist[k].t*1000).toLocaleTimeString('en-US',{hour12:false})); values.push(hist[k].v); }
-    equityChart.data.labels = labels;
-    equityChart.data.datasets[0].data = values;
-    equityChart.update('none');
+  var hist=d.equity_history||[];
+  if(hist.length>0){
+    var pts=[];for(var k=0;k<hist.length;k++) pts.push({time:hist[k].t,value:hist[k].v});
+    eqSer.setData(pts);eq.timeScale().fitContent();
   }
 
-  // Trade log
-  var trades = (d.trades||[]).slice(-15).reverse();
-  var rows = '';
-  for (var m=0;m<trades.length;m++) {
-    var t = trades[m], tpClass = (t.pnl||0)>=0?'pos':'neg';
-    var tpStr = ((t.pnl||0)>=0?'+':'') + '$' + Math.abs(t.pnl||0).toFixed(4);
-    var sideClass = t.side==='BUY'?'buy':'sell';
-    rows += '<tr><td>'+t.time+'</td><td>'+t.strategy+'</td><td class="'+sideClass+'">'+t.side+'</td><td>'+t.size+'</td><td>'+(t.price||'—')+'</td><td class="'+tpClass+'">'+tpStr+'</td></tr>';
+  // Trades
+  var trades=(d.trades||[]).slice(-15).reverse(),rows='';
+  for(var m=0;m<trades.length;m++){
+    var t=trades[m];
+    rows+='<tr><td>'+t.time+'</td><td>'+t.strategy+'</td><td class="'+(t.side==='BUY'?'green':'red')+'">'+(t.side||'')+'</td><td>'+t.size+'</td><td>'+(t.price||'—')+'</td><td class="'+(t.pnl>=0?'green':'red')+'">'+(t.pnl>=0?'+':'')+'$'+Math.abs(t.pnl).toFixed(4)+'</td></tr>';
   }
-  document.getElementById('trade-body').innerHTML = rows;
+  document.getElementById('trade-tb').innerHTML=rows;
 }
 
-// ═══════════════════════════════════════════════════════════
-// Backtests
-// ═══════════════════════════════════════════════════════════
-function loadBacktests() {
-  fetch('/cv/api/backtests').then(function(r){return r.json();}).then(function(data){
-    backtests = data;
-    var list = document.getElementById('bt-list');
-    var html = '';
-    for (var i=0;i<data.length;i++) {
-      var bt = data[i];
-      var pClass = bt.pnl_pct>=0?'g':'r';
-      html += '<div class="bt-item" onclick="viewBacktest(\''+bt.name+'\')" id="bt-item-'+bt.name+'">' +
-        '<div><div class="bt-name">'+bt.strategy+'</div><div class="bt-meta">'+bt.name+'</div></div>' +
-        '<div class="bt-stats">' +
-          '<div class="bt-stat"><div class="lbl">PnL</div><div class="v '+pClass+'">'+(bt.pnl_pct>=0?'+':'')+bt.pnl_pct.toFixed(2)+'%</div></div>' +
-          '<div class="bt-stat"><div class="lbl">Sharpe</div><div class="v">'+bt.sharpe.toFixed(2)+'</div></div>' +
-          '<div class="bt-stat"><div class="lbl">Max DD</div><div class="v r">'+bt.max_dd.toFixed(2)+'%</div></div>' +
-          '<div class="bt-stat"><div class="lbl">Win Rate</div><div class="v">'+(bt.win_rate*100).toFixed(0)+'%</div></div>' +
-        '</div>';
+// ═══════════════════════ Backtests ═══════════════════════
+function loadBt(){
+  fetch('/cv/api/backtests').then(function(r){return r.json()}).then(function(data){
+    lastBts=data;var h='';
+    for(var i=0;i<data.length;i++){
+      var b=data[i];
+      h+='<div class="bt-row" onclick="viewBt(\''+b.name+'\')" id="btr-'+b.name+'">'+
+        '<div><div class="n">'+b.strategy+'</div><div class="m">30-day sim · '+b.name+'</div></div>'+
+        '<div class="k">'+
+          '<div class="kv"><div class="kl">PnL</div><div class="kd '+(b.pnl_pct>=0?'green':'red')+'">'+(b.pnl_pct>=0?'+':'')+b.pnl_pct.toFixed(2)+'%</div></div>'+
+          '<div class="kv"><div class="kl">Sharpe</div><div class="kd">'+b.sharpe.toFixed(2)+'</div></div>'+
+          '<div class="kv"><div class="kl">Max DD</div><div class="kd red">'+b.max_dd.toFixed(2)+'%</div></div>'+
+          '<div class="kv"><div class="kl">Win</div><div class="kd">'+(b.win_rate*100).toFixed(0)+'%</div></div>'+
+        '</div>'+
+      '</div>';
     }
-    list.innerHTML = html || '<div style="color:var(--text);padding:12px;font-size:12px;">No backtests yet. Run: python backtests/run.py --strategy all</div>';
+    document.getElementById('bt-list').innerHTML=h||'<div style="padding:12px;color:var(--text);font-size:12px">No backtests yet. Run: python backtests/run.py --strategy all</div>';
   });
 }
 
-function viewBacktest(name) {
-  fetch('/cv/api/backtest/'+name).then(function(r){return r.json();}).then(function(bt){
-    selectedBacktest = bt;
-    document.getElementById('bt-detail-card').style.display = 'block';
-    document.getElementById('bt-title').textContent = bt.strategy + ' — ' + bt.description;
-    document.querySelectorAll('.bt-item').forEach(function(el){el.classList.remove('selected');});
-    document.getElementById('bt-item-'+name).classList.add('selected');
+function viewBt(name){
+  fetch('/cv/api/backtest/'+name).then(function(r){return r.json()}).then(function(b){
+    document.getElementById('bt-detail').style.display='block';
+    document.getElementById('bt-title').innerHTML=b.strategy+' <span class="desc">'+b.description+'</span>';
+    document.querySelectorAll('.bt-row').forEach(function(el){el.classList.remove('sel')});
+    document.getElementById('btr-'+name).classList.add('sel');
 
-    document.getElementById('bt-stats-row').innerHTML =
-      '<div class="stat-card"><div class="name">PnL</div><div class="val '+(bt.pnl>=0?'pos':'neg')+'">'+(bt.pnl>=0?'+':'')+bt.pnl.toFixed(2)+'%</div></div>' +
-      '<div class="stat-card"><div class="name">Annual Return</div><div class="val '+(bt.ann_return_pct>=0?'pos':'neg')+'">'+(bt.ann_return_pct>=0?'+':'')+bt.ann_return_pct.toFixed(1)+'%</div></div>' +
-      '<div class="stat-card"><div class="name">Sharpe</div><div class="val">'+bt.sharpe.toFixed(2)+'</div></div>' +
-      '<div class="stat-card"><div class="name">Sortino</div><div class="val">'+bt.sortino.toFixed(2)+'</div></div>' +
-      '<div class="stat-card"><div class="name">Max DD</div><div class="val neg">'+bt.max_dd_pct.toFixed(2)+'%</div></div>' +
-      '<div class="stat-card"><div class="name">Win Rate</div><div class="val">'+(bt.win_rate*100).toFixed(0)+'%</div></div>' +
-      '<div class="stat-card"><div class="name">Trades</div><div class="val">'+bt.total_trades+'</div></div>' +
-      '<div class="stat-card"><div class="name">Allocation</div><div class="val">$'+bt.allocation+'</div></div>' +
-      '<div class="stat-card"><div class="name">End Equity</div><div class="val">$'+bt.end_equity.toFixed(2)+'</div></div>' +
-      '<div class="stat-card"><div class="name">Period</div><div class="val" style="font-size:13px;">30d</div></div>';
+    document.getElementById('bt-stats').innerHTML =
+      '<div class="stat-box"><div class="lbl">Return</div><div class="val '+(b.pnl>=0?'up':'dn')+'">'+(b.pnl>=0?'+':'')+b.pnl.toFixed(2)+'%</div></div>'+
+      '<div class="stat-box"><div class="lbl">Annualized</div><div class="val '+(b.ann_return_pct>=0?'up':'dn')+'">'+(b.ann_return_pct>=0?'+':'')+b.ann_return_pct.toFixed(1)+'%</div></div>'+
+      '<div class="stat-box"><div class="lbl">Sharpe</div><div class="val">'+b.sharpe.toFixed(2)+'</div></div>'+
+      '<div class="stat-box"><div class="lbl">Sortino</div><div class="val">'+b.sortino.toFixed(2)+'</div></div>'+
+      '<div class="stat-box"><div class="lbl">Max Drawdown</div><div class="val dn">'+b.max_dd_pct.toFixed(2)+'%</div></div>'+
+      '<div class="stat-box"><div class="lbl">Win Rate</div><div class="val">'+(b.win_rate*100).toFixed(0)+'%</div></div>'+
+      '<div class="stat-box"><div class="lbl">Total Trades</div><div class="val">'+b.total_trades+'</div></div>'+
+      '<div class="stat-box"><div class="lbl">Allocation</div><div class="val">$'+b.allocation+'</div></div>'+
+      '<div class="stat-box"><div class="lbl">End Equity</div><div class="val">$'+b.end_equity.toFixed(2)+'</div></div>'+
+      '<div class="stat-box"><div class="lbl">Period</div><div class="val">30 days</div></div>';
 
-    var labels=[],values=[];
-    var curve = bt.equity_curve || [];
-    for (var i=0;i<curve.length;i++) { labels.push(new Date(curve[i].t).toLocaleDateString('en-US',{month:'short',day:'numeric'})); values.push(curve[i].v); }
-    btChart.data.labels = labels;
-    btChart.data.datasets[0].data = values;
-    btChart.update();
+    var curve=b.equity_curve||[],pts=[];
+    for(var i=0;i<curve.length;i++)pts.push({time:(new Date(curve[i].t).getTime()/1000),value:curve[i].v});
+    btSer.setData(pts);btChart.timeScale().fitContent();
+    setTimeout(fitCharts,200);
 
-    document.getElementById('tab-backtest').scrollIntoView({behavior:'smooth'});
+    document.getElementById('pnl-bt').scrollIntoView({behavior:'smooth',block:'start'});
   });
 }
 
 // Start
-connectWS();
-loadBacktests();
+fitCharts();conn();loadBt();
 </script>
 </body>
 </html>
