From 379a0a2366dcfc7069809b7d324047ea42dd7248 Mon Sep 17 00:00:00 2001
From: DBT <nvue.dev@gmail.com>
Date: Wed, 25 Feb 2026 18:07:06 +0000
Subject: [PATCH] webui: fix white screen routing/base and add mobile
 responsive sidebar

---
 webui/src/App.tsx                |  2 +-
 webui/src/components/Header.tsx  |  7 +++++--
 webui/src/components/Layout.tsx  |  5 +++++
 webui/src/components/Sidebar.tsx |  4 ++--
 webui/src/context/AppContext.tsx | 15 +++++++++++++--
 webui/vite.config.ts             |  1 +
 6 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index 742377f..294dd23 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -13,7 +13,7 @@ import Skills from './pages/Skills';
 export default function App() {
   return (
     <AppProvider>
-      <BrowserRouter>
+      <BrowserRouter basename="/webui">
         <Routes>
           <Route path="/" element={<Layout />}>
             <Route index element={<Dashboard />} />
diff --git a/webui/src/components/Header.tsx b/webui/src/components/Header.tsx
index f43afb1..b452897 100644
--- a/webui/src/components/Header.tsx
+++ b/webui/src/components/Header.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Terminal, Globe } from 'lucide-react';
+import { Terminal, Globe, Menu } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 
 const Header: React.FC = () => {
   const { t, i18n } = useTranslation();
-  const { isGatewayOnline } = useAppContext();
+  const { isGatewayOnline, setSidebarOpen } = useAppContext();
 
   const toggleLang = () => {
     const nextLang = i18n.language === 'en' ? 'zh' : 'en';
@@ -15,6 +15,9 @@ const Header: React.FC = () => {
   return (
     <header className="h-16 border-b border-zinc-800 bg-zinc-900/50 flex items-center justify-between px-6 shrink-0 z-10">
       <div className="flex items-center gap-3">
+        <button className="md:hidden p-2 rounded-lg hover:bg-zinc-800 text-zinc-300" onClick={() => setSidebarOpen(true)}>
+          <Menu className="w-5 h-5" />
+        </button>
         <div className="w-9 h-9 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20">
           <Terminal className="w-5 h-5 text-white" />
         </div>
diff --git a/webui/src/components/Layout.tsx b/webui/src/components/Layout.tsx
index 8255519..f25206f 100644
--- a/webui/src/components/Layout.tsx
+++ b/webui/src/components/Layout.tsx
@@ -3,15 +3,20 @@ import { Outlet, useLocation } from 'react-router-dom';
 import { motion, AnimatePresence } from 'motion/react';
 import Header from './Header';
 import Sidebar from './Sidebar';
+import { useAppContext } from '../context/AppContext';
 
 const Layout: React.FC = () => {
   const location = useLocation();
+  const { sidebarOpen, setSidebarOpen } = useAppContext();
 
   return (
     <div className="flex flex-col h-screen bg-zinc-950 text-zinc-50 overflow-hidden font-sans">
       <Header />
       <div className="flex flex-1 min-h-0">
         <Sidebar />
+        {sidebarOpen && (
+          <button className="fixed inset-0 top-16 bg-black/40 z-30 md:hidden" onClick={() => setSidebarOpen(false)} aria-label="close sidebar" />
+        )}
         <main className="flex-1 flex flex-col min-w-0 relative bg-zinc-950/50">
           <AnimatePresence mode="wait">
             <motion.div 
diff --git a/webui/src/components/Sidebar.tsx b/webui/src/components/Sidebar.tsx
index 99f2c30..a8621ff 100644
--- a/webui/src/components/Sidebar.tsx
+++ b/webui/src/components/Sidebar.tsx
@@ -6,10 +6,10 @@ import NavItem from './NavItem';
 
 const Sidebar: React.FC = () => {
   const { t } = useTranslation();
-  const { token, setToken } = useAppContext();
+  const { token, setToken, sidebarOpen } = useAppContext();
 
   return (
-    <aside className="w-64 border-r border-zinc-800 bg-zinc-900/30 flex flex-col shrink-0">
+    <aside className={`fixed md:static inset-y-16 left-0 z-40 w-64 border-r border-zinc-800 bg-zinc-900/95 md:bg-zinc-900/30 flex flex-col shrink-0 transform transition-transform duration-200 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}`}>
       <nav className="flex-1 px-4 py-6 space-y-1 overflow-y-auto">
         <NavItem icon={<LayoutDashboard className="w-5 h-5" />} label={t('dashboard')} to="/" />
         <NavItem icon={<MessageSquare className="w-5 h-5" />} label={t('chat')} to="/chat" />
diff --git a/webui/src/context/AppContext.tsx b/webui/src/context/AppContext.tsx
index ae9401c..c8bf7d5 100644
--- a/webui/src/context/AppContext.tsx
+++ b/webui/src/context/AppContext.tsx
@@ -3,6 +3,8 @@ import { CronJob, Cfg, Session, Skill } from '../types';
 
 interface AppContextType {
   token: string;
+  sidebarOpen: boolean;
+  setSidebarOpen: (open: boolean) => void;
   setToken: (token: string) => void;
   isGatewayOnline: boolean;
   setIsGatewayOnline: (online: boolean) => void;
@@ -29,7 +31,16 @@ interface AppContextType {
 const AppContext = createContext<AppContextType | undefined>(undefined);
 
 export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [token, setToken] = useState('cg_nLnov7DPd9yqZDYPEU5pHnoa');
+  const initialToken = (() => {
+    try {
+      const u = new URL(window.location.href);
+      return u.searchParams.get('token') || 'cg_nLnov7DPd9yqZDYPEU5pHnoa';
+    } catch {
+      return 'cg_nLnov7DPd9yqZDYPEU5pHnoa';
+    }
+  })();
+  const [token, setToken] = useState(initialToken);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
   const [isGatewayOnline, setIsGatewayOnline] = useState(true);
   const [cfg, setCfg] = useState<Cfg>({});
   const [cfgRaw, setCfgRaw] = useState('{}');
@@ -109,7 +120,7 @@ export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children
 
   return (
     <AppContext.Provider value={{
-      token, setToken, isGatewayOnline, setIsGatewayOnline,
+      token, setToken, sidebarOpen, setSidebarOpen, isGatewayOnline, setIsGatewayOnline,
       cfg, setCfg, cfgRaw, setCfgRaw, nodes, setNodes,
       cron, setCron, skills, setSkills,
       sessions, setSessions,
diff --git a/webui/vite.config.ts b/webui/vite.config.ts
index 6da44ee..c3ab702 100644
--- a/webui/vite.config.ts
+++ b/webui/vite.config.ts
@@ -6,6 +6,7 @@ import {defineConfig, loadEnv} from 'vite';
 export default defineConfig(({mode}) => {
   const env = loadEnv(mode, '.', '');
   return {
+    base: '/webui/',
     plugins: [react(), tailwindcss()],
     define: {
       'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),