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/Admin/AppConfigPage.module.css

@@ -16,6 +16,34 @@
   opacity: 1;
 }
 
+.editBtn {
+  background: transparent;
+  border: none;
+  color: var(--text-faint);
+  opacity: 0.75;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 2px 4px;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+  display: inline-flex;
+}
+
+.editBtn:hover {
+  color: var(--text-primary);
+  opacity: 1;
+}
+
+.editBtn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.editActions {
+  display: inline-flex;
+  gap: 2px;
+}
+
 .inlineSelect {
   padding: 3px 8px;
   border: 1px solid var(--border-subtle);

ui/src/pages/Admin/AppConfigPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import { useNavigate } from 'react-router';
 import { DataTable, Badge, MonoText, useToast } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
@@ -20,7 +20,9 @@ function timeAgo(iso?: string): string {
   return `${Math.floor(hours / 24)}d ago`;
 }
 
-function logLevelColor(level?: string): string {
+type BadgeColor = 'primary' | 'success' | 'warning' | 'error' | 'running' | 'auto';
+
+function logLevelColor(level?: string): BadgeColor {
   switch (level?.toUpperCase()) {
     case 'ERROR': return 'error';
     case 'WARN': return 'warning';
@@ -29,23 +31,59 @@ function logLevelColor(level?: string): string {
   }
 }
 
+function engineLevelColor(level?: string): BadgeColor {
+  switch (level?.toUpperCase()) {
+    case 'NONE': return 'error';
+    case 'MINIMAL': return 'warning';
+    case 'COMPLETE': return 'running';
+    default: return 'success';
+  }
+}
+
+function payloadColor(mode?: string): BadgeColor {
+  switch (mode?.toUpperCase()) {
+    case 'INPUT': case 'OUTPUT': return 'warning';
+    case 'BOTH': return 'running';
+    default: return 'auto';
+  }
+}
+
 export default function AppConfigPage() {
   const navigate = useNavigate();
   const { toast } = useToast();
   const { data: configs } = useAllApplicationConfigs();
   const updateConfig = useUpdateApplicationConfig();
+  const [editingApp, setEditingApp] = useState<string | null>(null);
+  const [draft, setDraft] = useState<Partial<ApplicationConfig>>({});
 
-  const handleChange = useCallback((config: ApplicationConfig, field: string, value: string | boolean) => {
+  const startEditing = useCallback((row: ConfigRow) => {
-    const updated = { ...config, [field]: value };
+    setEditingApp(row.application);
+    setDraft({
+      logForwardingLevel: row.logForwardingLevel ?? 'INFO',
+      engineLevel: row.engineLevel ?? 'REGULAR',
+      payloadCaptureMode: row.payloadCaptureMode ?? 'NONE',
+      metricsEnabled: row.metricsEnabled,
+    });
+  }, []);
+
+  const cancelEditing = useCallback(() => {
+    setEditingApp(null);
+    setDraft({});
+  }, []);
+
+  const saveEditing = useCallback((row: ConfigRow) => {
+    const updated = { ...row, ...draft };
     updateConfig.mutate(updated, {
       onSuccess: (saved) => {
-        toast({ title: 'Config updated', description: `${config.application}: ${field} \u2192 ${value} (v${saved.version})`, variant: 'success' });
+        setEditingApp(null);
+        setDraft({});
+        toast({ title: 'Config updated', description: `${row.application} (v${saved.version})`, variant: 'success' });
       },
       onError: () => {
-        toast({ title: 'Config update failed', description: config.application, variant: 'error' });
+        toast({ title: 'Config update failed', description: row.application, variant: 'error' });
       },
     });
-  }, [updateConfig, toast]);
+  }, [draft, updateConfig, toast]);
 
   const columns: Column<ConfigRow>[] = useMemo(() => [
     {
@@ -65,6 +103,41 @@ export default function AppConfigPage() {
         </button>
       ),
     },
+    {
+      key: '_edit',
+      header: '',
+      width: '36px',
+      render: (_val, row) => {
+        const isEditing = editingApp === row.application;
+        return isEditing ? (
+          <span className={styles.editActions}>
+            <button
+              className={styles.editBtn}
+              title="Save"
+              onClick={(e) => { e.stopPropagation(); saveEditing(row); }}
+              disabled={updateConfig.isPending}
+            >
+              &#x2713;
+            </button>
+            <button
+              className={styles.editBtn}
+              title="Cancel"
+              onClick={(e) => { e.stopPropagation(); cancelEditing(); }}
+            >
+              &#x2715;
+            </button>
+          </span>
+        ) : (
+          <button
+            className={styles.editBtn}
+            title="Edit config"
+            onClick={(e) => { e.stopPropagation(); startEditing(row); }}
+          >
+            &#x270E;
+          </button>
+        );
+      },
+    },
     {
       key: 'application',
       header: 'Application',
@@ -74,69 +147,88 @@ export default function AppConfigPage() {
     {
       key: 'logForwardingLevel',
       header: 'Log Level',
-      render: (_val, row) => (
+      render: (_val, row) => {
+        const val = row.logForwardingLevel ?? 'INFO';
+        if (editingApp === row.application) {
+          return (
             <select
               className={styles.inlineSelect}
-          value={row.logForwardingLevel ?? 'INFO'}
+              value={draft.logForwardingLevel ?? val}
-          onChange={(e) => { e.stopPropagation(); handleChange(row, 'logForwardingLevel', e.target.value); }}
+              onChange={(e) => { e.stopPropagation(); setDraft(d => ({ ...d, 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>
-      ),
+          );
+        }
+        return <Badge label={val} color={logLevelColor(val)} variant="filled" />;
+      },
     },
     {
       key: 'engineLevel',
       header: 'Engine Level',
-      render: (_val, row) => (
+      render: (_val, row) => {
+        const val = row.engineLevel ?? 'REGULAR';
+        if (editingApp === row.application) {
+          return (
             <select
               className={styles.inlineSelect}
-          value={row.engineLevel ?? 'REGULAR'}
+              value={draft.engineLevel ?? val}
-          onChange={(e) => { e.stopPropagation(); handleChange(row, 'engineLevel', e.target.value); }}
+              onChange={(e) => { e.stopPropagation(); setDraft(d => ({ ...d, 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>
-      ),
+          );
+        }
+        return <Badge label={val} color={engineLevelColor(val)} variant="filled" />;
+      },
     },
     {
       key: 'payloadCaptureMode',
       header: 'Payload Capture',
-      render: (_val, row) => (
+      render: (_val, row) => {
+        const val = row.payloadCaptureMode ?? 'NONE';
+        if (editingApp === row.application) {
+          return (
             <select
               className={styles.inlineSelect}
-          value={row.payloadCaptureMode ?? 'NONE'}
+              value={draft.payloadCaptureMode ?? val}
-          onChange={(e) => { e.stopPropagation(); handleChange(row, 'payloadCaptureMode', e.target.value); }}
+              onChange={(e) => { e.stopPropagation(); setDraft(d => ({ ...d, 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>
-      ),
+          );
+        }
+        return <Badge label={val} color={payloadColor(val)} variant="filled" />;
+      },
     },
     {
       key: 'metricsEnabled',
       header: 'Metrics',
       width: '80px',
-      render: (_val, row) => (
+      render: (_val, row) => {
+        if (editingApp === row.application) {
+          return (
             <label className={styles.inlineToggle} onClick={(e) => e.stopPropagation()}>
               <input
                 type="checkbox"
-            checked={row.metricsEnabled}
+                checked={draft.metricsEnabled ?? row.metricsEnabled}
-            onChange={(e) => handleChange(row, 'metricsEnabled', e.target.checked)}
+                onChange={(e) => setDraft(d => ({ ...d, metricsEnabled: e.target.checked }))}
-            disabled={updateConfig.isPending}
               />
-          <span>{row.metricsEnabled ? 'On' : 'Off'}</span>
+              <span>{(draft.metricsEnabled ?? row.metricsEnabled) ? 'On' : 'Off'}</span>
             </label>
-      ),
+          );
+        }
+        return <Badge label={row.metricsEnabled ? 'On' : 'Off'} color={row.metricsEnabled ? 'success' : 'error'} variant="filled" />;
+      },
     },
     {
       key: 'tracedProcessors',
@@ -160,7 +252,7 @@ export default function AppConfigPage() {
       header: 'Updated',
       render: (_val, row) => <MonoText size="xs">{timeAgo(row.updatedAt)}</MonoText>,
     },
-  ], [navigate, handleChange, updateConfig.isPending]);
+  ], [navigate, editingApp, draft, startEditing, cancelEditing, saveEditing, updateConfig.isPending]);
 
   return (
     <div>

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,14 +525,12 @@ export default function AgentHealth() {
       {/* Application config bar */}
       {appId && appConfig && (
         <div className={styles.configBar}>
+          {configEditing ? (
+            <>
               <div className={styles.configField}>
                 <span className={styles.configLabel}>Log Level</span>
-            <select
+                <select className={styles.configSelect} value={String(configDraft.logForwardingLevel ?? 'INFO')}
-              className={styles.configSelect}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, logForwardingLevel: e.target.value }))}>
-              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>
@@ -525,12 +539,8 @@ export default function AgentHealth() {
               </div>
               <div className={styles.configField}>
                 <span className={styles.configLabel}>Engine Level</span>
-            <select
+                <select className={styles.configSelect} value={String(configDraft.engineLevel ?? 'REGULAR')}
-              className={styles.configSelect}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, engineLevel: e.target.value }))}>
-              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>
@@ -539,12 +549,8 @@ export default function AgentHealth() {
               </div>
               <div className={styles.configField}>
                 <span className={styles.configLabel}>Payload Capture</span>
-            <select
+                <select className={styles.configSelect} value={String(configDraft.payloadCaptureMode ?? 'NONE')}
-              className={styles.configSelect}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, payloadCaptureMode: e.target.value }))}>
-              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>
@@ -554,15 +560,46 @@ export default function AgentHealth() {
               <div className={styles.configField}>
                 <span className={styles.configLabel}>Metrics</span>
                 <label className={styles.configToggle}>
-              <input
+                  <input type="checkbox" checked={Boolean(configDraft.metricsEnabled)}
-                type="checkbox"
+                    onChange={(e) => setConfigDraft(d => ({ ...d, metricsEnabled: e.target.checked }))} />
-                checked={appConfig.metricsEnabled}
+                  <span>{configDraft.metricsEnabled ? 'On' : 'Off'}</span>
-                onChange={(e) => handleConfigChange('metricsEnabled', e.target.checked)}
-                disabled={updateConfig.isPending}
-              />
-              <span>{appConfig.metricsEnabled ? 'Enabled' : 'Disabled'}</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>
       )}