hex-audit 0.4.0

package/dashboard/components/CommandPalette.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { NAV_GROUPS } from './DashboardLayout';
+
+type NavItem = { href: string; label: string };
+
+const ALL_ITEMS: NavItem[] = NAV_GROUPS.flatMap((g) =>
+  g.items.map((item) => ({ href: item.href, label: `${g.label} / ${item.label}` })),
+);
+
+export function CommandPalette() {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [selected, setSelected] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const router = useRouter();
+
+  const results = query.trim()
+    ? ALL_ITEMS.filter((item) =>
+        item.label.toLowerCase().includes(query.toLowerCase()) ||
+        item.href.includes(query.toLowerCase()),
+      )
+    : ALL_ITEMS;
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+        e.preventDefault();
+        setOpen((v) => !v);
+        setQuery('');
+        setSelected(0);
+      }
+      if (e.key === 'Escape') setOpen(false);
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [open]);
+
+  // Reset selection when results change
+  useEffect(() => setSelected(0), [query]);
+
+  const navigate = (href: string) => {
+    router.push(href);
+    setOpen(false);
+    setQuery('');
+  };
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[9000] flex items-start justify-center px-4 pt-[12vh]"
+      style={{ background: 'var(--overlay-bg)' }}
+      onClick={() => setOpen(false)}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Quick navigation"
+        className="w-full max-w-lg rounded-lg border border-border-default bg-surface-1 shadow-lg"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Search input */}
+        <div className="flex items-center border-b border-border-default px-4 py-3 gap-2">
+          <span className="text-accent text-body font-medium shrink-0" aria-hidden="true">&gt;</span>
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="search pages..."
+            aria-label="Search pages"
+            className="flex-1 bg-transparent text-body text-text-primary placeholder-text-tertiary outline-none"
+            onKeyDown={(e) => {
+              if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                setSelected((s) => Math.min(s + 1, results.length - 1));
+              } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                setSelected((s) => Math.max(s - 1, 0));
+              } else if (e.key === 'Enter' && results[selected]) {
+                navigate(results[selected].href);
+              } else if (e.key === 'Tab') {
+                e.preventDefault(); // focus trap
+              }
+            }}
+          />
+          <kbd
+            className="shrink-0 border border-border-default px-1.5 py-0.5 text-caption text-text-tertiary"
+            style={{ borderRadius: 'var(--radius-sm)' }}
+          >
+            ESC
+          </kbd>
+        </div>
+
+        {/* Results */}
+        <div className="max-h-72 overflow-y-auto py-1">
+          {results.length === 0 ? (
+            <div className="px-4 py-3 text-body text-text-tertiary">no results</div>
+          ) : (
+            results.map((item, i) => (
+              <button
+                key={item.href}
+                type="button"
+                className={`flex w-full items-center gap-3 px-4 py-2.5 text-left text-body focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent ${
+                  i === selected
+                    ? 'bg-accent-subtle text-accent'
+                    : 'text-text-secondary hover:bg-surface-2 hover:text-text-primary'
+                }`}
+                onClick={() => navigate(item.href)}
+                onMouseEnter={() => setSelected(i)}
+              >
+                <span className="text-text-tertiary text-caption shrink-0">
+                  {i === selected ? '>' : ' '}
+                </span>
+                <span>{item.label}</span>
+                <span className="ml-auto text-caption text-text-tertiary shrink-0">
+                  {item.href}
+                </span>
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/dashboard/components/ConfidenceBadge.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useState } from 'react';
+
+export type ConfidenceLevel = 'high' | 'medium' | 'low';
+
+interface ConfidenceBadgeProps {
+  level: string;
+  derivedFrom?: string;
+}
+
+const STYLES: Record<ConfidenceLevel, string> = {
+  high: 'bg-[var(--success)]/15 text-[var(--success)]',
+  medium: 'bg-[var(--medium)]/15 text-[var(--medium)]',
+  low: 'bg-[var(--critical)]/15 text-[var(--critical)]',
+};
+
+export function ConfidenceBadge({ level, derivedFrom }: ConfidenceBadgeProps) {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const normalized = level.toLowerCase() as ConfidenceLevel;
+  const style = STYLES[normalized] ?? STYLES.low;
+  const tooltipId = derivedFrom ? `confidence-${level}-${derivedFrom.replace(/\W+/g, '-')}` : undefined;
+  const ariaLabel = derivedFrom ? `${level} confidence, derived from ${derivedFrom}` : `${level} confidence`;
+
+  return (
+    <span
+      className="relative inline-block focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent rounded-md"
+      tabIndex={derivedFrom ? 0 : undefined}
+      role={derivedFrom ? 'group' : undefined}
+      aria-label={ariaLabel}
+      aria-describedby={showTooltip && tooltipId ? tooltipId : undefined}
+      onMouseEnter={() => setShowTooltip(true)}
+      onMouseLeave={() => setShowTooltip(false)}
+      onFocus={() => setShowTooltip(true)}
+      onBlur={() => setShowTooltip(false)}
+    >
+      <span
+        className={`inline-flex items-center rounded-md px-2 py-0.5 text-caption font-medium ${style}`}
+      >
+        {level}
+      </span>
+      {derivedFrom && showTooltip && (
+        <span
+          id={tooltipId}
+          role="tooltip"
+          className="absolute bottom-full left-1/2 z-50 mb-2 -translate-x-1/2 whitespace-nowrap rounded-md border border-border-default bg-surface-3 px-2 py-1 text-caption text-text-secondary shadow-lg"
+        >
+          Derived from: {derivedFrom}
+        </span>
+      )}
+    </span>
+  );
+}

package/dashboard/components/DashboardLayout.tsx

@@ -0,0 +1,450 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+import { LiveStatus } from './LiveStatus';
+
+/* ── Icon components ── */
+
+function IconHome(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+      />
+    </svg>
+  );
+}
+function IconProgress(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15a2.25 2.25 0 0 1 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75"
+      />
+    </svg>
+  );
+}
+function IconStats(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"
+      />
+    </svg>
+  );
+}
+function IconLock(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
+      />
+    </svg>
+  );
+}
+function IconFunctions(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"
+      />
+    </svg>
+  );
+}
+function IconCalls(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
+      />
+    </svg>
+  );
+}
+function IconShield(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"
+      />
+    </svg>
+  );
+}
+function IconSpec(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375"
+      />
+    </svg>
+  );
+}
+function IconDiagram(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+      />
+    </svg>
+  );
+}
+function IconFlows(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5"
+      />
+    </svg>
+  );
+}
+function IconRobot(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m3.75-1.5v1.5m-7.5 15V21M12 19.5V21m3.75-1.5V21M6.75 7.5h10.5a2.25 2.25 0 0 1 2.25 2.25v6a2.25 2.25 0 0 1-2.25 2.25H6.75a2.25 2.25 0 0 1-2.25-2.25v-6A2.25 2.25 0 0 1 6.75 7.5ZM9.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm5.25 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
+      />
+    </svg>
+  );
+}
+function IconReport(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+      />
+    </svg>
+  );
+}
+function IconFindings(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+      />
+    </svg>
+  );
+}
+function IconMenu(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+      />
+    </svg>
+  );
+}
+function IconSun(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
+      />
+    </svg>
+  );
+}
+function IconMoon(p: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...p}
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
+      />
+    </svg>
+  );
+}
+
+/* ── Nav structure ── */
+const NAV_GROUPS = [
+  {
+    label: 'Recon',
+    items: [
+      { href: '/', label: 'Home', icon: IconHome },
+      { href: '/progress', label: 'Progress', icon: IconProgress },
+      { href: '/stats', label: 'Stats', icon: IconStats },
+    ],
+  },
+  {
+    label: 'Analysis',
+    items: [
+      { href: '/access', label: 'Access Control', icon: IconLock },
+      { href: '/functions', label: 'Functions', icon: IconFunctions },
+      { href: '/calls', label: 'Ext Calls', icon: IconCalls },
+    ],
+  },
+  {
+    label: 'Reasoning',
+    items: [{ href: '/conformance', label: 'Spec Conformance', icon: IconSpec }],
+  },
+  {
+    label: 'Visual',
+    items: [
+      { href: '/diagram', label: 'Diagram', icon: IconDiagram },
+      { href: '/flows', label: 'Flows', icon: IconFlows },
+    ],
+  },
+  { label: 'Issues', items: [{ href: '/issues', label: 'Board', icon: IconFindings }] },
+];
+
+export { NAV_GROUPS };
+
+/* ── Theme toggle ── */
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return <div className="h-9" />;
+
+  const Icon = theme === 'light' ? IconSun : IconMoon;
+  const label = theme === 'light' ? 'Light' : 'Dark';
+
+  return (
+    <button
+      type="button"
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+      className="flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-body text-text-secondary hover:bg-surface-2 hover:text-text-primary"
+    >
+      <Icon className="h-4 w-4 shrink-0" />
+      <span>{label}</span>
+    </button>
+  );
+}
+
+/* ── Layout ── */
+export function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  useEffect(() => {
+    setSidebarOpen(false);
+  }, [pathname]);
+
+  return (
+    <div className="min-h-screen">
+      {/* Mobile hamburger */}
+      <button
+        type="button"
+        aria-label="Toggle navigation"
+        onClick={() => setSidebarOpen(!sidebarOpen)}
+        className="fixed left-3 top-3 z-[60] flex h-10 w-10 items-center justify-center rounded-md bg-surface-1 border border-border-default text-text-secondary hover:text-text-primary md:hidden"
+      >
+        <IconMenu className="h-5 w-5" />
+      </button>
+
+      {/* Mobile overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-40 md:hidden"
+          style={{ background: 'var(--overlay-bg)' }}
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Sidebar */}
+      <nav
+        aria-label="Main navigation"
+        className={`fixed left-0 top-0 z-50 flex h-screen w-[220px] flex-col border-r border-border-subtle bg-surface-1 transition-transform duration-200 ${
+          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+        } md:translate-x-0`}
+      >
+        {/* Logo */}
+        <div className="px-5 pb-4 pt-6">
+          <div className="flex items-baseline gap-2">
+            <span className="text-title font-semibold text-text-primary">Hex</span>
+            <span className="text-caption text-text-tertiary">v0.4.0</span>
+          </div>
+        </div>
+
+        {/* Nav groups */}
+        <div className="flex-1 overflow-y-auto px-3 pb-4">
+          {NAV_GROUPS.map((group) => (
+            <div key={group.label} className="mt-6 first:mt-0">
+              <div className="mb-1.5 px-3 text-caption font-medium text-text-tertiary">
+                {group.label}
+              </div>
+              {group.items.map((item) => {
+                const isActive = pathname === item.href;
+                return (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    aria-current={isActive ? 'page' : undefined}
+                    className={`group flex items-center gap-2.5 rounded-md px-3 py-2 text-body ${
+                      isActive
+                        ? 'bg-accent-subtle text-accent font-medium'
+                        : 'text-text-secondary hover:bg-surface-2 hover:text-text-primary'
+                    }`}
+                  >
+                    <item.icon className="h-4 w-4 shrink-0" />
+                    <span>{item.label}</span>
+                  </Link>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+
+        {/* Footer */}
+        <div className="border-t border-border-subtle px-3 py-3 space-y-1">
+          <LiveStatus />
+          <ThemeToggle />
+          <div className="flex items-center gap-1.5 px-3 py-1 text-caption text-text-tertiary">
+            <kbd className="rounded border border-border-default bg-surface-2 px-1.5 py-0.5 text-[11px]">
+              ⌘K
+            </kbd>
+            <span>Quick nav</span>
+          </div>
+        </div>
+      </nav>
+
+      {/* Main content */}
+      <main className="min-h-screen bg-surface-0 p-6 pt-16 md:ml-[220px] md:pt-6">
+        <div className="mx-auto max-w-6xl">{children}</div>
+      </main>
+    </div>
+  );
+}