fix: make status toolbar update in real time

apps/web/src/views/detail.ejs

@@ -472,10 +472,11 @@
     // ── Status bar hover tooltip ──────────────────────────────────────
     const statusBar = document.getElementById('status-bar');
     const statusTooltip = document.getElementById('status-tooltip');
+    let _hoveredSeg = null;
 
-    statusBar.addEventListener('mousemove', (e) => {
-      const seg = e.target.closest('[data-run]');
-      if (!seg) { statusTooltip.classList.add('hidden'); return; }
+    function updateStatusTooltip() {
+      const seg = _hoveredSeg;
+      if (!seg || !seg.parentElement) { statusTooltip.classList.add('hidden'); _hoveredSeg = null; return; }
 
       const up = parseInt(seg.dataset.up || '0');
       const down = parseInt(seg.dataset.down || '0');
@@ -493,7 +494,6 @@
       html += `<div class="flex items-center justify-between gap-4 mb-1"><span>Status</span>${statusLabel}</div>`;
       html += `<div class="flex items-center justify-between gap-4"><span class="text-gray-500">Uptime</span><span class="text-gray-200 font-mono">${uptimePct}%</span></div>`;
 
-      // Region breakdown
       let regions = [];
       try { regions = JSON.parse(seg.dataset.regions || '[]'); } catch {}
       if (regions.length > 0) {
@@ -514,7 +514,6 @@
       statusTooltip.innerHTML = html;
       statusTooltip.classList.remove('hidden');
 
-      // Position horizontally centered on the segment
       const barRect = statusBar.getBoundingClientRect();
       const segRect = seg.getBoundingClientRect();
       const segCenter = segRect.left + segRect.width / 2 - barRect.left;
@@ -523,9 +522,17 @@
       if (left < 0) left = 0;
       if (left + tw > barRect.width) left = barRect.width - tw;
       statusTooltip.style.left = left + 'px';
+    }
+
+    statusBar.addEventListener('mousemove', (e) => {
+      const seg = e.target.closest('[data-run]');
+      if (!seg) { statusTooltip.classList.add('hidden'); _hoveredSeg = null; return; }
+      _hoveredSeg = seg;
+      updateStatusTooltip();
     });
 
     statusBar.addEventListener('mouseleave', () => {
+      _hoveredSeg = null;
       statusTooltip.classList.add('hidden');
     });
 
@@ -591,6 +598,7 @@
           bar.appendChild(seg);
           while (bar.children.length > 60) bar.removeChild(bar.firstChild);
         }
+        updateStatusTooltip();
       }
 
       // Pings table — prepend row, cap at 100