webui: fix white screen routing/base and add mobile responsive sidebar

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>

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 

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" />