rams/ftdt-quant-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Professional dashboard with TradingView charts, live data, and backtests

Browse Source 
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)
This commit is contained in:
ramseshk
2026-08-04 03:31:13 +00:00
parent 83c640d361
commit 358fc3d230
1 changed files with 246 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/static/index.html
+238 -281
View File
@@ -3,370 +3,327 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>FTDT Quant Lab</title> <title>FTDT Quant Lab — Live Strategy Dashboard</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"> <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://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script> <script src="https://unpkg.com/lightweight-charts@4.2.3/dist/lightweight-charts.standalone.production.js"></script>
<style> <style>
:root { :root {
--bg: #0a0a0c; --surface: #131316; --border: #1e1e24; --bg:#0a0a0c; --surface:#111115; --border:#1e1e26; --hover:#252530;
--text: #a1a1aa; --text-bright: #e4e4e7; --text:#8b8b96; --bright:#e2e2e8; --green:#22c55e; --red:#ef4444;
--green: #22c55e; --red: #ef4444; --blue: #3b82f6; --blue:#3b82f6; --amber:#f59e0b; --purple:#a855f7;
--amber: #f59e0b; --purple: #a855f7; --radius:10px; --font:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
--radius: 8px; --font: 'Inter', system-ui, sans-serif;
--mono: 'JetBrains Mono', monospace;
} }
* { margin:0; padding:0; box-sizing:border-box; } *{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; } 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; } .wrap{max-width:1280px;margin:0 auto;padding:20px 16px}
/* 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); }
/* Header */ /* 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; } .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}
.brand h1 { font-size:18px; font-weight:600; color:var(--text-bright); letter-spacing:-0.3px; } .logo h1{font-size:20px;font-weight:700;color:var(--bright);letter-spacing:-0.5px}
.brand .sub { font-size:11px; color:var(--text); display:flex; align-items:center; gap:4px; margin-top:3px; flex-wrap:wrap; } .logo span{font-size:11px;color:var(--text);display:flex;align-items:center;gap:5px;margin-top:2px}
.summary { text-align:right; flex-shrink:0; } .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.summary .big-pnl { font-family:var(--mono); font-size:28px; font-weight:700; letter-spacing:-0.5px; line-height:1.1; } .dot.live{background:var(--green);animation:pulse 2s infinite}
.summary .big-pnl.pos { color:var(--green); } .summary .big-pnl.neg { color:var(--red); } .dot.dead{background:var(--red)}
.summary .label { font-size:10px; color:var(--text); text-transform:uppercase; letter-spacing:0.5px; } @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:4px; flex-shrink:0; } .totals{text-align:right}
.status-dot.live { background:var(--green); animation:pulse 2s infinite; } .totals .pnl{font-family:var(--mono);font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1}
.status-dot.idle { background:var(--amber); } .totals .pnl.up{color:var(--green)}.totals .pnl.dn{color:var(--red)}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} } .totals .sub{font-size:11px;color:var(--text);margin-top:4px;text-transform:uppercase;letter-spacing:0.5px}
/* Cards */ /* Tabs */
.chart-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px; margin-bottom:12px; } .tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:1px solid var(--border)}
.chart-card h2 { font-size:12px; font-weight:500; color:var(--text-bright); margin-bottom:8px; display:flex; justify-content:space-between; } .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}
.chart-wrap { position:relative; width:100%; height:200px; } .tab:hover{color:var(--bright)}
.tab.on{color:var(--bright);border-bottom-color:var(--blue)}
/* Stats row */ /* Panels */
.stats-row { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:12px; } .panel{display:none}.panel.show{display:block}
.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; } /* Stats bar */
.stat-card .val { font-family:var(--mono); font-size:16px; font-weight:600; color:var(--text-bright); margin-top:2px; } .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.stat-card .val.pos { color:var(--green); } .stat-card .val.neg { color:var(--red); } .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 */
.strategy-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:10px; margin-bottom:12px; } .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:14px}
.strategy-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; transition:border-color 0.2s; min-width:0; } .strat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:border-color 0.2s}
.strategy-card:hover { border-color:#2a2a32; } .strat:hover{border-color:var(--hover)}
.strategy-card .name { font-size:12px; font-weight:500; color:var(--text-bright); margin-bottom:6px; display:flex; align-items:center; gap:5px; } .strat .hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.strategy-card .alloc { font-size:10px; color:var(--text); margin-bottom:8px; } .strat .name{font-size:12px;font-weight:600;color:var(--bright);line-height:1.3}
.strategy-card .pnl { font-family:var(--mono); font-size:18px; font-weight:600; margin-bottom:4px; } .strat .alloc{font-size:10px;color:var(--text);margin-top:1px}
.strategy-card .pnl.pos { color:var(--green); } .strategy-card .pnl.neg { color:var(--red); } .strat .status{font-size:10px;padding:2px 8px;border-radius:4px;font-weight:500}
.strategy-card .meta { font-size:10px; color:var(--text); display:flex; flex-wrap:wrap; gap:8px; } .strat .status.run{background:rgba(34,197,94,0.1);color:var(--green)}
.strategy-card .meta .val { color:var(--text-bright); font-family:var(--mono); font-size:10px; } .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 table */
.trade-log { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.trade-log h2 { font-size:12px; font-weight:500; color:var(--text-bright); padding:12px 14px; border-bottom:1px solid var(--border); } table{width:100%;border-collapse:collapse;min-width:550px}
.trade-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; } 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)}
.trade-table { width:100%; border-collapse:collapse; min-width:500px; } td{font-family:var(--mono);font-size:11px;padding:6px 12px;border-bottom:1px solid rgba(255,255,255,0.02)}
.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; } .green{color:var(--green)}.red{color:var(--red)}
.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); }
/* Backtest list */ /* Backtest list */
.bt-list { display:flex; flex-direction:column; gap:6px; } .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-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-row:hover{border-color:var(--hover);background:var(--hover)}
.bt-item:hover { border-color:#2a2a32; } .bt-row.sel{border-color:var(--blue)}
.bt-item.selected { border-color:var(--blue); } .bt-row .n{font-weight:600;font-size:13px;color:var(--bright)}
.bt-item .bt-name { font-size:13px; font-weight:500; color:var(--text-bright); } .bt-row .m{font-size:10px;color:var(--text)}
.bt-item .bt-meta { font-size:10px; color:var(--text); } .bt-row .k{display:flex;gap:20px;flex-shrink:0}
.bt-item .bt-stats { display:flex; gap:16px; flex-shrink:0; } .bt-row .k .kv{text-align:right}
.bt-item .bt-stat { text-align:right; } .bt-row .k .kl{font-size:9px;color:var(--text);text-transform:uppercase}
.bt-item .bt-stat .lbl { 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-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-detail { margin-top:12px; display:none; } .bt-detail{display:none;margin-top:12px}
.bt-detail.active { display:block; } .bt-detail.on{display:block}
footer { text-align:center; padding:16px; font-size:10px; color:#3f3f46; } footer{text-align:center;padding:20px;font-size:10px;color:#3f3f46}
footer a { color:#52525b; text-decoration:none; } footer a:hover { color:var(--text); } footer a{color:#52525b;text-decoration:none}
footer a:hover{color:var(--text)}
/* Mobile */ @media(max-width:640px){
@media (max-width:480px) { .wrap{padding:12px 8px}
.container { padding:10px 8px; } .top{flex-direction:column;align-items:flex-start}
header { flex-direction:column; gap:8px; } .totals{text-align:left;width:100%}
.summary { text-align:left; width:100%; } .totals .pnl{font-size:24px}
.summary .big-pnl { font-size:22px; } .stats{grid-template-columns:repeat(3,1fr);gap:6px}
.stats-row { grid-template-columns:repeat(3,1fr); } .stat-box{padding:10px}
.strategy-grid { grid-template-columns:1fr 1fr; gap:6px; } .stat-box .val{font-size:14px}
.strategy-card { padding:10px; } .grid{grid-template-columns:1fr 1fr;gap:8px}
.strategy-card .pnl { font-size:14px; } .strat .big{font-size:16px}
.chart-wrap { height:140px; } .chart-wrap{height:160px}
.bt-item { flex-direction:column; align-items:flex-start; } .bt-row{flex-direction:column;align-items:flex-start}
.bt-item .bt-stats { width:100%; justify-content:space-between; } .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> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="wrap">
<!-- Header --> <!-- Header -->
<header> <div class="top">
<div class="brand"> <div class="logo">
<h1>FTDT Quant Lab</h1> <h1>FTDT Quant Lab</h1>
<div class="sub"> <span><span class="dot live" id="sdot"></span> <span id="scnx">connecting…</span> &middot; <span id="swlt">—</span></span>
<span class="status-dot live" id="status-dot"></span> </div>
<span id="connection-status">connecting...</span> <div class="totals">
&middot; <span id="wallet-display">—</span> <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> </div>
</div> </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>
</header>
<!-- Tabs --> <!-- Tabs -->
<div class="tabs"> <div class="tabs">
<button class="tab-btn active" onclick="switchTab('live')">Live Trading</button> <button class="tab on" id="tab-live" onclick="sw('live')">Live Trading</button>
<button class="tab-btn" onclick="switchTab('backtest')">Backtesting</button> <button class="tab" id="tab-bt" onclick="sw('backtest')">Backtesting</button>
</div> </div>
<!-- LIVE TAB --> <!-- LIVE PANEL -->
<div id="tab-live"> <div class="panel show" id="pnl-live">
<div class="stats" id="live-stats"></div>
<!-- Global Stats --> <div class="card">
<div class="stats-row" id="stats-row"></div> <h3>Equity Curve <span class="desc">real-time · all strategies</span></h3>
<div class="chart-wrap" id="eq-chart"></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>
</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>
<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>
</div> </div>
<!-- BACKTEST TAB --> <!-- BACKTEST PANEL -->
<div id="tab-backtest" style="display:none;"> <div class="panel" id="pnl-bt">
<div class="chart-card" id="bt-detail-card" style="display:none;"> <div class="card" id="bt-detail" style="display:none">
<h2>Backtest: <span id="bt-title">—</span></h2> <h3 id="bt-title">—</h3>
<div class="stats-row" id="bt-stats-row"></div> <div class="stats" id="bt-stats"></div>
<div class="chart-wrap"><canvas id="bt-chart"></canvas></div> <div class="chart-wrap" id="bt-chart"></div>
</div> </div>
<div class="chart-card"> <div class="card">
<h2>Saved Backtests <span style="font-weight:400;color:var(--text);">— click to view details</span></h2> <h3>Saved Backtests <span class="desc">click to view</span></h3>
<div class="bt-list" id="bt-list"></div> <div id="bt-list"></div>
</div> </div>
</div> </div>
<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>
<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> </div>
<script> <script>
// ═══════════════════════════════════════════════════════════ // ═══════════════════════ State ═══════════════════════
// State var tab = 'live', lastData = null, lastBts = [];
// ═══════════════════════════════════════════════════════════
let currentTab = 'live';
let liveData = null;
let backtests = [];
let selectedBacktest = null;
// ═══════════════════════════════════════════════════════════ // ═══════════════════════ TradingView charts ═══════════════════════
// Charts var eq = LightweightCharts.createChart(document.getElementById('eq-chart'),{
// ═══════════════════════════════════════════════════════════ layout:{background:{color:'transparent'},textColor:'#8b8b96'},
const equityChart = new Chart(document.getElementById('equity-chart').getContext('2d'), { grid:{vertLines:{color:'rgba(255,255,255,0.03)'},horzLines:{color:'rgba(255,255,255,0.03)'}},
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}]}, rightPriceScale:{borderColor:'rgba(255,255,255,0.06)'},
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()}}}}} 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'), { var btChart = LightweightCharts.createChart(document.getElementById('bt-chart'),{
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}]}, layout:{background:{color:'transparent'},textColor:'#8b8b96'},
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)}}}} 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});
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 ═══════════════════════
// Tab switching function sw(t){
// ═══════════════════════════════════════════════════════════ tab = t;
function switchTab(tab) { document.getElementById('tab-live').className = t==='live'?'tab on':'tab';
currentTab = tab; document.getElementById('tab-bt').className = t==='backtest'?'tab on':'tab';
document.querySelectorAll('.tab-btn').forEach(function(b){b.classList.remove('active');}); document.getElementById('pnl-live').className = t==='live'?'panel show':'panel';
document.getElementById('tab-live').style.display = tab === 'live' ? 'block' : 'none'; document.getElementById('pnl-bt').className = t==='backtest'?'panel show':'panel';
document.getElementById('tab-backtest').style.display = tab === 'backtest' ? 'block' : 'none'; if(t==='live' && lastData) renLive(lastData);
if (tab === 'live') document.querySelectorAll('.tab-btn')[0].classList.add('active'); if(t==='backtest'){ setTimeout(fitCharts,200); loadBt(); }
if (tab === 'backtest') { document.querySelectorAll('.tab-btn')[1].classList.add('active'); loadBacktests(); }
} }
// ═══════════════════════════════════════════════════════════ // ═══════════════════════ WebSocket ═══════════════════════
// WebSocket var ws, reconnectTimer;
// ═══════════════════════════════════════════════════════════ function conn(){
let ws; if(ws)try{ws.close()}catch(e){}
function connectWS() {
ws = new WebSocket((location.protocol==='https:'?'wss:':'ws:')+'//'+location.host+'/cv/ws'); ws = new WebSocket((location.protocol==='https:'?'wss:':'ws:')+'//'+location.host+'/cv/ws');
ws.onopen = function(){ ws.onopen = function(){
document.getElementById('connection-status').innerHTML = '<span style="color:#22c55e">live</span>'; document.getElementById('scnx').innerHTML='<span style=\"color:#22c55e\">live</span>';
document.getElementById('status-dot').className = 'status-dot live'; 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 ═══════════════════════
// Render Live function renLive(d){
// ═══════════════════════════════════════════════════════════
function renderLive() {
var d = liveData;
if(!d)return; 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 ss = d.strategies||{}, keys = Object.keys(ss);
var pnl = d.total_pnl || 0; var tr=0,wr=0,ru=0;
var el = document.getElementById('total-pnl'); 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++}
el.textContent = (pnl>=0?'+':'') + '$' + Math.abs(pnl).toFixed(2); wr=keys.length>0?Math.round(wr/keys.length*100):0;
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)+'...';
// Stats row document.getElementById('live-stats').innerHTML =
var strats = d.strategies || {}; '<div class="stat-box"><div class="lbl">Total Equity</div><div class="val">$'+(eqty+pnl).toFixed(0)+'</div></div>'+
var allTrades = 0; var avgWin = 0; var running = 0; '<div class="stat-box"><div class="lbl">Reserve</div><div class="val">$'+(d.reserve||398)+'</div></div>'+
var keys = Object.keys(strats); '<div class="stat-box"><div class="lbl">Total Trades</div><div class="val">'+tr+'</div></div>'+
for (var i=0;i<keys.length;i++) { '<div class="stat-box"><div class="lbl">Avg Win Rate</div><div class="val">'+wr+'%</div></div>'+
var s = strats[keys[i]]; '<div class="stat-box"><div class="lbl">Active Strategies</div><div class="val">'+ru+' / '+keys.length+'</div></div>';
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>';
// Strategy cards // Strategy cards
var grid = document.getElementById('strategy-grid'); var g='';
var html = '';
for(var j=0;j<keys.length;j++){ for(var j=0;j<keys.length;j++){
var name = keys[j], s = strats[name]; var name=keys[j],s=ss[name];
var spnl = s.pnl||0, pClass = spnl>=0?'pos':'neg'; var sp=s.pnl||0,cls=sp>=0?'up':'dn',pStr=(sp>=0?'+':'')+'$'+Math.abs(sp).toFixed(2);
var pStr = (spnl>=0?'+':'') + '$' + Math.abs(spnl).toFixed(2); g+='<div class="strat">'+
var dot = s.status==='running'?'live':'idle'; '<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>'+
var pct = (s.pnl_pct||0)>=0?'+':''; '<div class="big '+cls+'">'+pStr+'</div>'+
html += '<div class="strategy-card">' + '<div class="pct">'+(s.pnl_pct>=0?'+':'')+(s.pnl_pct||0).toFixed(2)+'%</div>'+
'<div class="name"><span class="status-dot '+dot+'"></span>'+name+'</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 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>' +
'</div>'; '</div>';
} }
grid.innerHTML = html; document.getElementById('live-grid').innerHTML=g;
// Equity chart // Equity chart
var hist=d.equity_history||[]; var hist=d.equity_history||[];
if(hist.length>0){ if(hist.length>0){
var labels=[]; var values=[]; var pts=[];for(var k=0;k<hist.length;k++) pts.push({time:hist[k].t,value:hist[k].v});
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); } eqSer.setData(pts);eq.timeScale().fitContent();
equityChart.data.labels = labels;
equityChart.data.datasets[0].data = values;
equityChart.update('none');
} }
// Trade log // Trades
var trades = (d.trades||[]).slice(-15).reverse(); var trades=(d.trades||[]).slice(-15).reverse(),rows='';
var rows = '';
for(var m=0;m<trades.length;m++){ for(var m=0;m<trades.length;m++){
var t = trades[m], tpClass = (t.pnl||0)>=0?'pos':'neg'; var t=trades[m];
var tpStr = ((t.pnl||0)>=0?'+':'') + '$' + Math.abs(t.pnl||0).toFixed(4); 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>';
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>';
} }
document.getElementById('trade-body').innerHTML = rows; document.getElementById('trade-tb').innerHTML=rows;
} }
// ═══════════════════════════════════════════════════════════ // ═══════════════════════ Backtests ═══════════════════════
// Backtests function loadBt(){
// ═══════════════════════════════════════════════════════════ fetch('/cv/api/backtests').then(function(r){return r.json()}).then(function(data){
function loadBacktests() { lastBts=data;var h='';
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++){ for(var i=0;i<data.length;i++){
var bt = data[i]; var b=data[i];
var pClass = bt.pnl_pct>=0?'g':'r'; h+='<div class="bt-row" onclick="viewBt(\''+b.name+'\')" id="btr-'+b.name+'">'+
html += '<div class="bt-item" onclick="viewBacktest(\''+bt.name+'\')" id="bt-item-'+bt.name+'">' + '<div><div class="n">'+b.strategy+'</div><div class="m">30-day sim · '+b.name+'</div></div>'+
'<div><div class="bt-name">'+bt.strategy+'</div><div class="bt-meta">'+bt.name+'</div></div>' + '<div class="k">'+
'<div class="bt-stats">' + '<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="bt-stat"><div class="lbl">PnL</div><div class="v '+pClass+'">'+(bt.pnl_pct>=0?'+':'')+bt.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="bt-stat"><div class="lbl">Sharpe</div><div class="v">'+bt.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="bt-stat"><div class="lbl">Max DD</div><div class="v r">'+bt.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 class="bt-stat"><div class="lbl">Win Rate</div><div class="v">'+(bt.win_rate*100).toFixed(0)+'%</div></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) { function viewBt(name){
fetch('/cv/api/backtest/'+name).then(function(r){return r.json();}).then(function(bt){ fetch('/cv/api/backtest/'+name).then(function(r){return r.json()}).then(function(b){
selectedBacktest = bt; document.getElementById('bt-detail').style.display='block';
document.getElementById('bt-detail-card').style.display = 'block'; document.getElementById('bt-title').innerHTML=b.strategy+' <span class="desc">'+b.description+'</span>';
document.getElementById('bt-title').textContent = bt.strategy + ' — ' + bt.description; document.querySelectorAll('.bt-row').forEach(function(el){el.classList.remove('sel')});
document.querySelectorAll('.bt-item').forEach(function(el){el.classList.remove('selected');}); document.getElementById('btr-'+name).classList.add('sel');
document.getElementById('bt-item-'+name).classList.add('selected');
document.getElementById('bt-stats-row').innerHTML = document.getElementById('bt-stats').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-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-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-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-card"><div class="name">Sharpe</div><div class="val">'+bt.sharpe.toFixed(2)+'</div></div>' + '<div class="stat-box"><div class="lbl">Sharpe</div><div class="val">'+b.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-box"><div class="lbl">Sortino</div><div class="val">'+b.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-box"><div class="lbl">Max Drawdown</div><div class="val dn">'+b.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-box"><div class="lbl">Win Rate</div><div class="val">'+(b.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-box"><div class="lbl">Total Trades</div><div class="val">'+b.total_trades+'</div></div>'+
'<div class="stat-card"><div class="name">Allocation</div><div class="val">$'+bt.allocation+'</div></div>' + '<div class="stat-box"><div class="lbl">Allocation</div><div class="val">$'+b.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-box"><div class="lbl">End Equity</div><div class="val">$'+b.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>'; '<div class="stat-box"><div class="lbl">Period</div><div class="val">30 days</div></div>';
var labels=[],values=[]; var curve=b.equity_curve||[],pts=[];
var curve = bt.equity_curve || []; for(var i=0;i<curve.length;i++)pts.push({time:(new Date(curve[i].t).getTime()/1000),value:curve[i].v});
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); } btSer.setData(pts);btChart.timeScale().fitContent();
btChart.data.labels = labels; setTimeout(fitCharts,200);
btChart.data.datasets[0].data = values;
btChart.update();
document.getElementById('tab-backtest').scrollIntoView({behavior:'smooth'}); document.getElementById('pnl-bt').scrollIntoView({behavior:'smooth',block:'start'});
}); });
} }
// Start // Start
connectWS(); fitCharts();conn();loadBt();
loadBacktests();
</script> </script>
</body> </body>
</html> </html>