From 94983c43e9d82e61a62daa1797c3c5f839efed4f Mon Sep 17 00:00:00 2001
From: Tomas Kracmar <tomas.kracmar@cqre.net>
Date: Wed, 22 Apr 2026 14:21:34 +0200
Subject: [PATCH] fix: alert panel always visible, version display
 normalization

- Remove x-show condition hiding alert panel when no alerts exist
- Add empty state message explaining alerts appear on rule triggers
- Normalize appVersion in loadVersion() to strip leading 'v' (prevents vv1.7.0 in footer)
---
 backend/frontend/index.html | 9 ++++++---
 backend/frontend/style.css  | 9 +++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/backend/frontend/index.html b/backend/frontend/index.html
index 369a319..5369818 100644
--- a/backend/frontend/index.html
+++ b/backend/frontend/index.html
@@ -70,7 +70,7 @@
       </div>
     </section>
 
-    <section class="panel" x-show="alertSummary.total_open > 0 || alerts.length > 0">
+    <section class="panel">
       <div class="panel-header">
         <h3>Alerts</h3>
         <span x-text="`${alertSummary.total_open} open`" class="alert-open-count"></span>
@@ -90,7 +90,7 @@
           <option value="low">Low</option>
         </select>
       </div>
-      <div class="alerts-list">
+      <div class="alerts-list" x-show="alerts.length > 0">
         <template x-for="alert in alerts" :key="alert._id || alert.event_id">
           <div class="alert-card" :class="'alert-card--' + alert.severity">
             <div class="alert-card__meta">
@@ -109,6 +109,9 @@
           </div>
         </template>
       </div>
+      <div class="alerts-empty" x-show="alerts.length === 0">
+        <p>No alerts match the current filters. Alerts appear here when rules trigger during event ingestion.</p>
+      </div>
       <div class="pagination" x-show="alertsTotal > 20">
         <button type="button" :disabled="alertsPage === 1" @click="alertsPage--; loadAlerts()">Prev</button>
         <span x-text="`Page ${alertsPage}`"></span>
@@ -415,7 +418,7 @@
             const res = await fetch('/api/version');
             if (res.ok) {
               const body = await res.json();
-              this.appVersion = body.version || '';
+              this.appVersion = (body.version || '').replace(/^v/, '');
             }
           } catch {}
         },
diff --git a/backend/frontend/style.css b/backend/frontend/style.css
index aa27eba..77e4b20 100644
--- a/backend/frontend/style.css
+++ b/backend/frontend/style.css
@@ -809,6 +809,15 @@ input {
   flex-wrap: wrap;
 }
 
+.alerts-empty {
+  padding: 20px;
+  text-align: center;
+  color: var(--muted);
+  font-size: 14px;
+  border: 1px dashed var(--border);
+  border-radius: 10px;
+}
+
 @media (max-width: 640px) {
   .topbar {
     flex-direction: column;