cameleer/cameleer-server
1
0
Fork 0
Code Issues 44 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: UI consistency — shared CSS, design system colors, no inline styles
All checks were successful
CI / cleanup-branch (push) Has been skipped
Details
CI / build (push) Successful in 1m22s
Details
CI / docker (push) Successful in 1m9s
Details
CI / deploy-feature (push) Has been skipped
Details
CI / deploy (push) Successful in 36s
Details

Browse Source 
Phase 1: Extract 6 shared CSS modules (table-section, log-panel,
rate-colors, refresh-indicator, chart-card, section-card) eliminating
~135 duplicate class definitions across 11 files.

Phase 2: Replace all hardcoded hex colors in CSS modules with design
system variables. Strip ~55 hex fallbacks from var() patterns. Fix 4
undefined variable names (--accent, --bg-base, --surface, --bg-surface-raised).

Phase 3: Replace ~45 hardcoded hex values in ProcessDiagram SVG
components with var() CSS custom properties. Fix Dashboard.tsx color prop.

Phase 4: Create CSS modules for AdminLayout, DatabaseAdminPage,
OidcCallback (previously 100% inline). Extract shared PageLoader
component (replaces 3 copy-pasted spinner patterns). Move AppsTab
static inline styles to CSS classes. Extract LayoutShell StarredList styles.

58 files changed, net -219 lines.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-09 14:55:54 +02:00
parent bfed8174ca
commit ff62a34d89
58 changed files with 770 additions and 989 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
ui/src/pages/AgentHealth/AgentHealth.tsx
View File

@@ -8,6 +8,7 @@ import {
} from '@cameleer/design-system';
import type { Column, FeedEvent, LogEntry, ButtonGroupItem } from '@cameleer/design-system';
import styles from './AgentHealth.module.css';
import logStyles from '../../styles/log-panel.module.css';
import { useAgents, useAgentEvents } from '../../api/queries/agents';
import { useApplicationLogs } from '../../api/queries/logs';
import { useApplicationConfig, useUpdateApplicationConfig } from '../../api/queries/commands';
@@ -508,24 +509,24 @@ export default function AgentHealth() {
{/* Log + Timeline side by side */}
<div className={styles.bottomRow}>
<div className={styles.logCard}>
<div className={styles.logHeader}>
<div className={logStyles.logCard}>
<div className={logStyles.logHeader}>
<SectionHeader>Application Log</SectionHeader>
<div className={styles.headerActions}>
<div className={logStyles.headerActions}>
<span className={styles.sectionMeta}>{logEntries.length} entries</span>
<button className={styles.sortBtn} onClick={() => setLogSortAsc((v) => !v)} title={logSortAsc ? 'Oldest first' : 'Newest first'}>
<button className={logStyles.sortBtn} onClick={() => setLogSortAsc((v) => !v)} title={logSortAsc ? 'Oldest first' : 'Newest first'}>
{logSortAsc ? '\u2191' : '\u2193'}
</button>
<button className={styles.refreshBtn} onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
<button className={logStyles.refreshBtn} onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
<RefreshCw size={14} />
</button>
</div>
</div>
<div className={styles.logToolbar}>
<div className={styles.logSearchWrap}>
<div className={logStyles.logToolbar}>
<div className={logStyles.logSearchWrap}>
<input
type="text"
className={styles.logSearchInput}
className={logStyles.logSearchInput}
placeholder="Search logs\u2026"
value={logSearch}
onChange={(e) => setLogSearch(e.target.value)}
@@ -534,7 +535,7 @@ export default function AgentHealth() {
{logSearch && (
<button
type="button"
className={styles.logSearchClear}
className={logStyles.logSearchClear}
onClick={() => setLogSearch('')}
aria-label="Clear search"
>
@@ -544,7 +545,7 @@ export default function AgentHealth() {
</div>
<ButtonGroup items={LOG_LEVEL_ITEMS} value={logLevels} onChange={setLogLevels} />
{logLevels.size > 0 && (
<button className={styles.logClearFilters} onClick={() => setLogLevels(new Set())}>
<button className={logStyles.logClearFilters} onClick={() => setLogLevels(new Set())}>
Clear
</button>
)}
@@ -552,7 +553,7 @@ export default function AgentHealth() {
{filteredLogs.length > 0 ? (
<LogViewer entries={filteredLogs} maxHeight={360} />
) : (
<div className={styles.logEmpty}>
<div className={logStyles.logEmpty}>
{logSearch || logLevels.size > 0 ? 'No matching log entries' : 'No log entries available'}
</div>
)}
@@ -561,12 +562,12 @@ export default function AgentHealth() {
<div className={styles.eventCard}>
<div className={styles.eventCardHeader}>
<span className={styles.sectionTitle}>Timeline</span>
<div className={styles.headerActions}>
<div className={logStyles.headerActions}>
<span className={styles.sectionMeta}>{feedEvents.length} events</span>
<button className={styles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
<button className={logStyles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
{eventSortAsc ? '\u2191' : '\u2193'}
</button>
<button className={styles.refreshBtn} onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
<button className={logStyles.refreshBtn} onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
<RefreshCw size={14} />
</button>
</div>
@@ -574,7 +575,7 @@ export default function AgentHealth() {
{feedEvents.length > 0 ? (
<EventFeed events={feedEvents} maxItems={100} />
) : (
<div className={styles.logEmpty}>No events in the selected time range.</div>
<div className={logStyles.logEmpty}>No events in the selected time range.</div>
)}
</div>
</div>