From dd6ea7563f84dd16b9853ea1561c94753e8e20fe Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 26 Mar 2026 21:30:35 +0100
Subject: [PATCH] feat: use Toggle switch for metrics setting on AgentHealth
 config bar

Replaces the plain checkbox with the design system Toggle component
for consistency with the recording toggle on RouteDetail and
AppConfigDetailPage.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/AgentHealth/AgentHealth.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index 0103698c..5e8e9f0a 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -3,7 +3,7 @@ import { useParams, useNavigate } from 'react-router';
 import {
   StatCard, StatusDot, Badge, MonoText, ProgressBar,
   GroupCard, DataTable, LineChart, EventFeed, DetailPanel,
-  LogViewer, ButtonGroup, SectionHeader, useToast,
+  LogViewer, ButtonGroup, SectionHeader, Toggle, useToast,
 } from '@cameleer/design-system';
 import type { Column, FeedEvent, LogEntry, ButtonGroupItem } from '@cameleer/design-system';
 import styles from './AgentHealth.module.css';
@@ -559,11 +559,8 @@ export default function AgentHealth() {
               </div>
               <div className={styles.configField}>
                 <span className={styles.configLabel}>Metrics</span>
-                <label className={styles.configToggle}>
-                  <input type="checkbox" checked={Boolean(configDraft.metricsEnabled)}
-                    onChange={(e) => setConfigDraft(d => ({ ...d, metricsEnabled: e.target.checked }))} />
-                  <span>{configDraft.metricsEnabled ? 'On' : 'Off'}</span>
-                </label>
+                <Toggle checked={Boolean(configDraft.metricsEnabled)}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, metricsEnabled: (e.target as HTMLInputElement).checked }))} />
               </div>
               <div className={styles.configActions}>
                 <button className={styles.configSaveBtn} onClick={saveConfigEdit} disabled={updateConfig.isPending}>Save</button>