feat: refactor sgclaw around zeroclaw compat runtime

2026-03-26 16:23:31 +08:00
parent bca5b75801
commit ff0771a83f
1059 changed files with 409460 additions and 23 deletions
--- a/third_party/zeroclaw/web/src/components/layout/Header.tsx
+++ b/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)} />
+    </>
+
+  );
+}
--- a/third_party/zeroclaw/web/src/components/layout/Layout.tsx
+++ b/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>
+  );
+}
--- a/third_party/zeroclaw/web/src/components/layout/Sidebar.tsx
+++ b/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>
+    </>
+  );
+}