refactor: replace native HTML with design system components (Phase 5)

- EnvironmentSelector: bare <select> -> DS Select
- LogTab: raw <table> + <input> + <button> -> DS LogViewer + Input + Button
- AppsTab: 3 homegrown sub-tab bars -> DS Tabs, remove unused CSS
- AppConfigDetailPage: 4x <select> -> DS Select, 2x <input checkbox> ->
  DS Toggle, 7x <label> -> DS Label, 4x <button> -> DS Button
- AgentHealth: 4x <select> -> DS Select, 7x <button> -> DS Button

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

ui/src/pages/Admin/AppConfigDetailPage.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router';
 import { ArrowLeft, Pencil, X } from 'lucide-react';
 import {
-  Button, SectionHeader, MonoText, Badge, DataTable, Spinner, Toggle, useToast,
+  Button, SectionHeader, MonoText, Badge, DataTable, Spinner, Toggle, Select, Label, useToast,
 } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
 import { useApplicationConfig, useUpdateApplicationConfig } from '../../api/queries/commands';
@@ -205,16 +205,16 @@ export default function AppConfigDetailPage() {
         }
         if (editing) {
           return (
-            <select
-              className={styles.select}
+            <Select
               value={row.captureMode}
               onChange={(e) => updateTracedProcessor(row.processorId, e.target.value)}
-            >
-              <option value="NONE">None</option>
-              <option value="INPUT">Input</option>
-              <option value="OUTPUT">Output</option>
-              <option value="BOTH">Both</option>
-            </select>
+              options={[
+                { value: 'NONE', label: 'None' },
+                { value: 'INPUT', label: 'Input' },
+                { value: 'OUTPUT', label: 'Output' },
+                { value: 'BOTH', label: 'Both' },
+              ]}
+            />
           );
         }
         return <Badge label={row.captureMode} color={captureColor(row.captureMode)} variant="filled" />;
@@ -248,9 +248,9 @@ export default function AppConfigDetailPage() {
       render: (_v: unknown, row: TracedTapRow) => {
         if (row.captureMode === null) return null;
         return (
-          <button className={styles.removeBtn} title="Remove" onClick={() => updateTracedProcessor(row.processorId, 'REMOVE')}>
+          <Button variant="ghost" size="sm" title="Remove" onClick={() => updateTracedProcessor(row.processorId, 'REMOVE')}>
             <X size={14} />
-          </button>
+          </Button>
         );
       },
     }] : []),
@@ -304,16 +304,16 @@ export default function AppConfigDetailPage() {
   return (
     <div className={styles.page}>
       <div className={styles.toolbar}>
-        <button className={styles.backBtn} onClick={() => navigate('/admin/appconfig')}><ArrowLeft size={14} /> Back</button>
+        <Button variant="ghost" size="sm" onClick={() => navigate('/admin/appconfig')}><ArrowLeft size={14} /> Back</Button>
         {editing ? (
           <div className={styles.toolbarActions}>
             <Button onClick={handleSave} disabled={updateConfig.isPending}>
               {updateConfig.isPending ? 'Saving\u2026' : 'Save'}
             </Button>
-            <button className={styles.cancelBtn} onClick={cancelEditing}>Cancel</button>
+            <Button variant="secondary" size="sm" onClick={cancelEditing}>Cancel</Button>
           </div>
         ) : (
-          <button className={styles.editBtn} onClick={startEditing}><Pencil size={14} /> Edit</button>
+          <Button variant="secondary" size="sm" onClick={startEditing}><Pencil size={14} /> Edit</Button>
         )}
       </div>
 
@@ -330,79 +330,87 @@ export default function AppConfigDetailPage() {
         <SectionHeader>Settings</SectionHeader>
         <div className={styles.settingsGrid}>
           <div className={styles.field}>
-            <label className={styles.label}>App Log Level</label>
+            <Label>App Log Level</Label>
             {editing ? (
-              <select className={styles.select} value={String(form.applicationLogLevel)}
-                onChange={(e) => updateField('applicationLogLevel', e.target.value)}>
-                <option value="ERROR">ERROR</option>
-                <option value="WARN">WARN</option>
-                <option value="INFO">INFO</option>
-                <option value="DEBUG">DEBUG</option>
-                <option value="TRACE">TRACE</option>
-              </select>
+              <Select value={String(form.applicationLogLevel)}
+                onChange={(e) => updateField('applicationLogLevel', e.target.value)}
+                options={[
+                  { value: 'ERROR', label: 'ERROR' },
+                  { value: 'WARN', label: 'WARN' },
+                  { value: 'INFO', label: 'INFO' },
+                  { value: 'DEBUG', label: 'DEBUG' },
+                  { value: 'TRACE', label: 'TRACE' },
+                ]}
+              />
             ) : (
               <Badge label={String(form.applicationLogLevel)} color={logLevelColor(form.applicationLogLevel as string)} variant="filled" />
             )}
           </div>
           <div className={styles.field}>
-            <label className={styles.label}>Agent Log Level</label>
+            <Label>Agent Log Level</Label>
             {editing ? (
-              <select className={styles.select} value={String(form.agentLogLevel ?? 'INFO')}
-                onChange={(e) => updateField('agentLogLevel', e.target.value)}>
-                <option value="ERROR">ERROR</option>
-                <option value="WARN">WARN</option>
-                <option value="INFO">INFO</option>
-                <option value="DEBUG">DEBUG</option>
-                <option value="TRACE">TRACE</option>
-              </select>
+              <Select value={String(form.agentLogLevel ?? 'INFO')}
+                onChange={(e) => updateField('agentLogLevel', e.target.value)}
+                options={[
+                  { value: 'ERROR', label: 'ERROR' },
+                  { value: 'WARN', label: 'WARN' },
+                  { value: 'INFO', label: 'INFO' },
+                  { value: 'DEBUG', label: 'DEBUG' },
+                  { value: 'TRACE', label: 'TRACE' },
+                ]}
+              />
             ) : (
               <Badge label={String(form.agentLogLevel ?? 'INFO')} color={logLevelColor(form.agentLogLevel as string)} variant="filled" />
             )}
           </div>
           <div className={styles.field}>
-            <label className={styles.label}>Engine Level</label>
+            <Label>Engine Level</Label>
             {editing ? (
-              <select className={styles.select} value={String(form.engineLevel)}
-                onChange={(e) => updateField('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>
+              <Select value={String(form.engineLevel)}
+                onChange={(e) => updateField('engineLevel', e.target.value)}
+                options={[
+                  { value: 'NONE', label: 'None' },
+                  { value: 'MINIMAL', label: 'Minimal' },
+                  { value: 'REGULAR', label: 'Regular' },
+                  { value: 'COMPLETE', label: 'Complete' },
+                ]}
+              />
             ) : (
               <Badge label={String(form.engineLevel)} color={engineLevelColor(form.engineLevel as string)} variant="filled" />
             )}
           </div>
           <div className={styles.field}>
-            <label className={styles.label}>Payload Capture</label>
+            <Label>Payload Capture</Label>
             {editing ? (
-              <select className={styles.select} value={String(form.payloadCaptureMode)}
-                onChange={(e) => updateField('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>
+              <Select value={String(form.payloadCaptureMode)}
+                onChange={(e) => updateField('payloadCaptureMode', e.target.value)}
+                options={[
+                  { value: 'NONE', label: 'None' },
+                  { value: 'INPUT', label: 'Input' },
+                  { value: 'OUTPUT', label: 'Output' },
+                  { value: 'BOTH', label: 'Both' },
+                ]}
+              />
             ) : (
               <Badge label={String(form.payloadCaptureMode)} color={payloadColor(form.payloadCaptureMode as string)} variant="filled" />
             )}
           </div>
           <div className={styles.field}>
-            <label className={styles.label}>Metrics</label>
+            <Label>Metrics</Label>
             {editing ? (
-              <label className={styles.toggleRow}>
-                <input type="checkbox" checked={Boolean(form.metricsEnabled)}
-                  onChange={(e) => updateField('metricsEnabled', e.target.checked)} />
-                <span>{form.metricsEnabled ? 'Enabled' : 'Disabled'}</span>
-              </label>
+              <Toggle
+                checked={Boolean(form.metricsEnabled)}
+                onChange={(e) => updateField('metricsEnabled', (e.target as HTMLInputElement).checked)}
+                label={form.metricsEnabled ? 'Enabled' : 'Disabled'}
+              />
             ) : (
               <Badge label={form.metricsEnabled ? 'On' : 'Off'} color={form.metricsEnabled ? 'success' : 'error'} variant="filled" />
             )}
           </div>
           <div className={styles.field}>
-            <label className={styles.label}>Sampling Rate</label>
+            <Label>Sampling Rate</Label>
             {editing ? (
-              <input type="number" className={styles.select} min={0} max={1} step={0.01}
+              <input type="number" className={styles.numberInput} min={0} max={1} step={0.01}
                 value={form.samplingRate ?? 1.0}
                 onChange={(e) => updateField('samplingRate', parseFloat(e.target.value) || 0)} />
             ) : (
@@ -410,13 +418,13 @@ export default function AppConfigDetailPage() {
             )}
           </div>
           <div className={styles.field}>
-            <label className={styles.label}>Compress Success</label>
+            <Label>Compress Success</Label>
             {editing ? (
-              <label className={styles.toggleRow}>
-                <input type="checkbox" checked={Boolean(form.compressSuccess)}
-                  onChange={(e) => updateField('compressSuccess', e.target.checked)} />
-                <span>{form.compressSuccess ? 'On' : 'Off'}</span>
-              </label>
+              <Toggle
+                checked={Boolean(form.compressSuccess)}
+                onChange={(e) => updateField('compressSuccess', (e.target as HTMLInputElement).checked)}
+                label={form.compressSuccess ? 'On' : 'Off'}
+              />
             ) : (
               <Badge label={form.compressSuccess ? 'On' : 'Off'} color={form.compressSuccess ? 'success' : 'error'} variant="filled" />
             )}