From 3f94c98c5b2053df05a80bc8b5b22d157b069c5e Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 9 Apr 2026 15:22:14 +0200
Subject: [PATCH] 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>
---
 .../components/EnvironmentSelector.module.css |  24 +---
 ui/src/components/EnvironmentSelector.tsx     |  21 +--
 .../ExecutionDiagram/tabs/LogTab.module.css   |  65 ---------
 .../ExecutionDiagram/tabs/LogTab.tsx          |  62 +++-----
 .../Admin/AppConfigDetailPage.module.css      |  83 +----------
 ui/src/pages/Admin/AppConfigDetailPage.tsx    | 132 ++++++++++--------
 .../pages/AgentHealth/AgentHealth.module.css  |  90 ------------
 ui/src/pages/AgentHealth/AgentHealth.tsx      |  96 +++++++------
 ui/src/pages/AppsTab/AppsTab.module.css       |  28 ----
 ui/src/pages/AppsTab/AppsTab.tsx              |  45 +++---
 10 files changed, 185 insertions(+), 461 deletions(-)

diff --git a/ui/src/components/EnvironmentSelector.module.css b/ui/src/components/EnvironmentSelector.module.css
index 99c4fd7a..2d3518ac 100644
--- a/ui/src/components/EnvironmentSelector.module.css
+++ b/ui/src/components/EnvironmentSelector.module.css
@@ -1,24 +1,4 @@
+/* Layout wrapper — DS Select handles its own appearance */
 .select {
-  appearance: none;
-  background: transparent;
-  border: none;
-  padding: 0 14px 0 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  text-transform: inherit;
-  letter-spacing: inherit;
-  cursor: pointer;
-  outline: none;
-  line-height: 1;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='currentColor' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0 center;
-  background-size: 8px 5px;
-}
-
-.select:focus-visible {
-  outline: 1px solid var(--amber);
-  outline-offset: 2px;
-  border-radius: 2px;
+  min-width: 100px;
 }
diff --git a/ui/src/components/EnvironmentSelector.tsx b/ui/src/components/EnvironmentSelector.tsx
index 5817445a..2230e654 100644
--- a/ui/src/components/EnvironmentSelector.tsx
+++ b/ui/src/components/EnvironmentSelector.tsx
@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+import { Select } from '@cameleer/design-system';
 import styles from './EnvironmentSelector.module.css';
 
 interface EnvironmentSelectorProps {
@@ -9,17 +11,20 @@ interface EnvironmentSelectorProps {
 export function EnvironmentSelector({ environments, value, onChange }: EnvironmentSelectorProps) {
   if (environments.length === 0) return null;
 
+  const options = useMemo(
+    () => [
+      { value: '', label: 'All Envs' },
+      ...environments.map((env) => ({ value: env, label: env })),
+    ],
+    [environments],
+  );
+
   return (
-    <select
+    <Select
       className={styles.select}
+      options={options}
       value={value ?? ''}
       onChange={(e) => onChange(e.target.value || undefined)}
-      aria-label="Environment filter"
-    >
-      <option value="">All Envs</option>
-      {environments.map((env) => (
-        <option key={env} value={env}>{env}</option>
-      ))}
-    </select>
+    />
   );
 }
diff --git a/ui/src/components/ExecutionDiagram/tabs/LogTab.module.css b/ui/src/components/ExecutionDiagram/tabs/LogTab.module.css
index d9326afe..2cf20e2a 100644
--- a/ui/src/components/ExecutionDiagram/tabs/LogTab.module.css
+++ b/ui/src/components/ExecutionDiagram/tabs/LogTab.module.css
@@ -15,69 +15,13 @@
 
 .filterInput {
   width: 100%;
-  padding: 4px 8px;
   font-size: 12px;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  background: var(--bg-surface);
-  color: var(--text-primary);
-  outline: none;
-  font-family: var(--font-body);
 }
 
 .logList {
   flex: 1;
   overflow-y: auto;
   font-size: 12px;
-  font-family: var(--font-mono);
-}
-
-.logTable {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.logRow {
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.timestampCell {
-  padding: 3px 6px;
-  white-space: nowrap;
-  color: var(--text-muted);
-}
-
-.levelCell {
-  padding: 3px 4px;
-  white-space: nowrap;
-  font-weight: 600;
-  width: 40px;
-}
-
-.levelError {
-  color: var(--error);
-}
-
-.levelWarn {
-  color: var(--warning);
-}
-
-.levelDebug {
-  color: var(--text-muted);
-}
-
-.levelTrace {
-  color: var(--text-faint, var(--text-muted));
-}
-
-.levelDefault {
-  color: var(--text-secondary);
-}
-
-.messageCell {
-  padding: 3px 6px;
-  color: var(--text-primary);
-  word-break: break-word;
 }
 
 .footer {
@@ -86,12 +30,3 @@
   font-size: 12px;
   text-align: center;
 }
-
-.openLogsButton {
-  background: none;
-  border: none;
-  color: var(--amber);
-  cursor: pointer;
-  font-size: 12px;
-  font-family: var(--font-body);
-}
diff --git a/ui/src/components/ExecutionDiagram/tabs/LogTab.tsx b/ui/src/components/ExecutionDiagram/tabs/LogTab.tsx
index df3c1980..79b28189 100644
--- a/ui/src/components/ExecutionDiagram/tabs/LogTab.tsx
+++ b/ui/src/components/ExecutionDiagram/tabs/LogTab.tsx
@@ -1,7 +1,9 @@
 import { useState, useMemo } from 'react';
 import { useNavigate } from 'react-router';
+import { Input, Button, LogViewer } from '@cameleer/design-system';
+import type { LogEntry } from '@cameleer/design-system';
 import { useApplicationLogs } from '../../../api/queries/logs';
-import type { LogEntryResponse } from '../../../api/queries/logs';
+import { mapLogLevel } from '../../../utils/agent-utils';
 import logStyles from './LogTab.module.css';
 import diagramStyles from '../ExecutionDiagram.module.css';
 
@@ -11,25 +13,6 @@ interface LogTabProps {
   processorId: string | null;
 }
 
-function levelClass(level: string): string {
-  switch (level?.toUpperCase()) {
-    case 'ERROR': return logStyles.levelError;
-    case 'WARN': return logStyles.levelWarn;
-    case 'DEBUG': return logStyles.levelDebug;
-    case 'TRACE': return logStyles.levelTrace;
-    default: return logStyles.levelDefault;
-  }
-}
-
-function formatTime(iso: string): string {
-  const d = new Date(iso);
-  const h = String(d.getHours()).padStart(2, '0');
-  const m = String(d.getMinutes()).padStart(2, '0');
-  const s = String(d.getSeconds()).padStart(2, '0');
-  const ms = String(d.getMilliseconds()).padStart(3, '0');
-  return `${h}:${m}:${s}.${ms}`;
-}
-
 export function LogTab({ applicationId, exchangeId, processorId }: LogTabProps) {
   const [filter, setFilter] = useState('');
   const navigate = useNavigate();
@@ -40,9 +23,9 @@ export function LogTab({ applicationId, exchangeId, processorId }: LogTabProps)
     { exchangeId, limit: 500 },
   );
 
-  const entries: LogEntryResponse[] = useMemo(() => {
+  const entries = useMemo<LogEntry[]>(() => {
     if (!logs) return [];
-    let items = logs as LogEntryResponse[];
+    let items = [...logs];
 
     // If a processor is selected, filter logs by logger name containing the processor ID
     if (processorId) {
@@ -62,7 +45,11 @@ export function LogTab({ applicationId, exchangeId, processorId }: LogTabProps)
       );
     }
 
-    return items;
+    return items.map((e) => ({
+      timestamp: e.timestamp ?? '',
+      level: mapLogLevel(e.level),
+      message: e.message ?? '',
+    }));
   }, [logs, processorId, filter]);
 
   if (isLoading) {
@@ -72,11 +59,11 @@ export function LogTab({ applicationId, exchangeId, processorId }: LogTabProps)
   return (
     <div className={logStyles.container}>
       <div className={logStyles.filterBar}>
-        <input
-          type="text"
+        <Input
           placeholder="Filter logs..."
           value={filter}
           onChange={(e) => setFilter(e.target.value)}
+          onClear={() => setFilter('')}
           className={logStyles.filterInput}
         />
       </div>
@@ -87,31 +74,16 @@ export function LogTab({ applicationId, exchangeId, processorId }: LogTabProps)
           </div>
         ) : (
           <>
-            <table className={logStyles.logTable}>
-              <tbody>
-                {entries.map((entry, i) => (
-                  <tr key={i} className={logStyles.logRow}>
-                    <td className={logStyles.timestampCell}>
-                      {formatTime(entry.timestamp)}
-                    </td>
-                    <td className={`${logStyles.levelCell} ${levelClass(entry.level)}`}>
-                      {entry.level}
-                    </td>
-                    <td className={logStyles.messageCell}>
-                      {entry.message}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+            <LogViewer entries={entries} maxHeight={360} />
             {exchangeId && (
               <div className={logStyles.footer}>
-                <button
+                <Button
+                  variant="ghost"
+                  size="sm"
                   onClick={() => navigate(`/runtime/${applicationId}`)}
-                  className={logStyles.openLogsButton}
                 >
                   Open in Runtime {'\u2192'}
-                </button>
+                </Button>
               </div>
             )}
           </>
diff --git a/ui/src/pages/Admin/AppConfigDetailPage.module.css b/ui/src/pages/Admin/AppConfigDetailPage.module.css
index 76a07f66..6536bedf 100644
--- a/ui/src/pages/Admin/AppConfigDetailPage.module.css
+++ b/ui/src/pages/Admin/AppConfigDetailPage.module.css
@@ -17,71 +17,12 @@
   margin-bottom: 20px;
 }
 
-.backBtn {
-  background: none;
-  border: none;
-  color: var(--amber);
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
-  padding: 4px 0;
-}
-
-.backBtn:hover {
-  color: var(--amber-deep);
-  text-decoration: underline;
-}
-
 .toolbarActions {
   display: flex;
   gap: 8px;
   align-items: center;
 }
 
-.editBtn {
-  background: none;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  color: var(--text-secondary);
-  cursor: pointer;
-  font-size: 12px;
-  padding: 5px 12px;
-}
-
-.editBtn:hover {
-  border-color: var(--amber);
-  color: var(--amber);
-}
-
-.cancelBtn {
-  background: none;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  color: var(--text-muted);
-  cursor: pointer;
-  font-size: 12px;
-  padding: 5px 12px;
-}
-
-.cancelBtn:hover {
-  border-color: var(--text-faint);
-  color: var(--text-primary);
-}
-
-.removeBtn {
-  background: none;
-  border: none;
-  color: var(--text-faint);
-  cursor: pointer;
-  font-size: 16px;
-  padding: 0 4px;
-  line-height: 1;
-}
-
-.removeBtn:hover {
-  color: var(--error);
-}
-
 .header {
   margin-bottom: 16px;
   background: var(--bg-surface);
@@ -122,13 +63,7 @@
   min-width: 140px;
 }
 
-.label {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-}
-
-.select {
+.numberInput {
   padding: 6px 10px;
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-sm);
@@ -140,24 +75,10 @@
   max-width: 360px;
 }
 
-.select:focus {
+.numberInput:focus {
   border-color: var(--amber);
 }
 
-.toggleRow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: var(--text-secondary);
-  cursor: pointer;
-}
-
-.toggleRow input {
-  accent-color: var(--amber);
-  cursor: pointer;
-}
-
 .tapBadges {
   display: flex;
   flex-wrap: wrap;
diff --git a/ui/src/pages/Admin/AppConfigDetailPage.tsx b/ui/src/pages/Admin/AppConfigDetailPage.tsx
index 7b0f2529..7d41152f 100644
--- a/ui/src/pages/Admin/AppConfigDetailPage.tsx
+++ b/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" />
             )}
diff --git a/ui/src/pages/AgentHealth/AgentHealth.module.css b/ui/src/pages/AgentHealth/AgentHealth.module.css
index 10479b58..470f32a4 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.module.css
+++ b/ui/src/pages/AgentHealth/AgentHealth.module.css
@@ -58,102 +58,12 @@
   color: var(--text-muted);
 }
 
-.configSelect {
-  padding: 5px 10px;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  background: var(--bg-body);
-  color: var(--text-primary);
-  font-size: 12px;
-  font-family: var(--font-mono);
-  outline: none;
-  cursor: pointer;
-}
-
-.configSelect:focus {
-  border-color: var(--amber);
-}
-
-.configSelect:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.configToggle {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  font-family: var(--font-mono);
-  color: var(--text-secondary);
-  cursor: pointer;
-}
-
-.configToggle input {
-  accent-color: var(--amber);
-  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;
-}
-
-.configEditBtn:hover {
-  color: var(--text-primary);
-  opacity: 1;
-}
-
 .configActions {
   display: flex;
   gap: 8px;
   align-self: flex-end;
 }
 
-.configSaveBtn {
-  padding: 4px 12px;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: var(--amber);
-  color: var(--bg-surface);
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.configSaveBtn:hover {
-  background: var(--amber-deep);
-}
-
-.configSaveBtn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.configCancelBtn {
-  padding: 4px 12px;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--text-muted);
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.configCancelBtn:hover {
-  color: var(--text-primary);
-  border-color: var(--text-faint);
-}
-
 /* Section header */
 .sectionTitle {
   font-size: 13px;
diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index 3e2d2885..14a40e74 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -4,7 +4,7 @@ import { ExternalLink, RefreshCw, Pencil } from 'lucide-react';
 import {
   StatCard, StatusDot, Badge, MonoText,
   GroupCard, DataTable, EventFeed,
-  LogViewer, ButtonGroup, SectionHeader, Toggle, useToast,
+  LogViewer, ButtonGroup, SectionHeader, Toggle, Select, Button, useToast,
 } from '@cameleer/design-system';
 import type { Column, FeedEvent, LogEntry, ButtonGroupItem } from '@cameleer/design-system';
 import styles from './AgentHealth.module.css';
@@ -356,45 +356,53 @@ export default function AgentHealth() {
             <>
               <div className={styles.configField}>
                 <span className={styles.configLabel}>App Log Level</span>
-                <select className={styles.configSelect} value={String(configDraft.applicationLogLevel ?? 'INFO')}
-                  onChange={(e) => setConfigDraft(d => ({ ...d, 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(configDraft.applicationLogLevel ?? 'INFO')}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, 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' },
+                  ]}
+                />
               </div>
               <div className={styles.configField}>
                 <span className={styles.configLabel}>Agent Log Level</span>
-                <select className={styles.configSelect} value={String(configDraft.agentLogLevel ?? 'INFO')}
-                  onChange={(e) => setConfigDraft(d => ({ ...d, 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(configDraft.agentLogLevel ?? 'INFO')}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, 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' },
+                  ]}
+                />
               </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>
+                <Select value={String(configDraft.engineLevel ?? 'REGULAR')}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, engineLevel: e.target.value }))}
+                  options={[
+                    { value: 'NONE', label: 'None' },
+                    { value: 'MINIMAL', label: 'Minimal' },
+                    { value: 'REGULAR', label: 'Regular' },
+                    { value: 'COMPLETE', label: 'Complete' },
+                  ]}
+                />
               </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>
+                <Select value={String(configDraft.payloadCaptureMode ?? 'NONE')}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, payloadCaptureMode: e.target.value }))}
+                  options={[
+                    { value: 'NONE', label: 'None' },
+                    { value: 'INPUT', label: 'Input' },
+                    { value: 'OUTPUT', label: 'Output' },
+                    { value: 'BOTH', label: 'Both' },
+                  ]}
+                />
               </div>
               <div className={styles.configField}>
                 <span className={styles.configLabel}>Metrics</span>
@@ -402,8 +410,8 @@ export default function AgentHealth() {
                   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>
-                <button className={styles.configCancelBtn} onClick={() => { setConfigEditing(false); setConfigDraft({}); }}>Cancel</button>
+                <Button variant="primary" size="sm" onClick={saveConfigEdit} disabled={updateConfig.isPending}>Save</Button>
+                <Button variant="secondary" size="sm" onClick={() => { setConfigEditing(false); setConfigDraft({}); }}>Cancel</Button>
               </div>
             </>
           ) : (
@@ -445,7 +453,7 @@ export default function AgentHealth() {
                 <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}><Pencil size={14} /></button>
+              <Button variant="ghost" size="sm" title="Edit config" onClick={startConfigEdit}><Pencil size={14} /></Button>
             </>
           )}
         </div>
@@ -514,12 +522,12 @@ export default function AgentHealth() {
             <SectionHeader>Application Log</SectionHeader>
             <div className={logStyles.headerActions}>
               <span className={styles.sectionMeta}>{logEntries.length} entries</span>
-              <button className={logStyles.sortBtn} onClick={() => setLogSortAsc((v) => !v)} title={logSortAsc ? 'Oldest first' : 'Newest first'}>
+              <Button variant="ghost" size="sm" onClick={() => setLogSortAsc((v) => !v)} title={logSortAsc ? 'Oldest first' : 'Newest first'}>
                 {logSortAsc ? '\u2191' : '\u2193'}
-              </button>
-              <button className={logStyles.refreshBtn} onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
                 <RefreshCw size={14} />
-              </button>
+              </Button>
             </div>
           </div>
           <div className={logStyles.logToolbar}>
@@ -545,9 +553,9 @@ export default function AgentHealth() {
             </div>
             <ButtonGroup items={LOG_LEVEL_ITEMS} value={logLevels} onChange={setLogLevels} />
             {logLevels.size > 0 && (
-              <button className={logStyles.logClearFilters} onClick={() => setLogLevels(new Set())}>
+              <Button variant="ghost" size="sm" onClick={() => setLogLevels(new Set())}>
                 Clear
-              </button>
+              </Button>
             )}
           </div>
           {filteredLogs.length > 0 ? (
@@ -564,12 +572,12 @@ export default function AgentHealth() {
             <span className={styles.sectionTitle}>Timeline</span>
             <div className={logStyles.headerActions}>
               <span className={styles.sectionMeta}>{feedEvents.length} events</span>
-              <button className={logStyles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
+              <Button variant="ghost" size="sm" onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
                 {eventSortAsc ? '\u2191' : '\u2193'}
-              </button>
-              <button className={logStyles.refreshBtn} onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
                 <RefreshCw size={14} />
-              </button>
+              </Button>
             </div>
           </div>
           {feedEvents.length > 0 ? (
diff --git a/ui/src/pages/AppsTab/AppsTab.module.css b/ui/src/pages/AppsTab/AppsTab.module.css
index b928786b..3ecf5b8f 100644
--- a/ui/src/pages/AppsTab/AppsTab.module.css
+++ b/ui/src/pages/AppsTab/AppsTab.module.css
@@ -119,34 +119,6 @@
   gap: 8px;
 }
 
-/* Sub tabs */
-.subTabs {
-  display: flex;
-  border-bottom: 1px solid var(--border-subtle);
-  margin-bottom: 16px;
-}
-
-.subTab {
-  padding: 8px 16px;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-muted);
-  cursor: pointer;
-  border: none;
-  border-bottom: 2px solid transparent;
-  background: none;
-  font-family: var(--font-body);
-}
-
-.subTab:hover {
-  color: var(--text-primary);
-}
-
-.subTabActive {
-  color: var(--amber);
-  border-bottom-color: var(--amber);
-}
-
 /* Table */
 .table {
   width: 100%;
diff --git a/ui/src/pages/AppsTab/AppsTab.tsx b/ui/src/pages/AppsTab/AppsTab.tsx
index fe8cec96..90ba24b4 100644
--- a/ui/src/pages/AppsTab/AppsTab.tsx
+++ b/ui/src/pages/AppsTab/AppsTab.tsx
@@ -11,6 +11,7 @@ import {
   Select,
   Spinner,
   StatusDot,
+  Tabs,
   Toggle,
   useToast,
 } from '@cameleer/design-system';
@@ -319,11 +320,15 @@ function CreateAppView({ environments, selectedEnv }: { environments: Environmen
       </div>
 
       {/* Config Tabs */}
-      <div className={styles.subTabs}>
-        <button className={`${styles.subTab} ${configTab === 'monitoring' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('monitoring')}>Monitoring</button>
-        <button className={`${styles.subTab} ${configTab === 'resources' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('resources')}>Resources</button>
-        <button className={`${styles.subTab} ${configTab === 'variables' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('variables')}>Variables</button>
-      </div>
+      <Tabs
+        tabs={[
+          { label: 'Monitoring', value: 'monitoring' },
+          { label: 'Resources', value: 'resources' },
+          { label: 'Variables', value: 'variables' },
+        ]}
+        active={configTab}
+        onChange={(v) => setConfigTab(v as typeof configTab)}
+      />
 
       {configTab === 'variables' && (
         <>
@@ -558,10 +563,14 @@ function AppDetailView({ appId: appSlug, environments, selectedEnv }: { appId: s
         </div>
       </div>
 
-      <div className={styles.subTabs}>
-        <button className={`${styles.subTab} ${subTab === 'config' ? styles.subTabActive : ''}`} onClick={() => setSubTab('config')}>Configuration</button>
-        <button className={`${styles.subTab} ${subTab === 'overview' ? styles.subTabActive : ''}`} onClick={() => setSubTab('overview')}>Overview</button>
-      </div>
+      <Tabs
+        tabs={[
+          { label: 'Configuration', value: 'config' },
+          { label: 'Overview', value: 'overview' },
+        ]}
+        active={subTab}
+        onChange={(v) => setSubTab(v as typeof subTab)}
+      />
 
       {subTab === 'overview' && (
         <OverviewSubTab
@@ -921,13 +930,17 @@ function ConfigSubTab({ app, environment }: { app: App; environment?: Environmen
         </div>
       )}
 
-      <div className={styles.subTabs}>
-        <button className={`${styles.subTab} ${configTab === 'monitoring' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('monitoring')}>Monitoring</button>
-        <button className={`${styles.subTab} ${configTab === 'resources' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('resources')}>Resources</button>
-        <button className={`${styles.subTab} ${configTab === 'variables' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('variables')}>Variables</button>
-        <button className={`${styles.subTab} ${configTab === 'traces' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('traces')}>Traces & Taps</button>
-        <button className={`${styles.subTab} ${configTab === 'recording' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('recording')}>Route Recording</button>
-      </div>
+      <Tabs
+        tabs={[
+          { label: 'Monitoring', value: 'monitoring' },
+          { label: 'Resources', value: 'resources' },
+          { label: 'Variables', value: 'variables' },
+          { label: 'Traces & Taps', value: 'traces' },
+          { label: 'Route Recording', value: 'recording' },
+        ]}
+        active={configTab}
+        onChange={(v) => setConfigTab(v as typeof configTab)}
+      />
 
       {configTab === 'variables' && (
         <>