From dde5a94270c45591f62d0c0f6cd36e5b9fde803f Mon Sep 17 00:00:00 2001
From: matt wilkie <maphew@gmail.com>
Date: Fri, 21 Nov 2025 13:22:37 -0700
Subject: [PATCH] feat(monitor-webui): add find-as-you-type filtering and fix
 UX bugs

---
 examples/monitor-webui/web/index.html       | 1 +
 examples/monitor-webui/web/static/js/app.js | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/examples/monitor-webui/web/index.html b/examples/monitor-webui/web/index.html
index f5a5cf9e..1620a9ff 100644
--- a/examples/monitor-webui/web/index.html
+++ b/examples/monitor-webui/web/index.html
@@ -55,6 +55,7 @@
                 <option value="in_progress">In Progress</option>
                 <option value="closed">Closed</option>
             </select>
+            <button id="clear-status" class="button button-clear" style="padding: 0 1rem; height: 2.5rem; line-height: 2.5rem; margin-left: 0.5rem; font-size: 0.8rem;">Clear</button>
         </label>
         <label>
             Priority:
diff --git a/examples/monitor-webui/web/static/js/app.js b/examples/monitor-webui/web/static/js/app.js
index 1c7f62e2..1e79057e 100644
--- a/examples/monitor-webui/web/static/js/app.js
+++ b/examples/monitor-webui/web/static/js/app.js
@@ -103,7 +103,7 @@ async function loadIssues() {
         const response = await fetch('/api/issues');
         if (!response.ok) throw new Error('Failed to load issues');
         allIssues = await response.json();
-        renderIssues(allIssues);
+        filterIssues();
     } catch (error) {
         console.error('Error loading issues:', error);
         showError('Failed to load issues: ' + error.message);
@@ -236,6 +236,11 @@ window.onclick = function(event) {
 
 // Filter event listeners
 document.getElementById('filter-status').addEventListener('change', filterIssues);
+document.getElementById('clear-status').addEventListener('click', function() {
+    const statusSelect = document.getElementById('filter-status');
+    Array.from(statusSelect.options).forEach(opt => opt.selected = false);
+    filterIssues();
+});
 document.getElementById('filter-priority').addEventListener('change', filterIssues);
 document.getElementById('filter-text').addEventListener('input', filterIssues);