feat: add onSubmit prop to CommandPalette for full-text search

When Enter is pressed without explicit arrow/mouse navigation, fires onSubmit with the raw query instead of selecting the focused result. Enables using the palette as a search filter. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
feat: migrate all icons to Lucide React
2026-03-27 23:30:36 +01:00 · 2026-03-27 23:25:43 +01:00 · 2026-03-27 08:03:57 +01:00 · 2026-03-26 23:04:50 +01:00 · 2026-03-26 21:57:34 +01:00 · 2026-03-26 21:55:02 +01:00
31 changed files with 220 additions and 172 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
      "name": "@cameleer/design-system",
      "version": "0.1.6",
      "dependencies": {
+        "lucide-react": "^1.7.0",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-router-dom": "^7.0.0"
@@ -2714,6 +2715,15 @@
        "yallist": "^3.0.2"
      }
    },
+    "node_modules/lucide-react": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.7.0.tgz",
+      "integrity": "sha512-yI7BeItCLZJTXikmK4KNUGCKoGzSvbKlfCvw44bU4fXAL6v3gYS4uHD1jzsLkfwODYwI6Drw5Tu9Z5ulDe0TSg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/lz-string": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
    "test:e2e": "playwright test"
  },
  "dependencies": {
+    "lucide-react": "^1.7.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.0.0"
--- a/src/design-system/composites/AlertDialog/AlertDialog.test.tsx
+++ b/src/design-system/composites/AlertDialog/AlertDialog.test.tsx
@@ -78,17 +78,16 @@ describe('AlertDialog', () => {

  it('renders danger variant icon', () => {
    render(<AlertDialog {...defaultProps} variant="danger" />)
-    // Icon area should be present (aria-hidden)
-    expect(screen.getByText('✕')).toBeInTheDocument()
+    expect(document.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
  })

  it('renders warning variant icon', () => {
    render(<AlertDialog {...defaultProps} variant="warning" />)
-    expect(screen.getByText('⚠')).toBeInTheDocument()
+    expect(document.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
  })

  it('renders info variant icon', () => {
    render(<AlertDialog {...defaultProps} variant="info" />)
-    expect(screen.getByText('ℹ')).toBeInTheDocument()
+    expect(document.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
  })
 })
--- a/src/design-system/composites/AlertDialog/AlertDialog.tsx
+++ b/src/design-system/composites/AlertDialog/AlertDialog.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
+import { XCircle, AlertTriangle, Info } from 'lucide-react'
 import { Modal } from '../Modal/Modal'
 import { Button } from '../../primitives/Button/Button'
 import styles from './AlertDialog.module.css'
@@ -16,10 +17,10 @@ interface AlertDialogProps {
  className?: string
 }

-const variantIcons: Record<NonNullable<AlertDialogProps['variant']>, string> = {
-  danger: '✕',
-  warning: '⚠',
-  info: 'ℹ',
+const variantIcons: Record<NonNullable<AlertDialogProps['variant']>, React.ReactNode> = {
+  danger: <XCircle size={20} />,
+  warning: <AlertTriangle size={20} />,
+  info: <Info size={20} />,
 }

 export function AlertDialog({
--- a/src/design-system/composites/CommandPalette/CommandPalette.tsx
+++ b/src/design-system/composites/CommandPalette/CommandPalette.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useMemo, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
+import { Search, X, ChevronUp, ChevronDown } from 'lucide-react'
 import styles from './CommandPalette.module.css'
 import { SectionHeader } from '../../primitives/SectionHeader/SectionHeader'
 import { CodeBlock } from '../../primitives/CodeBlock/CodeBlock'
@@ -13,12 +14,16 @@ interface CommandPaletteProps {
  data: SearchResult[]
  onOpen?: () => void
  onQueryChange?: (query: string) => void
+  /** Called when Enter is pressed without the user explicitly selecting a result (arrow keys/click).
+   *  Useful for applying the query as a full-text search filter. */
+  onSubmit?: (query: string) => void
 }

 const CATEGORY_LABELS: Record<SearchCategory | 'all', string> = {
  all: 'All',
  application: 'Applications',
  exchange: 'Exchanges',
+  attribute: 'Attributes',
  route: 'Routes',
  agent: 'Agents',
 }
@@ -27,6 +32,7 @@ const ALL_CATEGORIES: Array<SearchCategory | 'all'> = [
  'all',
  'application',
  'exchange',
+  'attribute',
  'route',
  'agent',
 ]
@@ -61,12 +67,13 @@ function highlightText(text: string, query: string, matchRanges?: [number, numbe
  return <>{parts}</>
 }

-export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryChange }: CommandPaletteProps) {
+export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryChange, onSubmit }: CommandPaletteProps) {
  const [query, setQuery] = useState('')
  const [activeCategory, setActiveCategory] = useState<SearchCategory | 'all'>('all')
  const [scopeFilters, setScopeFilters] = useState<ScopeFilter[]>([])
  const [focusedIdx, setFocusedIdx] = useState(0)
  const [expandedId, setExpandedId] = useState<string | null>(null)
+  const userNavigated = useRef(false)
  const inputRef = useRef<HTMLInputElement>(null)
  const listRef = useRef<HTMLDivElement>(null)

@@ -89,6 +96,7 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
      setQuery('')
      setFocusedIdx(0)
      setExpandedId(null)
+      userNavigated.current = false
    }
  }, [open])

@@ -147,15 +155,20 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
        break
      case 'ArrowDown':
        e.preventDefault()
+        userNavigated.current = true
        setFocusedIdx((i) => Math.min(i + 1, flatResults.length - 1))
        break
      case 'ArrowUp':
        e.preventDefault()
+        userNavigated.current = true
        setFocusedIdx((i) => Math.max(i - 1, 0))
        break
      case 'Enter':
        e.preventDefault()
-        if (flatResults[focusedIdx]) {
+        if (!userNavigated.current && onSubmit && query.trim()) {
+          onSubmit(query.trim())
+          onClose()
+        } else if (flatResults[focusedIdx]) {
          onSelect(flatResults[focusedIdx])
          onClose()
        }
@@ -187,7 +200,7 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
      >
        {/* Search input area */}
        <div className={styles.searchArea}>
-          <span className={styles.searchIcon} aria-hidden="true">⌕</span>
+          <span className={styles.searchIcon} aria-hidden="true"><Search size={14} /></span>
          {scopeFilters.map((sf, i) => (
            <span key={i} className={styles.scopeTag}>
              <span className={styles.scopeField}>{sf.field}:</span>
@@ -197,7 +210,7 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
                onClick={() => removeScopeFilter(i)}
                aria-label={`Remove filter ${sf.field}:${sf.value}`}
              >
-                ×
+                <X size={10} />
              </button>
            </span>
          ))}
@@ -210,6 +223,7 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
            onChange={(e) => {
              setQuery(e.target.value)
              setFocusedIdx(0)
+              userNavigated.current = false
              onQueryChange?.(e.target.value)
            }}
            aria-label="Search"
@@ -279,7 +293,7 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
                        onSelect(result)
                        onClose()
                      }}
-                      onMouseEnter={() => setFocusedIdx(flatIdx)}
+                      onMouseEnter={() => { userNavigated.current = true; setFocusedIdx(flatIdx) }}
                    >
                      <div className={styles.itemMain}>
                        {result.icon && (
@@ -321,7 +335,7 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
                            aria-expanded={isExpanded}
                            aria-label="Toggle detail"
                          >
-                            {isExpanded ? '▲' : '▼'}
+                            {isExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
                          </button>
                        )}
                      </div>
@@ -350,7 +364,7 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
          </div>
          <div className={styles.shortcut}>
            <KeyboardHint keys="Enter" />
-            <span>Open</span>
+            <span>Search</span>
          </div>
          <div className={styles.shortcut}>
            <KeyboardHint keys="Esc" />
--- a/src/design-system/composites/CommandPalette/types.ts
+++ b/src/design-system/composites/CommandPalette/types.ts
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'

-export type SearchCategory = 'application' | 'exchange' | 'route' | 'agent'
+export type SearchCategory = 'application' | 'exchange' | 'attribute' | 'route' | 'agent'

 export interface SearchResult {
  id: string
--- a/src/design-system/composites/DetailPanel/DetailPanel.module.css
+++ b/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;
 }

--- a/src/design-system/composites/DetailPanel/DetailPanel.tsx
+++ b/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
 }
--- a/src/design-system/composites/EventFeed/EventFeed.tsx
+++ b/src/design-system/composites/EventFeed/EventFeed.tsx
@@ -1,4 +1,5 @@
 import { type ReactNode, useEffect, useRef, useState, useCallback } from 'react'
+import { X as XIcon, AlertTriangle, Play, Loader } from 'lucide-react'
 import styles from './EventFeed.module.css'
 import { ButtonGroup } from '../../primitives/ButtonGroup/ButtonGroup'
 import type { ButtonGroupItem } from '../../primitives/ButtonGroup/ButtonGroup'
@@ -47,11 +48,11 @@ function getSearchableText(event: FeedEvent): string {
  return ''
 }

-const DEFAULT_ICONS: Record<SeverityFilter, string> = {
-  error: '\u2715',    // ✕
-  warning: '\u26A0',  // ⚠
-  success: '\u25B6',  // ▶
-  running: '\u2699',  // ⚙
+const DEFAULT_ICONS: Record<SeverityFilter, ReactNode> = {
+  error: <XIcon size={14} />,
+  warning: <AlertTriangle size={14} />,
+  success: <Play size={14} />,
+  running: <Loader size={14} />,
 }

 const SEVERITY_COLORS: Record<SeverityFilter, string> = {
@@ -136,7 +137,7 @@ export function EventFeed({ events, maxItems = 200, className }: EventFeedProps)
              onClick={() => setSearch('')}
              aria-label="Clear search"
            >
-              ×
+              <XIcon size={12} />
            </button>
          )}
        </div>
--- a/src/design-system/composites/FilterBar/FilterBar.tsx
+++ b/src/design-system/composites/FilterBar/FilterBar.tsx
@@ -1,4 +1,5 @@
 import { useState, type ChangeEvent } from 'react'
+import { Search } from 'lucide-react'
 import styles from './FilterBar.module.css'
 import { Input } from '../../primitives/Input/Input'
 import { FilterPill } from '../../primitives/FilterPill/FilterPill'
@@ -77,12 +78,7 @@ export function FilterBar({
              if (onSearchChange) onSearchChange('')
              else setInternalSearch('')
            } : undefined}
-            icon={
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <circle cx="11" cy="11" r="8" />
-                <line x1="21" y1="21" x2="16.65" y2="16.65" />
-              </svg>
-            }
+            icon={<Search size={13} />}
          />
        </div>

--- a/src/design-system/composites/KpiStrip/KpiStrip.tsx
+++ b/src/design-system/composites/KpiStrip/KpiStrip.tsx
@@ -1,11 +1,11 @@
 import styles from './KpiStrip.module.css'
 import { Sparkline } from '../../primitives/Sparkline/Sparkline'
-import type { CSSProperties } from 'react'
+import type { CSSProperties, ReactNode } from 'react'

 export interface KpiItem {
  label: string
  value: string | number
-  trend?: { label: string; variant?: 'success' | 'warning' | 'error' | 'muted' }
+  trend?: { label: ReactNode; variant?: 'success' | 'warning' | 'error' | 'muted' }
  subtitle?: string
  sparkline?: number[]
  borderColor?: string
--- a/src/design-system/composites/LogViewer/LogViewer.module.css
+++ b/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);
--- 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(<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)', () => {
--- 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<LogEntry['level'], string> = {
  warn: styles.levelWarn,
  error: styles.levelError,
  debug: styles.levelDebug,
+  trace: styles.levelTrace,
 }

 function formatTime(iso: string): string {
--- a/src/design-system/composites/ProcessorTimeline/ProcessorTimeline.tsx
+++ b/src/design-system/composites/ProcessorTimeline/ProcessorTimeline.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { EllipsisVertical } from 'lucide-react'
 import styles from './ProcessorTimeline.module.css'
 import { Dropdown } from '../Dropdown/Dropdown'
 import type { NodeBadge } from '../RouteFlow/RouteFlow'
@@ -124,7 +125,7 @@ export function ProcessorTimeline({
                        aria-label={`Actions for ${proc.name}`}
                        type="button"
                      >
-                        ⋮
+                        <EllipsisVertical size={14} />
                      </button>
                    }
                    items={resolvedActions}
--- a/src/design-system/composites/RouteFlow/RouteFlow.tsx
+++ b/src/design-system/composites/RouteFlow/RouteFlow.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { Play, Cog, Square, Diamond, AlertTriangle, EllipsisVertical } from 'lucide-react'
 import styles from './RouteFlow.module.css'
 import { Dropdown } from '../Dropdown/Dropdown'

@@ -55,12 +56,12 @@ function durationClass(ms: number, status: string): string {
  return styles.durBreach
 }

-const TYPE_ICONS: Record<string, string> = {
-  'from': '\u25B6',
-  'process': '\u2699',
-  'to': '\u25A2',
-  'choice': '\u25C6',
-  'error-handler': '\u26A0',
+const TYPE_ICONS: Record<string, ReactNode> = {
+  'from': <Play size={14} />,
+  'process': <Cog size={14} />,
+  'to': <Square size={14} />,
+  'choice': <Diamond size={14} />,
+  'error-handler': <AlertTriangle size={14} />,
 }

 const ICON_CLASSES: Record<string, string> = {
@@ -100,7 +101,7 @@ function renderActionTrigger(
            aria-label={`Actions for ${node.name}`}
            type="button"
          >
-            ⋮
+            <EllipsisVertical size={14} />
          </button>
        }
        items={resolvedActions}
@@ -166,7 +167,7 @@ function renderNodeChain(
            </span>
          ) : null}
          <div className={`${styles.icon} ${ICON_CLASSES[node.type] ?? styles.iconTo}`}>
-            {TYPE_ICONS[node.type] ?? '\u25A2'}
+            {TYPE_ICONS[node.type] ?? <Square size={14} />}
          </div>
          <div className={styles.info}>
            <div className={styles.type}>{node.type}</div>
@@ -260,7 +261,7 @@ export function RouteFlow({ nodes, flows, onNodeClick, selectedIndex, actions, g
                </span>
              ) : null}
              <div className={`${styles.icon} ${ICON_CLASSES[node.type] ?? styles.iconTo}`}>
-                {TYPE_ICONS[node.type] ?? '\u25A2'}
+                {TYPE_ICONS[node.type] ?? <Square size={14} />}
              </div>
              <div className={styles.info}>
                <div className={styles.type}>{node.type}</div>
--- a/src/design-system/composites/Toast/Toast.test.tsx
+++ b/src/design-system/composites/Toast/Toast.test.tsx
@@ -89,7 +89,7 @@ describe('Toast', () => {

    act(() => { getApi().toast({ title: 'Info', variant: 'info' }) })

-    expect(screen.getByText('ℹ')).toBeInTheDocument()
+    expect(screen.getByTestId('toast').querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
  })

  it('shows correct icon for success variant', () => {
@@ -97,7 +97,7 @@ describe('Toast', () => {

    act(() => { getApi().toast({ title: 'OK', variant: 'success' }) })

-    expect(screen.getByText('✓')).toBeInTheDocument()
+    expect(screen.getByTestId('toast').querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
  })

  it('shows correct icon for warning variant', () => {
@@ -105,7 +105,7 @@ describe('Toast', () => {

    act(() => { getApi().toast({ title: 'Warn', variant: 'warning' }) })

-    expect(screen.getByText('⚠')).toBeInTheDocument()
+    expect(screen.getByTestId('toast').querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
  })

  it('shows correct icon for error variant', () => {
@@ -113,7 +113,7 @@ describe('Toast', () => {

    act(() => { getApi().toast({ title: 'Err', variant: 'error' }) })

-    expect(screen.getByText('✕')).toBeInTheDocument()
+    expect(screen.getByTestId('toast').querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
  })

  it('dismisses toast when close button is clicked', () => {
--- a/src/design-system/composites/Toast/Toast.tsx
+++ b/src/design-system/composites/Toast/Toast.tsx
@@ -8,6 +8,7 @@ import {
  type ReactNode,
 } from 'react'
 import { createPortal } from 'react-dom'
+import { Info, CheckCircle, AlertTriangle, XCircle, X } from 'lucide-react'
 import styles from './Toast.module.css'

 // ── Types ──────────────────────────────────────────────────────────────────
@@ -39,11 +40,11 @@ const MAX_TOASTS = 5
 const DEFAULT_DURATION = 5000
 const EXIT_ANIMATION_MS = 300

-const ICONS: Record<ToastVariant, string> = {
-  info: 'ℹ',
-  success: '✓',
-  warning: '⚠',
-  error: '✕',
+const ICONS: Record<ToastVariant, ReactNode> = {
+  info: <Info size={16} />,
+  success: <CheckCircle size={16} />,
+  warning: <AlertTriangle size={16} />,
+  error: <XCircle size={16} />,
 }

 // ── Context ────────────────────────────────────────────────────────────────
@@ -183,7 +184,7 @@ function ToastItemComponent({ toast, onDismiss }: ToastItemComponentProps) {
        aria-label="Dismiss notification"
        type="button"
      >
-        &times;
+        <X size={14} />
      </button>
    </div>
  )
--- a/src/design-system/layout/AppShell/AppShell.module.css
+++ b/src/design-system/layout/AppShell/AppShell.module.css
@@ -2,6 +2,7 @@
  display: flex;
  height: 100vh;
  overflow: hidden;
+  position: relative;
 }

 .main {
--- a/src/design-system/layout/Sidebar/Sidebar.tsx
+++ b/src/design-system/layout/Sidebar/Sidebar.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useMemo } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
+import { Search, X, ChevronRight, ChevronDown, Settings, FileText } from 'lucide-react'
 import styles from './Sidebar.module.css'
 import camelLogoUrl from '../../../assets/camel-logo.svg'
 import { SidebarTree, type SidebarTreeNode } from './SidebarTree'
@@ -55,7 +56,7 @@ function buildAppTreeNodes(apps: SidebarApp[]): SidebarTreeNode[] {
      id: `route:${app.id}:${route.id}`,
      starKey: `${app.id}:${route.id}`,
      label: route.name,
-      icon: <span className={styles.routeArrow}>&#9656;</span>,
+      icon: <ChevronRight size={12} />,
      badge: formatCount(route.exchangeCount),
      path: `/apps/${app.id}/${route.id}`,
      starrable: true,
@@ -78,7 +79,7 @@ function buildRouteTreeNodes(apps: SidebarApp[]): SidebarTreeNode[] {
        id: `routestat:${app.id}:${route.id}`,
        starKey: `routes:${app.id}:${route.id}`,
        label: route.name,
-        icon: <span className={styles.routeArrow}>&#9656;</span>,
+        icon: <ChevronRight size={12} />,
        badge: formatCount(route.exchangeCount),
        path: `/routes/${app.id}/${route.id}`,
        starrable: true,
@@ -235,10 +236,7 @@ function StarredGroup({
            tabIndex={-1}
            aria-label={`Remove ${item.label} from starred`}
          >
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
+            <X size={12} />
          </button>
        </div>
      ))}
@@ -344,10 +342,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
      <div className={styles.searchWrap}>
        <div className={styles.searchInner}>
          <span className={styles.searchIcon} aria-hidden="true">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <circle cx="11" cy="11" r="8" />
-              <line x1="21" y1="21" x2="16.65" y2="16.65" />
-            </svg>
+            <Search size={12} />
          </span>
          <input
            className={styles.searchInput}
@@ -363,7 +358,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
              onClick={() => setSearch('')}
              aria-label="Clear search"
            >
-              ×
+              <X size={12} />
            </button>
          )}
        </div>
@@ -382,7 +377,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
              aria-expanded={!appsCollapsed}
              aria-label={appsCollapsed ? 'Expand Applications' : 'Collapse Applications'}
            >
-              {appsCollapsed ? '▸' : '▾'}
+              {appsCollapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
            </button>
            <span
              className={`${styles.treeSectionLabel} ${location.pathname === '/apps' ? styles.treeSectionLabelActive : ''}`}
@@ -416,7 +411,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
              aria-expanded={!agentsCollapsed}
              aria-label={agentsCollapsed ? 'Expand Agents' : 'Collapse Agents'}
            >
-              {agentsCollapsed ? '▸' : '▾'}
+              {agentsCollapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
            </button>
            <span
              className={`${styles.treeSectionLabel} ${location.pathname.startsWith('/agents') ? styles.treeSectionLabelActive : ''}`}
@@ -450,7 +445,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
              aria-expanded={!routesCollapsed}
              aria-label={routesCollapsed ? 'Expand Routes' : 'Collapse Routes'}
            >
-              {routesCollapsed ? '▸' : '▾'}
+              {routesCollapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
            </button>
            <span
              className={`${styles.treeSectionLabel} ${location.pathname === '/routes' ? styles.treeSectionLabelActive : ''}`}
@@ -536,7 +531,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
          tabIndex={0}
          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate('/admin') }}
        >
-          <span className={styles.bottomIcon}>&#9881;</span>
+          <span className={styles.bottomIcon}><Settings size={14} /></span>
          <div className={styles.itemInfo}>
            <div className={styles.itemName}>Admin</div>
          </div>
@@ -551,7 +546,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
          tabIndex={0}
          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate('/api-docs') }}
        >
-          <span className={styles.bottomIcon}>&#9776;</span>
+          <span className={styles.bottomIcon}><FileText size={14} /></span>
          <div className={styles.itemInfo}>
            <div className={styles.itemName}>API Docs</div>
          </div>
--- a/src/design-system/layout/Sidebar/SidebarTree.tsx
+++ b/src/design-system/layout/Sidebar/SidebarTree.tsx
@@ -9,6 +9,7 @@ import {
  type MouseEvent,
 } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { Star, ChevronRight, ChevronDown } from 'lucide-react'
 import styles from './Sidebar.module.css'

 // ── Types ────────────────────────────────────────────────────────────────────
@@ -35,22 +36,14 @@ export interface SidebarTreeProps {
  autoRevealPath?: string | null  // when set, auto-expand the parent of the matching node
 }

-// ── Star icon SVGs ───────────────────────────────────────────────────────────
+// ── Star icons ───────────────────────────────────────────────────────────────

 function StarOutline() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-    </svg>
-  )
+  return <Star size={14} />
 }

 function StarFilled() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2">
-      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-    </svg>
-  )
+  return <Star size={14} fill="currentColor" />
 }

 // ── Persistent expand state ──────────────────────────────────────────────────
@@ -395,7 +388,7 @@ function SidebarTreeRow({
              tabIndex={-1}
              aria-label={isExpanded ? 'Collapse' : 'Expand'}
            >
-              {isExpanded ? '▾' : '▸'}
+              {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
            </button>
          ) : null}
        </span>
--- a/src/design-system/layout/TopBar/TopBar.tsx
+++ b/src/design-system/layout/TopBar/TopBar.tsx
@@ -1,3 +1,4 @@
+import { Search, Moon, Sun, Power } from 'lucide-react'
 import styles from './TopBar.module.css'
 import { Breadcrumb } from '../../composites/Breadcrumb/Breadcrumb'
 import { Dropdown } from '../../composites/Dropdown/Dropdown'
@@ -51,10 +52,7 @@ export function TopBar({
        aria-label="Open search"
      >
        <span className={styles.searchIcon} aria-hidden="true">
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <circle cx="11" cy="11" r="8" />
-            <line x1="21" y1="21" x2="16.65" y2="16.65" />
-          </svg>
+          <Search size={13} />
        </span>
        <span className={styles.searchPlaceholder}>Search... &#8984;K</span>
        <span className={styles.kbd}>Ctrl+K</span>
@@ -101,7 +99,7 @@ export function TopBar({
          aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
          title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
        >
-          {theme === 'light' ? '\u263E' : '\u2600'}
+          {theme === 'light' ? <Moon size={16} /> : <Sun size={16} />}
        </button>
        {environment && (
          <span className={styles.env}>{environment}</span>
@@ -115,7 +113,7 @@ export function TopBar({
              </div>
            }
            items={[
-              { label: 'Logout', icon: '\u23FB', onClick: onLogout },
+              { label: 'Logout', icon: <Power size={14} />, onClick: onLogout },
            ]}
          />
        )}
--- a/src/design-system/primitives/Alert/Alert.test.tsx
+++ b/src/design-system/primitives/Alert/Alert.test.tsx
@@ -46,24 +46,23 @@ describe('Alert', () => {
  })

  it('shows default icon for each variant', () => {
-    const { rerender } = render(<Alert variant="info">msg</Alert>)
-    expect(screen.getByText('ℹ')).toBeInTheDocument()
+    const { container, rerender } = render(<Alert variant="info">msg</Alert>)
+    // Each variant should render an SVG icon in the icon slot
+    expect(container.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()

    rerender(<Alert variant="success">msg</Alert>)
-    expect(screen.getByText('✓')).toBeInTheDocument()
+    expect(container.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()

    rerender(<Alert variant="warning">msg</Alert>)
-    expect(screen.getByText('⚠')).toBeInTheDocument()
+    expect(container.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()

    rerender(<Alert variant="error">msg</Alert>)
-    expect(screen.getByText('✕')).toBeInTheDocument()
+    expect(container.querySelector('[aria-hidden="true"] svg')).toBeInTheDocument()
  })

  it('renders a custom icon when provided', () => {
-    render(<Alert icon={<span>★</span>}>Custom icon alert</Alert>)
-    expect(screen.getByText('★')).toBeInTheDocument()
-    // Default icon should not appear
-    expect(screen.queryByText('ℹ')).not.toBeInTheDocument()
+    render(<Alert icon={<span data-testid="custom-icon">★</span>}>Custom icon alert</Alert>)
+    expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
  })

  it('does not show dismiss button when dismissible is false', () => {
--- a/src/design-system/primitives/Alert/Alert.tsx
+++ b/src/design-system/primitives/Alert/Alert.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import { Info, CheckCircle, AlertTriangle, XCircle, X } from 'lucide-react'
 import styles from './Alert.module.css'

 type AlertVariant = 'info' | 'success' | 'warning' | 'error'
@@ -13,11 +14,11 @@ interface AlertProps {
  className?: string
 }

-const DEFAULT_ICONS: Record<AlertVariant, string> = {
-  info: 'ℹ',
-  success: '✓',
-  warning: '⚠',
-  error: '✕',
+const DEFAULT_ICONS: Record<AlertVariant, ReactNode> = {
+  info: <Info size={16} />,
+  success: <CheckCircle size={16} />,
+  warning: <AlertTriangle size={16} />,
+  error: <XCircle size={16} />,
 }

 const ARIA_ROLES: Record<AlertVariant, 'alert' | 'status'> = {
@@ -61,7 +62,7 @@ export function Alert({
          aria-label="Dismiss alert"
          type="button"
        >
-          &times;
+          <X size={14} />
        </button>
      )}
    </div>
--- a/src/design-system/primitives/Input/Input.tsx
+++ b/src/design-system/primitives/Input/Input.tsx
@@ -1,5 +1,6 @@
 import styles from './Input.module.css'
 import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react'
+import { X } from 'lucide-react'

 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  icon?: ReactNode
@@ -25,7 +26,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
            onClick={onClear}
            aria-label="Clear search"
          >
-            ×
+            <X size={12} />
          </button>
        )}
      </div>
--- a/src/pages/AgentHealth/AgentHealth.tsx
+++ b/src/pages/AgentHealth/AgentHealth.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo } from 'react'
 import { useParams, Link } from 'react-router-dom'
+import { ChevronRight } from 'lucide-react'
 import styles from './AgentHealth.module.css'

 // Layout
@@ -389,7 +390,7 @@ export function AgentHealth() {
          {scope.level !== 'all' && (
            <>
              <Link to="/agents" className={styles.scopeLink}>All Agents</Link>
-              <span className={styles.scopeSep}>&#9656;</span>
+              <span className={styles.scopeSep}><ChevronRight size={12} /></span>
              <span className={styles.scopeCurrent}>{scope.appId}</span>
            </>
          )}
--- a/src/pages/AgentInstance/AgentInstance.tsx
+++ b/src/pages/AgentInstance/AgentInstance.tsx
@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { useParams, Link } from 'react-router-dom'
+import { ChevronRight } from 'lucide-react'
 import styles from './AgentInstance.module.css'

 // Layout
@@ -177,9 +178,9 @@ export function AgentInstance() {
        {/* Scope trail + badges */}
        <div className={styles.scopeTrail}>
          <Link to="/agents" className={styles.scopeLink}>All Agents</Link>
-          <span className={styles.scopeSep}>&#9656;</span>
+          <span className={styles.scopeSep}><ChevronRight size={12} /></span>
          <Link to={`/agents/${appId}`} className={styles.scopeLink}>{appId}</Link>
-          <span className={styles.scopeSep}>&#9656;</span>
+          <span className={styles.scopeSep}><ChevronRight size={12} /></span>
          <span className={styles.scopeCurrent}>{agent.name}</span>
          <Badge label={agent.status.toUpperCase()} color={statusColor} />
          <Badge label={agent.version} color="auto" variant="outlined" />
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -1,5 +1,6 @@
-import { useState, useMemo } from 'react'
+import React, { useState, useMemo } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
+import { TrendingUp, TrendingDown, ArrowRight, ExternalLink, AlertTriangle } from 'lucide-react'
 import styles from './Dashboard.module.css'

 // Layout
@@ -43,10 +44,10 @@ const ACCENT_TO_COLOR: Record<KpiMetric['accent'], string> = {
  warning: 'var(--warning)',
 }

-const TREND_ICONS: Record<KpiMetric['trend'], string> = {
-  up: '\u2191',
-  down: '\u2193',
-  neutral: '\u2192',
+const TREND_ICONS: Record<KpiMetric['trend'], React.ReactNode> = {
+  up: <TrendingUp size={12} />,
+  down: <TrendingDown size={12} />,
+  neutral: <ArrowRight size={12} />,
 }

 function sentimentToVariant(sentiment: KpiMetric['trendSentiment']): 'success' | 'error' | 'muted' {
@@ -60,7 +61,7 @@ function sentimentToVariant(sentiment: KpiMetric['trendSentiment']): 'success' |
 const kpiItems: KpiItem[] = kpiMetrics.map((m) => ({
  label: m.label,
  value: m.unit ? `${m.value} ${m.unit}` : m.value,
-  trend: { label: `${TREND_ICONS[m.trend]} ${m.trendValue}`, variant: sentimentToVariant(m.trendSentiment) },
+  trend: { label: <><span style={{ display: 'inline-flex', verticalAlign: 'middle' }}>{TREND_ICONS[m.trend]}</span> {m.trendValue}</>, variant: sentimentToVariant(m.trendSentiment) },
  subtitle: m.detail,
  sparkline: m.sparkline,
  borderColor: ACCENT_TO_COLOR[m.accent],
@@ -206,7 +207,7 @@ export function Dashboard() {
            navigate(`/exchanges/${row.id}`)
          }}
        >
-          &#x2197;
+          <ExternalLink size={14} />
        </button>
      ),
    }
@@ -303,7 +304,7 @@ export function Dashboard() {
                className={styles.openDetailLink}
                onClick={() => navigate(`/exchanges/${selectedExchange.id}`)}
              >
-                Open full details &#x2192;
+                Open full details <ArrowRight size={14} style={{ verticalAlign: 'middle' }} />
              </button>
            </div>

@@ -428,7 +429,7 @@ export function Dashboard() {
            expandedContent={(row) =>
              row.errorMessage ? (
                <div className={styles.inlineError}>
-                  <span className={styles.inlineErrorIcon}>⚠</span>
+                  <span className={styles.inlineErrorIcon}><AlertTriangle size={14} /></span>
                  <div>
                    <div className={styles.inlineErrorText}>{row.errorMessage}</div>
                    <div className={styles.inlineErrorHint}>Click to view full stack trace</div>
--- a/src/pages/Inventory/sections/CompositesSection.tsx
+++ b/src/pages/Inventory/sections/CompositesSection.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { Hexagon, ArrowRight, Diamond, Eye, Pencil, RotateCcw, Trash2, ChevronDown } from 'lucide-react'
 import styles from './CompositesSection.module.css'
 import {
  Accordion,
@@ -157,25 +158,25 @@ const TREE_NODES = [
  {
    id: 'app1',
    label: 'cameleer-prod',
-    icon: '⬡',
+    icon: <Hexagon size={14} />,
    children: [
      {
        id: 'route1',
        label: 'order-ingest',
-        icon: '→',
+        icon: <ArrowRight size={14} />,
        children: [
-          { id: 'proc1', label: 'ValidateOrder', icon: '◈', meta: '12ms' },
-          { id: 'proc2', label: 'EnrichPayload', icon: '◈', meta: '8ms' },
-          { id: 'proc3', label: 'RouteToQueue', icon: '◈', meta: '3ms' },
+          { id: 'proc1', label: 'ValidateOrder', icon: <Diamond size={12} />, meta: '12ms' },
+          { id: 'proc2', label: 'EnrichPayload', icon: <Diamond size={12} />, meta: '8ms' },
+          { id: 'proc3', label: 'RouteToQueue', icon: <Diamond size={12} />, meta: '3ms' },
        ],
      },
      {
        id: 'route2',
        label: 'payment-validate',
-        icon: '→',
+        icon: <ArrowRight size={14} />,
        children: [
-          { id: 'proc4', label: 'TokenizeCard', icon: '◈', meta: '22ms' },
-          { id: 'proc5', label: 'AuthorizePayment', icon: '◈', meta: '45ms' },
+          { id: 'proc4', label: 'TokenizeCard', icon: <Diamond size={12} />, meta: '22ms' },
+          { id: 'proc5', label: 'AuthorizePayment', icon: <Diamond size={12} />, meta: '45ms' },
        ],
      },
    ],
@@ -505,13 +506,13 @@ export function CompositesSection() {
          description="Click-triggered dropdown menu with icons, dividers, and disabled items."
        >
          <Dropdown
-            trigger={<Button size="sm" variant="secondary">Actions ▾</Button>}
+            trigger={<Button size="sm" variant="secondary">Actions <ChevronDown size={12} /></Button>}
            items={[
-              { label: 'View details', icon: '👁', onClick: () => undefined },
-              { label: 'Edit route', icon: '✏', onClick: () => undefined },
+              { label: 'View details', icon: <Eye size={14} />, onClick: () => undefined },
+              { label: 'Edit route', icon: <Pencil size={14} />, onClick: () => undefined },
              { divider: true, label: '' },
-              { label: 'Restart', icon: '↺', onClick: () => undefined },
-              { label: 'Delete', icon: '✕', onClick: () => undefined, disabled: true },
+              { label: 'Restart', icon: <RotateCcw size={14} />, onClick: () => undefined },
+              { label: 'Delete', icon: <Trash2 size={14} />, onClick: () => undefined, disabled: true },
            ]}
          />
        </DemoCard>
--- a/src/pages/Inventory/sections/PrimitivesSection.tsx
+++ b/src/pages/Inventory/sections/PrimitivesSection.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { Search } from 'lucide-react'
 import styles from './PrimitivesSection.module.css'
 import {
  Alert,
@@ -358,7 +359,7 @@ export function PrimitivesSection() {
        description="Text input with optional leading icon and placeholder."
      >
        <Input placeholder="Plain input" />
-        <Input icon="🔍" placeholder="With icon" />
+        <Input icon={<Search size={14} />} placeholder="With icon" />
      </DemoCard>

      {/* 15b. InlineEdit */}
--- a/src/pages/RouteDetail/RouteDetail.tsx
+++ b/src/pages/RouteDetail/RouteDetail.tsx
@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
+import { AlertTriangle } from 'lucide-react'
 import styles from './RouteDetail.module.css'

 // Layout
@@ -337,7 +338,7 @@ export function RouteDetail() {
            expandedContent={(row) =>
              row.errorMessage ? (
                <div className={styles.inlineError}>
-                  <span className={styles.inlineErrorIcon}>⚠</span>
+                  <span className={styles.inlineErrorIcon}><AlertTriangle size={14} /></span>
                  <div>
                    <div className={styles.errorClass}>{row.errorClass}</div>
                    <div className={styles.errorText}>{row.errorMessage}</div>
Author	SHA1	Message	Date
hsiegeln	a12b374fb2	feat: add onSubmit prop to CommandPalette for full-text search All checks were successful Build & Publish / publish (push) Successful in 58s Details When Enter is pressed without explicit arrow/mouse navigation, fires onSubmit with the raw query instead of selecting the focused result. Enables using the palette as a search filter. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-27 23:30:36 +01:00
hsiegeln	433d582da6	feat: migrate all icons to Lucide React All checks were successful Build & Publish / publish (push) Successful in 1m2s Details Replace unicode characters, emoji, and inline SVGs with lucide-react components across the entire design system and page layer. Update tests to assert on SVG elements instead of text content. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-27 23:25:43 +01:00
hsiegeln	2ffc268b44	feat: add attribute search category to CommandPalette All checks were successful Build & Publish / publish (push) Successful in 51s Details Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-27 08:03:57 +01:00
hsiegeln	99ae66315b	feat: add trace log level to LogViewer All checks were successful Build & Publish / publish (push) Successful in 50s Details Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-26 23:04:50 +01:00
hsiegeln	26de5ec58f	feat: add click-to-close backdrop behind DetailPanel All checks were successful Build & Publish / publish (push) Successful in 58s Details Adds a subtle semi-transparent backdrop (rgba(0,0,0,0.15)) behind the overlay panel. Clicking the backdrop closes the panel. Fades in with the panel animation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-26 21:57:34 +01:00
hsiegeln	d26dc6a8a5	fix: make DetailPanel overlay instead of taking flex space All checks were successful Build & Publish / publish (push) Successful in 1m1s Details DetailPanel now uses position: fixed to overlay the content area rather than participating in the AppShell flex row. This prevents the TopBar from being compressed when the panel opens. Added box-shadow for depth separation and z-index: 100 for stacking. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-26 21:55:02 +01:00
hsiegeln	c0b1cbdc5b	fix: remove inset background from LogViewer container All checks were successful Build & Publish / publish (push) Successful in 1m30s Details LogViewer was using --bg-inset which created a visual mismatch with the EventFeed timeline panel. Now inherits the parent card's background (--bg-surface) for consistent appearance in side-by-side layouts. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-26 21:24:35 +01:00