feat: refactor sgclaw around zeroclaw compat runtime

third_party/zeroclaw/web/src/components/SettingsModal.tsx

@@ -0,0 +1,447 @@
+import { useEffect, useMemo, useState } from 'react';
+import { X, Settings, Sun, Moon, Monitor, Laptop, Check, Type, CaseSensitive, Palette } from 'lucide-react';
+import { useTheme } from '@/hooks/useTheme';
+import { t } from '@/lib/i18n';
+import type { AccentColor, UiFont, MonoFont, ThemeMode } from '@/contexts/ThemeContextDef';
+import { uiFontStacks, monoFontStacks } from '@/contexts/ThemeContextDef';
+import { colorThemes } from '@/contexts/colorThemes';
+
+const themeOptions: { value: ThemeMode; icon: typeof Sun; labelKey: string }[] = [
+  { value: 'system', icon: Laptop, labelKey: 'theme.system' },
+  { value: 'dark', icon: Moon, labelKey: 'theme.dark' },
+  { value: 'light', icon: Sun, labelKey: 'theme.light' },
+  { value: 'oled', icon: Monitor, labelKey: 'theme.oled' },
+];
+
+const accentOptions: { value: AccentColor; color: string }[] = [
+  { value: 'cyan', color: '#22d3ee' },
+  { value: 'violet', color: '#8b5cf6' },
+  { value: 'emerald', color: '#10b981' },
+  { value: 'amber', color: '#f59e0b' },
+  { value: 'rose', color: '#f43f5e' },
+  { value: 'blue', color: '#3b82f6' },
+];
+
+const uiFontOptions: { value: UiFont; label: string; sample: string }[] = [
+  { value: 'system', label: 'System', sample: 'Segoe/UI' },
+  { value: 'inter', label: 'Inter', sample: 'Inter' },
+  { value: 'segoe', label: 'Segoe UI', sample: 'Segoe' },
+  { value: 'sf', label: 'SF Pro', sample: 'SF' },
+];
+
+const monoFontOptions: { value: MonoFont; label: string; sample: string }[] = [
+  { value: 'jetbrains', label: 'JetBrains Mono', sample: 'JetBrains' },
+  { value: 'fira', label: 'Fira Code', sample: 'Fira' },
+  { value: 'cascadia', label: 'Cascadia Code', sample: 'Cascadia' },
+  { value: 'system-mono', label: 'System mono', sample: 'System' },
+];
+
+const uiSizes = [14, 15, 16, 17, 18];
+const monoSizes = [13, 14, 15, 16, 17];
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      className="text-[10px] uppercase tracking-wider mb-2 mt-5 first:mt-0"
+      style={{ color: 'var(--pc-text-faint)', fontWeight: 600 }}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** Mini terminal preview card for a color theme. */
+function ThemePreviewCard({
+  theme,
+  active,
+  onClick,
+}: {
+  theme: typeof colorThemes[number];
+  active: boolean;
+  onClick: () => void;
+}) {
+  const [bg, c1, c2, c3, text] = theme.preview;
+  return (
+    <button
+      onClick={onClick}
+      className="flex flex-col gap-1.5 p-2 rounded-xl border transition-all text-left group"
+      style={{
+        borderColor: active ? 'var(--pc-accent)' : 'var(--pc-border)',
+        background: active ? 'var(--pc-accent-glow)' : 'transparent',
+        boxShadow: active ? '0 0 12px var(--pc-accent-glow)' : 'none',
+        minWidth: '110px',
+      }}
+      aria-pressed={active}
+    >
+      {/* Mini terminal */}
+      <div
+        className="w-full rounded-lg overflow-hidden"
+        style={{ background: bg, border: `1px solid ${theme.scheme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'}` }}
+      >
+        {/* Title bar dots */}
+        <div className="flex gap-1 px-2 py-1.5">
+          <span className="w-[6px] h-[6px] rounded-full" style={{ background: '#ff5f57' }} />
+          <span className="w-[6px] h-[6px] rounded-full" style={{ background: '#febc2e' }} />
+          <span className="w-[6px] h-[6px] rounded-full" style={{ background: '#28c840' }} />
+        </div>
+        {/* Fake code lines */}
+        <div className="px-2 pb-2 flex flex-col gap-[3px]">
+          <div className="flex gap-1 items-center">
+            <span className="h-[3px] rounded-full" style={{ background: c1, width: '30%' }} />
+            <span className="h-[3px] rounded-full" style={{ background: text, width: '20%', opacity: 0.4 }} />
+          </div>
+          <div className="flex gap-1 items-center">
+            <span className="h-[3px] rounded-full" style={{ background: text, width: '15%', opacity: 0.3 }} />
+            <span className="h-[3px] rounded-full" style={{ background: c2, width: '25%' }} />
+            <span className="h-[3px] rounded-full" style={{ background: c3, width: '18%' }} />
+          </div>
+          <div className="flex gap-1 items-center">
+            <span className="h-[3px] rounded-full" style={{ background: c3, width: '22%' }} />
+            <span className="h-[3px] rounded-full" style={{ background: text, width: '28%', opacity: 0.3 }} />
+          </div>
+        </div>
+      </div>
+      {/* Label */}
+      <div className="flex items-center gap-1 px-0.5">
+        {active && <Check size={10} style={{ color: 'var(--pc-accent)' }} />}
+        <span
+          className="text-[10px] font-medium truncate"
+          style={{ color: active ? 'var(--pc-accent-light)' : 'var(--pc-text-muted)' }}
+        >
+          {theme.name}
+        </span>
+      </div>
+    </button>
+  );
+}
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function SettingsModal({ open, onClose }: Props) {
+  const {
+    theme, accent, colorTheme, uiFont, monoFont, uiFontSize, monoFontSize,
+    setTheme, setAccent, setColorTheme, setUiFont, setMonoFont, setUiFontSize, setMonoFontSize,
+  } = useTheme();
+
+  type TabId = 'appearance' | 'themes' | 'typography';
+  const [tab, setTab] = useState<TabId>('appearance');
+
+  const tabs: { id: TabId; label: string; icon: typeof Palette }[] = useMemo(() => [
+    { id: 'appearance', label: t('settings.tab.appearance'), icon: Settings },
+    { id: 'themes', label: 'Themes', icon: Palette },
+    { id: 'typography', label: t('settings.tab.typography'), icon: Type },
+  ], []);
+
+  // Group themes by scheme for the themes tab
+  const darkThemes = useMemo(() => colorThemes.filter(ct => ct.scheme === 'dark'), []);
+  const lightThemes = useMemo(() => colorThemes.filter(ct => ct.scheme === 'light'), []);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={t('settings.title')}
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      onClick={onClose}
+    >
+      <div className="absolute inset-0" style={{ background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)' }} />
+      <div
+        className="relative w-full max-w-2xl mx-4 rounded-3xl border shadow-2xl animate-fade-in"
+        style={{ background: 'var(--pc-bg-base)', borderColor: 'var(--pc-border)' }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div
+          className="flex items-center justify-between px-6 py-4 border-b"
+          style={{ borderColor: 'var(--pc-border)' }}
+        >
+          <div className="flex items-center gap-2.5">
+            <Settings size={18} style={{ color: 'var(--pc-accent-light)' }} />
+            <h2 className="text-sm font-semibold" style={{ color: 'var(--pc-text-primary)' }}>{t('settings.title')}</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="h-8 w-8 rounded-xl flex items-center justify-center transition-colors"
+            style={{ color: 'var(--pc-text-muted)', background: 'transparent', border: 'none', cursor: 'pointer' }}
+            onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--pc-text-primary)'; e.currentTarget.style.background = 'var(--pc-hover)'; }}
+            onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--pc-text-muted)'; e.currentTarget.style.background = 'transparent'; }}
+            aria-label="Close"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="px-6 py-4 max-h-[65vh] overflow-y-auto">
+          {/* Tabs */}
+          <div className="flex gap-2 mb-4">
+            {tabs.map(tTab => (
+              <button
+                key={tTab.id}
+                onClick={() => setTab(tTab.id)}
+                className="flex-1 rounded-xl border px-3 py-2 text-xs font-medium transition-colors flex items-center justify-center gap-1.5"
+                style={tab === tTab.id
+                  ? { borderColor: 'var(--pc-accent-dim)', background: 'var(--pc-accent-glow)', color: 'var(--pc-accent-light)' }
+                  : { borderColor: 'var(--pc-border)', color: 'var(--pc-text-muted)', background: 'transparent' }
+                }
+                onMouseEnter={(e) => { if (tab !== tTab.id) e.currentTarget.style.background = 'var(--pc-hover)'; }}
+                onMouseLeave={(e) => { if (tab !== tTab.id) e.currentTarget.style.background = 'transparent'; }}
+              >
+                <tTab.icon size={13} />
+                {tTab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Appearance Tab */}
+          {tab === 'appearance' && (
+            <>
+              <SectionTitle>{t('settings.appearance')}</SectionTitle>
+
+              {/* Theme Mode */}
+              <div className="mb-3">
+                <div className="text-xs mb-2" style={{ color: 'var(--pc-text-secondary)' }}>{t('theme.mode')}</div>
+                <div className="flex gap-1.5">
+                  {themeOptions.map(opt => {
+                    const Icon = opt.icon;
+                    const active = theme === opt.value;
+                    return (
+                      <button
+                        key={opt.value}
+                        onClick={() => setTheme(opt.value)}
+                        aria-pressed={active}
+                        className="flex-1 flex flex-col items-center gap-1 py-2 rounded-xl border text-xs transition-all"
+                        style={active
+                          ? { borderColor: 'var(--pc-accent-dim)', background: 'var(--pc-accent-glow)', color: 'var(--pc-accent-light)' }
+                          : { borderColor: 'var(--pc-border)', color: 'var(--pc-text-muted)', background: 'transparent' }
+                        }
+                        onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = 'var(--pc-hover)'; }}
+                        onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = 'transparent'; }}
+                      >
+                        <Icon size={16} />
+                        <span>{t(opt.labelKey)}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* Accent Color */}
+              <div className="mb-4">
+                <div className="text-xs mb-2" style={{ color: 'var(--pc-text-secondary)' }}>{t('theme.accent')}</div>
+                <div className="flex gap-2">
+                  {accentOptions.map(opt => (
+                    <button
+                      key={opt.value}
+                      onClick={() => setAccent(opt.value)}
+                      className="relative h-7 w-7 rounded-full transition-all flex items-center justify-center"
+                      style={{
+                        backgroundColor: opt.color,
+                        border: accent === opt.value ? `2px solid ${opt.color}` : '2px solid transparent',
+                        boxShadow: accent === opt.value ? `0 0 8px ${opt.color}40` : 'none',
+                      }}
+                      aria-pressed={accent === opt.value}
+                      aria-label={`${opt.value} accent`}
+                    >
+                      {accent === opt.value && <Check size={14} style={{ color: 'white' }} />}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </>
+          )}
+
+          {/* Themes Tab */}
+          {tab === 'themes' && (
+            <>
+              <SectionTitle>Dark Themes</SectionTitle>
+              <div className="grid grid-cols-3 sm:grid-cols-4 gap-2 mb-4">
+                {darkThemes.map(ct => (
+                  <ThemePreviewCard
+                    key={ct.id}
+                    theme={ct}
+                    active={colorTheme === ct.id}
+                    onClick={() => setColorTheme(ct.id)}
+                  />
+                ))}
+              </div>
+
+              <SectionTitle>Light Themes</SectionTitle>
+              <div className="grid grid-cols-3 sm:grid-cols-4 gap-2 mb-4">
+                {lightThemes.map(ct => (
+                  <ThemePreviewCard
+                    key={ct.id}
+                    theme={ct}
+                    active={colorTheme === ct.id}
+                    onClick={() => setColorTheme(ct.id)}
+                  />
+                ))}
+              </div>
+
+              {/* Active theme info */}
+              <div
+                className="rounded-2xl border p-3 mt-2"
+                style={{ background: 'var(--pc-bg-surface)', borderColor: 'var(--pc-border)' }}
+              >
+                <div className="flex items-center gap-2">
+                  <Palette size={14} style={{ color: 'var(--pc-accent)' }} />
+                  <span className="text-xs font-medium" style={{ color: 'var(--pc-text-primary)' }}>
+                    {colorThemes.find(ct => ct.id === colorTheme)?.name ?? 'Default Dark'}
+                  </span>
+                  <span
+                    className="text-[10px] px-1.5 py-0.5 rounded-full"
+                    style={{ background: 'var(--pc-accent-glow)', color: 'var(--pc-accent-light)' }}
+                  >
+                    Active
+                  </span>
+                </div>
+              </div>
+            </>
+          )}
+
+          {/* Typography Tab */}
+          {tab === 'typography' && (
+            <>
+              <SectionTitle>{t('settings.typography')}</SectionTitle>
+
+              {/* UI Font */}
+              <div className="mb-4">
+                <div className="flex items-center gap-2 text-xs mb-2" style={{ color: 'var(--pc-text-secondary)' }}>
+                  <Type size={14} />
+                  {t('settings.fontUi')}
+                </div>
+                <div className="flex flex-wrap gap-1.5">
+                  {uiFontOptions.map(opt => (
+                    <button
+                      key={opt.value}
+                      onClick={() => setUiFont(opt.value)}
+                      className="flex items-center gap-2 px-3 py-2 rounded-xl border text-xs transition-all"
+                      style={uiFont === opt.value
+                        ? { borderColor: 'var(--pc-accent-dim)', background: 'var(--pc-accent-glow)', color: 'var(--pc-accent-light)' }
+                        : { borderColor: 'var(--pc-border)', color: 'var(--pc-text-muted)', background: 'transparent' }
+                      }
+                      onMouseEnter={(e) => { if (uiFont !== opt.value) e.currentTarget.style.background = 'var(--pc-hover)'; }}
+                      onMouseLeave={(e) => { if (uiFont !== opt.value) e.currentTarget.style.background = 'transparent'; }}
+                    >
+                      <span style={{ fontSize: '14px', fontFamily: uiFontStacks[opt.value] }}>{opt.sample}</span>
+                      <span style={{ fontSize: '11px', color: 'var(--pc-text-faint)' }}>{opt.label}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Mono Font */}
+              <div className="mb-4">
+                <div className="flex items-center gap-2 text-xs mb-2" style={{ color: 'var(--pc-text-secondary)' }}>
+                  <CaseSensitive size={14} />
+                  {t('settings.fontMono')}
+                </div>
+                <div className="flex flex-wrap gap-1.5">
+                  {monoFontOptions.map(opt => (
+                    <button
+                      key={opt.value}
+                      onClick={() => setMonoFont(opt.value)}
+                      className="flex items-center gap-2 px-3 py-2 rounded-xl border text-xs transition-all"
+                      style={monoFont === opt.value
+                        ? { borderColor: 'var(--pc-accent-dim)', background: 'var(--pc-accent-glow)', color: 'var(--pc-accent-light)' }
+                        : { borderColor: 'var(--pc-border)', color: 'var(--pc-text-muted)', background: 'transparent' }
+                      }
+                      onMouseEnter={(e) => { if (monoFont !== opt.value) e.currentTarget.style.background = 'var(--pc-hover)'; }}
+                      onMouseLeave={(e) => { if (monoFont !== opt.value) e.currentTarget.style.background = 'transparent'; }}
+                    >
+                      <span style={{ fontSize: '14px', fontFamily: monoFontStacks[opt.value] }}>{opt.sample}</span>
+                      <span style={{ fontSize: '11px', color: 'var(--pc-text-faint)' }}>{opt.label}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* UI Font Size */}
+              <div className="mb-4">
+                <div className="text-xs mb-2" style={{ color: 'var(--pc-text-secondary)' }}>{t('settings.fontSize')}</div>
+                <div className="flex gap-1.5 flex-wrap">
+                  {uiSizes.map(size => (
+                    <button
+                      key={size}
+                      onClick={() => setUiFontSize(size)}
+                      className="px-3 py-1.5 rounded-lg border text-xs transition-all"
+                      style={uiFontSize === size
+                        ? { borderColor: 'var(--pc-accent-dim)', background: 'var(--pc-accent-glow)', color: 'var(--pc-accent-light)' }
+                        : { borderColor: 'var(--pc-border)', color: 'var(--pc-text-muted)', background: 'transparent' }
+                      }
+                      onMouseEnter={(e) => { if (uiFontSize !== size) e.currentTarget.style.background = 'var(--pc-hover)'; }}
+                      onMouseLeave={(e) => { if (uiFontSize !== size) e.currentTarget.style.background = 'transparent'; }}
+                    >
+                      {size}px
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Mono Font Size */}
+              <div className="mb-4">
+                <div className="text-xs mb-2" style={{ color: 'var(--pc-text-secondary)' }}>{t('settings.fontMonoSize')}</div>
+                <div className="flex gap-1.5 flex-wrap">
+                  {monoSizes.map(size => (
+                    <button
+                      key={size}
+                      onClick={() => setMonoFontSize(size)}
+                      className="px-3 py-1.5 rounded-lg border text-xs transition-all"
+                      style={monoFontSize === size
+                        ? { borderColor: 'var(--pc-accent-dim)', background: 'var(--pc-accent-glow)', color: 'var(--pc-accent-light)' }
+                        : { borderColor: 'var(--pc-border)', color: 'var(--pc-text-muted)', background: 'transparent' }
+                      }
+                      onMouseEnter={(e) => { if (monoFontSize !== size) e.currentTarget.style.background = 'var(--pc-hover)'; }}
+                      onMouseLeave={(e) => { if (monoFontSize !== size) e.currentTarget.style.background = 'transparent'; }}
+                    >
+                      {size}px
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Preview */}
+              <div
+                className="rounded-2xl border p-3"
+                style={{ background: 'var(--pc-bg-surface)', borderColor: 'var(--pc-border)' }}
+              >
+                <div
+                  className="text-[11px] uppercase tracking-wide mb-2"
+                  style={{ color: 'var(--pc-text-faint)' }}
+                >
+                  {t('settings.preview')}
+                </div>
+                <div
+                  className="text-sm mb-2"
+                  style={{ color: 'var(--pc-text-primary)', fontFamily: 'var(--pc-font-ui)', fontSize: 'var(--pc-font-size)' }}
+                >
+                  {t('settings.previewText')}
+                </div>
+                <div
+                  className="rounded-xl border p-2 text-[13px]"
+                  style={{ fontFamily: 'var(--pc-font-mono)', fontSize: 'var(--pc-font-size-mono)', color: 'var(--pc-text-primary)', borderColor: 'var(--pc-border)', background: 'var(--pc-bg-code)' }}
+                >
+                  const hello = 'ZeroClaw'; // typography preview
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

third_party/zeroclaw/web/src/components/layout/Header.tsx

@@ -0,0 +1,124 @@
+import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { LogOut, Menu, Settings } from 'lucide-react';
+import { t } from '@/lib/i18n';
+import { useLocaleContext } from '@/App';
+import { useAuth } from '@/hooks/useAuth';
+import { SettingsModal } from '@/components/SettingsModal';
+
+const routeTitles: Record<string, string> = {
+  '/': 'nav.dashboard',
+  '/agent': 'nav.agent',
+  '/tools': 'nav.tools',
+  '/cron': 'nav.cron',
+  '/integrations': 'nav.integrations',
+  '/memory': 'nav.memory',
+  '/config': 'nav.config',
+  '/cost': 'nav.cost',
+  '/logs': 'nav.logs',
+  '/doctor': 'nav.doctor',
+};
+
+interface HeaderProps {
+  onMenuToggle: () => void;
+}
+
+export default function Header({ onMenuToggle }: HeaderProps) {
+  const location = useLocation();
+  const { logout } = useAuth();
+  const { locale, setAppLocale } = useLocaleContext();
+  const [settingsOpen, setSettingsOpen] = useState(false);
+
+  const titleKey = routeTitles[location.pathname] ?? 'nav.dashboard';
+  const pageTitle = t(titleKey);
+
+  const toggleLanguage = () => {
+    // Cycle through: en -> zh -> tr -> en
+    const nextLocale = locale === 'en' ? 'zh' : locale === 'zh' ? 'tr' : 'en';
+    setAppLocale(nextLocale);
+  };
+
+  return (
+    <>
+      <header className="h-14 flex items-center justify-between px-6 border-b animate-fade-in" style={{ background: 'var(--pc-bg-surface)', borderColor: 'var(--pc-border)', backdropFilter: 'blur(12px)', }}>
+        <div className="flex items-center gap-3">
+          {/* Hamburger — visible only on mobile */}
+          <button
+            type="button"
+            onClick={onMenuToggle}
+            className="md:hidden p-1.5 -ml-1.5 rounded-lg transition-colors duration-200"
+            style={{ color: 'var(--pc-text-muted)' }}
+            onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--pc-text-primary)'; e.currentTarget.style.background = 'var(--pc-hover)'; }}
+            onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--pc-text-muted)'; e.currentTarget.style.background = 'transparent'; }}
+            aria-label="Open menu"
+          >
+            <Menu className="h-5 w-5" />
+          </button>
+
+          {/* Page title */}
+          <h1 className="h-9 leading-9 text-lg font-semibold tracking-tight" style={{ color: 'var(--pc-text-primary)' }}>{pageTitle}</h1>
+        </div>
+
+        {/* Right-side controls */}
+        <div className="flex items-center gap-2 h-9">
+          {/* Settings */}
+          <button
+            type="button"
+            onClick={() => setSettingsOpen(true)}
+            className="h-9 w-9 flex items-center justify-center rounded-xl text-xs transition-all"
+            style={{ color: 'var(--pc-text-muted)', background: 'transparent', border: 'none', cursor: 'pointer' }}
+            onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--pc-text-primary)'; e.currentTarget.style.background = 'var(--pc-hover)'; }}
+            onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--pc-text-muted)'; e.currentTarget.style.background = 'transparent'; }}
+            aria-label={t('settings.title')}
+          >
+            <Settings className="h-3.5 w-3.5" />
+          </button>
+
+          {/* Language switcher */}
+          <button
+            type="button"
+            onClick={toggleLanguage}
+            className="h-9 px-3 rounded-xl text-xs font-semibold border transition-all flex items-center"
+            style={{
+              borderColor: 'var(--pc-border)',
+              color: 'var(--pc-text-secondary)',
+              background: 'var(--pc-bg-elevated)',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.borderColor = 'var(--pc-accent-dim)';
+              e.currentTarget.style.color = 'var(--pc-text-primary)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.borderColor = 'var(--pc-border)';
+              e.currentTarget.style.color = 'var(--pc-text-secondary)';
+            }}
+          >
+            {locale === 'en' ? 'EN' : locale === 'zh' ? 'ZH' : 'TR'}
+          </button>
+
+          {/* Logout */}
+          <button
+            type="button"
+            onClick={logout}
+            className="h-9 px-3 rounded-xl text-xs transition-all flex items-center gap-1.5"
+            style={{ color: 'var(--pc-text-muted)', background: 'transparent', border: 'none', cursor: 'pointer' }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = '#f87171';
+              e.currentTarget.style.background = 'rgba(239, 68, 68, 0.08)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = 'var(--pc-text-muted)';
+              e.currentTarget.style.background = 'transparent';
+            }}
+          >
+            <LogOut className="h-3.5 w-3.5" />
+            <span className="hidden sm:inline">{t('auth.logout')}</span>
+          </button>
+        </div>
+      </header>
+
+      <SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
+    </>
+
+  );
+}

third_party/zeroclaw/web/src/components/layout/Layout.tsx

@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+import Sidebar from '@/components/layout/Sidebar';
+import Header from '@/components/layout/Header';
+import { ErrorBoundary } from '@/App';
+
+export default function Layout() {
+  const { pathname } = useLocation();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  // Close sidebar on route change (mobile navigation)
+  useEffect(() => {
+    setSidebarOpen(false);
+  }, [pathname]);
+
+  return (
+    <div className="min-h-screen text-white" style={{ background: 'var(--pc-bg-base)' }}>
+      {/* Fixed sidebar */}
+      <Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+
+      {/* Main area offset by sidebar width on desktop, full-width on mobile */}
+      <div className="md:ml-60 ml-0 flex flex-col flex-1 min-w-0 h-screen">
+        <Header onMenuToggle={() => setSidebarOpen(true)} />
+
+        {/* Page content — ErrorBoundary keyed by pathname so the nav shell
+            survives a page crash and the boundary resets on route change */}
+        <main className="flex-1 overflow-y-auto min-h-0">
+          <ErrorBoundary key={pathname}>
+            <Outlet />
+          </ErrorBoundary>
+        </main>
+      </div>
+    </div>
+  );
+}

third_party/zeroclaw/web/src/components/layout/Sidebar.tsx

@@ -0,0 +1,121 @@
+import { NavLink } from 'react-router-dom';
+import { basePath } from '../../lib/basePath';
+import {
+  LayoutDashboard,
+  MessageSquare,
+  Wrench,
+  Clock,
+  Puzzle,
+  Brain,
+  Settings,
+  DollarSign,
+  Activity,
+  Stethoscope,
+  Monitor,
+} from 'lucide-react';
+import { t } from '@/lib/i18n';
+
+const navItems = [
+  { to: '/', icon: LayoutDashboard, labelKey: 'nav.dashboard' },
+  { to: '/agent', icon: MessageSquare, labelKey: 'nav.agent' },
+  { to: '/tools', icon: Wrench, labelKey: 'nav.tools' },
+  { to: '/cron', icon: Clock, labelKey: 'nav.cron' },
+  { to: '/integrations', icon: Puzzle, labelKey: 'nav.integrations' },
+  { to: '/memory', icon: Brain, labelKey: 'nav.memory' },
+  { to: '/config', icon: Settings, labelKey: 'nav.config' },
+  { to: '/cost', icon: DollarSign, labelKey: 'nav.cost' },
+  { to: '/logs', icon: Activity, labelKey: 'nav.logs' },
+  { to: '/doctor', icon: Stethoscope, labelKey: 'nav.doctor' },
+  { to: '/canvas', icon: Monitor, labelKey: 'nav.canvas' },
+];
+
+interface SidebarProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function Sidebar({ open, onClose }: SidebarProps) {
+  return (
+    <>
+      {/* Backdrop — mobile only, visible when sidebar is open */}
+      {open && (
+        <div
+          className="md:hidden fixed inset-0 z-40 bg-black/60 backdrop-blur-sm transition-opacity"
+          onClick={onClose}
+          onKeyDown={(e) => { if (e.key === 'Escape') onClose(); }}
+          role="button"
+          tabIndex={-1}
+          aria-label="Close menu"
+        />
+      )}
+
+      <aside
+        className={[
+          'fixed top-0 left-0 h-screen w-60 flex flex-col border-r z-50',
+          // Mobile: slide in/out with transition
+          'max-md:-translate-x-full max-md:transition-transform max-md:duration-200 max-md:ease-out',
+          open ? 'max-md:translate-x-0' : '',
+        ].join(' ')}
+        style={{ background: 'var(--pc-bg-base)', borderColor: 'var(--pc-border)' }}
+      >
+        {/* Logo / Title */}
+        <div className="flex items-center gap-3 px-4 py-4 border-b h-14" style={{ borderColor: 'var(--pc-border)' }}>
+          <div className="relative shrink-0">
+            <div className="absolute -inset-1.5 rounded-xl" style={{ background: 'linear-gradient(135deg, rgba(var(--pc-accent-rgb), 0.15), rgba(var(--pc-accent-rgb), 0.05))' }} />
+            <img
+              src={`${basePath}/_app/zeroclaw-trans.png`}
+              alt="ZeroClaw"
+              className="relative h-9 w-9 rounded-xl object-cover"
+              onError={(e) => {
+                const img = e.currentTarget;
+                img.style.display = 'none';
+              }}
+            />
+          </div>
+          <span className="text-sm font-semibold tracking-wide" style={{ color: 'var(--pc-text-primary)' }}>
+            ZeroClaw
+          </span>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 overflow-y-auto py-4 px-3 space-y-1">
+          {navItems.map(({ to, icon: Icon, labelKey }, idx) => (
+            <NavLink
+              key={to}
+              to={to}
+              end={to === '/'}
+              onClick={onClose}
+              className={({ isActive }) =>
+                [
+                  'flex items-center gap-3 px-3 py-2.5 rounded-2xl text-sm font-medium transition-all group',
+                  isActive
+                    ? 'text-[var(--pc-accent-light)]'
+                    : 'text-[var(--pc-text-muted)] hover:text-[var(--pc-text-secondary)] hover:bg-[var(--pc-hover)]',
+                ].join(' ')
+              }
+              style={({ isActive }) => ({
+                animationDelay: `${idx * 40}ms`,
+                ...(isActive ? {
+                  background: 'var(--pc-accent-glow)',
+                  border: '1px solid var(--pc-accent-dim)',
+                } : {}),
+              })}
+            >
+              {({ isActive }) => (
+                <>
+                  <Icon className={`h-5 w-5 flex-shrink-0 transition-colors ${isActive ? 'text-[var(--pc-accent)]' : 'group-hover:text-[var(--pc-accent)]'}`} />
+                  <span>{t(labelKey)}</span>
+                </>
+              )}
+            </NavLink>
+          ))}
+        </nav>
+
+        {/* Footer */}
+        <div className="px-5 py-4 border-t text-[10px] uppercase tracking-wider" style={{ borderColor: 'var(--pc-border)', color: 'var(--pc-text-faint)' }}>
+          ZeroClaw Runtime
+        </div>
+      </aside>
+    </>
+  );
+}