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/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;
 }

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>
+    />
   );
 }

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);
-}

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>
             )}
           </>