From 798fbf6ecf5e12ac3bb290cd66549f8d3adc557c Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Wed, 20 Aug 2025 14:51:26 +0000
Subject: [PATCH] feat: add UI hints about Proxmox tag-based alert control

- added prominent help box in Alerts overview showing available tags
- updated Custom Rules tab to show tags in priority order
- made feature discoverable without reading documentation
- emphasized use cases (dev VMs, TrueNAS, maintenance windows)
---
 .../src/components/Alerts/CustomRulesTab.tsx  |  8 ++++---
 frontend-modern/src/pages/Alerts.tsx          | 23 +++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/frontend-modern/src/components/Alerts/CustomRulesTab.tsx b/frontend-modern/src/components/Alerts/CustomRulesTab.tsx
index 427ef96ed..b5e3d720d 100644
--- a/frontend-modern/src/components/Alerts/CustomRulesTab.tsx
+++ b/frontend-modern/src/components/Alerts/CustomRulesTab.tsx
@@ -61,12 +61,14 @@ export function CustomRulesTab(props: CustomRulesTabProps) {
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
           </svg>
           <div class="text-sm text-blue-800 dark:text-blue-200">
-            <p class="font-medium mb-1">Alert Priority Order:</p>
+            <p class="font-medium mb-1">Alert Control Methods:</p>
             <ol class="list-decimal list-inside space-y-0.5 text-xs">
-              <li>Guest-specific overrides (highest priority)</li>
+              <li>Proxmox VM/CT tags (pulse-no-alerts, pulse-monitor-only, pulse-relaxed)</li>
+              <li>Guest-specific overrides in Settings</li>
               <li>Custom rules (evaluated by priority number)</li>
-              <li>Global default thresholds (lowest priority)</li>
+              <li>Global default thresholds</li>
             </ol>
+            <p class="text-xs mt-2 italic">Tip: Use Proxmox tags for direct VM control without UI navigation!</p>
           </div>
         </div>
       </div>
diff --git a/frontend-modern/src/pages/Alerts.tsx b/frontend-modern/src/pages/Alerts.tsx
index 0fd669623..92ef43066 100644
--- a/frontend-modern/src/pages/Alerts.tsx
+++ b/frontend-modern/src/pages/Alerts.tsx
@@ -689,6 +689,29 @@ function OverviewTab(props: { overrides: Override[]; activeAlerts: Record<string
         </div>
       </div>
       
+      {/* Proxmox Tags Help */}
+      <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
+        <div class="flex items-start gap-3">
+          <svg class="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <div class="text-sm">
+            <p class="font-medium text-green-800 dark:text-green-200 mb-1">💡 Quick Tip: Control alerts directly in Proxmox!</p>
+            <p class="text-green-700 dark:text-green-300 mb-2">
+              Add these tags to any VM/CT in Proxmox to control alert behavior without navigating to Pulse:
+            </p>
+            <ul class="space-y-1 text-xs text-green-700 dark:text-green-300">
+              <li><code class="bg-green-100 dark:bg-green-900/50 px-1 py-0.5 rounded">pulse-no-alerts</code> - Disable all alerts for maintenance or special VMs</li>
+              <li><code class="bg-green-100 dark:bg-green-900/50 px-1 py-0.5 rounded">pulse-monitor-only</code> - Show in UI but don't send notifications</li>
+              <li><code class="bg-green-100 dark:bg-green-900/50 px-1 py-0.5 rounded">pulse-relaxed</code> - Use higher thresholds (95% CPU/RAM, 98% disk)</li>
+            </ul>
+            <p class="text-xs text-green-600 dark:text-green-400 mt-2">
+              Perfect for dev VMs, services that run hot (TrueNAS, databases), or temporary maintenance windows.
+            </p>
+          </div>
+        </div>
+      </div>
+      
       {/* Recent Alerts */}
       <div>
         <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Active Alerts</h3>