From 185ed2e93cdc2c2cfae8485289eccb162bcab349 Mon Sep 17 00:00:00 2001
From: matt wilkie <maphew@gmail.com>
Date: Fri, 21 Nov 2025 14:17:35 -0700
Subject: [PATCH] feat(monitor-webui): fix priority filter and search clear
 button

- Add event listeners for priority toggle and clear search buttons
- Update priority filter to support multiple selections
- Add dev mode to server for easier development
---
 examples/monitor-webui/main.go              | 28 +++++++------
 examples/monitor-webui/web/index.html       | 13 +++---
 examples/monitor-webui/web/static/js/app.js | 44 +++++++++++++++++++--
 3 files changed, 64 insertions(+), 21 deletions(-)

diff --git a/examples/monitor-webui/main.go b/examples/monitor-webui/main.go
index a42586ff..321bc0f9 100644
--- a/examples/monitor-webui/main.go
+++ b/examples/monitor-webui/main.go
@@ -27,6 +27,7 @@ var (
 	host       = flag.String("host", "localhost", "Host to bind to")
 	dbPath     = flag.String("db", "", "Path to beads database (optional, will auto-detect)")
 	socketPath = flag.String("socket", "", "Path to daemon socket (optional, will auto-detect)")
+	devMode    = flag.Bool("dev", false, "Run in development mode (serve web files from disk)")
 
 	// WebSocket upgrader
 	upgrader = websocket.Upgrader{
@@ -45,6 +46,9 @@ var (
 
 	// RPC client for daemon communication
 	daemonClient *rpc.Client
+
+	// File system for web files
+	webFS fs.FS
 )
 
 func main() {
@@ -57,6 +61,19 @@ func main() {
 
 	flag.Parse()
 
+	// Set up web file system
+	if *devMode {
+		fmt.Println("⚠️  Running in DEVELOPMENT mode: serving web files from disk")
+		webFS = os.DirFS("web")
+	} else {
+		var err error
+		webFS, err = fs.Sub(webFiles, "web")
+		if err != nil {
+			fmt.Fprintf(os.Stderr, "Error accessing embedded web files: %v\n", err)
+			os.Exit(1)
+		}
+	}
+
 	// Find database path if not specified
 	dbPathResolved := *dbPath
 	if dbPathResolved == "" {
@@ -97,11 +114,6 @@ func main() {
 	http.HandleFunc("/ws", handleWebSocket)
 
 	// Serve static files
-	webFS, err := fs.Sub(webFiles, "web")
-	if err != nil {
-		fmt.Fprintf(os.Stderr, "Error accessing web files: %v\n", err)
-		os.Exit(1)
-	}
 	http.Handle("/static/", http.StripPrefix("/", http.FileServer(http.FS(webFS))))
 
 	addr := fmt.Sprintf("%s:%d", *host, *port)
@@ -167,12 +179,6 @@ func handleIndex(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	webFS, err := fs.Sub(webFiles, "web")
-	if err != nil {
-		http.Error(w, "Error accessing web files", http.StatusInternalServerError)
-		return
-	}
-
 	data, err := fs.ReadFile(webFS, "index.html")
 	if err != nil {
 		http.Error(w, "Error reading index.html", http.StatusInternalServerError)
diff --git a/examples/monitor-webui/web/index.html b/examples/monitor-webui/web/index.html
index 2d5b8a71..19187f3b 100644
--- a/examples/monitor-webui/web/index.html
+++ b/examples/monitor-webui/web/index.html
@@ -53,26 +53,27 @@
                 <div class="filter-group">
                     <div class="label-with-action">
                         <label for="filter-status">Status</label>
-                        <button id="toggle-status" class="button-link" title="Toggle Select All/None">Select All</button>
                     </div>
                     <select id="filter-status" multiple>
                         <option value="open" selected>Open</option>
                         <option value="in_progress">In Progress</option>
                         <option value="closed">Closed</option>
                     </select>
+                    <button id="toggle-status" class="button-link" title="Toggle Select All/None">Select All</button>
                 </div>
                 <div class="filter-group">
                     <label for="filter-priority">Priority</label>
-                    <select id="filter-priority">
-                        <option value="">All</option>
-                        <option value="1">P1</option>
-                        <option value="2">P2</option>
-                        <option value="3">P3</option>
+                    <select id="filter-priority" multiple>
+                        <option value="1" selected>P1</option>
+                        <option value="2" selected>P2</option>
+                        <option value="3" selected>P3</option>
                     </select>
+                    <button id="toggle-priority" class="button-link" title="Toggle Select All/None">Select All</button>
                 </div>
                 <div class="filter-group search-group">
                     <label for="filter-text">Search</label>
                     <input type="text" id="filter-text" placeholder="Search issues...">
+                    <button id="clear-text" class="button-link" title="Clear Search">Clear</button>
                 </div>
                 <div class="filter-group action-group">
                     <button class="reload-button" id="reload-button" title="Reload all data">
diff --git a/examples/monitor-webui/web/static/js/app.js b/examples/monitor-webui/web/static/js/app.js
index 55ff49b4..bfeb22a2 100644
--- a/examples/monitor-webui/web/static/js/app.js
+++ b/examples/monitor-webui/web/static/js/app.js
@@ -155,13 +155,18 @@ function renderIssues(issues) {
 function filterIssues() {
     const statusSelect = document.getElementById('filter-status');
     const selectedStatuses = Array.from(statusSelect.selectedOptions).map(opt => opt.value);
-    const priorityFilter = document.getElementById('filter-priority').value;
+    
+    const prioritySelect = document.getElementById('filter-priority');
+    const selectedPriorities = Array.from(prioritySelect.selectedOptions).map(opt => parseInt(opt.value));
+    
     const searchText = document.getElementById('filter-text').value.toLowerCase();
 
     const filtered = allIssues.filter(issue => {
         // If statuses are selected, check if issue status is in the selected list
         if (selectedStatuses.length > 0 && !selectedStatuses.includes(issue.status)) return false;
-        if (priorityFilter && issue.priority !== parseInt(priorityFilter)) return false;
+        
+        // If priorities are selected, check if issue priority is in the selected list
+        if (selectedPriorities.length > 0 && !selectedPriorities.includes(issue.priority)) return false;
         
         if (searchText) {
             const title = (issue.title || '').toLowerCase();
@@ -250,7 +255,7 @@ document.getElementById('toggle-status').addEventListener('click', function() {
     const btn = document.getElementById('toggle-status');
 
     if (allSelected) {
-        // Select None (which effectively shows all, but we'll clear selection)
+        // Select None
         options.forEach(opt => opt.selected = false);
         btn.textContent = 'Select All';
     } else {
@@ -260,8 +265,39 @@ document.getElementById('toggle-status').addEventListener('click', function() {
     }
     filterIssues();
 });
-document.getElementById('filter-priority').addEventListener('change', filterIssues);
+
+document.getElementById('filter-priority').addEventListener('change', function() {
+    const prioritySelect = document.getElementById('filter-priority');
+    const options = Array.from(prioritySelect.options);
+    const allSelected = options.every(opt => opt.selected);
+    const btn = document.getElementById('toggle-priority');
+    btn.textContent = allSelected ? 'Select None' : 'Select All';
+    filterIssues();
+});
+
+document.getElementById('toggle-priority').addEventListener('click', function() {
+    const prioritySelect = document.getElementById('filter-priority');
+    const options = Array.from(prioritySelect.options);
+    const allSelected = options.every(opt => opt.selected);
+    const btn = document.getElementById('toggle-priority');
+
+    if (allSelected) {
+        // Select None
+        options.forEach(opt => opt.selected = false);
+        btn.textContent = 'Select All';
+    } else {
+        // Select All
+        options.forEach(opt => opt.selected = true);
+        btn.textContent = 'Select None';
+    }
+    filterIssues();
+});
+
 document.getElementById('filter-text').addEventListener('input', filterIssues);
+document.getElementById('clear-text').addEventListener('click', function() {
+    document.getElementById('filter-text').value = '';
+    filterIssues();
+});
 
 // Reload button listener
 document.getElementById('reload-button').addEventListener('click', reloadData);