feat: add App Config detail page with view/edit mode

Click a row in the admin App Config table to navigate to a dedicated
detail page at /admin/appconfig/:appId. Shows all config fields as
badges in view mode; pencil toggles to edit mode with dropdowns.

Traced processors are now editable (capture mode dropdown + remove
button per processor). Sections and header use card styling for
visual contrast. OidcConfigPage gets the same card treatment.

List page simplified to read-only badge overview with row click
navigation.

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

ui/src/pages/Admin/AppConfigPage.tsx

@@ -1,13 +1,15 @@
-import { useState, useMemo, useCallback } from 'react';
+import { useMemo } from 'react';
 import { useNavigate } from 'react-router';
-import { DataTable, Badge, MonoText, useToast } from '@cameleer/design-system';
+import { DataTable, Badge, MonoText } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
-import { useAllApplicationConfigs, useUpdateApplicationConfig } from '../../api/queries/commands';
+import { useAllApplicationConfigs } from '../../api/queries/commands';
 import type { ApplicationConfig } from '../../api/queries/commands';
 import styles from './AppConfigPage.module.css';
 
 type ConfigRow = ApplicationConfig & { id: string };
 
+type BadgeColor = 'primary' | 'success' | 'warning' | 'error' | 'running' | 'auto';
+
 function timeAgo(iso?: string): string {
   if (!iso) return '\u2014';
   const diff = Date.now() - new Date(iso).getTime();
@@ -20,8 +22,6 @@ function timeAgo(iso?: string): string {
   return `${Math.floor(hours / 24)}d ago`;
 }
 
-type BadgeColor = 'primary' | 'success' | 'warning' | 'error' | 'running' | 'auto';
-
 function logLevelColor(level?: string): BadgeColor {
   switch (level?.toUpperCase()) {
     case 'ERROR': return 'error';
@@ -50,94 +50,9 @@ function payloadColor(mode?: string): BadgeColor {
 
 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 startEditing = useCallback((row: ConfigRow) => {
-    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) => {
-        setEditingApp(null);
-        setDraft({});
-        toast({ title: 'Config updated', description: `${row.application} (v${saved.version})`, variant: 'success' });
-      },
-      onError: () => {
-        toast({ title: 'Config update failed', description: row.application, variant: 'error' });
-      },
-    });
-  }, [draft, updateConfig, toast]);
 
   const columns: Column<ConfigRow>[] = useMemo(() => [
-    {
-      key: '_inspect',
-      header: '',
-      width: '36px',
-      render: (_val, row) => (
-        <button
-          className={styles.inspectLink}
-          title="Open agent page"
-          onClick={(e) => {
-            e.stopPropagation();
-            navigate(`/agents/${row.application}`);
-          }}
-        >
-          &#x2197;
-        </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',
@@ -149,20 +64,6 @@ export default function AppConfigPage() {
       header: 'Log Level',
       render: (_val, row) => {
         const val = row.logForwardingLevel ?? 'INFO';
-        if (editingApp === row.application) {
-          return (
-            <select
-              className={styles.inlineSelect}
-              value={draft.logForwardingLevel ?? val}
-              onChange={(e) => { e.stopPropagation(); setDraft(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>
-          );
-        }
         return <Badge label={val} color={logLevelColor(val)} variant="filled" />;
       },
     },
@@ -171,20 +72,6 @@ export default function AppConfigPage() {
       header: 'Engine Level',
       render: (_val, row) => {
         const val = row.engineLevel ?? 'REGULAR';
-        if (editingApp === row.application) {
-          return (
-            <select
-              className={styles.inlineSelect}
-              value={draft.engineLevel ?? val}
-              onChange={(e) => { e.stopPropagation(); setDraft(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>
-          );
-        }
         return <Badge label={val} color={engineLevelColor(val)} variant="filled" />;
       },
     },
@@ -193,20 +80,6 @@ export default function AppConfigPage() {
       header: 'Payload Capture',
       render: (_val, row) => {
         const val = row.payloadCaptureMode ?? 'NONE';
-        if (editingApp === row.application) {
-          return (
-            <select
-              className={styles.inlineSelect}
-              value={draft.payloadCaptureMode ?? val}
-              onChange={(e) => { e.stopPropagation(); setDraft(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>
-          );
-        }
         return <Badge label={val} color={payloadColor(val)} variant="filled" />;
       },
     },
@@ -214,21 +87,9 @@ export default function AppConfigPage() {
       key: 'metricsEnabled',
       header: 'Metrics',
       width: '80px',
-      render: (_val, row) => {
-        if (editingApp === row.application) {
-          return (
-            <label className={styles.inlineToggle} onClick={(e) => e.stopPropagation()}>
-              <input
-                type="checkbox"
-                checked={draft.metricsEnabled ?? row.metricsEnabled}
-                onChange={(e) => setDraft(d => ({ ...d, metricsEnabled: e.target.checked }))}
-              />
-              <span>{(draft.metricsEnabled ?? row.metricsEnabled) ? 'On' : 'Off'}</span>
-            </label>
-          );
-        }
-        return <Badge label={row.metricsEnabled ? 'On' : 'Off'} color={row.metricsEnabled ? 'success' : 'error'} variant="filled" />;
-      },
+      render: (_val, row) => (
+        <Badge label={row.metricsEnabled ? 'On' : 'Off'} color={row.metricsEnabled ? 'success' : 'error'} variant="filled" />
+      ),
     },
     {
       key: 'tracedProcessors',
@@ -252,13 +113,18 @@ export default function AppConfigPage() {
       header: 'Updated',
       render: (_val, row) => <MonoText size="xs">{timeAgo(row.updatedAt)}</MonoText>,
     },
-  ], [navigate, editingApp, draft, startEditing, cancelEditing, saveEditing, updateConfig.isPending]);
+  ], []);
+
+  function handleRowClick(row: ConfigRow) {
+    navigate(`/admin/appconfig/${row.application}`);
+  }
 
   return (
     <div>
       <DataTable<ConfigRow>
         columns={columns}
         data={(configs ?? []).map(c => ({ ...c, id: c.application }))}
+        onRowClick={handleRowClick}
         pageSize={50}
       />
     </div>