Upload hub_dashboard.html

hub_dashboard.html

@@ -1437,85 +1437,58 @@ td.rc {
 }
 
 /* ════════════════════════════════════════════════════════════════════════════
-   TRAINING PANEL — POLISHED v3
+   TRAINING PANEL KPI CELLS
 ════════════════════════════════════════════════════════════════════════════ */
-
-/* KPI strip */
 .training-kpi-cell {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
   justify-content: center;
-  padding: 22px 28px;
-  gap: 5px;
+  padding: 20px var(--sp-lg);
+  gap: 6px;
+  text-align: center;
   position: relative;
-  transition: background 0.25s ease;
+  transition: background 0.3s ease;
+}
+.training-kpi-cell:hover {
+  background: rgba(255,255,255,0.02);
 }
-.training-kpi-cell::before {
-  content: '';
-  position: absolute;
-  left: 0; top: 20%; bottom: 20%;
-  width: 2px;
-  border-radius: 2px;
-  opacity: 0.5;
-}
-.training-kpi-cell:nth-child(1)::before { background: var(--red); }
-.training-kpi-cell:nth-child(2)::before { background: var(--amber); }
-.training-kpi-cell:nth-child(3)::before { background: var(--cyan); }
-.training-kpi-cell:nth-child(4)::before { background: var(--green); }
-.training-kpi-cell:hover { background: rgba(255,255,255,0.025); }
-.training-kpi-cell:hover::before { opacity: 1; }
-
 .training-kpi-label {
-  font-size: 0.6rem;
-  font-weight: 700;
-  letter-spacing: 0.18em;
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--t3);
 }
 .training-kpi-value {
-  font-size: 1.9rem;
+  font-size: 1.65rem;
   font-weight: 800;
-  letter-spacing: -0.03em;
+  letter-spacing: -0.02em;
   line-height: 1;
   font-variant-numeric: tabular-nums;
-  transition: color 0.4s ease;
+  transition: all 0.4s ease;
 }
 .training-kpi-sub {
-  font-size: 0.6rem;
+  font-size: 0.62rem;
   color: var(--t3);
   font-weight: 500;
-  letter-spacing: 0.05em;
-  min-height: 13px;
+  letter-spacing: 0.04em;
+  min-height: 14px;
 }
-
-/* Terminal */
-#training-log-terminal::-webkit-scrollbar { width: 3px; }
-#training-log-terminal::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.15); border-radius: 4px; }
+/* Terminal scrollbar styling */
+#training-log-terminal::-webkit-scrollbar { width: 4px; }
+#training-log-terminal::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.2); border-radius: 4px; }
 #training-log-terminal::-webkit-scrollbar-track { background: transparent; }
 
 /* Log line colorings */
-.tlog-debug  { color: rgba(90,130,160,0.75); }
-.tlog-info   { color: var(--t2); }
+.tlog-debug  { color: var(--t2); }
+.tlog-info   { color: var(--t1); }
 .tlog-signal { color: var(--cyan); }
 .tlog-trade  { color: var(--amber); }
 .tlog-error  { color: var(--red); }
 .tlog-warn   { color: var(--amber); }
-.tlog-training { color: #c084fc; }
-
-/* Log row hover */
-.tlog-row {
-  display: flex;
-  gap: 0;
-  padding: 2px 0;
-  border-radius: 3px;
-  transition: background 0.15s ease;
-  align-items: baseline;
-}
-.tlog-row:hover { background: rgba(255,255,255,0.03); }
-.tlog-ts    { color: rgba(58,104,136,0.7); flex-shrink:0; width:60px; font-size:0.68rem; padding-right:8px; }
-.tlog-cat   { flex-shrink:0; width:82px; font-weight:700; font-size:0.7rem; padding-right:8px; }
-.tlog-msg   { color: rgba(180,210,230,0.75); font-size:0.71rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.tlog-ts     { color: var(--t3); margin-right: 6px; font-variant-numeric: tabular-nums; }
+.tlog-badge  { font-weight: 700; margin-right: 4px; }
 
 </style>
 
@@ -1739,64 +1712,64 @@ td.rc {
         <div class="panel" id="training-panel">
           <div class="panel-hd">
             <div class="panel-hd-left">
-              <div class="panel-hd-pip" style="background:linear-gradient(180deg,#c084fc,var(--cyan));box-shadow:0 0 12px rgba(192,132,252,0.5)"></div>
+              <div class="panel-hd-pip" style="background:var(--cyan);box-shadow:0 0 10px var(--cyan-glow)"></div>
               <span class="panel-hd-label">Training Logs</span>
             </div>
-            <div style="display:flex;align-items:center;gap:14px">
+            <div style="display:flex;align-items:center;gap:12px">
               <span class="panel-hd-meta" id="training-meta">awaiting training stream…</span>
-              <div style="display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--pill-r);border:1px solid rgba(192,132,252,0.25);background:rgba(192,132,252,0.07)">
-                <div class="pring live" id="training-dot"><div class="core" style="background:#c084fc;box-shadow:0 0 8px #c084fc"></div></div>
-                <span style="font-size:0.6rem;font-weight:800;letter-spacing:0.14em;color:#c084fc">LIVE</span>
+              <div style="display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--pill-r);border:1px solid rgba(0,212,255,0.2);background:rgba(0,212,255,0.06)">
+                <div class="pring live" id="training-dot"><div class="core"></div></div>
+                <span style="font-size:0.6rem;font-weight:800;letter-spacing:0.12em;color:var(--cyan)">LIVE</span>
               </div>
             </div>
           </div>
 
-          <!-- KPI strip — sits ABOVE the terminal so metrics are immediately visible -->
-          <div style="display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(255,255,255,0.05);background:rgba(0,0,0,0.2)">
+          <!-- Terminal log stream -->
+          <div id="training-log-terminal" style="
+            font-family:var(--font);
+            font-size:0.72rem;
+            line-height:1.7;
+            color:var(--t2);
+            background:rgba(0,0,0,0.5);
+            border-bottom:1px solid rgba(255,255,255,0.04);
+            padding:16px 20px;
+            height:200px;
+            overflow-y:auto;
+            letter-spacing:0.02em;
+            scrollbar-width:thin;
+            scrollbar-color:rgba(0,212,255,0.2) transparent;
+          ">
+            <div style="color:var(--t3);font-style:italic">Awaiting training data stream…</div>
+          </div>
+
+          <!-- KPI strip: Loss · Learning Rate · Step · Assets -->
+          <div style="display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,0.04)">
 
             <div class="training-kpi-cell" style="border-right:1px solid rgba(255,255,255,0.04)">
               <div class="training-kpi-label">Loss</div>
-              <div class="training-kpi-value" id="trn-loss" style="color:var(--red);text-shadow:0 0 18px rgba(255,68,102,0.4)">—</div>
-              <div class="training-kpi-sub" id="trn-loss-trend">&nbsp;</div>
+              <div class="training-kpi-value" id="trn-loss" style="color:var(--red);text-shadow:0 0 12px rgba(255,68,102,0.45)">—</div>
+              <div class="training-kpi-sub" id="trn-loss-trend"></div>
             </div>
 
             <div class="training-kpi-cell" style="border-right:1px solid rgba(255,255,255,0.04)">
               <div class="training-kpi-label">Learning Rate</div>
-              <div class="training-kpi-value" id="trn-lr" style="color:var(--amber);text-shadow:0 0 18px rgba(255,170,0,0.35)">—</div>
+              <div class="training-kpi-value" id="trn-lr" style="color:var(--amber);text-shadow:0 0 12px rgba(255,170,0,0.4)">—</div>
               <div class="training-kpi-sub" id="trn-lr-sub">scheduler active</div>
             </div>
 
             <div class="training-kpi-cell" style="border-right:1px solid rgba(255,255,255,0.04)">
               <div class="training-kpi-label">Step</div>
-              <div class="training-kpi-value" id="trn-step" style="color:var(--cyan);text-shadow:0 0 18px rgba(0,212,255,0.35)">—</div>
+              <div class="training-kpi-value" id="trn-step" style="color:var(--cyan);text-shadow:0 0 12px rgba(0,212,255,0.4)">—</div>
               <div class="training-kpi-sub" id="trn-step-sub">gradient updates</div>
             </div>
 
             <div class="training-kpi-cell">
               <div class="training-kpi-label">Assets</div>
-              <div class="training-kpi-value" id="trn-assets" style="color:var(--green);text-shadow:0 0 18px rgba(0,255,136,0.35)">—</div>
+              <div class="training-kpi-value" id="trn-assets" style="color:var(--green);text-shadow:0 0 12px rgba(0,255,136,0.4)">—</div>
               <div class="training-kpi-sub" id="trn-assets-sub">in cluster</div>
             </div>
 
           </div>
-
-          <!-- Terminal log stream -->
-          <div id="training-log-terminal" style="
-            font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
-            font-size:0.73rem;
-            line-height:1.7;
-            color:var(--t2);
-            background:rgba(0,2,8,0.65);
-            padding:14px 20px;
-            height:260px;
-            overflow-y:auto;
-            letter-spacing:0.01em;
-            scrollbar-width:thin;
-            scrollbar-color:rgba(192,132,252,0.15) transparent;
-          ">
-            <div style="color:var(--t3);font-style:italic;font-size:0.7rem">Awaiting training data stream…</div>
-          </div>
-
         </div>
       </div>
     </div>
@@ -3783,106 +3756,119 @@ setInterval(function(){
 //  Falls back gracefully if endpoint is unavailable
 // ════════════════════════════════════════════════════════════════════════════
 (function() {
-  const MAX_LINES = 100;
-  const POLL_MS   = 2500;
-
-  let _termLines  = [];
-  let _seenKeys   = new Set();   // dedup by "timestamp|step" key — fixes duplicate entries
-  let _prevLoss   = null;
-
-  function _entryKey(entry) {
-    // Use timestamp + step (if present) as a unique key to prevent duplicate display
-    const ts   = entry.timestamp || '';
-    const msg  = entry.message   || '';
-    const step = (msg.match(/step=(\d+)/) || [])[1] || '';
-    return ts + '|' + step + '|' + msg.slice(0, 40);
-  }
-
-  function escHtml(s) {
-    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-  }
+  const MAX_LINES   = 120;   // keep last N lines in terminal
+  const POLL_MS     = 2000;
+  let _termLines    = [];
+  let _lastLogTs    = null;
+  let _prevLoss     = null;
 
+  // Format a log entry into a coloured terminal line
   function formatLogLine(entry) {
-    const ts  = (entry.timestamp || '').slice(11, 19);
+    const ts  = (entry.timestamp || '').slice(11, 19); // HH:MM:SS  (no ms for raw lines)
     const cat = (entry.category  || '').toUpperCase();
     const lvl = (entry.level     || '').toUpperCase();
 
-    // Clean the raw message line
+    // Prefer structured message; strip raw-line boilerplate if the API returns the full line
     let msg = entry.message || '';
-    msg = msg.replace(/^\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\]\s*\|\s*\S+\s*\|\s*\S+\s*(\|\s*\S+\s*)?\|\s*/, '');
-    msg = msg.replace(/\s*\{.*\}\s*$/, '').trim();
-
-    // Category color and class
-    const catCol   = cat === 'TRAINING' ? '#c084fc' :
-                     cat === 'SIGNAL'   ? 'var(--cyan)' :
-                     cat === 'TRADE'    ? 'var(--amber)' :
-                     cat === 'RANKING'  ? 'var(--green)' : 'var(--t3)';
-
-    const rowClass = cat === 'TRAINING' ? 'tlog-row tlog-training' :
-                     cat === 'SIGNAL'   ? 'tlog-row tlog-signal' :
-                     cat === 'TRADE'    ? 'tlog-row tlog-trade' :
-                     lvl === 'ERROR' || lvl === 'CRITICAL' ? 'tlog-row tlog-error' :
-                     lvl === 'WARNING'  ? 'tlog-row tlog-warn' : 'tlog-row tlog-info';
-
-    return `<div class="${rowClass}">` +
-           `<span class="tlog-ts">${ts}</span>` +
-           `<span class="tlog-cat" style="color:${catCol}">${cat || lvl}</span>` +
-           `<span class="tlog-msg">${escHtml(msg)}</span>` +
+    // Strip leading "[YYYY-MM-DD HH:MM:SS] | LEVEL | CATEGORY | " prefix (raw line format)
+    msg = msg.replace(/^\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\]\s*\|\s*\w+\s*\|\s*\w+\s*\|\s*/, '');
+    // Strip trailing JSON blob — already structured in entry.data
+    msg = msg.replace(/\s*\{.*\}\s*$/, '');
+    msg = msg.trim();
+
+    let lineClass = 'tlog-info';
+    if (lvl === 'DEBUG')                              lineClass = 'tlog-debug';
+    else if (lvl === 'ERROR' || lvl === 'CRITICAL')   lineClass = 'tlog-error';
+    else if (lvl === 'WARNING')                       lineClass = 'tlog-warn';
+    else if (cat === 'SIGNAL')                        lineClass = 'tlog-signal';
+    else if (cat === 'TRADE')                         lineClass = 'tlog-trade';
+    else if (cat === 'TRAINING')                      lineClass = 'tlog-debug';
+
+    const catCol = cat === 'SIGNAL'   ? 'var(--cyan)'  :
+                   cat === 'TRADE'    ? 'var(--amber)'  :
+                   cat === 'TRAINING' ? '#a855f7'       :
+                   cat === 'RANKING'  ? 'var(--green)'  : 'var(--t3)';
+
+    const catLabel = cat || lvl;
+
+    return `<div class="${lineClass}" style="display:flex;gap:10px;padding:2px 0">` +
+           `<span class="tlog-ts" style="flex-shrink:0;width:62px;font-size:0.68rem;opacity:0.7">${ts}</span>` +
+           `<span style="color:${catCol};font-weight:700;font-size:0.65rem;letter-spacing:0.08em;text-transform:uppercase;flex-shrink:0;width:72px">${catLabel}</span>` +
+           `<span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escHtml(msg)}</span>` +
            `</div>`;
   }
 
+  function escHtml(s) {
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  }
+
   function updateTerminal(entries) {
     const term = document.getElementById('training-log-terminal');
     if (!term) return;
 
-    // Only add entries we haven't seen before (fix duplicates)
-    const newEntries = entries.filter(e => {
-      const k = _entryKey(e);
-      if (_seenKeys.has(k)) return false;
-      _seenKeys.add(k);
-      return true;
-    });
+    // Append only NEW entries (filter by timestamp > _lastLogTs)
+    const newEntries = _lastLogTs
+      ? entries.filter(e => (e.timestamp || '') > _lastLogTs)
+      : entries;
 
     if (!newEntries.length) return;
 
-    // Keep seen set bounded
-    if (_seenKeys.size > 2000) {
-      const arr = [..._seenKeys];
-      _seenKeys = new Set(arr.slice(arr.length - 1000));
-    }
+    _lastLogTs = newEntries[newEntries.length - 1].timestamp || _lastLogTs;
 
-    // newEntries come newest-first from the API — reverse so oldest goes in first
-    const ordered = [...newEntries].reverse();
-    ordered.forEach(e => _termLines.push(formatLogLine(e)));
+    newEntries.forEach(e => _termLines.push(formatLogLine(e)));
     if (_termLines.length > MAX_LINES) _termLines = _termLines.slice(-MAX_LINES);
 
-    const atBottom = term.scrollHeight - term.clientHeight - term.scrollTop < 50;
+    const atBottom = term.scrollHeight - term.clientHeight - term.scrollTop < 40;
     term.innerHTML = _termLines.join('');
     if (atBottom) term.scrollTop = term.scrollHeight;
   }
 
-  const _TRAINING_MSG_RE = /step=(\d+).*?loss=([+-]?[\d.]+).*?lr=([\d.eE+\-]+).*?assets=(\d+)/;
+  // Regex to extract training fields directly from the raw message string.
+  // Matches the format produced by ranker_logging.py training_update():
+  //   "step=14 | loss=0.0278 | lr=0.000300 | assets=4"
+  // Also matches the full pipe-delimited log line (the API returns the raw line as "message").
+  const _TRAINING_MSG_RE = /step=(\d+).*?loss=([\d.]+).*?lr=([\d.eE+\-]+).*?assets=(\d+)/;
 
   function _extractTrainingData(entry) {
-    if (entry.data && typeof entry.data === 'object' && entry.data.step != null) return entry.data;
-    if (entry.metadata && entry.metadata.step != null) return entry.metadata;
+    // Priority 1: structured "data" field from the enriched API endpoint
+    if (entry.data && typeof entry.data === 'object' && entry.data.step != null) {
+      return entry.data;
+    }
+    // Priority 2: JSON blob embedded in "metadata" (RankerLogger.to_dict())
+    if (entry.metadata && entry.metadata.step != null) {
+      return entry.metadata;
+    }
+    // Priority 3: Regex over the raw message / log line string
     const m = _TRAINING_MSG_RE.exec(entry.message || '');
-    if (m) return { step: parseInt(m[1],10), loss: parseFloat(m[2]), lr: parseFloat(m[3]), asset_count: parseInt(m[4],10) };
+    if (m) {
+      return {
+        step:        parseInt(m[1], 10),
+        loss:        parseFloat(m[2]),
+        lr:          parseFloat(m[3]),
+        asset_count: parseInt(m[4], 10),
+      };
+    }
     return null;
   }
 
   function updateTrainingKPIs(entries) {
+    // Accept entries whose category field OR raw message text indicate TRAINING
     const trainEntries = entries
-      .filter(e => (e.category||'').toUpperCase() === 'TRAINING' || (e.message||'').includes('| TRAINING '))
+      .filter(e => {
+        const cat = (e.category || '').toUpperCase();
+        const msg = (e.message  || '').toUpperCase();
+        return cat === 'TRAINING' || msg.includes('| TRAINING ');
+      })
       .map(e => ({ entry: e, data: _extractTrainingData(e) }))
       .filter(x => x.data !== null)
-      .sort((a,b) => (a.entry.timestamp||'') < (b.entry.timestamp||'') ? -1 : 1);
+      .sort((a, b) => (a.entry.timestamp || '') < (b.entry.timestamp || '') ? -1 : 1);
 
     if (!trainEntries.length) return;
+
     const { entry: latest, data: d } = trainEntries[trainEntries.length - 1];
 
     // Loss
-    const lossEl = document.getElementById('trn-loss');
+    const lossEl      = document.getElementById('trn-loss');
     const lossTrendEl = document.getElementById('trn-loss-trend');
     if (lossEl && d.loss != null) {
       const v = parseFloat(d.loss);
@@ -3895,7 +3881,7 @@ setInterval(function(){
       _prevLoss = v;
     }
 
-    // LR
+    // Learning rate — display as fixed 6dp (matches log format) or sci notation if tiny
     const lrEl = document.getElementById('trn-lr');
     if (lrEl && d.lr != null) {
       const lr = parseFloat(d.lr);
@@ -3903,8 +3889,12 @@ setInterval(function(){
     }
 
     // Step
-    const stepEl = document.getElementById('trn-step');
-    if (stepEl && d.step != null) stepEl.textContent = parseInt(d.step).toLocaleString();
+    const stepEl    = document.getElementById('trn-step');
+    const stepSubEl = document.getElementById('trn-step-sub');
+    if (stepEl && d.step != null) {
+      stepEl.textContent = parseInt(d.step).toLocaleString();
+      if (stepSubEl) stepSubEl.textContent = 'gradient updates';
+    }
 
     // Assets
     const assetsEl = document.getElementById('trn-assets');
@@ -3913,34 +3903,46 @@ setInterval(function(){
       if (n != null) assetsEl.textContent = n;
     }
 
-    // Header timestamp
+    // Header meta timestamp
     const metaEl = document.getElementById('training-meta');
-    if (metaEl && latest.timestamp) metaEl.textContent = 'last update ' + (latest.timestamp||'').slice(11,19);
+    if (metaEl && latest.timestamp) {
+      metaEl.textContent = 'last update ' + (latest.timestamp || '').slice(11, 19);
+    }
   }
 
   async function pollTrainingLogs() {
     try {
       const res = await fetch('/api/ranker/logs/recent?limit=80&category=TRAINING');
-      let data;
-      try { data = await res.json(); } catch(e) {
-        throw new Error('HTTP ' + res.status + ' — non-JSON response');
+      // v2.3: always parse JSON even on non-2xx; service now always returns JSON
+      let json;
+      try {
+        json = await res.json();
+      } catch (parseErr) {
+        // Response was not JSON (e.g. HTML error page from a proxy)
+        throw new Error('HTTP ' + res.status + ' — non-JSON response from /api/ranker/logs/recent');
       }
       if (!res.ok) {
+        // Service returned an error object — show it but don't abort
+        const errMsg = json.error || ('HTTP ' + res.status);
         const term = document.getElementById('training-log-terminal');
-        if (term && !_termLines.length)
-          term.innerHTML = `<div class="tlog-error" style="font-size:11px">⚠ ${escHtml(data.error||'HTTP '+res.status)}</div>`;
+        if (term && !_termLines.length) {
+          term.innerHTML = '<div class="tlog-error" style="font-size:11px">⚠ ' + escHtml(errMsg) + '</div>';
+        }
         return;
       }
-      const entries = data.logs || [];
+      const entries = json.logs || [];
       updateTerminal(entries);
       updateTrainingKPIs(entries);
     } catch(err) {
+      // Silently tolerate transient connection errors — show detail on first failure
       const term = document.getElementById('training-log-terminal');
-      if (term && !_termLines.length)
-        term.innerHTML = `<div class="tlog-error" style="font-size:11px">⚠ ${escHtml(err.message)}</div>`;
+      if (term && !_termLines.length) {
+        term.innerHTML = '<div class="tlog-error" style="font-size:11px">⚠ ' + escHtml(err.message) + '</div>';
+      }
     }
   }
 
+  // Init: first poll immediately, then repeat
   pollTrainingLogs();
   setInterval(pollTrainingLogs, POLL_MS);
 })();