diff --git a/src/design-system/composites/LogViewer/LogViewer.module.css b/src/design-system/composites/LogViewer/LogViewer.module.css index 31522fb..4c2b257 100644 --- a/src/design-system/composites/LogViewer/LogViewer.module.css +++ b/src/design-system/composites/LogViewer/LogViewer.module.css @@ -56,6 +56,11 @@ background: color-mix(in srgb, var(--text-muted) 10%, transparent); } +.levelTrace { + color: var(--text-faint); + background: color-mix(in srgb, var(--text-faint) 8%, transparent); +} + .message { font-size: 12px; font-family: var(--font-mono); diff --git a/src/design-system/composites/LogViewer/LogViewer.test.tsx b/src/design-system/composites/LogViewer/LogViewer.test.tsx index 5f4e723..4aa25c5 100644 --- a/src/design-system/composites/LogViewer/LogViewer.test.tsx +++ b/src/design-system/composites/LogViewer/LogViewer.test.tsx @@ -7,6 +7,7 @@ const entries: LogEntry[] = [ { timestamp: '2024-01-15T10:30:05Z', level: 'warn', message: 'High memory usage' }, { timestamp: '2024-01-15T10:30:10Z', level: 'error', message: 'Connection failed' }, { timestamp: '2024-01-15T10:30:15Z', level: 'debug', message: 'Query executed in 3ms' }, + { timestamp: '2024-01-15T10:30:20Z', level: 'trace', message: 'Entering handleRequest()' }, ] describe('LogViewer', () => { @@ -16,14 +17,16 @@ describe('LogViewer', () => { expect(screen.getByText('High memory usage')).toBeInTheDocument() expect(screen.getByText('Connection failed')).toBeInTheDocument() expect(screen.getByText('Query executed in 3ms')).toBeInTheDocument() + expect(screen.getByText('Entering handleRequest()')).toBeInTheDocument() }) - it('renders level badges with correct text (INFO, WARN, ERROR, DEBUG)', () => { + it('renders level badges with correct text (INFO, WARN, ERROR, DEBUG, TRACE)', () => { render() expect(screen.getByText('INFO')).toBeInTheDocument() expect(screen.getByText('WARN')).toBeInTheDocument() expect(screen.getByText('ERROR')).toBeInTheDocument() expect(screen.getByText('DEBUG')).toBeInTheDocument() + expect(screen.getByText('TRACE')).toBeInTheDocument() }) it('renders with custom maxHeight (number)', () => { diff --git a/src/design-system/composites/LogViewer/LogViewer.tsx b/src/design-system/composites/LogViewer/LogViewer.tsx index cc30e2a..6400fff 100644 --- a/src/design-system/composites/LogViewer/LogViewer.tsx +++ b/src/design-system/composites/LogViewer/LogViewer.tsx @@ -3,7 +3,7 @@ import styles from './LogViewer.module.css' export interface LogEntry { timestamp: string - level: 'info' | 'warn' | 'error' | 'debug' + level: 'info' | 'warn' | 'error' | 'debug' | 'trace' message: string } @@ -18,6 +18,7 @@ const LEVEL_CLASS: Record = { warn: styles.levelWarn, error: styles.levelError, debug: styles.levelDebug, + trace: styles.levelTrace, } function formatTime(iso: string): string {