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>
2026-04-09 15:22:14 +02:00
parent ff62a34d89
commit 3f94c98c5b
10 changed files with 185 additions and 461 deletions
--- 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;
 }
--- 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>
+    />
  );
 }
--- 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);
-}
--- 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>
            )}
          </>
--- 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;
--- 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" />
            )}
--- 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;
--- 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 ? (
--- 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%;
--- 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' && (
        <>