Update hub_dashboard.html

hub_dashboard.html

@@ -2820,6 +2820,24 @@ const f4 = v => (v==null)?'—':Number(v).toFixed(4); const fPct = v => (v==null
 const ago = ts => { if(!ts) return '—'; const s=Math.round(Date.now()/1000-ts); return s<60?s+'s ago':s<3600?Math.floor(s/60)+'m ago':Math.floor(s/3600)+'h ago'; };
 const stxt = r => r.signal_confidence>.7 ? '<span style="color:var(--green);font-weight:700;text-shadow:0 0 8px rgba(0,223,138,0.4)">Engaged</span>' : '<span style="color:var(--t3);font-weight:600">Standby</span>';
 
+/* ─────────────────────────────────────────────────────────────────────────────
+   vecOf(r) — normalize the asset's directional signal for display.
+   The hub's /api/state now emits `flip_direction` (BUY|SELL|NONE). Older
+   builds used `latest_signal` or `dominant_signal`. This helper reads the
+   new field first, falls back to the legacy ones, and maps anything
+   non-directional to 'NEUTRAL' so the CSS classes (.sig.BUY, .sig.SELL,
+   .sig.NEUTRAL) and downstream comparisons work uniformly.
+───────────────────────────────────────────────────────────────────────────── */
+function vecOf(r){
+  if(!r) return 'NEUTRAL';
+  const fd = r.flip_direction ? String(r.flip_direction).toUpperCase() : '';
+  if(fd === 'BUY' || fd === 'SELL') return fd;
+  const ls = r.latest_signal || r.dominant_signal;
+  const lu = ls ? String(ls).toUpperCase() : '';
+  if(lu === 'BUY' || lu === 'SELL') return lu;
+  return 'NEUTRAL';
+}
+
 function scoreBar(s) {
   const v=parseFloat(s)||0; const p=Math.min(Math.abs(v)*100,100).toFixed(1);
   const c=v>.05?'#00df8a':v<-.05?'#ff3d5a':'#00c8ff';
@@ -2840,7 +2858,7 @@ function renderTable(){
     return `<tr class="${sel} ${rcls}" onclick="onRow('${r.space_name}',this)">
       <td class="rc">${rk}</td><td class="nc">${r.space_name}</td><td>${scoreBar(r.score)}</td>
       <td class="num">${fPct(r.signal_confidence)}</td><td class="num">${fPct(r.avn_accuracy)}</td>
-      <td><span class="sig ${r.latest_signal||r.dominant_signal}">${r.latest_signal||r.dominant_signal}</span></td>
+      <td><span class="sig ${vecOf(r)}">${vecOf(r)}</span></td>
       <td class="num">${(r.training_steps||0).toLocaleString()}</td><td class="num">${f4(r.actor_loss)}</td>
       <td>${stxt(r)}</td></tr>`;
   }).join('');
@@ -2868,7 +2886,7 @@ function onRow(name,el){
       <div class="dr"><span class="dk">Model Core</span><span class="dv">QUASAR-X1</span></div>
     </div>
     <div><div class="dc-title">Ensemble Consensus</div>
-      <div class="dr"><span class="dk">Inference Signal</span><span class="dv ${(r.latest_signal||r.dominant_signal)==='BUY'?'g':(r.latest_signal||r.dominant_signal)==='SELL'?'r':''}">${r.latest_signal||r.dominant_signal}</span></div>
+      <div class="dr"><span class="dk">Inference Signal</span><span class="dv ${(vecOf(r))==='BUY'?'g':(vecOf(r))==='SELL'?'r':''}">${vecOf(r)}</span></div>
       <div class="dr"><span class="dk">Buy Votes</span><span class="dv g">${r.buy_count}</span></div>
       <div class="dr"><span class="dk">Sell Votes</span><span class="dv r">${r.sell_count}</span></div>
     </div>`;
@@ -2878,7 +2896,7 @@ function onRow(name,el){
 function updateCharts(){
   scoreChart.data.labels=_rankings.map(r=>r.space_name);
   scoreChart.data.datasets[0].data=_rankings.map(r=>r.score);
-  scoreChart.data.datasets[0].backgroundColor=_rankings.map(r=>{ const sig=r.latest_signal||r.dominant_signal; return sig==='BUY'?'rgba(0,223,138,0.7)': sig==='SELL'?'rgba(255,61,90,0.7)':'rgba(0,200,255,0.5)'; });
+  scoreChart.data.datasets[0].backgroundColor=_rankings.map(r=>{ const sig=vecOf(r); return sig==='BUY'?'rgba(0,223,138,0.7)': sig==='SELL'?'rgba(255,61,90,0.7)':'rgba(0,200,255,0.5)'; });
   scoreChart.update();
   if(!_rankings.length)return; const top=_rankings[0].space_name; const h=(_hist[top]||[]).slice(-60); if(!h.length)return;
   const lb=h.map(p=>new Date(p.ts*1000).toLocaleTimeString('en-GB',{hour12:false,hour:'2-digit',minute:'2-digit',second:'2-digit'}));
@@ -3267,7 +3285,7 @@ const GATE_DEFS = [
 
 // Derive per-asset gate status from ranking data
 function gateStatus(r) {
-  const A = (r.latest_signal||r.dominant_signal) === 'BUY' || (r.latest_signal||r.dominant_signal) === 'SELL';
+  const A = (vecOf(r)) === 'BUY' || (vecOf(r)) === 'SELL';
   const B = r.signal_confidence >= 0.55;
   const C = Math.abs(r.score) >= 0.10;
   const D = r.avn_accuracy >= 0.50;
@@ -3284,8 +3302,8 @@ function renderTradingTab() {
   if (!_rankings || !_rankings.length) return;
 
   // ── KPI Row ────────────────────────────────────────────────────────────────
-  const buys  = _rankings.filter(r => (r.latest_signal||r.dominant_signal) === 'BUY');
-  const sells = _rankings.filter(r => (r.latest_signal||r.dominant_signal) === 'SELL');
+  const buys  = _rankings.filter(r => (vecOf(r)) === 'BUY');
+  const sells = _rankings.filter(r => (vecOf(r)) === 'SELL');
   document.getElementById('t-kpi-buys').textContent  = buys.length;
   document.getElementById('t-kpi-sells').textContent = sells.length;
 
@@ -3314,11 +3332,11 @@ function renderTradingTab() {
     const allPass = allGatesPass(gates);
     const gateIcon = allPass ? '<span style="color:var(--green);font-weight:800">✓ CLEAR</span>'
                               : '<span style="color:var(--amber);font-weight:700">⚠ GATED</span>';
-    const sigClass = (r.latest_signal||r.dominant_signal) === 'BUY' ? 'BUY' : (r.latest_signal||r.dominant_signal) === 'SELL' ? 'SELL' : 'HOLD';
+    const sigClass = (vecOf(r)) === 'BUY' ? 'BUY' : (vecOf(r)) === 'SELL' ? 'SELL' : 'HOLD';
     return `<tr>
       <td class="rc ${i===0?'r1':''}">${r.rank}</td>
       <td class="nc">${r.space_name}</td>
-      <td><span class="sig ${sigClass}">${r.dominant_signal}</span></td>
+      <td><span class="sig ${sigClass}">${vecOf(r)}</span></td>
       <td class="num">${fPct(r.signal_confidence)}</td>
       <td class="num" style="color:var(--green)">${r.buy_count}</td>
       <td class="num" style="color:var(--red)">${r.sell_count}</td>
@@ -3348,7 +3366,7 @@ function renderTradingTab() {
       const gLabel = allP
         ? '<span class="pos-gate-pass">✓ ALL CLEAR</span>'
         : `<span class="pos-gate-warn">A:${gates.A?'✓':'✗'} B:${gates.B?'✓':'✗'} C:${gates.C?'✓':'✗'} D:${gates.D?'✓':'✗'} E:${gates.E?'✓':'✗'}</span>`;
-      const side = r.dominant_signal === 'BUY' ? 'BUY' : 'SELL';
+      const side = vecOf(r) === 'BUY' ? 'BUY' : 'SELL';
       return `<tr>
         <td class="nc">${r.space_name}</td>
         <td><span class="sig ${side}">${side}</span></td>
@@ -3366,13 +3384,13 @@ function renderTradingTab() {
     const total = r.buy_count + r.sell_count || 1;
     const buyPct  = (r.buy_count  / total * 100).toFixed(0);
     const sellPct = (r.sell_count / total * 100).toFixed(0);
-    const sigCls  = (r.latest_signal||r.dominant_signal) === 'BUY' ? 'BUY' : (r.latest_signal||r.dominant_signal) === 'SELL' ? 'SELL' : 'HOLD';
+    const sigCls  = (vecOf(r)) === 'BUY' ? 'BUY' : (vecOf(r)) === 'SELL' ? 'SELL' : 'HOLD';
     const tagBg   = sigCls === 'BUY' ? 'rgba(0,223,138,0.12)' : sigCls === 'SELL' ? 'rgba(255,61,90,0.12)' : 'rgba(255,255,255,0.07)';
     const tagClr  = sigCls === 'BUY' ? 'var(--green)' : sigCls === 'SELL' ? 'var(--red)' : 'var(--t2)';
     return `<div class="vote-row">
       <div class="vote-asset-label">
         <span class="vote-asset-name">${r.space_name}</span>
-        <span class="vote-signal-tag" style="background:${tagBg};color:${tagClr};border:1px solid ${tagClr}40">${r.dominant_signal}</span>
+        <span class="vote-signal-tag" style="background:${tagBg};color:${tagClr};border:1px solid ${tagClr}40">${vecOf(r)}</span>
       </div>
       <div class="vote-bar-track">
         <div class="vote-bar-buy"  style="width:${buyPct}%"></div>
@@ -3410,8 +3428,8 @@ function renderTradingTab() {
   const fb = document.getElementById('trade-feed-body');
   const now = Date.now();
   fb.innerHTML = _rankings.slice(0, 20).map(r => {
-    const dir  = r.dominant_signal === 'BUY' ? 'L' : r.dominant_signal === 'SELL' ? 'S' : 'N';
-    const dirLabel = r.dominant_signal === 'BUY' ? 'LONG' : r.dominant_signal === 'SELL' ? 'SHORT' : 'HOLD';
+    const dir  = vecOf(r) === 'BUY' ? 'L' : vecOf(r) === 'SELL' ? 'S' : 'N';
+    const dirLabel = vecOf(r) === 'BUY' ? 'LONG' : vecOf(r) === 'SELL' ? 'SHORT' : 'HOLD';
     const ts   = r.last_updated ? new Date(r.last_updated * 1000).toLocaleTimeString('en-GB', {hour12:false}) : '—';
     return `<div class="feed-cols row">
       <div class="f-info">
@@ -3498,9 +3516,9 @@ function normalise(vals) {
 // ── Summary bar ───────────────────────────────────────────────────────────────
 function renderAssetSummary(assets) {
   document.getElementById('as-total').textContent = assets.length;
-  document.getElementById('as-bull').textContent  = assets.filter(r => (r.latest_signal||r.dominant_signal) === 'BUY').length;
-  document.getElementById('as-bear').textContent  = assets.filter(r => (r.latest_signal||r.dominant_signal) === 'SELL').length;
-  document.getElementById('as-neut').textContent  = assets.filter(r => (r.latest_signal||r.dominant_signal) !== 'BUY' && (r.latest_signal||r.dominant_signal) !== 'SELL').length;
+  document.getElementById('as-bull').textContent  = assets.filter(r => (vecOf(r)) === 'BUY').length;
+  document.getElementById('as-bear').textContent  = assets.filter(r => (vecOf(r)) === 'SELL').length;
+  document.getElementById('as-neut').textContent  = assets.filter(r => (vecOf(r)) !== 'BUY' && (vecOf(r)) !== 'SELL').length;
   const accs = assets.filter(r => r.avn_accuracy > 0).map(r => r.avn_accuracy);
   document.getElementById('as-avgacc').textContent = accs.length
     ? fPct(accs.reduce((a,b) => a+b, 0) / accs.length) : '—';
@@ -3515,7 +3533,7 @@ function renderAssetCards(assets) {
     return;
   }
   grid.innerHTML = assets.map(r => {
-    const sigCls   = r.dominant_signal === 'BUY' ? 'sig-buy' : r.dominant_signal === 'SELL' ? 'sig-sell' : 'sig-hold';
+    const sigCls   = vecOf(r) === 'BUY' ? 'sig-buy' : vecOf(r) === 'SELL' ? 'sig-sell' : 'sig-hold';
     const scoreClr = r.score > 0.1 ? 'var(--green)' : r.score < -0.05 ? 'var(--red)' : 'var(--cyan)';
     const total    = r.buy_count + r.sell_count || 1;
     const buyPct   = (r.buy_count / total * 100).toFixed(0);
@@ -3527,7 +3545,7 @@ function renderAssetCards(assets) {
           <div class="ac-name">${r.space_name}</div>
           <div class="ac-rank">RANK #${r.rank}</div>
         </div>
-        <span class="sig ${r.dominant_signal === 'BUY' ? 'BUY' : r.dominant_signal === 'SELL' ? 'SELL' : 'HOLD'}">${r.dominant_signal}</span>
+        <span class="sig ${vecOf(r) === 'BUY' ? 'BUY' : vecOf(r) === 'SELL' ? 'SELL' : 'HOLD'}">${vecOf(r)}</span>
       </div>
       <div class="ac-score-block">
         <div class="ac-score-label">AXRVI Score</div>
@@ -3572,12 +3590,12 @@ function renderAssetTable(assets) {
     return;
   }
   body.innerHTML = assets.map(r => {
-    const sigCls = (r.latest_signal||r.dominant_signal) === 'BUY' ? 'BUY' : (r.latest_signal||r.dominant_signal) === 'SELL' ? 'SELL' : 'HOLD';
+    const sigCls = (vecOf(r)) === 'BUY' ? 'BUY' : (vecOf(r)) === 'SELL' ? 'SELL' : 'HOLD';
     const lossClr = r.actor_loss < 0.3 ? 'var(--green)' : r.actor_loss > 0.7 ? 'var(--red)' : 'var(--amber)';
     return `<tr onclick="openDeepDive('${r.space_name}')" style="cursor:pointer">
       <td class="rc ${r.rank===1?'r1':''}">${r.rank}</td>
       <td class="nc">${r.space_name}</td>
-      <td style="text-align:right"><span class="sig ${sigCls}">${r.dominant_signal}</span></td>
+      <td style="text-align:right"><span class="sig ${sigCls}">${vecOf(r)}</span></td>
       <td class="num" style="color:var(--cyan)">${fPct(r.signal_confidence)}</td>
       <td class="num">${fPct(r.avn_accuracy)}</td>
       <td class="num" style="color:${r.score>0.1?'var(--green)':r.score<0?'var(--red)':'var(--t1)'}">${f4(r.score)}</td>
@@ -3650,13 +3668,13 @@ function openDeepDive(name) {
   dive.style.display = '';
   dive.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
 
-  const sigCls = r.dominant_signal === 'BUY' ? 'g' : r.dominant_signal === 'SELL' ? 'r' : '';
+  const sigCls = vecOf(r) === 'BUY' ? 'g' : vecOf(r) === 'SELL' ? 'r' : '';
   document.getElementById('dive-stats').innerHTML = `
     <div class="dive-block">
       <div class="dive-block-title">Neural Output</div>
       <div class="dive-row"><span class="dive-k">AXRVI Score</span><span class="dive-v ${r.score > 0.1 ? 'g' : r.score < 0 ? 'r' : 'c'}">${f4(r.score)}</span></div>
       <div class="dive-row"><span class="dive-k">Signal Confidence</span><span class="dive-v c">${fPct(r.signal_confidence)}</span></div>
-      <div class="dive-row"><span class="dive-k">Dominant Signal</span><span class="dive-v ${sigCls}">${r.dominant_signal}</span></div>
+      <div class="dive-row"><span class="dive-k">Dominant Signal</span><span class="dive-v ${sigCls}">${vecOf(r)}</span></div>
       <div class="dive-row"><span class="dive-k">Rank</span><span class="dive-v">#${r.rank}</span></div>
       <div class="dive-row"><span class="dive-k">Last Updated</span><span class="dive-v">${ago(r.last_updated)}</span></div>
     </div>