Add some status-tooltip implementation for the websocket connection

pkg/web/static/js/header.js

@@ -86,10 +86,138 @@ function initStatusIndicator() {
   }
 }
 
+// Create and manage WebSocket tooltip
+function createWebSocketTooltip() {
+  // Create tooltip element
+  const tooltip = document.createElement('div');
+  tooltip.id = 'wsTooltip';
+  tooltip.className = 'fixed z-50 px-3 py-2 bg-gray-900 text-white text-xs rounded shadow-lg pointer-events-none opacity-0 transition-opacity duration-200';
+  tooltip.style.display = 'none';
+  tooltip.style.minWidth = '200px';
+  document.body.appendChild(tooltip);
+  
+  const statusEl = document.getElementById('backendStatus');
+  if (!statusEl) {
+    return;
+  }
+  
+  let tooltipUpdateInterval = null;
+  
+  function updateTooltipContent() {
+    if (!wsManager || !wsManager.isConnected) {
+      return;
+    }
+    
+    const info = wsManager.getConnectionInfo();
+    if (!info) {
+      return;
+    }
+    
+    tooltip.innerHTML = `
+      <div class="font-semibold mb-2 text-green-400 border-b border-gray-700 pb-1">WebSocket Connection</div>
+      <div class="space-y-1">
+        <div class="flex justify-between">
+          <span class="text-gray-400">Duration:</span>
+          <span class="text-green-400 font-medium">${info.duration}</span>
+        </div>
+        <div class="flex justify-between">
+          <span class="text-gray-400">Last Heartbeat:</span>
+          <span class="text-blue-400 font-medium">${info.lastHeartbeat}</span>
+        </div>
+        <div class="flex justify-between">
+          <span class="text-gray-400">Messages:</span>
+          <span class="text-yellow-400 font-medium">${info.messages}</span>
+        </div>
+        <div class="flex justify-between">
+          <span class="text-gray-400">Reconnects:</span>
+          <span class="text-orange-400 font-medium">${info.reconnects}</span>
+        </div>
+        <div class="mt-2 pt-2 border-t border-gray-700">
+          <div class="text-gray-400 text-xs">${info.protocol}</div>
+          <div class="text-gray-500 text-xs mt-1 break-all">${info.url}</div>
+        </div>
+      </div>
+    `;
+  }
+  
+  function showTooltip(e) {
+    if (!wsManager || !wsManager.isConnected) {
+      return;
+    }
+    
+    updateTooltipContent();
+    const rect = statusEl.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+    
+    // Position tooltip below the status element, centered
+    let left = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
+    let top = rect.bottom + 8;
+    
+    // Adjust if tooltip would go off screen
+    if (left < 8) left = 8;
+    if (left + tooltipRect.width > window.innerWidth - 8) {
+      left = window.innerWidth - tooltipRect.width - 8;
+    }
+    if (top + tooltipRect.height > window.innerHeight - 8) {
+      top = rect.top - tooltipRect.height - 8;
+    }
+    
+    tooltip.style.left = left + 'px';
+    tooltip.style.top = top + 'px';
+    tooltip.style.display = 'block';
+    setTimeout(() => {
+      tooltip.style.opacity = '1';
+    }, 10);
+    
+    // Update tooltip content every second while visible
+    if (tooltipUpdateInterval) {
+      clearInterval(tooltipUpdateInterval);
+    }
+    tooltipUpdateInterval = setInterval(updateTooltipContent, 1000);
+  }
+  
+  function hideTooltip() {
+    tooltip.style.opacity = '0';
+    setTimeout(() => {
+      tooltip.style.display = 'none';
+    }, 200);
+    
+    if (tooltipUpdateInterval) {
+      clearInterval(tooltipUpdateInterval);
+      tooltipUpdateInterval = null;
+    }
+  }
+  
+  statusEl.addEventListener('mouseenter', showTooltip);
+  statusEl.addEventListener('mouseleave', hideTooltip);
+  
+  // Also hide tooltip when status changes to disconnected
+  if (typeof wsManager !== 'undefined' && wsManager) {
+    wsManager.onStatusChange(function(state, text) {
+      if (state !== 'connected') {
+        hideTooltip();
+      }
+    });
+  } else {
+    // Wait for WebSocket manager to be available
+    var checkInterval = setInterval(function() {
+      if (typeof wsManager !== 'undefined' && wsManager) {
+        wsManager.onStatusChange(function(state, text) {
+          if (state !== 'connected') {
+            hideTooltip();
+          }
+        });
+        clearInterval(checkInterval);
+      }
+    }, 100);
+  }
+}
+
 // Initialize all header components
 function initHeader() {
   initClock();
   initStatusIndicator();
+  createWebSocketTooltip();
 }
 
 // Cleanup on page unload