ramseshk
27c096dc9e
live/monitor_service.py (LiveMonitorService):
Background service running all 6 advanced monitors plus microstructure.
Polls Hyperliquid REST API every 4s for prices, books, funding.
Exposes unified state() method for the live dashboard API.
dashboard/server.py:
Added /api/monitors/status?coin=BTC — combined state of all monitors
Added /api/monitors/hlp — HLP vault state
Added /api/monitors/funding — funding whipsaw signal
Added /api/monitors/spoof — spoof detector summary
Added /live route serving the live dashboard
Monitor service auto-starts on first API request
dashboard/static/live.html:
Professional dark-themed live monitoring dashboard.
Three-column grid layout with real-time polling:
- Price panel: mid, mark, oracle, premium, spread, funding
- Microstructure panel: OBI, VPIN/toxicity bar, bid/ask depths
- Composite signal panel: HLP signal, funding whipsaw signal,
term structure signal, spoof probability bar, branching ratio
- HLP Vault panel: total delta, assets tracked, toxicity %,
overextended assets, per-coin rebalancing signals
- Bottom row: Spoof Detector, Liquidation Waterfall,
Term Structure
- Coin selector (BTC/ETH) with color-coded signal rows
- Auto-refreshes every 3s with live indicator
Access: http://localhost:9175/live
227 lines
14 KiB
HTML
227 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FTDT Quant Lab — Live Terminal</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:'SF Mono','Cascadia Code','Ubuntu Mono',monospace;background:#0a0b0f;color:#789;min-height:100vh;overflow-y:auto}
|
|
.pos{color:#00e676}.neg{color:#ff1744}.warn{color:#ff9100}.neu{color:#789}.blue{color:#00b0ff}.dim{color:#444}.white{color:#ccc}
|
|
.topbar{background:#0d0e12;border-bottom:1px solid #1a1c24;padding:6px 20px;display:flex;justify-content:space-between;align-items:center;height:36px;position:sticky;top:0;z-index:100}
|
|
.topbar h1{font-size:11px;font-weight:700;color:#ddd;letter-spacing:1.5px}
|
|
.topbar .dot{display:inline-block;width:6px;height:6px;background:#00e676;border-radius:50%;margin-right:6px;animation:pulse 2s infinite}
|
|
@keyframes pulse{0%,100%{box-shadow:0 0 4px #00e676}50%{box-shadow:0 0 12px #00e676}}
|
|
.topbar .st{font-size:9px;color:#666;letter-spacing:.5px}
|
|
.topbar .st .coin-pill{display:inline-block;background:#111;border:1px solid #222;border-radius:2px;padding:1px 6px;margin:0 2px;color:#00b0ff;font-size:9px;cursor:pointer;transition:all .15s}
|
|
.topbar .st .coin-pill:hover{border-color:#444;color:#fff}
|
|
.topbar .st .coin-pill.active{border-color:#00b0ff;background:#0a1620}
|
|
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px;max-width:1800px;margin:0 auto}
|
|
.grid-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
|
|
.panel{background:#0d0e12;border:1px solid #1a1c24;border-radius:3px;overflow:hidden}
|
|
.panel.full{grid-column:1/-1}
|
|
.panel.half{grid-column:span 2}
|
|
.panel-header{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:#111218;border-bottom:1px solid #1a1c24}
|
|
.panel-header h3{font-size:9px;text-transform:uppercase;letter-spacing:2px;color:#555;font-weight:500}
|
|
.panel-body{padding:8px 10px;font-size:10px}
|
|
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;border-bottom:1px solid #0f1016}
|
|
.stat-row:last-child{border-bottom:none}
|
|
.stat-label{color:#555;font-size:9px;text-transform:uppercase;letter-spacing:1px}
|
|
.stat-value{font-size:11px;font-family:monospace;font-weight:600}
|
|
.signal-row{display:flex;align-items:center;gap:6px;margin-top:4px;padding:6px 8px;border-radius:3px;font-size:10px}
|
|
.signal-row.buy{background:#002211;border:1px solid #003322;color:#00e676}
|
|
.signal-row.sell{background:#220000;border:1px solid #330000;color:#ff1744}
|
|
.signal-row.neutral{background:#111;border:1px solid #1a1a1a;color:#666}
|
|
.signal-row .sig{font-weight:700;text-transform:uppercase;font-size:10px}
|
|
.signal-row .reason{font-size:9px;color:#555;margin-left:4px}
|
|
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
|
|
.metric-item{background:#0a0b0f;border:1px solid #111;border-radius:2px;padding:5px 7px}
|
|
.metric-item .ml{font-size:8px;color:#555;text-transform:uppercase;margin-bottom:2px}
|
|
.metric-item .mv{font-size:13px;font-family:monospace;font-weight:700}
|
|
.bar-bg{height:3px;background:#111;border-radius:2px;margin-top:3px;overflow:hidden}
|
|
.bar-fill{height:100%;border-radius:2px;transition:width .3s}
|
|
.bar-fill.ok{background:#00e676}.bar-fill.warn{background:#ff9100}.bar-fill.bad{background:#ff1744}
|
|
.toxicity-bar{height:4px;background:#111;border-radius:2px;overflow:hidden;margin-top:4px}
|
|
.toxicity-fill{height:100%;background:linear-gradient(90deg,#00e676,#ff9100,#ff1744);border-radius:2px;transition:width .3s}
|
|
.asset-table{width:100%;font-size:10px;font-family:monospace}
|
|
.asset-table th{text-align:left;padding:3px 6px;color:#555;font-weight:500;font-size:8px;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid #1a1c24}
|
|
.asset-table td{padding:3px 6px;border-bottom:1px solid #0f1016;color:#aaa}
|
|
.asset-table tr:hover{background:#0f1016}
|
|
.flash{animation:flash .5s ease-out}@keyframes flash{0%{background:#002244}100%{background:transparent}}
|
|
.monitors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;grid-column:1/-1}
|
|
.loading{text-align:center;padding:20px;color:#333;font-size:10px}
|
|
.error{text-align:center;padding:10px;color:#ff1744;font-size:9px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="topbar">
|
|
<h1><span class="dot"></span>FTDT QUANT LAB — LIVE</h1>
|
|
<div class="st">
|
|
<span class="coin-pill active" onclick="selectCoin('BTC')" id="pill-BTC">BTC</span>
|
|
<span class="coin-pill" onclick="selectCoin('ETH')" id="pill-ETH">ETH</span>
|
|
<span style="margin-left:8px;font-size:9px;color:#555">Hyperliquid Testnet</span>
|
|
<span style="margin-left:4px;font-size:9px;color:#444" id="update-age"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid" id="root"></div>
|
|
|
|
<script>
|
|
const API='';
|
|
let currentCoin='BTC';
|
|
let lastUpdate=0;
|
|
const COINS=['BTC','ETH'];
|
|
let pollTimer=null;
|
|
|
|
async function loadState(){
|
|
try{
|
|
const resp=await fetch(API+'/api/monitors/status?coin='+currentCoin);
|
|
if(!resp.ok)throw new Error('HTTP '+resp.status);
|
|
const d=await resp.json();
|
|
lastUpdate=Date.now();
|
|
render(d);
|
|
document.getElementById('update-age').textContent='● LIVE';
|
|
document.getElementById('update-age').style.color='#00e676';
|
|
}catch(e){
|
|
document.getElementById('root').innerHTML='<div class="error">Monitor service unavailable — starting...</div>';
|
|
document.getElementById('update-age').textContent='○ OFFLINE';
|
|
document.getElementById('update-age').style.color='#ff1744';
|
|
}
|
|
}
|
|
|
|
function render(d){
|
|
const p=d.prices||{};
|
|
const ms=d.microstructure||{};
|
|
const hlp=d.hlp_vault||{};
|
|
const sig=d.hlp_signal||{};
|
|
const fw=d.funding_whipsaw||{};
|
|
const ts=d.term_structure||{};
|
|
const lw=d.liquidation_waterfall||{};
|
|
const sp=d.spoof_detector||{};
|
|
const hk=d.hawkes_baseline||{};
|
|
|
|
const m=(p.mid||0).toFixed(0);
|
|
const spBps=(p.spread_bps||0).toFixed(1);
|
|
const obi=ms.obi||0;
|
|
const obiCls=obi>0.1?'pos':(obi<-0.1?'neg':'neu');
|
|
const orclr=p.oracle&&p.mark?(p.mark>p.oracle?'pos':'neg'):'neu';
|
|
const premiumBps=p.oracle?((p.mark-p.oracle)/p.oracle*10000).toFixed(1):'?';
|
|
const fundPct=(ms.funding_annual_pct||0).toFixed(1);
|
|
const fundCls=Math.abs(ms.funding_annual_pct)>10?'warn':'neu';
|
|
const tox=hlp.toxicity_score||0;
|
|
const toxPct=(tox*100).toFixed(1);
|
|
const toxCls=tox>0.3?'bad':(tox>0.1?'warn':'ok');
|
|
const risk=hlp.overextended_assets||[];
|
|
const hsig=sig[currentCoin]||{};
|
|
const hDir=hsig.direction||0;
|
|
const whipsawAct=fw.action||'no_data';
|
|
const spoofP=(sp.spoof_probability||0)*100;
|
|
const branchR=(hk.branching_ratio||0)*100;
|
|
const tsSig=ts.primary_signal||'none';
|
|
|
|
document.getElementById('root').innerHTML=`
|
|
<div class="panel" id="panel-prices">
|
|
<div class="panel-header"><h3>${currentCoin}/USD</h3><span style="font-size:9px;color:#555">${sp.interval_s||'?'}s poll</span></div>
|
|
<div class="panel-body">
|
|
<div class="stat-row"><span class="stat-label">Mid</span><span class="stat-value white">$${Number(m).toLocaleString()}</span></div>
|
|
<div class="stat-row"><span class="stat-label">Mark</span><span class="stat-value ${orclr}">$${Number(p.mark||0).toLocaleString()}</span></div>
|
|
<div class="stat-row"><span class="stat-label">Oracle</span><span class="stat-value dim">$${Number(p.oracle||0).toLocaleString()}</span></div>
|
|
<div class="stat-row"><span class="stat-label">Premium</span><span class="stat-value ${orclr}">${premiumBps}bps</span></div>
|
|
<div class="stat-row"><span class="stat-label">Spread</span><span class="stat-value dim">${spBps}bps</span></div>
|
|
<div class="stat-row"><span class="stat-label">Funding</span><span class="stat-value ${fundCls}">${fundPct}% apr</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="panel" id="panel-micro">
|
|
<div class="panel-header"><h3>Microstructure</h3></div>
|
|
<div class="panel-body">
|
|
<div class="stat-row"><span class="stat-label">OBI</span><span class="stat-value ${obiCls}">${obi.toFixed(4)}</span></div>
|
|
<div class="stat-row"><span class="stat-label">VPIN (tox)</span><span class="stat-value ${tox>0.2?'neg':'neu'}">${tox.toFixed(4)}</span></div>
|
|
<div class="toxicity-bar"><div class="toxicity-fill" style="width:${Math.min(tox*100,100)}%"></div></div>
|
|
<div class="stat-row"><span class="stat-label">BB</span><span class="stat-value pos">$${Number(ms.depth_bid||0).toLocaleString()}</span></div>
|
|
<div class="stat-row"><span class="stat-label">BA</span><span class="stat-value neg">$${Number(ms.depth_ask||0).toLocaleString()}</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="panel" id="panel-signals">
|
|
<div class="panel-header"><h3>Composite Signal</h3><span style="font-size:8px;color:#555">HLP + Hawkes + Spoof</span></div>
|
|
<div class="panel-body">
|
|
<div class="signal-row ${hDir>0?'buy':(hDir<0?'sell':'neutral')}">
|
|
<span class="sig">HLP ${hsig.signal||'neutral'}</span><span class="reason">${hsig.reason||''}</span>
|
|
</div>
|
|
<div class="signal-row ${whipsawAct.includes('long')?'buy':(whipsawAct.includes('short')?'sell':'neutral')}">
|
|
<span class="sig">WHIPSAW ${fw.action||'idle'}</span><span class="reason">${fw.reason||''}</span>
|
|
</div>
|
|
<div class="signal-row ${tsSig.includes('buy')?'buy':(tsSig.includes('sell')?'sell':'neutral')}">
|
|
<span class="sig">TERM ${tsSig}</span><span class="reason">term-structure</span>
|
|
</div>
|
|
<div style="margin-top:4px">
|
|
<span class="stat-label" style="font-size:8px">Spoof prob</span>
|
|
<div class="bar-bg"><div class="bar-fill ${spoofP>50?'bad':(spoofP>20?'warn':'ok')}" style="width:${spoofP}%"></div></div>
|
|
<span style="font-size:9px;color:#555;float:right">${spoofP.toFixed(1)}%</span>
|
|
</div>
|
|
<div style="margin-top:4px">
|
|
<span class="stat-label" style="font-size:8px">Branching ratio</span>
|
|
<div class="bar-bg"><div class="bar-fill ${branchR>80?'bad':(branchR>50?'warn':'ok')}" style="width:${branchR}%"></div></div>
|
|
<span style="font-size:9px;color:#555;float:right">${branchR.toFixed(1)}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel full" id="panel-hlp">
|
|
<div class="panel-header"><h3>HLP Vault (Protocol Market Maker)</h3><span style="font-size:8px;color:#555">0xfefe...fefe</span></div>
|
|
<div class="panel-body">
|
|
<div class="metric-grid">
|
|
<div class="metric-item"><div class="ml">Total Delta</div><div class="mv ${hlp.total_delta_usd>5e6?'warn':'neu'}">$${(hlp.total_delta_m||0).toFixed(1)}M</div></div>
|
|
<div class="metric-item"><div class="ml">Assets Tracked</div><div class="mv neu">${hlp.assets_tracked||0}</div></div>
|
|
<div class="metric-item"><div class="ml">Toxicity</div><div class="mv ${toxCls}">${toxPct}%</div></div>
|
|
<div class="metric-item"><div class="ml">Overextended</div><div class="mv ${risk.length?'warn':'neu'}">${risk.length||0}</div></div>
|
|
</div>
|
|
${hlp.signals?Object.entries(hlp.signals).map(([c,s])=>
|
|
'<div class="signal-row '+(s.direction>0?'buy':(s.direction<0?'sell':'neutral'))+'"><span class="sig">'+c+'</span><span class="sig" style="margin-left:8px">'+s.signal+'</span><span class="reason">'+s.reason+'</span></div>'
|
|
).join(''):''}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="monitors-grid" style="grid-column:1/-1">
|
|
<div class="panel" id="panel-spoof">
|
|
<div class="panel-header"><h3>Spoof Detector</h3></div>
|
|
<div class="panel-body">
|
|
<div class="stat-row"><span class="stat-label">Spoof prob</span><span class="stat-value ${spoofP>30?'neg':(spoofP>10?'warn':'pos')}">${spoofP.toFixed(1)}%</span></div>
|
|
<div class="stat-row"><span class="stat-label">Spoofs detected</span><span class="stat-value ${sp.spoof_count?'warn':'neu'}">${sp.spoof_count||0}</span></div>
|
|
<div class="stat-row"><span class="stat-label">Cancel/Fill ratio</span><span class="stat-value dim">${(sp.cancel_fill_ratio||0).toFixed(1)}</span></div>
|
|
<div class="stat-row"><span class="stat-label">Active orders</span><span class="stat-value dim">${sp.active_orders||0}</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="panel" id="panel-liq">
|
|
<div class="panel-header"><h3>Liq Waterfall</h3></div>
|
|
<div class="panel-body">
|
|
<div class="stat-row"><span class="stat-label">At-risk accounts</span><span class="stat-value ${(lw.at_risk_accounts||[]).length?'warn':'neu'}">${(lw.at_risk_accounts||[]).length}</span></div>
|
|
<div class="stat-row"><span class="stat-label">Tracked</span><span class="stat-value dim">${lw.tracked_accounts||0}</span></div>
|
|
${(lw.at_risk_accounts||[]).slice(0,3).map(a=>'<div class="signal-row '+(a.level==='critical'?'sell':'neutral')+'"><span class="sig">'+a.address+'</span><span class="sig">MR='+a.margin_ratio.toFixed(2)+'</span></div>').join('')}
|
|
</div>
|
|
</div>
|
|
<div class="panel" id="panel-term">
|
|
<div class="panel-header"><h3>Term Structure</h3></div>
|
|
<div class="panel-body">
|
|
<div class="stat-row"><span class="stat-label">Signal</span><span class="stat-value ${tsSig.includes('buy')?'pos':(tsSig.includes('sell')?'neg':'neu')}">${tsSig}</span></div>
|
|
${ts.quarterly_perp_basis?`<div class="stat-row"><span class="stat-label">Qtr-Perp basis</span><span class="stat-value dim">${ts.quarterly_perp_basis.current_bps}bps</span></div>
|
|
<div class="stat-row"><span class="stat-label">Z-score</span><span class="stat-value ${Math.abs(ts.quarterly_perp_basis.z_score)>2?'warn':'neu'}">${ts.quarterly_perp_basis.z_score}</span></div>`:''}
|
|
${ts.fair_quarterly?`<div class="stat-row"><span class="stat-label">Fair Quarterly</span><span class="stat-value dim">$${Number(ts.fair_quarterly.fair_quarterly).toLocaleString()}</span></div>`:''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function selectCoin(c){
|
|
currentCoin=c;
|
|
document.querySelectorAll('.coin-pill').forEach(el=>el.classList.remove('active'));
|
|
document.getElementById('pill-'+c)?.classList.add('active');
|
|
loadState();
|
|
}
|
|
|
|
loadState();
|
|
// Throttle updates: up to once every 3s
|
|
setInterval(()=>{if(Date.now()-lastUpdate>2500)loadState();},3000);
|
|
</script>
|
|
</body>
|
|
</html> |