feat(web): 添加响应式布局和 PWA 支持

- 实现移动端响应式适配：抽屉式侧边栏、触摸优化、Safe Area 支持 - 添加 PWA 支持：vite-plugin-pwa、manifest、Service Worker 缓存 - 优化移动端输入体验：防缩放、最小触摸目标、键盘适配
2025-12-12 13:56:52 +08:00
parent 6ef9d95172
commit 20765efe62
11 changed files with 3141 additions and 115 deletions
@@ -2,8 +2,22 @@
 <html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=1.0, user-scalable=no" />
+
+    <!-- PWA Meta Tags -->
+    <meta name="theme-color" content="#111827" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="AI Assistant" />
+    <meta name="description" content="AI Terminal Assistant - Your intelligent coding companion" />
+
+    <!-- Apple Touch Icons (use SVG as fallback) -->
+    <link rel="apple-touch-icon" href="/icon.svg" />
+
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="/manifest.json" />
+
    <title>AI Assistant</title>
  </head>
  <body class="bg-gray-900 text-gray-100">
@@ -10,12 +10,12 @@
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.344.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.22.0",
-    "zustand": "^4.5.0",
-    "lucide-react": "^0.344.0",
-    "clsx": "^2.1.0"
+    "zustand": "^4.5.0"
  },
  "devDependencies": {
    "@types/react": "^18.3.0",
@@ -25,6 +25,7 @@
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.3.3",
-    "vite": "^5.1.0"
+    "vite": "^5.1.0",
+    "vite-plugin-pwa": "^1.2.0"
  }
 }
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#0ea5e9;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#0369a1;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Background -->
+  <rect width="512" height="512" rx="96" fill="#111827"/>
+  <!-- Terminal icon -->
+  <g fill="none" stroke="url(#grad)" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Terminal window -->
+    <rect x="96" y="128" width="320" height="256" rx="24" fill="none"/>
+    <!-- Command prompt > -->
+    <polyline points="144,224 192,272 144,320"/>
+    <!-- Cursor line -->
+    <line x1="224" y1="320" x2="320" y2="320"/>
+  </g>
+  <!-- AI sparkle -->
+  <circle cx="384" cy="160" r="8" fill="#0ea5e9"/>
+  <circle cx="400" cy="176" r="4" fill="#38bdf8"/>
+</svg>
@@ -0,0 +1,19 @@
+{
+  "name": "AI Terminal Assistant",
+  "short_name": "AI Assistant",
+  "description": "Your intelligent coding companion",
+  "theme_color": "#111827",
+  "background_color": "#111827",
+  "display": "standalone",
+  "orientation": "portrait-primary",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}
@@ -1,5 +1,7 @@
 /**
 * App Component
+ *
+ * 响应式布局：支持桌面端和移动端
 */

 import { useState, useEffect } from 'react';
@@ -66,12 +68,12 @@ export function App() {
        onCreateSession={handleCreateSession}
      />

-      {/* 工具栏按钮 */}
-      <div className="absolute top-3 right-4 z-10 flex gap-2">
+      {/* 工具栏按钮 - 移动端右移避开菜单按钮 */}
+      <div className="absolute top-3 right-3 md:right-4 z-30 flex gap-2">
        {/* 配置按钮 */}
        <button
          onClick={() => setShowConfig(true)}
-          className="p-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors"
+          className="p-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600 active:bg-gray-500 transition-colors"
          title="Settings"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -90,10 +92,10 @@ export function App() {
          </svg>
        </button>

-        {/* 文件浏览器切换按钮 */}
+        {/* 文件浏览器切换按钮 - 移动端隐藏 */}
        <button
          onClick={() => setShowFileBrowser(!showFileBrowser)}
-          className={`p-2 rounded-lg transition-colors ${
+          className={`hidden md:block p-2 rounded-lg transition-colors ${
            showFileBrowser ? 'bg-blue-600 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
          }`}
          title={showFileBrowser ? 'Hide Files' : 'Show Files'}
@@ -109,9 +111,10 @@ export function App() {
        </button>
      </div>

-      <div className="flex-1 flex">
+      {/* 主内容区域 */}
+      <div className="flex-1 flex min-w-0">
        {/* 聊天区域 */}
-        <div className={`flex-1 ${showFileBrowser ? 'w-1/2' : 'w-full'}`}>
+        <div className={`flex-1 min-w-0 ${showFileBrowser ? 'hidden md:block md:w-1/2' : 'w-full'}`}>
          {currentSessionId ? (
            <ChatPage key={currentSessionId} sessionId={currentSessionId} />
          ) : (
@@ -121,20 +124,61 @@ export function App() {
          )}
        </div>

-        {/* 文件浏览器 */}
+        {/* 文件浏览器 - 桌面端侧边栏，移动端全屏覆盖 */}
        {showFileBrowser && (
-          <div className="w-1/2 border-l border-gray-700">
-            <FileBrowser
-              onFileSelect={(path, _content) => {
-                console.log('Selected file:', path);
-              }}
-            />
-          </div>
+          <>
+            {/* 移动端: 全屏覆盖 */}
+            <div className="fixed inset-0 z-50 bg-gray-900 md:hidden">
+              <div className="flex items-center justify-between p-3 border-b border-gray-700">
+                <span className="text-lg font-semibold">Files</span>
+                <button
+                  onClick={() => setShowFileBrowser(false)}
+                  className="p-2 rounded-lg bg-gray-700 text-gray-300 hover:bg-gray-600"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+              <div className="h-[calc(100%-56px)]">
+                <FileBrowser
+                  onFileSelect={(path, _content) => {
+                    console.log('Selected file:', path);
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* 桌面端: 侧边栏 */}
+            <div className="hidden md:block w-1/2 border-l border-gray-700">
+              <FileBrowser
+                onFileSelect={(path, _content) => {
+                  console.log('Selected file:', path);
+                }}
+              />
+            </div>
+          </>
        )}
      </div>

      {/* 配置面板 */}
      {showConfig && <ConfigPanel onClose={() => setShowConfig(false)} />}
+
+      {/* 移动端底部文件按钮 */}
+      <button
+        onClick={() => setShowFileBrowser(true)}
+        className="fixed bottom-20 right-4 z-30 p-3 rounded-full bg-gray-700 text-gray-300 hover:bg-gray-600 active:bg-gray-500 shadow-lg md:hidden"
+        title="Browse Files"
+      >
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+          />
+        </svg>
+      </button>
    </div>
  );
 }
@@ -1,5 +1,7 @@
 /**
 * Chat Input Component
+ *
+ * 响应式输入框：适配移动端键盘和触摸操作
 */

 import { useState, useRef, useEffect } from 'react';
@@ -22,7 +24,9 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
    const textarea = textareaRef.current;
    if (textarea) {
      textarea.style.height = 'auto';
-      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+      // 移动端最大高度稍小
+      const maxHeight = window.innerWidth < 768 ? 120 : 200;
+      textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
    }
  }, [input]);

@@ -40,6 +44,7 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
+    // 移动端 Enter 直接发送，桌面端 Shift+Enter 换行
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSubmit();
@@ -47,7 +52,7 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
  };

  return (
-    <div className="border-t border-gray-700 p-4 bg-gray-900">
+    <div className="border-t border-gray-700 p-3 md:p-4 bg-gray-900 safe-area-pb">
      <div className="max-w-4xl mx-auto flex gap-2">
        <div className="flex-1 relative">
          <textarea
@@ -55,11 +60,13 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={handleKeyDown}
-            placeholder="Type a message... (Shift+Enter for new line)"
+            placeholder="Type a message..."
            disabled={disabled}
            rows={1}
            className={clsx(
-              'w-full resize-none rounded-lg border border-gray-600 bg-gray-800 px-4 py-3',
+              'w-full resize-none rounded-lg border border-gray-600 bg-gray-800',
+              'px-3 py-2.5 md:px-4 md:py-3',
+              'text-base md:text-sm', // 移动端使用 16px 防止缩放
              'text-gray-100 placeholder-gray-500',
              'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
              'disabled:opacity-50 disabled:cursor-not-allowed'
@@ -70,16 +77,21 @@ export function ChatInput({ onSend, onCancel, isLoading, disabled }: ChatInputPr
          onClick={isLoading ? onCancel : handleSubmit}
          disabled={!isLoading && (!input.trim() || disabled)}
          className={clsx(
-            'px-4 py-3 rounded-lg flex items-center justify-center transition-colors',
+            'px-3 py-2.5 md:px-4 md:py-3 rounded-lg flex items-center justify-center transition-colors',
+            'min-w-[44px] min-h-[44px]', // 最小触摸目标 44x44
            isLoading
-              ? 'bg-red-600 hover:bg-red-700 text-white'
-              : 'bg-primary-600 hover:bg-primary-700 text-white',
+              ? 'bg-red-600 hover:bg-red-700 active:bg-red-800 text-white'
+              : 'bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white',
            'disabled:opacity-50 disabled:cursor-not-allowed'
          )}
        >
          {isLoading ? <Square size={20} /> : <Send size={20} />}
        </button>
      </div>
+      {/* 移动端提示文字 */}
+      <p className="hidden md:block text-xs text-gray-500 text-center mt-2">
+        Press Enter to send, Shift+Enter for new line
+      </p>
    </div>
  );
 }
@@ -1,7 +1,7 @@
 /**
 * ConfigPanel Component
 *
- * 配置面板组件
+ * 配置面板：移动端全屏显示，桌面端居中弹窗
 */

 import { useState, useEffect } from 'react';
@@ -96,14 +96,17 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
  }

  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div className="bg-gray-800 rounded-lg w-full max-w-lg mx-4 max-h-[90vh] overflow-auto">
+    <div className="fixed inset-0 bg-black/50 flex items-end md:items-center justify-center z-50">
+      {/* 移动端：从底部滑出的全屏面板；桌面端：居中弹窗 */}
+      <div className="bg-gray-800 w-full md:w-full md:max-w-lg md:mx-4 max-h-full md:max-h-[90vh] overflow-auto rounded-t-2xl md:rounded-lg">
        {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-700">
-          <h2 className="text-lg font-semibold">Configuration</h2>
+        <div className="sticky top-0 flex items-center justify-between px-4 md:px-6 py-4 border-b border-gray-700 bg-gray-800 z-10">
+          {/* 移动端拖动指示器 */}
+          <div className="absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 bg-gray-600 rounded-full md:hidden" />
+          <h2 className="text-lg font-semibold mt-2 md:mt-0">Configuration</h2>
          <button
            onClick={onClose}
-            className="p-1 hover:bg-gray-700 rounded transition-colors"
+            className="p-2 hover:bg-gray-700 active:bg-gray-600 rounded-lg transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -112,7 +115,7 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
        </div>

        {/* Content */}
-        <div className="p-6 space-y-6">
+        <div className="p-4 md:p-6 space-y-6">
          {/* Error message */}
          {error && (
            <div className="p-3 bg-red-900/50 border border-red-700 rounded-lg text-red-300 text-sm">
@@ -135,7 +138,7 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
            <select
              value={formData.model}
              onChange={(e) => setFormData({ ...formData, model: e.target.value })}
-              className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-blue-500"
+              className="w-full px-3 py-3 md:py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-base md:text-sm focus:outline-none focus:border-blue-500"
            >
              {AVAILABLE_MODELS.map((model) => (
                <option key={model.id} value={model.id}>
@@ -151,7 +154,7 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
          {/* Max Tokens */}
          <div>
            <label className="block text-sm font-medium text-gray-300 mb-2">
-              Max Tokens: {formData.maxTokens}
+              Max Tokens: {formData.maxTokens.toLocaleString()}
            </label>
            <input
              type="range"
@@ -160,7 +163,7 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
              step="1024"
              value={formData.maxTokens}
              onChange={(e) => setFormData({ ...formData, maxTokens: parseInt(e.target.value) })}
-              className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
+              className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer touch-pan-x"
            />
            <div className="flex justify-between text-xs text-gray-500 mt-1">
              <span>1K</span>
@@ -185,12 +188,12 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
              step="0.05"
              value={formData.temperature}
              onChange={(e) => setFormData({ ...formData, temperature: parseFloat(e.target.value) })}
-              className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
+              className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer touch-pan-x"
            />
            <div className="flex justify-between text-xs text-gray-500 mt-1">
-              <span>Precise (0)</span>
-              <span>Balanced (0.5)</span>
-              <span>Creative (1)</span>
+              <span>Precise</span>
+              <span>Balanced</span>
+              <span>Creative</span>
            </div>
            <p className="mt-1 text-xs text-gray-500">
              Controls randomness in responses
@@ -206,7 +209,7 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
              type="text"
              value={formData.workdir}
              onChange={(e) => setFormData({ ...formData, workdir: e.target.value })}
-              className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-blue-500 font-mono text-sm"
+              className="w-full px-3 py-3 md:py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-base md:text-sm focus:outline-none focus:border-blue-500 font-mono"
              placeholder="/path/to/project"
            />
            <p className="mt-1 text-xs text-gray-500">
@@ -218,16 +221,16 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
          {config && (
            <div className="pt-4 border-t border-gray-700">
              <h3 className="text-sm font-medium text-gray-400 mb-3">Server Information</h3>
-              <div className="grid grid-cols-2 gap-4 text-sm">
-                <div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+                <div className="flex justify-between md:block">
                  <span className="text-gray-500">Allowed Paths:</span>
-                  <span className="ml-2 text-gray-300">
+                  <span className="md:ml-2 text-gray-300">
                    {config.allowedPaths.length || 'All'}
                  </span>
                </div>
-                <div>
+                <div className="flex justify-between md:block">
                  <span className="text-gray-500">Denied Paths:</span>
-                  <span className="ml-2 text-gray-300">
+                  <span className="md:ml-2 text-gray-300">
                    {config.deniedPaths.length || 'None'}
                  </span>
                </div>
@@ -236,24 +239,24 @@ export function ConfigPanel({ onClose }: ConfigPanelProps) {
          )}
        </div>

-        {/* Footer */}
-        <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-700 bg-gray-800/50">
+        {/* Footer - 移动端固定在底部 */}
+        <div className="sticky bottom-0 flex flex-col-reverse md:flex-row items-stretch md:items-center justify-end gap-2 md:gap-3 p-4 md:px-6 md:py-4 border-t border-gray-700 bg-gray-800 safe-area-pb">
          <button
            onClick={handleReset}
-            className="px-4 py-2 text-sm text-gray-300 hover:text-white transition-colors"
+            className="px-4 py-3 md:py-2 text-sm text-gray-300 hover:text-white active:bg-gray-700 rounded-lg transition-colors"
          >
            Reset
          </button>
          <button
            onClick={onClose}
-            className="px-4 py-2 text-sm bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors"
+            className="px-4 py-3 md:py-2 text-sm bg-gray-700 hover:bg-gray-600 active:bg-gray-500 rounded-lg transition-colors"
          >
            Cancel
          </button>
          <button
            onClick={handleSave}
            disabled={saving}
-            className="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            className="px-4 py-3 md:py-2 text-sm bg-blue-600 hover:bg-blue-500 active:bg-blue-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
          >
            {saving ? 'Saving...' : 'Save Changes'}
          </button>
@@ -1,9 +1,11 @@
 /**
 * Sidebar Component
+ *
+ * 响应式侧边栏：桌面端固定显示，移动端抽屉式菜单
 */

 import { useState, useEffect } from 'react';
-import { Plus, MessageSquare, Trash2, RefreshCw } from 'lucide-react';
+import { Plus, MessageSquare, Trash2, RefreshCw, Menu, X } from 'lucide-react';
 import clsx from 'clsx';
 import { listSessions, createSession, deleteSession, type Session } from '../api/client';

@@ -16,6 +18,7 @@ interface SidebarProps {
 export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }: SidebarProps) {
  const [sessions, setSessions] = useState<Session[]>([]);
  const [isLoading, setIsLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);

  const loadSessions = async () => {
    setIsLoading(true);
@@ -34,6 +37,7 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
      const { data } = await createSession();
      setSessions((prev) => [data, ...prev]);
      onCreateSession(data);
+      setIsOpen(false); // 创建后关闭侧边栏
    } catch (error) {
      console.error('Failed to create session:', error);
    }
@@ -55,70 +59,120 @@ export function Sidebar({ currentSessionId, onSelectSession, onCreateSession }:
    }
  };

+  const handleSelectSession = (id: string) => {
+    onSelectSession(id);
+    setIsOpen(false); // 选择后关闭侧边栏
+  };
+
  useEffect(() => {
    loadSessions();
  }, []);

+  // 点击遮罩层关闭
+  const handleOverlayClick = () => {
+    setIsOpen(false);
+  };
+
  return (
-    <div className="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
-      {/* Header */}
-      <div className="p-4 border-b border-gray-700">
-        <button
-          onClick={handleCreate}
-          className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors"
-        >
-          <Plus size={18} />
-          <span>New Chat</span>
-        </button>
-      </div>
+    <>
+      {/* 移动端菜单按钮 */}
+      <button
+        onClick={() => setIsOpen(true)}
+        className="fixed top-3 left-3 z-40 p-2 rounded-lg bg-gray-800 text-gray-300 hover:bg-gray-700 transition-colors md:hidden"
+        aria-label="Open menu"
+      >
+        <Menu size={20} />
+      </button>

-      {/* Session List */}
-      <div className="flex-1 overflow-y-auto">
-        {isLoading ? (
-          <div className="p-4 text-center text-gray-500">
-            <RefreshCw className="animate-spin inline-block" size={20} />
-          </div>
-        ) : sessions.length === 0 ? (
-          <div className="p-4 text-center text-gray-500">
-            No conversations yet
-          </div>
-        ) : (
-          <div className="p-2 space-y-1">
-            {sessions.map((session) => (
-              <div
-                key={session.id}
-                onClick={() => onSelectSession(session.id)}
-                className={clsx(
-                  'flex items-center gap-2 p-3 rounded-lg cursor-pointer group',
-                  'hover:bg-gray-700 transition-colors',
-                  currentSessionId === session.id && 'bg-gray-700'
-                )}
-              >
-                <MessageSquare size={18} className="text-gray-400 flex-shrink-0" />
-                <div className="flex-1 min-w-0">
-                  <div className="text-sm truncate">
-                    {session.name || `Chat ${session.id.slice(0, 8)}`}
-                  </div>
-                  <div className="text-xs text-gray-500">
-                    {session.messageCount} messages
-                  </div>
-                </div>
-                <button
-                  onClick={(e) => handleDelete(session.id, e)}
-                  className="opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-600 rounded transition-all"
-                >
-                  <Trash2 size={14} className="text-gray-400" />
-                </button>
-              </div>
-            ))}
-          </div>
+      {/* 遮罩层 - 仅移动端 */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 md:hidden"
+          onClick={handleOverlayClick}
+        />
+      )}
+
+      {/* 侧边栏 */}
+      <div
+        className={clsx(
+          'fixed md:static inset-y-0 left-0 z-50',
+          'w-64 bg-gray-800 border-r border-gray-700 flex flex-col',
+          'transform transition-transform duration-300 ease-in-out',
+          'md:transform-none',
+          isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
        )}
-      </div>
+      >
+        {/* Header */}
+        <div className="p-4 border-b border-gray-700">
+          <div className="flex items-center justify-between mb-3 md:hidden">
+            <span className="text-lg font-semibold">Sessions</span>
+            <button
+              onClick={() => setIsOpen(false)}
+              className="p-1 hover:bg-gray-700 rounded transition-colors"
+              aria-label="Close menu"
+            >
+              <X size={20} />
+            </button>
+          </div>
+          <button
+            onClick={handleCreate}
+            className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors"
+          >
+            <Plus size={18} />
+            <span>New Chat</span>
+          </button>
+        </div>

-      {/* Footer */}
-      <div className="p-4 border-t border-gray-700 text-center text-xs text-gray-500">
-        AI Assistant v1.0
+        {/* Session List */}
+        <div className="flex-1 overflow-y-auto">
+          {isLoading ? (
+            <div className="p-4 text-center text-gray-500">
+              <RefreshCw className="animate-spin inline-block" size={20} />
+            </div>
+          ) : sessions.length === 0 ? (
+            <div className="p-4 text-center text-gray-500">
+              No conversations yet
+            </div>
+          ) : (
+            <div className="p-2 space-y-1">
+              {sessions.map((session) => (
+                <div
+                  key={session.id}
+                  onClick={() => handleSelectSession(session.id)}
+                  className={clsx(
+                    'flex items-center gap-2 p-3 rounded-lg cursor-pointer group',
+                    'hover:bg-gray-700 transition-colors',
+                    'active:bg-gray-600', // 触摸反馈
+                    currentSessionId === session.id && 'bg-gray-700'
+                  )}
+                >
+                  <MessageSquare size={18} className="text-gray-400 flex-shrink-0" />
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm truncate">
+                      {session.name || `Chat ${session.id.slice(0, 8)}`}
+                    </div>
+                    <div className="text-xs text-gray-500">
+                      {session.messageCount} messages
+                    </div>
+                  </div>
+                  <button
+                    onClick={(e) => handleDelete(session.id, e)}
+                    className="opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-600 rounded transition-all md:opacity-0"
+                    aria-label="Delete session"
+                  >
+                    <Trash2 size={14} className="text-gray-400" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-gray-700 text-center text-xs text-gray-500">
+          AI Assistant v1.0
+        </div>
      </div>
-    </div>
+    </>
  );
 }
@@ -2,6 +2,27 @@
@tailwind components;
@tailwind utilities;

+/* iOS Safe Area Support */
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  .safe-area-pb {
+    padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
+  }
+}
+
+/* Prevent pull-to-refresh on mobile */
+html {
+  overscroll-behavior: none;
+}
+
+/* Touch action optimization */
+.touch-pan-x {
+  touch-action: pan-x;
+}
+
+.touch-pan-y {
+  touch-action: pan-y;
+}
+
 /* Custom scrollbar */
 ::-webkit-scrollbar {
  width: 8px;
@@ -1,9 +1,54 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
 import path from 'path';

 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['icon.svg'],
+      manifest: {
+        name: 'AI Terminal Assistant',
+        short_name: 'AI Assistant',
+        description: 'Your intelligent coding companion',
+        theme_color: '#111827',
+        background_color: '#111827',
+        display: 'standalone',
+        orientation: 'portrait-primary',
+        scope: '/',
+        start_url: '/',
+        icons: [
+          {
+            src: '/icon.svg',
+            sizes: 'any',
+            type: 'image/svg+xml',
+            purpose: 'any maskable',
+          },
+        ],
+      },
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
+        runtimeCaching: [
+          {
+            urlPattern: /\/api\//i,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'api-cache',
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60, // 1 hour
+              },
+            },
+          },
+        ],
+      },
+      devOptions: {
+        enabled: false, // 开发模式下禁用 PWA
+      },
+    }),
+  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
@@ -15,6 +60,7 @@ export default defineConfig({
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
+        ws: true,
      },
      '/health': {
        target: 'http://localhost:3000',