feat: add host, level, and message filters to Log of Events

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

hbd/server/templates/live.html

@@ -201,6 +201,43 @@
     .log-recover .log-level  { color: #2a7a2a; }
     .log-info .log-level     { color: #555; }
 
+    .log-section-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex-wrap: wrap;
+      margin-bottom: 10px;
+      background: white;
+      border-radius: 6px;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
+      padding: 8px 15px;
+    }
+
+    .log-section-title {
+      font-size: 1.2em;
+      font-weight: bold;
+      color: #333;
+      white-space: nowrap;
+    }
+
+    .log-filter-bar {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .log-filter-bar input[type="text"],
+    .log-filter-bar select {
+      padding: 3px 7px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      font-size: 0.85em;
+      color: #333;
+    }
+
+    .log-filter-bar input[type="text"] { width: 110px; }
+
     /* Modal for connection status messages */
     .connection-modal {
       display: none;
@@ -445,6 +482,22 @@
       updateRowAlert(name_idx[data.name], data);
     }
 
+    function applyLogFilters() {
+      var hostFilter = document.getElementById('filter-host').value.toLowerCase().trim();
+      var levelFilter = document.getElementById('filter-level').value;
+      var msgFilter = document.getElementById('filter-msg').value.toLowerCase().trim();
+      document.querySelectorAll('#messages .log-entry').forEach(function(entry) {
+        var show = true;
+        if (hostFilter && !(entry.dataset.host || '').toLowerCase().includes(hostFilter)) show = false;
+        if (levelFilter && entry.dataset.level !== levelFilter) show = false;
+        if (msgFilter) {
+          var msgEl = entry.querySelector('.log-msg');
+          if (!msgEl || !msgEl.textContent.toLowerCase().includes(msgFilter)) show = false;
+        }
+        entry.style.display = show ? '' : 'none';
+      });
+    }
+
     function WS_Connect() {
       if ("WebSocket" in window) {
         //N.B: subprotocol field causes chrome to error 1006
@@ -479,7 +532,8 @@
             var ts_str = _d.getFullYear() + '-' + _p(_d.getMonth()+1) + '-' + _p(_d.getDate())
                        + ' ' + _p(_d.getHours()) + ':' + _p(_d.getMinutes()) + ':' + _p(_d.getSeconds());
             var lvl = (msg.level || "INFO").toLowerCase();
-            var html = '<div class="log-entry log-' + lvl + '">';
+            var hostVal = msg.host || '';
+            var html = '<div class="log-entry log-' + lvl + '" data-level="' + lvl + '" data-host="' + hostVal.replace(/"/g, '&quot;') + '">';
             html += '<span class="log-ts">' + ts_str + '</span>';
             html += '<span class="log-level">' + (msg.level || "") + '</span>';
             if (msg.host) html += '<span class="log-host">' + msg.host + '</span>';
@@ -487,6 +541,7 @@
             html += '<span class="log-msg">' + msg.message + '</span>';
             html += '</div>';
             msgs.insertAdjacentHTML("afterbegin", html);
+            applyLogFilters();
           }
           cnt++;
         };
@@ -575,7 +630,20 @@
       </div>
       
       <div class="log-section">
-        <h2>Log of Events</h2>
+        <div class="log-section-header">
+          <span class="log-section-title">Log of Events</span>
+          <div class="log-filter-bar">
+            <input type="text" id="filter-host" placeholder="Host…" title="Filter by host" />
+            <select id="filter-level" title="Filter by level">
+              <option value="">All levels</option>
+              <option value="info">INFO</option>
+              <option value="warning">WARNING</option>
+              <option value="critical">CRITICAL</option>
+              <option value="recover">RECOVER</option>
+            </select>
+            <input type="text" id="filter-msg" placeholder="Message…" title="Filter by message text" />
+          </div>
+        </div>
         <div id="messages"></div>
       </div>
     </div>
@@ -591,6 +659,9 @@
     
     <script>
       setup();
+      document.getElementById('filter-host').addEventListener('input', applyLogFilters);
+      document.getElementById('filter-level').addEventListener('change', applyLogFilters);
+      document.getElementById('filter-msg').addEventListener('input', applyLogFilters);
     </script>
   </body>
 </html>