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/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' && (
        <>