Upload hub_dashboard.html

hub_dashboard.html

@@ -3762,20 +3762,24 @@ setInterval(function(){
   let _lastLogTs    = null;
   let _prevLoss     = null;
 
-  // Parse "key=value | key=value" pairs from a training message and render them highlighted
+  // Parse "key=value | key=value" pairs — render as evenly-spaced columns filling the full row
   function renderKVPairs(msg) {
-    // Check if message has pipe-separated key=value format
-    if (!msg.includes('=')) return `<span style="color:var(--t0)">${escHtml(msg)}</span>`;
+    if (!msg.includes('=')) return `<span style="color:var(--t0);flex:1">${escHtml(msg)}</span>`;
     const parts = msg.split('|').map(s => s.trim()).filter(Boolean);
-    return parts.map(part => {
+    if (!parts.length) return `<span style="color:var(--t0);flex:1">${escHtml(msg)}</span>`;
+    return parts.map((part, i) => {
       const eq = part.indexOf('=');
-      if (eq === -1) return `<span style="color:var(--t2)">${escHtml(part)}</span>`;
+      if (eq === -1) return `<span style="flex:1;text-align:center;color:var(--t2)">${escHtml(part)}</span>`;
       const key = part.slice(0, eq).trim();
       const val = part.slice(eq + 1).trim();
-      return `<span style="color:var(--t2);font-size:0.75rem">${escHtml(key)}</span>` +
-             `<span style="color:rgba(255,255,255,0.2);margin:0 1px">=</span>` +
-             `<span style="color:var(--t0);font-weight:700;font-variant-numeric:tabular-nums">${escHtml(val)}</span>`;
-    }).join(`<span style="color:rgba(255,255,255,0.12);margin:0 10px">│</span>`);
+      const sep = i < parts.length - 1
+        ? `<span style="width:1px;background:rgba(255,255,255,0.07);align-self:stretch;flex-shrink:0;margin:6px 0"></span>`
+        : '';
+      return `<span style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px 8px">` +
+               `<span style="color:var(--t3);font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase">${escHtml(key)}</span>` +
+               `<span style="color:var(--t0);font-weight:700;font-size:0.82rem;font-variant-numeric:tabular-nums">${escHtml(val)}</span>` +
+             `</span>${sep}`;
+    }).join('');
   }
 
   // Format a log entry into a coloured terminal line
@@ -3806,10 +3810,10 @@ setInterval(function(){
     const catLabel = cat || lvl;
     const rendered = renderKVPairs(msg);
 
-    return `<div class="${lineClass}" style="display:flex;align-items:center;gap:0;padding:10px 24px;border-bottom:1px solid rgba(255,255,255,0.03);transition:background 0.15s ease" onmouseover="this.style.background='rgba(255,255,255,0.025)'" onmouseout="this.style.background=''">`+
-           `<span class="tlog-ts" style="flex-shrink:0;width:70px;font-size:0.72rem;opacity:0.55;font-variant-numeric:tabular-nums">${ts}</span>`+
-           `<span style="flex-shrink:0;margin-right:16px;padding:3px 9px;border-radius:4px;background:${catBg};color:${catCol};font-size:0.60rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase">${escHtml(catLabel)}</span>`+
-           `<span style="flex:1;min-width:0;display:flex;align-items:center;gap:0;flex-wrap:wrap;row-gap:0">${rendered}</span>`+
+    return `<div class="${lineClass}" style="display:flex;align-items:stretch;gap:0;padding:6px 24px;border-bottom:1px solid rgba(255,255,255,0.04);transition:background 0.15s ease" onmouseover="this.style.background='rgba(255,255,255,0.025)'" onmouseout="this.style.background=''">`+
+           `<span class="tlog-ts" style="flex-shrink:0;width:70px;font-size:0.68rem;opacity:0.5;font-variant-numeric:tabular-nums;display:flex;align-items:center">${ts}</span>`+
+           `<span style="flex-shrink:0;margin-right:20px;padding:2px 8px;border-radius:4px;background:${catBg};color:${catCol};font-size:0.58rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;display:flex;align-items:center">${escHtml(catLabel)}</span>`+
+           `<span style="flex:1;min-width:0;display:flex;align-items:stretch;flex-wrap:nowrap">${rendered}</span>`+
            `</div>`;
   }