amliq-dashboard 2.0.0

package/src/components/layout/MobileHeader.tsx

@@ -0,0 +1,30 @@
+import { Menu } from 'lucide-react'
+import { NotificationBell } from './NotificationBell'
+
+interface MobileHeaderProps {
+  onMenuToggle: () => void
+}
+
+export function MobileHeader({ onMenuToggle }: MobileHeaderProps) {
+  return (
+    <header className="md:hidden sticky top-0 z-40 h-14 flex items-center justify-between px-4"
+      style={{
+        background: 'rgba(10,10,15,0.85)',
+        backdropFilter: 'blur(20px) saturate(180%)',
+        borderBottom: '1px solid rgba(255,255,255,0.06)',
+      }}>
+      <button type="button" onClick={onMenuToggle}
+        className="w-9 h-9 flex items-center justify-center rounded-xl
+          hover:bg-white/[0.08] transition-all cursor-pointer active:scale-90">
+        <Menu className="w-5 h-5 text-apple-label-secondary" />
+      </button>
+
+      <div className="flex items-center gap-1">
+        <span className="text-base font-extrabold text-white tracking-tight">AQ</span>
+        <span className="w-1.5 h-1.5 rounded-full bg-gradient-to-br from-[#0A84FF] to-[#6366F1] -mt-2" />
+      </div>
+
+      <NotificationBell />
+    </header>
+  )
+}

package/src/components/layout/NavGroup.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { MemoryRouter } from 'react-router-dom'
+import { NavGroup } from './NavGroup'
+import { Home, Bell } from 'lucide-react'
+
+const mockSection = {
+  title: 'Main',
+  items: [
+    { icon: Home, label: 'Dashboard', path: '/dashboard' },
+    { icon: Bell, label: 'Alerts', path: '/alerts' },
+  ],
+}
+
+const renderNavGroup = (path = '/') =>
+  render(
+    <MemoryRouter initialEntries={[path]}>
+      <NavGroup section={mockSection} userRole="admin" onNavigate={vi.fn()} />
+    </MemoryRouter>
+  )
+
+describe('NavGroup', () => {
+  it('renders section title', () => {
+    renderNavGroup()
+    expect(screen.getByText(/main/i)).toBeInTheDocument()
+  })
+
+  it('renders all nav items as links', () => {
+    renderNavGroup()
+    const links = screen.getAllByRole('link')
+    expect(links).toHaveLength(2)
+  })
+
+  it('renders correct hrefs', () => {
+    renderNavGroup()
+    expect(screen.getAllByRole('link')[0]).toHaveAttribute('href', '/dashboard')
+    expect(screen.getAllByRole('link')[1]).toHaveAttribute('href', '/alerts')
+  })
+
+  it('highlights active link', () => {
+    renderNavGroup('/dashboard')
+    const link = screen.getAllByRole('link')[0]
+    expect(link).toHaveClass('bg-white/5', 'text-white')
+  })
+
+  it('does not highlight inactive links', () => {
+    renderNavGroup('/dashboard')
+    const link = screen.getAllByRole('link')[1]
+    expect(link).toHaveClass('text-apple-label-secondary')
+  })
+
+  it('calls onNavigate when link clicked', async () => {
+    const handler = vi.fn()
+    render(
+      <MemoryRouter>
+        <NavGroup section={mockSection} userRole="admin" onNavigate={handler} />
+      </MemoryRouter>
+    )
+    await userEvent.click(screen.getAllByRole('link')[0])
+    expect(handler).toHaveBeenCalledOnce()
+  })
+})

package/src/components/layout/NavGroup.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+import type { NavSection } from './navItems';
+import { canAccess } from './navItems';
+
+interface NavGroupProps {
+  section: NavSection;
+  userRole: string;
+  collapsed?: boolean;
+  onNavigate: () => void;
+}
+
+export function NavGroup({ section, userRole, collapsed, onNavigate }: NavGroupProps) {
+  const { t } = useTranslation('nav');
+  const location = useLocation();
+
+  // Hide entire section if user lacks access
+  if (!canAccess(userRole, section.minRole)) return null;
+
+  const visibleItems = section.items.filter(
+    (item) => canAccess(userRole, item.minRole),
+  );
+  if (visibleItems.length === 0) return null;
+
+  const isActive = (path: string) =>
+    location.pathname === path || (path !== '/dashboard' && location.pathname.startsWith(path));
+
+  return (
+    <div className="mb-lg">
+      {!collapsed && (
+        <p className="text-[10px] uppercase tracking-[0.12em] text-apple-label-tertiary px-lg mb-sm font-medium">
+          {t(section.title.toLowerCase())}
+        </p>
+      )}
+      <div className="space-y-px">
+        {visibleItems.map(({ icon: Icon, label, path }) => (
+          <Link
+            key={path}
+            to={path}
+            onClick={onNavigate}
+            title={collapsed ? label : undefined}
+            className={clsx(
+              'flex items-center gap-md rounded-apple-md transition-all cursor-pointer relative',
+              collapsed ? 'justify-center px-sm py-md' : 'px-lg py-sm',
+              isActive(path)
+                ? 'bg-white/5 text-white'
+                : 'text-apple-label-secondary hover:bg-white/5 hover:text-white'
+            )}
+          >
+            {isActive(path) && (
+              <span className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-4 bg-apple-blue rounded-r-full" />
+            )}
+            <Icon className="w-4 h-4 flex-shrink-0" />
+            {!collapsed && (
+              <span className="text-[14px]">{t(label.toLowerCase().replace(/ /g, '_'))}</span>
+            )}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/layout/NotificationBell.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { Bell } from 'lucide-react'
+import { api } from '../../api/client'
+
+interface Notification {
+  id: string
+  action: string
+  details: string
+  created_at: string
+}
+
+export function NotificationBell() {
+  const [open, setOpen] = useState(false)
+  const [items, setItems] = useState<Notification[]>([])
+  const [unread, setUnread] = useState(0)
+  const ref = useRef<HTMLDivElement>(null!)
+
+  useEffect(() => {
+    fetchNotifications()
+    const interval = setInterval(fetchNotifications, 30000)
+    return () => clearInterval(interval)
+  }, [])
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [])
+
+  async function fetchNotifications() {
+    try {
+      const data = await api.get<{ entries: Notification[]; total: number }>('/audit?limit=10')
+      setItems(data.entries ?? [])
+      setUnread(data.total > 0 ? Math.min(data.total, 9) : 0)
+    } catch { /* silent */ }
+  }
+
+  return (
+    <div ref={ref} className="relative">
+      <button onClick={() => { setOpen(!open); setUnread(0) }}
+        className="relative p-sm hover:bg-white/[0.06] rounded-apple-md transition-colors cursor-pointer">
+        <Bell className="w-5 h-5 text-apple-label-secondary" />
+        {unread > 0 && (
+          <span className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-apple-red rounded-full text-[10px] text-white flex items-center justify-center font-bold">
+            {unread}
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-10 w-80 bg-[#1a1a24] border border-white/10 rounded-apple-lg shadow-2xl overflow-hidden z-50">
+          <div className="flex border-b border-white/[0.06]">
+            <Tab label="Notifications" active />
+          </div>
+          <div className="max-h-72 overflow-y-auto">
+            {items.length === 0 && (
+              <p className="p-lg text-sm text-apple-label-tertiary text-center">No notifications</p>
+            )}
+            {items.map((n) => (
+              <NotificationRow key={n.id} item={n} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function Tab({ label, active }: { label: string; active: boolean }) {
+  return (
+    <button className={`flex-1 py-md text-sm font-medium ${active ? 'text-white border-b-2 border-apple-blue' : 'text-apple-label-tertiary'}`}>
+      {label}
+    </button>
+  )
+}
+
+function NotificationRow({ item }: { item: Notification }) {
+  const time = new Date(item.created_at).toLocaleString(undefined, {
+    month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
+  })
+  return (
+    <div className="px-lg py-md border-b border-white/[0.04] hover:bg-white/[0.03]">
+      <p className="text-sm text-white">{item.action}</p>
+      <p className="text-[11px] text-apple-label-tertiary mt-xs">{time}</p>
+    </div>
+  )
+}

package/src/components/layout/PageHeader.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { PageHeader } from './PageHeader'
+import { Button } from '../ui/Button'
+
+describe('PageHeader', () => {
+  it('renders page title', () => {
+    render(<PageHeader title="Dashboard" />)
+    expect(screen.getByRole('heading', { name: /dashboard/i })).toBeInTheDocument()
+  })
+
+  it('renders description when provided', () => {
+    render(
+      <PageHeader
+        title="Alerts"
+        description="Review pending alerts"
+      />
+    )
+    expect(screen.getByText('Review pending alerts')).toBeInTheDocument()
+  })
+
+  it('does not render description when not provided', () => {
+    const { container } = render(<PageHeader title="Test" />)
+    const captions = container.querySelectorAll('.sf-caption')
+    expect(captions.length).toBe(0)
+  })
+
+  it('renders action element when provided', () => {
+    render(
+      <PageHeader
+        title="Test"
+        action={<Button>Export</Button>}
+      />
+    )
+    expect(screen.getByRole('button', { name: /export/i })).toBeInTheDocument()
+  })
+
+  it('renders title and description together', () => {
+    render(
+      <PageHeader
+        title="Configuration"
+        description="Manage system settings"
+      />
+    )
+    expect(screen.getByRole('heading', { name: /configuration/i })).toBeInTheDocument()
+    expect(screen.getByText('Manage system settings')).toBeInTheDocument()
+  })
+
+  it('renders title, description, and action together', () => {
+    render(
+      <PageHeader
+        title="Screening"
+        description="Screen new entities"
+        action={<Button variant="primary">New</Button>}
+      />
+    )
+    expect(screen.getByRole('heading', { name: /screening/i })).toBeInTheDocument()
+    expect(screen.getByText('Screen new entities')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /new/i })).toBeInTheDocument()
+  })
+})

package/src/components/layout/PageHeader.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+}
+
+export function PageHeader({ title, description, action }: PageHeaderProps) {
+  return (
+    <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-lg mb-xxl">
+      <div>
+        <h1 className="sf-title mb-sm">{title}</h1>
+        {description && <p className="sf-caption">{description}</p>}
+      </div>
+      {action && <div className="flex-shrink-0">{action}</div>}
+    </div>
+  );
+}

package/src/components/layout/ProtectedRoute.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../../context/AuthContext';
+import { LoadingSpinner } from '../ui/LoadingSpinner';
+
+interface Props {
+  children: React.ReactNode;
+  requiredRole?: string;
+}
+
+export function ProtectedRoute({ children, requiredRole }: Props) {
+  const { isAuthenticated, loading, user } = useAuth();
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  if (requiredRole && user?.role !== requiredRole && user?.role !== 'admin') {
+    return <Navigate to="/dashboard" replace />;
+  }
+
+  return <>{children}</>;
+}

package/src/components/layout/PublicLayout.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import MarketingNav from '../../pages/marketing/MarketingNav'
+import FooterSection from '../../pages/marketing/FooterSection'
+
+interface PublicLayoutProps {
+  children: React.ReactNode
+}
+
+export default function PublicLayout({ children }: PublicLayoutProps) {
+  return (
+    <div className="min-h-screen bg-black flex flex-col">
+      <MarketingNav />
+      <main className="flex-1">{children}</main>
+      <FooterSection />
+    </div>
+  )
+}

package/src/components/layout/Sidebar.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { BrowserRouter } from 'react-router-dom'
+import { Sidebar } from './Sidebar'
+
+vi.mock('../../context/AuthContext', () => ({
+  useAuth: () => ({
+    user: { id: '1', email: 'john@example.com', role: 'admin', tenant_id: 't1' },
+    loading: false,
+    isAuthenticated: true,
+  }),
+}))
+
+const renderWithRouter = (component: React.ReactElement) => {
+  return render(<BrowserRouter>{component}</BrowserRouter>)
+}
+
+describe('Sidebar', () => {
+  it('renders sidebar logo', () => {
+    renderWithRouter(<Sidebar isOpen={true} onClose={vi.fn()} />)
+    expect(screen.getByAltText('AMLIQ')).toBeInTheDocument()
+  })
+
+  it('renders main and compliance nav sections', () => {
+    renderWithRouter(<Sidebar isOpen={true} onClose={vi.fn()} />)
+    expect(screen.getByText('Dashboard')).toBeInTheDocument()
+    expect(screen.getByText('Cases')).toBeInTheDocument()
+    expect(screen.getByText('PEP Screening')).toBeInTheDocument()
+    expect(screen.getByText('Adverse Media')).toBeInTheDocument()
+  })
+
+  it('renders section titles', () => {
+    renderWithRouter(<Sidebar isOpen={true} onClose={vi.fn()} />)
+    expect(screen.getByText('Main')).toBeInTheDocument()
+    expect(screen.getByText('Compliance')).toBeInTheDocument()
+    expect(screen.getByText('System')).toBeInTheDocument()
+  })
+
+  it('renders user display name from email', () => {
+    renderWithRouter(<Sidebar isOpen={true} onClose={vi.fn()} />)
+    expect(screen.getByText('john')).toBeInTheDocument()
+  })
+
+  it('calls onClose on link click', async () => {
+    const handler = vi.fn()
+    renderWithRouter(<Sidebar isOpen={true} onClose={handler} />)
+    await userEvent.click(screen.getByText('Dashboard').closest('a')!)
+    expect(handler).toHaveBeenCalledOnce()
+  })
+
+  it('renders correct compliance hrefs', () => {
+    renderWithRouter(<Sidebar isOpen={true} onClose={vi.fn()} />)
+    expect(screen.getByText('Cases').closest('a'))
+      .toHaveAttribute('href', '/compliance/cases')
+    expect(screen.getByText('Risk Assessment').closest('a'))
+      .toHaveAttribute('href', '/compliance/risk')
+  })
+
+  it('hides sidebar when isOpen is false', () => {
+    const { container } = renderWithRouter(
+      <Sidebar isOpen={false} onClose={vi.fn()} />
+    )
+    const sidebar = container.querySelector('div[class*="-translate-x-full"]')
+    expect(sidebar).toBeInTheDocument()
+  })
+})

package/src/components/layout/Sidebar.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react';
+import { X, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import clsx from 'clsx';
+import { Avatar } from '../ui/Avatar';
+import { NavGroup } from './NavGroup';
+import { navSections } from './navItems';
+import { useAuth } from '../../context/AuthContext';
+
+interface SidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function Sidebar({ isOpen, onClose }: SidebarProps) {
+  const { user } = useAuth();
+  const [collapsed, setCollapsed] = useState(false);
+  const displayName = user?.email?.split('@')[0] ?? 'User';
+  const displayEmail = user?.email ?? 'Compliance Officer';
+  const userRole = user?.role ?? 'viewer';
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) onClose();
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  const width = collapsed ? 'w-16' : 'w-64';
+
+  return (
+    <>
+      {isOpen && (
+        <div className="fixed inset-0 bg-black/60 md:hidden z-40" onClick={onClose} aria-hidden="true" />
+      )}
+      <div
+        className={clsx(
+          'fixed md:relative h-screen flex flex-col transition-all duration-200 z-50',
+          width,
+          'bg-gradient-to-b from-[#0E0E16] to-[#08080C]',
+          'backdrop-blur-[24px] border-r border-white/[0.06]',
+          'md:translate-x-0',
+          isOpen ? 'translate-x-0' : '-translate-x-full'
+        )}
+      >
+        <SidebarHeader collapsed={collapsed} onClose={onClose} onToggle={() => setCollapsed(!collapsed)} />
+        <div className="mx-3 mb-sm h-px bg-gradient-to-r from-transparent via-white/[0.06] to-transparent" />
+
+        <nav className="flex-1 px-sm py-sm overflow-y-auto" aria-label="Main navigation">
+          {navSections.map((section) => (
+            <NavGroup key={section.title} section={section} userRole={userRole}
+              collapsed={collapsed} onNavigate={onClose} />
+          ))}
+        </nav>
+
+        {!collapsed && (
+          <div className="p-lg border-t border-white/[0.04]">
+            <Link to="/config" className="flex items-center gap-md hover:bg-white/[0.04] rounded-apple-md p-sm transition-colors">
+              <Avatar name={displayName} size="md" />
+              <div className="flex-1 min-w-0">
+                <p className="text-[14px] font-medium text-white truncate">{displayName}</p>
+                <p className="text-[11px] text-apple-label-tertiary truncate">{displayEmail}</p>
+              </div>
+            </Link>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+function SidebarHeader({ collapsed, onClose, onToggle }: {
+  collapsed: boolean; onClose: () => void; onToggle: () => void;
+}) {
+  return (
+    <div className="relative p-md flex items-center justify-between">
+      <div className="flex items-center gap-2 relative">
+        <img src="/logo.svg" alt="AMLIQ" className="h-7 w-7" />
+        {!collapsed && <span className="text-white font-bold text-sm">AMLIQ</span>}
+      </div>
+      <button onClick={onClose} aria-label="Close menu"
+        className="md:hidden p-sm hover:bg-white/[0.08] rounded-apple-md cursor-pointer">
+        <X className="w-5 h-5" />
+      </button>
+      <button onClick={onToggle} aria-label={collapsed ? 'Expand' : 'Collapse'}
+        className="hidden md:block p-sm hover:bg-white/[0.08] rounded-apple-md cursor-pointer">
+        {collapsed ? <ChevronsRight className="w-4 h-4" /> : <ChevronsLeft className="w-4 h-4" />}
+      </button>
+    </div>
+  );
+}

package/src/components/layout/Toolbar.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { Toolbar } from './Toolbar'
+
+vi.mock('../ui/LanguageSwitcher', () => ({
+  LanguageSwitcher: () => <div data-testid="lang-switcher" />,
+}))
+
+describe('Toolbar', () => {
+  it('renders toggle menu button with aria-label', () => {
+    render(<Toolbar onMenuClick={vi.fn()} />)
+    expect(screen.getByLabelText('Toggle menu')).toBeInTheDocument()
+  })
+
+  it('calls onMenuClick when menu button clicked', async () => {
+    const handler = vi.fn()
+    render(<Toolbar onMenuClick={handler} />)
+    await userEvent.click(screen.getByLabelText('Toggle menu'))
+    expect(handler).toHaveBeenCalledOnce()
+  })
+
+  it('renders notifications button', () => {
+    render(<Toolbar onMenuClick={vi.fn()} />)
+    expect(screen.getByLabelText('Notifications, unread')).toBeInTheDocument()
+  })
+
+  it('renders settings button', () => {
+    render(<Toolbar onMenuClick={vi.fn()} />)
+    expect(screen.getByLabelText('Settings')).toBeInTheDocument()
+  })
+
+  it('has screen reader text for unread notifications', () => {
+    render(<Toolbar onMenuClick={vi.fn()} />)
+    expect(screen.getByText('You have unread notifications')).toBeInTheDocument()
+  })
+
+  it('renders language switcher', () => {
+    render(<Toolbar onMenuClick={vi.fn()} />)
+    expect(screen.getByTestId('lang-switcher')).toBeInTheDocument()
+  })
+
+  it('renders as header element', () => {
+    render(<Toolbar onMenuClick={vi.fn()} />)
+    expect(screen.getByRole('banner')).toBeInTheDocument()
+  })
+})

package/src/components/layout/Toolbar.tsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react';
+import { Menu, Search, LogOut } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { LanguageSwitcher } from '../ui/LanguageSwitcher';
+import { NotificationBell } from './NotificationBell';
+import { CommandPalette } from './CommandPalette';
+import { Avatar } from '../ui/Avatar';
+import { useAuth } from '../../context/AuthContext';
+
+interface ToolbarProps {
+  onMenuClick: () => void;
+}
+
+export function Toolbar({ onMenuClick }: ToolbarProps) {
+  const [cmdOpen, setCmdOpen] = useState(false);
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+  const displayName = user?.email?.split('@')[0] ?? 'User';
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        setCmdOpen((v) => !v);
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, []);
+
+  return (
+    <>
+      <header className={
+        'sticky top-0 z-40 px-lg py-md ' +
+        'bg-[rgba(10,10,15,0.8)] backdrop-blur-[24px] backdrop-saturate-[180%] ' +
+        'border-b border-white/[0.06]'
+      }>
+        <div className="flex items-center gap-lg">
+          <button onClick={onMenuClick} aria-label="Toggle menu"
+            className="md:hidden p-sm hover:bg-white/[0.08] rounded-apple-md cursor-pointer">
+            <Menu className="w-5 h-5" />
+          </button>
+
+          <button onClick={() => setCmdOpen(true)}
+            className="hidden md:flex items-center gap-md px-lg py-sm bg-white/[0.04] hover:bg-white/[0.08] rounded-apple-md transition-colors cursor-pointer max-w-xs flex-1">
+            <Search className="w-4 h-4 text-apple-label-tertiary" />
+            <span className="text-sm text-apple-label-tertiary">Search...</span>
+            <kbd className="ml-auto text-[10px] text-apple-label-tertiary bg-white/5 px-1.5 py-0.5 rounded">⌘K</kbd>
+          </button>
+
+          <div className="flex items-center gap-sm ml-auto">
+            <LanguageSwitcher />
+            <NotificationBell />
+            <div className="flex items-center gap-md pl-md border-l border-white/[0.06]">
+              <Avatar name={displayName} size="sm" />
+              <button onClick={() => { logout(); navigate('/login'); }}
+                aria-label="Logout"
+                className="p-sm hover:bg-white/[0.08] rounded-apple-md cursor-pointer">
+                <LogOut className="w-4 h-4 text-apple-label-tertiary" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+      <CommandPalette open={cmdOpen} onClose={() => setCmdOpen(false)} />
+    </>
+  );
+}