Improve web UI: sort/search/context menu, fix security and UX bugs

templates/metrics.html

@@ -20,6 +20,14 @@
   </div>
 </div>
 
+<div id="metrics-error-banner" class="alert alert-danger d-none d-flex align-items-center mb-4" role="alert">
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="flex-shrink-0 me-2" viewBox="0 0 16 16">
+    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+  </svg>
+  <div>Failed to fetch metrics. The API server may be unreachable.</div>
+  <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close" style="font-size: 0.65rem;"></button>
+</div>
+
 <div class="row g-4 mb-4">
   <div class="col-md-6 col-xl-3">
     <div class="card shadow-sm h-100 border-0 metric-card">
@@ -540,9 +548,15 @@
         if (el) el.textContent = data.app.buckets;
 
         countdown = 5;
+        var banner = document.getElementById('metrics-error-banner');
+        if (banner) banner.classList.add('d-none');
       })
       .catch(function(err) {
         console.error('Metrics fetch error:', err);
+        var banner = document.getElementById('metrics-error-banner');
+        if (banner) {
+          banner.classList.remove('d-none');
+        }
       });
   }