refactor: config settings shown as badges with pencil-to-edit

Settings (log level, engine level, payload capture, metrics) now
display as color-coded badges by default. Clicking the pencil icon
enters edit mode where badges become dropdowns. Save (checkmark)
persists changes and reverts to badge view; cancel discards changes.

Applied consistently on both the admin App Config page and the
AgentHealth config bar.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/pages/AgentHealth/AgentHealth.module.css

@@ -94,6 +94,31 @@
   cursor: pointer;
 }
 
+.configEditBtn {
+  background: transparent;
+  border: none;
+  color: var(--text-faint);
+  opacity: 0.75;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px 6px;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+  display: inline-flex;
+  align-self: flex-end;
+  margin-left: auto;
+}
+
+.configEditBtn:hover {
+  color: var(--text-primary);
+  opacity: 1;
+}
+
+.configEditBtn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
 /* Section header */
 .sectionTitle {
   font-size: 13px;

ui/src/pages/AgentHealth/AgentHealth.tsx

@@ -247,18 +247,34 @@ export default function AgentHealth() {
   const { data: appConfig } = useApplicationConfig(appId);
   const updateConfig = useUpdateApplicationConfig();
 
-  const handleConfigChange = useCallback((field: string, value: string | boolean) => {
+  const [configEditing, setConfigEditing] = useState(false);
+  const [configDraft, setConfigDraft] = useState<Record<string, string | boolean>>({});
+
+  const startConfigEdit = useCallback(() => {
     if (!appConfig) return;
-    const updated = { ...appConfig, [field]: value };
+    setConfigDraft({
+      logForwardingLevel: appConfig.logForwardingLevel ?? 'INFO',
+      engineLevel: appConfig.engineLevel ?? 'REGULAR',
+      payloadCaptureMode: appConfig.payloadCaptureMode ?? 'NONE',
+      metricsEnabled: appConfig.metricsEnabled,
+    });
+    setConfigEditing(true);
+  }, [appConfig]);
+
+  const saveConfigEdit = useCallback(() => {
+    if (!appConfig) return;
+    const updated = { ...appConfig, ...configDraft };
     updateConfig.mutate(updated, {
       onSuccess: (saved) => {
-        toast({ title: 'Config updated', description: `${field} → ${value} (v${saved.version})`, variant: 'success' });
+        setConfigEditing(false);
+        setConfigDraft({});
+        toast({ title: 'Config updated', description: `${appId} (v${saved.version})`, variant: 'success' });
       },
       onError: () => {
         toast({ title: 'Config update failed', variant: 'error' });
       },
     });
-  }, [appConfig, updateConfig, toast]);
+  }, [appConfig, configDraft, updateConfig, toast, appId]);
   const [eventSortAsc, setEventSortAsc] = useState(false);
   const [eventRefreshTo, setEventRefreshTo] = useState<string | undefined>();
   const { data: events } = useAgentEvents(appId, undefined, 50, eventRefreshTo);
@@ -509,60 +525,81 @@ export default function AgentHealth() {
       {/* Application config bar */}
       {appId && appConfig && (
         <div className={styles.configBar}>
-          <div className={styles.configField}>
-            <span className={styles.configLabel}>Log Level</span>
-            <select
-              className={styles.configSelect}
-              value={appConfig.logForwardingLevel ?? 'INFO'}
-              onChange={(e) => handleConfigChange('logForwardingLevel', e.target.value)}
-              disabled={updateConfig.isPending}
-            >
-              <option value="ERROR">ERROR</option>
-              <option value="WARN">WARN</option>
-              <option value="INFO">INFO</option>
-              <option value="DEBUG">DEBUG</option>
-            </select>
-          </div>
-          <div className={styles.configField}>
-            <span className={styles.configLabel}>Engine Level</span>
-            <select
-              className={styles.configSelect}
-              value={appConfig.engineLevel ?? 'REGULAR'}
-              onChange={(e) => handleConfigChange('engineLevel', e.target.value)}
-              disabled={updateConfig.isPending}
-            >
-              <option value="NONE">None</option>
-              <option value="MINIMAL">Minimal</option>
-              <option value="REGULAR">Regular</option>
-              <option value="COMPLETE">Complete</option>
-            </select>
-          </div>
-          <div className={styles.configField}>
-            <span className={styles.configLabel}>Payload Capture</span>
-            <select
-              className={styles.configSelect}
-              value={appConfig.payloadCaptureMode ?? 'NONE'}
-              onChange={(e) => handleConfigChange('payloadCaptureMode', e.target.value)}
-              disabled={updateConfig.isPending}
-            >
-              <option value="NONE">None</option>
-              <option value="INPUT">Input</option>
-              <option value="OUTPUT">Output</option>
-              <option value="BOTH">Both</option>
-            </select>
-          </div>
-          <div className={styles.configField}>
-            <span className={styles.configLabel}>Metrics</span>
-            <label className={styles.configToggle}>
-              <input
-                type="checkbox"
-                checked={appConfig.metricsEnabled}
-                onChange={(e) => handleConfigChange('metricsEnabled', e.target.checked)}
-                disabled={updateConfig.isPending}
-              />
-              <span>{appConfig.metricsEnabled ? 'Enabled' : 'Disabled'}</span>
-            </label>
-          </div>
+          {configEditing ? (
+            <>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Log Level</span>
+                <select className={styles.configSelect} value={String(configDraft.logForwardingLevel ?? 'INFO')}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, logForwardingLevel: e.target.value }))}>
+                  <option value="ERROR">ERROR</option>
+                  <option value="WARN">WARN</option>
+                  <option value="INFO">INFO</option>
+                  <option value="DEBUG">DEBUG</option>
+                </select>
+              </div>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Engine Level</span>
+                <select className={styles.configSelect} value={String(configDraft.engineLevel ?? 'REGULAR')}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, engineLevel: e.target.value }))}>
+                  <option value="NONE">None</option>
+                  <option value="MINIMAL">Minimal</option>
+                  <option value="REGULAR">Regular</option>
+                  <option value="COMPLETE">Complete</option>
+                </select>
+              </div>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Payload Capture</span>
+                <select className={styles.configSelect} value={String(configDraft.payloadCaptureMode ?? 'NONE')}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, payloadCaptureMode: e.target.value }))}>
+                  <option value="NONE">None</option>
+                  <option value="INPUT">Input</option>
+                  <option value="OUTPUT">Output</option>
+                  <option value="BOTH">Both</option>
+                </select>
+              </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>
+              </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.configField}>
+                <span className={styles.configLabel}>Log Level</span>
+                <Badge label={appConfig.logForwardingLevel ?? 'INFO'} color={
+                  (appConfig.logForwardingLevel ?? 'INFO') === 'ERROR' ? 'error'
+                  : (appConfig.logForwardingLevel ?? 'INFO') === 'WARN' ? 'warning'
+                  : (appConfig.logForwardingLevel ?? 'INFO') === 'DEBUG' ? 'running' : 'success'
+                } variant="filled" />
+              </div>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Engine Level</span>
+                <Badge label={appConfig.engineLevel ?? 'REGULAR'} color={
+                  (appConfig.engineLevel ?? 'REGULAR') === 'NONE' ? 'error'
+                  : (appConfig.engineLevel ?? 'REGULAR') === 'MINIMAL' ? 'warning'
+                  : (appConfig.engineLevel ?? 'REGULAR') === 'COMPLETE' ? 'running' : 'success'
+                } variant="filled" />
+              </div>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Payload Capture</span>
+                <Badge label={appConfig.payloadCaptureMode ?? 'NONE'} color={
+                  (appConfig.payloadCaptureMode ?? 'NONE') === 'BOTH' ? 'running'
+                  : (appConfig.payloadCaptureMode ?? 'NONE') === 'NONE' ? 'auto' : 'warning'
+                } variant="filled" />
+              </div>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Metrics</span>
+                <Badge label={appConfig.metricsEnabled ? 'On' : 'Off'} color={appConfig.metricsEnabled ? 'success' : 'error'} variant="filled" />
+              </div>
+              <button className={styles.configEditBtn} title="Edit config" onClick={startConfigEdit}>&#x270E;</button>
+            </>
+          )}
         </div>
       )}