Move bad log parsing to utils.js and add section headers

pkg/web/static/js/header.js

@@ -1,10 +1,17 @@
 // Header components: Clock and Backend Status Indicator
 "use strict";
 
+// =========================================================================
+//  Global Variables
+// =========================================================================
+
 var clockInterval = null;
 var statusUpdateCallback = null;
 
-// Initialize clock
+// =========================================================================
+//  Clock
+// =========================================================================
+
 function initClock() {
   function updateClock() {
     var now = new Date();
@@ -18,30 +25,59 @@ function initClock() {
       clockElement.textContent = timeString;
     }
   }
-  
-  // Update immediately
   updateClock();
-  
-  // Update every second
   if (clockInterval) {
     clearInterval(clockInterval);
   }
   clockInterval = setInterval(updateClock, 1000);
 }
 
-// Update status indicator
+// =========================================================================
+//  Status Indicator
+// =========================================================================
+
+function initStatusIndicator() {
+  updateStatusIndicator('connecting', 'Connecting...');
+  function registerStatusCallback() {
+    if (typeof wsManager !== 'undefined' && wsManager) {
+      wsManager.onStatusChange(function(state, text) {
+        updateStatusIndicator(state, text);
+      });
+      var currentState = wsManager.getConnectionState();
+      var currentText = 'Connecting...';
+      if (currentState === 'connected' && wsManager.isConnected) {
+        currentText = 'Connected';
+      } else if (currentState === 'connecting') {
+        currentText = 'Connecting...';
+      } else if (currentState === 'disconnected') {
+        currentText = 'Disconnected';
+      } else if (currentState === 'disconnecting') {
+        currentText = 'Disconnecting...';
+      }
+      updateStatusIndicator(currentState, currentText);
+      return true;
+    }
+    return false;
+  }
+  if (!registerStatusCallback()) {
+    var checkInterval = setInterval(function() {
+      if (registerStatusCallback()) {
+        clearInterval(checkInterval);
+      }
+    }, 100);
+    setTimeout(function() {
+      clearInterval(checkInterval);
+    }, 5000);
+  }
+}
+
 function updateStatusIndicator(state, text) {
   var statusDot = document.getElementById('statusDot');
   var statusText = document.getElementById('statusText');
-  
   if (!statusDot || !statusText) {
     return;
   }
-  
-  // Remove all color classes
   statusDot.classList.remove('bg-green-500', 'bg-yellow-500', 'bg-red-500', 'bg-gray-400');
-  
-  // Set color and text based on state
   switch (state) {
     case 'connected':
       statusDot.classList.add('bg-green-500');
@@ -63,82 +99,30 @@ function updateStatusIndicator(state, text) {
   }
 }
 
-// Initialize status indicator
-function initStatusIndicator() {
-  // Set initial state
-  updateStatusIndicator('connecting', 'Connecting...');
-  
-  // Register callback with WebSocket manager when available
-  function registerStatusCallback() {
-    if (typeof wsManager !== 'undefined' && wsManager) {
-      // Register callback for future status changes
-      wsManager.onStatusChange(function(state, text) {
-        updateStatusIndicator(state, text);
-      });
-      
-      // Immediately update status based on current connection state
-      // This handles the case where connection was established before callback registration
-      var currentState = wsManager.getConnectionState();
-      var currentText = 'Connecting...';
-      
-      if (currentState === 'connected' && wsManager.isConnected) {
-        currentText = 'Connected';
-      } else if (currentState === 'connecting') {
-        currentText = 'Connecting...';
-      } else if (currentState === 'disconnected') {
-        currentText = 'Disconnected';
-      } else if (currentState === 'disconnecting') {
-        currentText = 'Disconnecting...';
-      }
-      
-      updateStatusIndicator(currentState, currentText);
-      return true;
-    }
-    return false;
-  }
-  
-  if (!registerStatusCallback()) {
-    // Wait for WebSocket manager to be available
-    var checkInterval = setInterval(function() {
-      if (registerStatusCallback()) {
-        clearInterval(checkInterval);
-      }
-    }, 100);
-    
-    // Stop checking after 5 seconds to avoid infinite loop
-    setTimeout(function() {
-      clearInterval(checkInterval);
-    }, 5000);
-  }
-}
+// =========================================================================
+//  WebSocket Tooltip
+// =========================================================================
 
-// 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">
@@ -165,21 +149,15 @@ function createWebSocketTooltip() {
       </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;
@@ -187,37 +165,29 @@ function createWebSocketTooltip() {
     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') {
@@ -225,7 +195,6 @@ function createWebSocketTooltip() {
       }
     });
   } else {
-    // Wait for WebSocket manager to be available
     var checkInterval = setInterval(function() {
       if (typeof wsManager !== 'undefined' && wsManager) {
         wsManager.onStatusChange(function(state, text) {
@@ -239,14 +208,16 @@ function createWebSocketTooltip() {
   }
 }
 
-// Initialize all header components
+// =========================================================================
+//  Initialization
+// =========================================================================
+
 function initHeader() {
   initClock();
   initStatusIndicator();
   createWebSocketTooltip();
 }
 
-// Cleanup on page unload
 if (typeof window !== 'undefined') {
   window.addEventListener('beforeunload', function() {
     if (clockInterval) {