feat: add Sidebar onNavigate callback and DataTable fillHeight prop

Sidebar: add optional onNavigate prop so consuming apps can intercept and remap navigation paths instead of relying on internal React Router links. DataTable: add fillHeight prop for flex-fill layouts with scrolling body. Make the table header sticky by default so it stays visible during vertical scroll. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
chore: npm audit fix
2026-03-28 16:28:49 +01:00 · 2026-03-27 23:33:37 +01:00 · 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
31 changed files with 221 additions and 161 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"
@@ -1917,9 +1918,9 @@
      "license": "MIT"
    },
    "node_modules/@vue/language-core/node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.3.tgz",
+      "integrity": "sha512-MCV/fYJEbqx68aE58kv2cA/kiky1G8vux3OR6/jbS+jIMe/6fJWa0DTzJU7dqijOWYwHi1t29FlfYI9uytqlpA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -2098,9 +2099,9 @@
      }
    },
    "node_modules/brace-expansion": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz",
-      "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
+      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -2519,9 +2520,9 @@
      "license": "ISC"
    },
    "node_modules/happy-dom": {
-      "version": "20.8.4",
-      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-20.8.4.tgz",
-      "integrity": "sha512-GKhjq4OQCYB4VLFBzv8mmccUadwlAusOZOI7hC1D9xDIT5HhzkJK17c4el2f6R6C715P9xB4uiMxeKUa2nHMwQ==",
+      "version": "20.8.9",
+      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-20.8.9.tgz",
+      "integrity": "sha512-Tz23LR9T9jOGVZm2x1EPdXqwA37G/owYMxRwU0E4miurAtFsPMQ1d2Jc2okUaSjZqAFz2oEn3FLXC5a0a+siyA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -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",
@@ -2872,9 +2882,9 @@
      "license": "ISC"
    },
    "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
      "dev": true,
      "license": "MIT",
      "engines": {
--- 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/DataTable/DataTable.module.css
+++ b/src/design-system/composites/DataTable/DataTable.module.css
@@ -12,6 +12,23 @@
  box-shadow: none;
 }

+.fillHeight {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.fillHeight .scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.fillHeight .footer {
+  flex-shrink: 0;
+}
+
 .scroll {
  overflow-x: auto;
 }
@@ -35,6 +52,9 @@
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  transition: color 0.12s;
+  position: sticky;
+  top: 0;
+  z-index: 1;
 }

 .th.sortable {
--- a/src/design-system/composites/DataTable/DataTable.tsx
+++ b/src/design-system/composites/DataTable/DataTable.tsx
@@ -24,6 +24,7 @@ export function DataTable<T extends { id: string }>({
  rowAccent,
  expandedContent,
  flush = false,
+  fillHeight = false,
  onSortChange,
 }: DataTableProps<T>) {
  const [sortKey, setSortKey] = useState<string | null>(null)
@@ -81,7 +82,7 @@ export function DataTable<T extends { id: string }>({
  }))

  return (
-    <div className={`${styles.wrapper} ${flush ? styles.flush : ''}`}>
+    <div className={`${styles.wrapper} ${flush ? styles.flush : ''} ${fillHeight ? styles.fillHeight : ''}`}>
      <div className={styles.scroll}>
        <table className={styles.table}>
          <thead>
--- a/src/design-system/composites/DataTable/types.ts
+++ b/src/design-system/composites/DataTable/types.ts
@@ -20,6 +20,10 @@ export interface DataTableProps<T extends { id: string }> {
  expandedContent?: (row: T) => ReactNode | null
  /** Strip border, radius, and shadow so the table sits flush inside a parent container. */
  flush?: boolean
+  /** Make the table fill remaining vertical space in a flex parent.
+   *  The table body scrolls while the header stays sticky and the
+   *  pagination footer stays pinned at the bottom. */
+  fillHeight?: boolean
  /** Controlled sort: called when the user clicks a sortable column header.
   *  When provided, the component skips client-side sorting — the caller is
   *  responsible for providing `data` in the desired order. */
--- 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
@@ -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);
--- 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/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'
@@ -33,6 +34,7 @@ export interface SidebarAgent {
 interface SidebarProps {
  apps: SidebarApp[]
  className?: string
+  onNavigate?: (path: string) => void
 }

 // ── Helpers ──────────────────────────────────────────────────────────────────
@@ -55,7 +57,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 +80,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 +237,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>
      ))}
@@ -248,7 +247,7 @@ function StarredGroup({

 // ── Sidebar ──────────────────────────────────────────────────────────────────

-export function Sidebar({ apps, className }: SidebarProps) {
+export function Sidebar({ apps, className, onNavigate }: SidebarProps) {
  const [search, setSearch] = useState('')
  const [appsCollapsed, _setAppsCollapsed] = useState(() => localStorage.getItem('cameleer:sidebar:apps-collapsed') === 'true')
  const [agentsCollapsed, _setAgentsCollapsed] = useState(() => localStorage.getItem('cameleer:sidebar:agents-collapsed') === 'true')
@@ -277,7 +276,8 @@ export function Sidebar({ apps, className }: SidebarProps) {
      return next
    })
  }
-  const navigate = useNavigate()
+  const routerNavigate = useNavigate()
+  const nav = onNavigate ?? routerNavigate
  const location = useLocation()
  const { starredIds, isStarred, toggleStar } = useStarred()

@@ -332,7 +332,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
  return (
    <aside className={`${styles.sidebar} ${className ?? ''}`}>
      {/* Logo */}
-      <div className={styles.logo} onClick={() => navigate('/apps')} style={{ cursor: 'pointer' }}>
+      <div className={styles.logo} onClick={() => nav('/apps')} style={{ cursor: 'pointer' }}>
        <img src={camelLogoUrl} alt="" aria-hidden="true" className={styles.logoImg} />
        <div>
          <span className={styles.brand}>cameleer</span>
@@ -344,10 +344,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 +360,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
              onClick={() => setSearch('')}
              aria-label="Clear search"
            >
-              ×
+              <X size={12} />
            </button>
          )}
        </div>
@@ -382,14 +379,14 @@ 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 : ''}`}
-              onClick={() => navigate('/apps')}
+              onClick={() => nav('/apps')}
              role="button"
              tabIndex={0}
-              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate('/apps') }}
+              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') nav('/apps') }}
            >
              Applications
            </span>
@@ -403,6 +400,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
              filterQuery={search}
              persistKey="cameleer:expanded:apps"
              autoRevealPath={sidebarRevealPath}
+              onNavigate={onNavigate}
            />
          )}
        </div>
@@ -416,14 +414,14 @@ 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 : ''}`}
-              onClick={() => navigate('/agents')}
+              onClick={() => nav('/agents')}
              role="button"
              tabIndex={0}
-              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate('/agents') }}
+              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') nav('/agents') }}
            >
              Agents
            </span>
@@ -437,6 +435,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
              filterQuery={search}
              persistKey="cameleer:expanded:agents"
              autoRevealPath={sidebarRevealPath}
+              onNavigate={onNavigate}
            />
          )}
        </div>
@@ -450,14 +449,14 @@ 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 : ''}`}
-              onClick={() => navigate('/routes')}
+              onClick={() => nav('/routes')}
              role="button"
              tabIndex={0}
-              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate('/routes') }}
+              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') nav('/routes') }}
            >
              Routes
            </span>
@@ -471,6 +470,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
              filterQuery={search}
              persistKey="cameleer:expanded:routes"
              autoRevealPath={sidebarRevealPath}
+              onNavigate={onNavigate}
            />
          )}
        </div>
@@ -491,7 +491,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
                <StarredGroup
                  label="Applications"
                  items={starredApps}
-                  onNavigate={navigate}
+                  onNavigate={nav}
                  onRemove={toggleStar}
                />
              )}
@@ -499,7 +499,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
                <StarredGroup
                  label="Routes"
                  items={starredRoutes}
-                  onNavigate={navigate}
+                  onNavigate={nav}
                  onRemove={toggleStar}
                />
              )}
@@ -507,7 +507,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
                <StarredGroup
                  label="Agents"
                  items={starredAgents}
-                  onNavigate={navigate}
+                  onNavigate={nav}
                  onRemove={toggleStar}
                />
              )}
@@ -515,7 +515,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
                <StarredGroup
                  label="Routes"
                  items={starredRouteStats}
-                  onNavigate={navigate}
+                  onNavigate={nav}
                  onRemove={toggleStar}
                />
              )}
@@ -531,12 +531,12 @@ export function Sidebar({ apps, className }: SidebarProps) {
            styles.bottomItem,
            location.pathname.startsWith('/admin') ? styles.bottomItemActive : '',
          ].filter(Boolean).join(' ')}
-          onClick={() => navigate('/admin')}
+          onClick={() => nav('/admin')}
          role="button"
          tabIndex={0}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate('/admin') }}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') nav('/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>
@@ -546,12 +546,12 @@ export function Sidebar({ apps, className }: SidebarProps) {
            styles.bottomItem,
            location.pathname === '/api-docs' ? styles.bottomItemActive : '',
          ].filter(Boolean).join(' ')}
-          onClick={() => navigate('/api-docs')}
+          onClick={() => nav('/api-docs')}
          role="button"
          tabIndex={0}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate('/api-docs') }}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') nav('/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 ────────────────────────────────────────────────────────────────────
@@ -33,24 +34,17 @@ export interface SidebarTreeProps {
  filterQuery?: string
  persistKey?: string     // sessionStorage key to persist expand state across remounts
  autoRevealPath?: string | null  // when set, auto-expand the parent of the matching node
+  onNavigate?: (path: string) => void
 }

-// ── 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 ──────────────────────────────────────────────────
@@ -141,8 +135,10 @@ export function SidebarTree({
  filterQuery,
  persistKey,
  autoRevealPath,
+  onNavigate,
 }: SidebarTreeProps) {
-  const navigate = useNavigate()
+  const routerNavigate = useNavigate()
+  const navigate = onNavigate ?? routerNavigate

  // Expand/collapse state — optionally persisted to sessionStorage
  const [userExpandedIds, setUserExpandedIds] = useState<Set<string>>(
@@ -395,7 +391,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	f359a2ba3d	feat: add Sidebar onNavigate callback and DataTable fillHeight prop All checks were successful Build & Publish / publish (push) Successful in 1m3s Details Sidebar: add optional onNavigate prop so consuming apps can intercept and remap navigation paths instead of relying on internal React Router links. DataTable: add fillHeight prop for flex-fill layouts with scrolling body. Make the table header sticky by default so it stays visible during vertical scroll. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-28 16:28:49 +01:00
hsiegeln	384ee97643	chore: npm audit fix All checks were successful Build & Publish / publish (push) Successful in 1m39s Details Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-27 23:33:37 +01:00
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