feat(monitor-webui): make stats cards interactive filters

- Add click event listeners to stats cards to filter issue list
- Add hover effects and cursor pointer to stats cards
- Update filter logic to sync with stats card clicks

examples/monitor-webui/web/index.html

@@ -29,19 +29,19 @@
         <div class="card stats-card">
             <h2>Statistics</h2>
             <div class="stats-grid" id="stats-grid">
-                <div class="stat-item">
+                <div class="stat-item" id="stat-item-total">
                     <div class="stat-value" id="stat-total">-</div>
                     <div class="stat-label">Total Issues</div>
                 </div>
-                <div class="stat-item">
+                <div class="stat-item" id="stat-item-in-progress">
                     <div class="stat-value" id="stat-in-progress">-</div>
                     <div class="stat-label">In Progress</div>
                 </div>
-                <div class="stat-item">
+                <div class="stat-item" id="stat-item-open">
                     <div class="stat-value" id="stat-open">-</div>
                     <div class="stat-label">Open</div>
                 </div>
-                <div class="stat-item">
+                <div class="stat-item" id="stat-item-closed">
                     <div class="stat-value" id="stat-closed">-</div>
                     <div class="stat-label">Closed</div>
                 </div>

examples/monitor-webui/web/static/css/styles.css

@@ -107,6 +107,13 @@ h1, h2, h3, h4, h5, h6 {
     padding: 1rem;
     background: #f9f9fa;
     border-radius: 6px;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.stat-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 }
 
 .stat-value {

examples/monitor-webui/web/static/js/app.js

@@ -299,6 +299,32 @@ document.getElementById('clear-text').addEventListener('click', function() {
     filterIssues();
 });
 
+// Stat click listeners
+function setStatusFilter(statuses) {
+    const statusSelect = document.getElementById('filter-status');
+    const options = Array.from(statusSelect.options);
+    
+    options.forEach(opt => {
+        if (statuses === 'all') {
+            opt.selected = true;
+        } else {
+            opt.selected = statuses.includes(opt.value);
+        }
+    });
+    
+    // Update toggle button text
+    const allSelected = options.every(opt => opt.selected);
+    const btn = document.getElementById('toggle-status');
+    btn.textContent = allSelected ? 'Select None' : 'Select All';
+    
+    filterIssues();
+}
+
+document.getElementById('stat-item-total').addEventListener('click', () => setStatusFilter('all'));
+document.getElementById('stat-item-open').addEventListener('click', () => setStatusFilter(['open']));
+document.getElementById('stat-item-in-progress').addEventListener('click', () => setStatusFilter(['in_progress']));
+document.getElementById('stat-item-closed').addEventListener('click', () => setStatusFilter(['closed']));
+
 // Reload button listener
 document.getElementById('reload-button').addEventListener('click', reloadData);