refactor: move inline styles to CSS modules

Extract inline fontSize/color styles from LogTab, LayoutShell,
UsersTab, GroupsTab, RolesTab, and LevelFilterBar into CSS modules.
Follows project convention of CSS modules over inline styles.

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

ui/src/components/ExecutionDiagram/tabs/LogTab.module.css

@@ -0,0 +1,97 @@
+/* ==========================================================================
+   LOG TAB — STYLES
+   ========================================================================== */
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.filterBar {
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.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 {
+  padding: 6px 10px;
+  border-top: 1px solid var(--border-subtle);
+  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

@@ -2,7 +2,8 @@ import { useState, useMemo } from 'react';
 import { useNavigate } from 'react-router';
 import { useApplicationLogs } from '../../../api/queries/logs';
 import type { LogEntryResponse } from '../../../api/queries/logs';
-import styles from '../ExecutionDiagram.module.css';
+import logStyles from './LogTab.module.css';
+import diagramStyles from '../ExecutionDiagram.module.css';
 
 interface LogTabProps {
   applicationId: string;
@@ -10,13 +11,13 @@ interface LogTabProps {
   processorId: string | null;
 }
 
-function levelColor(level: string): string {
+function levelClass(level: string): string {
   switch (level?.toUpperCase()) {
-    case 'ERROR': return 'var(--error)';
+    case 'ERROR': return logStyles.levelError;
-    case 'WARN': return 'var(--warning)';
+    case 'WARN': return logStyles.levelWarn;
-    case 'DEBUG': return 'var(--text-muted)';
+    case 'DEBUG': return logStyles.levelDebug;
-    case 'TRACE': return 'var(--text-faint, var(--text-muted))';
+    case 'TRACE': return logStyles.levelTrace;
-    default: return 'var(--text-secondary)';
+    default: return logStyles.levelDefault;
   }
 }
 
@@ -65,48 +66,38 @@ export function LogTab({ applicationId, exchangeId, processorId }: LogTabProps)
   }, [logs, processorId, filter]);
 
   if (isLoading) {
-    return <div className={styles.emptyState}>Loading logs...</div>;
+    return <div className={diagramStyles.emptyState}>Loading logs...</div>;
   }
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
+    <div className={logStyles.container}>
-      <div style={{ padding: '6px 10px', borderBottom: '1px solid var(--border-subtle)' }}>
+      <div className={logStyles.filterBar}>
         <input
           type="text"
           placeholder="Filter logs..."
           value={filter}
           onChange={(e) => setFilter(e.target.value)}
-          style={{
+          className={logStyles.filterInput}
-            width: '100%',
-            padding: '4px 8px',
-            fontSize: '12px',
-            border: '1px solid var(--border-subtle)',
-            borderRadius: 'var(--radius-sm)',
-            background: 'var(--bg-surface)',
-            color: 'var(--text-primary)',
-            outline: 'none',
-            fontFamily: 'var(--font-body)',
-          }}
         />
       </div>
-      <div style={{ flex: 1, overflowY: 'auto', fontSize: '12px', fontFamily: 'var(--font-mono)' }}>
+      <div className={logStyles.logList}>
         {entries.length === 0 ? (
-          <div className={styles.emptyState}>
+          <div className={diagramStyles.emptyState}>
             {processorId ? 'No logs for this processor' : 'No logs available'}
           </div>
         ) : (
           <>
-            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <table className={logStyles.logTable}>
               <tbody>
                 {entries.map((entry, i) => (
-                  <tr key={i} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
+                  <tr key={i} className={logStyles.logRow}>
-                    <td style={{ padding: '3px 6px', whiteSpace: 'nowrap', color: 'var(--text-muted)' }}>
+                    <td className={logStyles.timestampCell}>
                       {formatTime(entry.timestamp)}
                     </td>
-                    <td style={{ padding: '3px 4px', whiteSpace: 'nowrap', fontWeight: 600, color: levelColor(entry.level), width: '40px' }}>
+                    <td className={`${logStyles.levelCell} ${levelClass(entry.level)}`}>
                       {entry.level}
                     </td>
-                    <td style={{ padding: '3px 6px', color: 'var(--text-primary)', wordBreak: 'break-word' }}>
+                    <td className={logStyles.messageCell}>
                       {entry.message}
                     </td>
                   </tr>
@@ -114,10 +105,10 @@ export function LogTab({ applicationId, exchangeId, processorId }: LogTabProps)
               </tbody>
             </table>
             {exchangeId && (
-              <div style={{ padding: '6px 10px', borderTop: '1px solid var(--border-subtle)', fontSize: '12px', textAlign: 'center' }}>
+              <div className={logStyles.footer}>
                 <button
                   onClick={() => navigate(`/logs/${applicationId}?exchangeId=${exchangeId}`)}
-                  style={{ background: 'none', border: 'none', color: 'var(--amber)', cursor: 'pointer', fontSize: '12px', fontFamily: 'var(--font-body)' }}
+                  className={logStyles.openLogsButton}
                 >
                   Open in Logs tab {'\u2192'}
                 </button>

ui/src/components/LayoutShell.module.css

@@ -0,0 +1,16 @@
+.starredItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--sidebar-text);
+  border-radius: 4px;
+}
+
+.starredParentApp {
+  color: var(--sidebar-muted);
+  margin-left: 4px;
+  font-size: 12px;
+}

ui/src/components/LayoutShell.tsx

@@ -18,6 +18,7 @@ import {
 import type { SearchResult, SidebarTreeNode } from '@cameleer/design-system';
 import sidebarLogo from '@cameleer/design-system/assets/cameleer3-logo.svg';
 import { Box, Settings, FileText, ChevronRight, Square, Pause, Star, X } from 'lucide-react';
+import css from './LayoutShell.module.css';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouteCatalog } from '../api/queries/catalog';
 import { useAgents } from '../api/queries/agents';
@@ -236,7 +237,7 @@ function StarredList({ items, onNavigate, onRemove }: { items: StarredItem[]; on
       {items.map((item) => (
         <div
           key={item.starKey}
-          style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 12px', cursor: 'pointer', fontSize: 12, color: 'var(--sidebar-text)', borderRadius: 4 }}
+          className={css.starredItem}
           onClick={() => onNavigate(item.path)}
           role="button"
           tabIndex={0}
@@ -245,7 +246,7 @@ function StarredList({ items, onNavigate, onRemove }: { items: StarredItem[]; on
           {item.icon && <span style={{ display: 'flex', alignItems: 'center', color: 'var(--sidebar-muted)' }}>{item.icon}</span>}
           <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
             {item.label}
-            {item.parentApp && <span style={{ color: 'var(--sidebar-muted)', marginLeft: 4, fontSize: 12 }}>{item.parentApp}</span>}
+            {item.parentApp && <span className={css.starredParentApp}>{item.parentApp}</span>}
           </span>
           <button
             style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', color: 'var(--sidebar-muted)', display: 'flex', alignItems: 'center', opacity: 0.6 }}

ui/src/pages/Admin/GroupsTab.tsx

@@ -239,7 +239,7 @@ export default function GroupsTab({ highlightId, onHighlightConsumed }: { highli
                   onChange={(e) => setNewName(e.target.value)}
                 />
                 {duplicateGroupName && (
-                  <span style={{ color: 'var(--error)', fontSize: 12 }}>
+                  <span className={styles.errorText}>
                     Group name already exists
                   </span>
                 )}

ui/src/pages/Admin/RolesTab.tsx

@@ -130,7 +130,7 @@ export default function RolesTab({ highlightId, onHighlightConsumed }: { highlig
                   onChange={(e) => setNewName(e.target.value)}
                 />
                 {duplicateRoleName && (
-                  <span style={{ color: 'var(--error)', fontSize: 12 }}>
+                  <span className={styles.errorText}>
                     Role name already exists
                   </span>
                 )}

ui/src/pages/Admin/UserManagement.module.css

@@ -151,3 +151,8 @@
 .resetInput {
   width: 200px;
 }
+
+.errorText {
+  color: var(--error);
+  font-size: 12px;
+}

ui/src/pages/Admin/UsersTab.tsx

@@ -228,7 +228,7 @@ export default function UsersTab({ highlightId, onHighlightConsumed }: { highlig
                   />
                 </div>
                 {duplicateUsername && (
-                  <span style={{ color: 'var(--error)', fontSize: 12 }}>
+                  <span className={styles.errorText}>
                     Username already exists
                   </span>
                 )}

ui/src/pages/LogsTab/LevelFilterBar.module.css

@@ -0,0 +1,14 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.clearButton {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 12px;
+  font-family: var(--font-body);
+}

ui/src/pages/LogsTab/LevelFilterBar.tsx

@@ -1,5 +1,6 @@
 import { ButtonGroup } from '@cameleer/design-system';
 import type { ButtonGroupItem } from '@cameleer/design-system';
+import styles from './LevelFilterBar.module.css';
 
 function formatCount(n: number): string {
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
@@ -28,19 +29,12 @@ export function LevelFilterBar({ activeLevels, onChange, levelCounts }: LevelFil
   }));
 
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+    <div className={styles.wrapper}>
       <ButtonGroup items={items} value={activeLevels} onChange={onChange} />
       {activeLevels.size > 0 && (
         <button
           onClick={() => onChange(new Set())}
-          style={{
+          className={styles.clearButton}
-            background: 'none',
-            border: 'none',
-            color: 'var(--text-muted)',
-            cursor: 'pointer',
-            fontSize: '12px',
-            fontFamily: 'var(--font-body)',
-          }}
         >
           Clear
         </button>