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 {