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

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

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

ui/src/pages/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%;

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