feat: add trace log level to LogViewer

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

src/design-system/composites/DetailPanel/DetailPanel.module.css

@@ -1,4 +1,21 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 99;
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
 .panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
   width: 0;
   overflow: hidden;
   transition: width 0.25s ease, opacity 0.2s ease;
@@ -7,13 +24,15 @@
   display: flex;
   flex-direction: column;
   background: var(--bg-surface);
-  flex-shrink: 0;
+  z-index: 100;
+  box-shadow: none;
 }
 
 .panel.open {
   width: 400px;
   opacity: 1;
   border-left-color: var(--border);
+  box-shadow: var(--shadow-lg);
   animation: slideInRight 0.25s ease-out both;
 }
 

src/design-system/composites/DetailPanel/DetailPanel.tsx

@@ -23,51 +23,54 @@ export function DetailPanel({ open, onClose, title, tabs, children, actions, cla
 
   const activeContent = tabs?.find((t) => t.value === activeTab)?.content
 
-  const panel = (
-    <aside
-      className={`${styles.panel} ${open ? styles.open : ''} ${className ?? ''}`}
-      aria-hidden={!open}
-    >
-      <div className={styles.header}>
-        <span className={styles.title}>{title}</span>
-        <button
-          className={styles.closeBtn}
-          onClick={onClose}
-          aria-label="Close panel"
-          type="button"
-        >
-          &times;
-        </button>
-      </div>
-
-      {tabs && tabs.length > 0 && (
-        <div className={styles.tabs}>
-          {tabs.map((tab) => (
-            <button
-              key={tab.value}
-              className={`${styles.tab} ${tab.value === activeTab ? styles.activeTab : ''}`}
-              onClick={() => setActiveTab(tab.value)}
-              type="button"
-            >
-              {tab.label}
-            </button>
-          ))}
+  const content = (
+    <>
+      {open && <div className={styles.backdrop} onClick={onClose} aria-hidden="true" />}
+      <aside
+        className={`${styles.panel} ${open ? styles.open : ''} ${className ?? ''}`}
+        aria-hidden={!open}
+      >
+        <div className={styles.header}>
+          <span className={styles.title}>{title}</span>
+          <button
+            className={styles.closeBtn}
+            onClick={onClose}
+            aria-label="Close panel"
+            type="button"
+          >
+            &times;
+          </button>
         </div>
-      )}
 
-      <div className={styles.body}>
-        {children ?? activeContent}
-      </div>
+        {tabs && tabs.length > 0 && (
+          <div className={styles.tabs}>
+            {tabs.map((tab) => (
+              <button
+                key={tab.value}
+                className={`${styles.tab} ${tab.value === activeTab ? styles.activeTab : ''}`}
+                onClick={() => setActiveTab(tab.value)}
+                type="button"
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        )}
 
-      {actions && (
-        <div className={styles.actions}>
-          {actions}
+        <div className={styles.body}>
+          {children ?? activeContent}
         </div>
-      )}
-    </aside>
+
+        {actions && (
+          <div className={styles.actions}>
+            {actions}
+          </div>
+        )}
+      </aside>
+    </>
   )
 
   // Portal to AppShell level if target exists, otherwise render in place
   const portalTarget = document.getElementById('cameleer-detail-panel-root')
-  return portalTarget ? createPortal(panel, portalTarget) : panel
+  return portalTarget ? createPortal(content, portalTarget) : content
 }

src/design-system/composites/LogViewer/LogViewer.module.css

@@ -1,7 +1,5 @@
 .container {
   overflow-y: auto;
-  background: var(--bg-inset);
-  border-radius: var(--radius-md);
   padding: 8px 0;
   font-family: var(--font-mono);
 }
@@ -58,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);

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(<LogViewer entries={entries} />)
     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)', () => {

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<LogEntry['level'], string> = {
   warn: styles.levelWarn,
   error: styles.levelError,
   debug: styles.levelDebug,
+  trace: styles.levelTrace,
 }
 
 function formatTime(iso: string): string {

src/design-system/layout/AppShell/AppShell.module.css

@@ -2,6 +2,7 @@
   display: flex;
   height: 100vh;
   overflow: hidden;
+  position: relative;
 }
 
 .main {