From 74fa08f41fb6c2e010be1fde2e60e1f443804464 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 26 Mar 2026 13:20:11 +0100
Subject: [PATCH] fix: visible Save/Cancel buttons on AgentHealth config edit
 mode

Replace subtle Unicode checkmark/X with proper labeled buttons styled
as primary (Save) and secondary (Cancel) for better visibility.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../pages/AgentHealth/AgentHealth.module.css  | 41 ++++++++++++++++++-
 ui/src/pages/AgentHealth/AgentHealth.tsx      |  6 ++-
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/ui/src/pages/AgentHealth/AgentHealth.module.css b/ui/src/pages/AgentHealth/AgentHealth.module.css
index 5adb55b3..4b2c29f1 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.module.css
+++ b/ui/src/pages/AgentHealth/AgentHealth.module.css
@@ -114,11 +114,48 @@
   opacity: 1;
 }
 
-.configEditBtn:disabled {
-  opacity: 0.3;
+.configActions {
+  display: flex;
+  gap: 8px;
+  align-self: flex-end;
+  margin-left: auto;
+}
+
+.configSaveBtn {
+  padding: 4px 12px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: var(--amber);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.configSaveBtn:hover {
+  background: var(--amber-deep);
+}
+
+.configSaveBtn:disabled {
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
+.configCancelBtn {
+  padding: 4px 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.configCancelBtn:hover {
+  color: var(--text-primary);
+  border-color: var(--text-faint);
+}
+
 /* Section header */
 .sectionTitle {
   font-size: 13px;
diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index 7ce80dc7..0103698c 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -565,8 +565,10 @@ export default function AgentHealth() {
                   <span>{configDraft.metricsEnabled ? 'On' : 'Off'}</span>
                 </label>
               </div>
-              <button className={styles.configEditBtn} title="Save" onClick={saveConfigEdit} disabled={updateConfig.isPending}>&#x2713;</button>
-              <button className={styles.configEditBtn} title="Cancel" onClick={() => { setConfigEditing(false); setConfigDraft({}); }}>&#x2715;</button>
+              <div className={styles.configActions}>
+                <button className={styles.configSaveBtn} onClick={saveConfigEdit} disabled={updateConfig.isPending}>Save</button>
+                <button className={styles.configCancelBtn} onClick={() => { setConfigEditing(false); setConfigDraft({}); }}>Cancel</button>
+              </div>
             </>
           ) : (
             <>